Create new modules for chart drawing

... based on selected drop-dowwn options

public/js/appChart.js

@@ -50,12 +50,13 @@ import {
   getAbbreviationsForSelectedOptionsFromAllDropDownLists,
 } from "./src_modules/dropDownListHelpers.mjs";
 
-import {
-  drawHeatmapBasedOnSelectedOptions,
-  drawScatterPlotFromChartSelection,
-  drawLineChartBasedOnSelectedAggregationOptions,
-  drawColumnChartBasedOnSelectedAggregationOptions,
-} from "./src_modules/dropDownListProcessing.mjs";
+import { drawColumnChartBasedOnSelectedAggregationOptions } from "./src_modules/dropDownListChartColumn.mjs";
+
+import { drawHeatmapBasedOnSelectedOptions } from "./src_modules/dropDownListChartHeatmap.mjs";
+
+import { drawLineChartBasedOnSelectedAggregationOptions } from "./src_modules/dropDownListChartLine.mjs";
+
+import { drawScatterPlotFromChartSelection } from "./src_modules/dropDownListChartScatterPlot.mjs";
 
 /**
  * Use the `vanillaDropDown` library to style the buildings & data points drop down list

public/js/src_modules/dropDownListChartColumn.mjs

+import { drawColumnChartHighcharts } from "./chartColumn.mjs";
+
+import {
+  calculateAndFormatDailySumObservations,
+  calculateAndFormatMonthlySumObservations,
+  calculateAndFormatDailyMaximumObservations,
+  calculateAndFormatMonthlyMaximumObservations,
+  calculateAndFormatDailyMinimumObservations,
+  calculateAndFormatMonthlyMinimumObservations,
+  calculateAndFormatDailyAverageObservations,
+  calculateAndFormatMonthlyAverageObservations,
+} from "./dropDownListProcessing.mjs";
+
+/**
+ * Draw a column chart based on the selected aggregation options from a drop-down list
+ *
+ * @param {String} selectedAggregationType A string representing the selected aggregation type. The currently supported strings include `Sum`, `Maximum`, `Minimum` and `Average`
+ * @param {String} selectedAggregationDuration A string representing the selected aggregation duration. The currently supported strings include `Daily` and `Monthly`
+ * @param {Array} observationsAggregationNestedArr An array made up of sub-array(s) of aggregated observations
+ * @param {String} selectedSamplingRateAbbrev A string representing the abbreviated form of the selected sampling rate option
+ * @param {Array} uniqueCalendarDatesNestedArr An array made up of sub-array(s) of unique calendar date(s) string(s)
+ * @param {Array} formattedMetadataNestedArr An array of sub-arrays of formatted metadata properties
+ * @returns {undefined} undefined
+ */
+export const drawColumnChartBasedOnSelectedAggregationOptions = function (
+  selectedAggregationTypeArr,
+  selectedAggregationDuration,
+  observationsAggregationNestedArr,
+  selectedSamplingRateAbbrev,
+  uniqueCalendarDatesNestedArr,
+  formattedMetadataNestedArr
+) {
+  if (
+    selectedAggregationTypeArr === "Sum" &&
+    selectedAggregationDuration === "Daily"
+  ) {
+    // Formatted observations and metadata for chart - daily / sum
+    const [
+      formattedObservationsSumDailyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatDailySumObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawColumnChartHighcharts(
+      formattedObservationsSumDailyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  } else if (
+    selectedAggregationTypeArr === "Sum" &&
+    selectedAggregationDuration === "Monthly"
+  ) {
+    // Formatted observations and metadata for chart - monthly / sum
+    const [
+      formattedObservationsSumMonthlyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatMonthlySumObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawColumnChartHighcharts(
+      formattedObservationsSumMonthlyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  } else if (
+    selectedAggregationTypeArr === "Maximum" &&
+    selectedAggregationDuration === "Daily"
+  ) {
+    // Formatted observations and metadata for chart - daily / maximum
+    const [
+      formattedObservationsMaximumDailyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatDailyMaximumObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawColumnChartHighcharts(
+      formattedObservationsMaximumDailyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  } else if (
+    selectedAggregationTypeArr === "Maximum" &&
+    selectedAggregationDuration === "Monthly"
+  ) {
+    // Formatted observations and metadata for chart - monthly / maximum
+    const [
+      formattedObservationsMaximumMonthlyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatMonthlyMaximumObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawColumnChartHighcharts(
+      formattedObservationsMaximumMonthlyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  } else if (
+    selectedAggregationTypeArr === "Minimum" &&
+    selectedAggregationDuration === "Daily"
+  ) {
+    // Formatted observations and metadata for chart - daily / minimum
+    const [
+      formattedObservationsMinimumDailyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatDailyMinimumObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawColumnChartHighcharts(
+      formattedObservationsMinimumDailyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  } else if (
+    selectedAggregationTypeArr === "Minimum" &&
+    selectedAggregationDuration === "Monthly"
+  ) {
+    // Formatted observations and metadata for chart - monthly / minimum
+    const [
+      formattedObservationsMinimumMonthlyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatMonthlyMinimumObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawColumnChartHighcharts(
+      formattedObservationsMinimumMonthlyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  } else if (
+    selectedAggregationTypeArr === "Average" &&
+    selectedAggregationDuration === "Daily"
+  ) {
+    // Formatted observations and metadata for chart - daily / average
+    const [
+      formattedObservationsAverageDailyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatDailyAverageObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawColumnChartHighcharts(
+      formattedObservationsAverageDailyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  } else if (
+    selectedAggregationTypeArr === "Average" &&
+    selectedAggregationDuration === "Monthly"
+  ) {
+    // Formatted observations and metadata for chart - monthly / average
+    const [
+      formattedObservationsAverageMonthlyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatMonthlyAverageObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawColumnChartHighcharts(
+      formattedObservationsAverageMonthlyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  }
+};

public/js/src_modules/dropDownListChartHeatmap.mjs

+import {
+  formatSensorThingsApiResponseForHeatMap,
+  drawHeatMapHighcharts,
+} from "./chartHeatmap.mjs";
+
+/**
+ * Draw a heatmap based on the selected options from a drop-down list
+ *
+ * @param {Array} observationsComboNestedArr An array that contains non-computed (raw) observations and computed (temperature difference, dT) observations
+ * @param {Object} extractedFormattedDatastreamProperties An object that contains array(s) of formatted Datastream properties
+ * @returns {undefined} undefined
+ */
+export const drawHeatmapBasedOnSelectedOptions = function (
+  observationsComboNestedArr,
+  extractedFormattedDatastreamProperties
+) {
+  // Create formatted array of observations
+  const formattedObservationsHeatMapNestedArr = observationsComboNestedArr.map(
+    (observationsArr) =>
+      formatSensorThingsApiResponseForHeatMap(observationsArr)
+  );
+
+  // Note: The resulting array is nested and is not suitable for heatmap,
+  // extract the nested array
+  const [formattedObservationsHeatMapArr] =
+    formattedObservationsHeatMapNestedArr;
+
+  drawHeatMapHighcharts(
+    formattedObservationsHeatMapArr,
+    extractedFormattedDatastreamProperties
+  );
+};

public/js/src_modules/dropDownListChartLine.mjs

+import { drawLineChartHighcharts } from "./chartLine.mjs";
+
+import {
+  calculateAndFormatDailySumObservations,
+  calculateAndFormatMonthlySumObservations,
+  calculateAndFormatDailyMaximumObservations,
+  calculateAndFormatMonthlyMaximumObservations,
+  calculateAndFormatDailyMinimumObservations,
+  calculateAndFormatMonthlyMinimumObservations,
+  calculateAndFormatDailyAverageObservations,
+  calculateAndFormatMonthlyAverageObservations,
+} from "./dropDownListProcessing.mjs";
+
+/**
+ * Draw a line chart based on the selected aggregation options from a drop-down list
+ *
+ * @param {String} selectedAggregationType A string representing the selected aggregation type. The currently supported strings include `Sum`, `Maximum`, `Minimum` and `Average`
+ * @param {String} selectedAggregationDuration A string representing the selected aggregation duration. The currently supported strings include `Daily` and `Monthly`
+ * @param {Array} observationsAggregationNestedArr An array made up of sub-array(s) of aggregated observations
+ * @param {String} selectedSamplingRateAbbrev A string representing the abbreviated form of the selected sampling rate option
+ * @param {Array} uniqueCalendarDatesNestedArr An array made up of sub-array(s) of unique calendar date(s) string(s)
+ * @param {Array} formattedMetadataNestedArr An array of sub-arrays of formatted metadata properties
+ * @returns {undefined} undefined
+ */
+export const drawLineChartBasedOnSelectedAggregationOptions = function (
+  selectedAggregationType,
+  selectedAggregationDuration,
+  observationsAggregationNestedArr,
+  selectedSamplingRateAbbrev,
+  uniqueCalendarDatesNestedArr,
+  formattedMetadataNestedArr
+) {
+  if (
+    selectedAggregationType === "Sum" &&
+    selectedAggregationDuration === "Daily"
+  ) {
+    // Formatted observations and metadata for chart - daily / sum
+    const [
+      formattedObservationsSumDailyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatDailySumObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawLineChartHighcharts(
+      formattedObservationsSumDailyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  } else if (
+    selectedAggregationType === "Sum" &&
+    selectedAggregationDuration === "Monthly"
+  ) {
+    // Formatted observations and metadata for chart - monthly / sum
+    const [
+      formattedObservationsSumMonthlyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatMonthlySumObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawLineChartHighcharts(
+      formattedObservationsSumMonthlyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  } else if (
+    selectedAggregationType === "Maximum" &&
+    selectedAggregationDuration === "Daily"
+  ) {
+    // Formatted observations and metadata for chart - daily / maximum
+    const [
+      formattedObservationsMaximumDailyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatDailyMaximumObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawLineChartHighcharts(
+      formattedObservationsMaximumDailyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  } else if (
+    selectedAggregationType === "Maximum" &&
+    selectedAggregationDuration === "Monthly"
+  ) {
+    // Formatted observations and metadata for chart - monthly / maximum
+    const [
+      formattedObservationsMaximumMonthlyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatMonthlyMaximumObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawLineChartHighcharts(
+      formattedObservationsMaximumMonthlyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  } else if (
+    selectedAggregationType === "Minimum" &&
+    selectedAggregationDuration === "Daily"
+  ) {
+    // Formatted observations and metadata for chart - daily / minimum
+    const [
+      formattedObservationsMinimumDailyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatDailyMinimumObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawLineChartHighcharts(
+      formattedObservationsMinimumDailyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  } else if (
+    selectedAggregationType === "Minimum" &&
+    selectedAggregationDuration === "Monthly"
+  ) {
+    // Formatted observations and metadata for chart - monthly / minimum
+    const [
+      formattedObservationsMinimumMonthlyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatMonthlyMinimumObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawLineChartHighcharts(
+      formattedObservationsMinimumMonthlyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  } else if (
+    selectedAggregationType === "Average" &&
+    selectedAggregationDuration === "Daily"
+  ) {
+    // Formatted observations and metadata for chart - daily / average
+    const [
+      formattedObservationsAverageDailyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatDailyAverageObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawLineChartHighcharts(
+      formattedObservationsAverageDailyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  } else if (
+    selectedAggregationType === "Average" &&
+    selectedAggregationDuration === "Monthly"
+  ) {
+    // Formatted observations and metadata for chart - monthly / average
+    const [
+      formattedObservationsAverageMonthlyNestedArr,
+      extractedFormattedDatastreamProperties,
+    ] = calculateAndFormatMonthlyAverageObservations(
+      uniqueCalendarDatesNestedArr,
+      observationsAggregationNestedArr,
+      selectedSamplingRateAbbrev,
+      formattedMetadataNestedArr
+    );
+
+    drawLineChartHighcharts(
+      formattedObservationsAverageMonthlyNestedArr,
+      extractedFormattedDatastreamProperties
+    );
+  }
+};

public/js/src_modules/dropDownListChartScatterPlot.mjs

+import {
+  formatSensorThingsApiResponseForScatterPlot,
+  drawScatterPlotHighcharts,
+} from "./chartScatterPlot.mjs";
+
+/**
+ * Draw a scatter plot based on the selected options from a drop-down list
+ *
+ * @param {Array} observationsComboNestedArr An array that contains non-computed (raw) observations and computed (temperature difference, dT) observations
+ * @param {Object} extractedFormattedDatastreamProperties An object that contains array(s) of formatted Datastream properties
+ * @returns {undefined} undefined
+ */
+export const drawScatterPlotFromChartSelection = function (
+  observationsComboNestedArr,
+  extractedFormattedDatastreamProperties
+) {
+  // Extract values for x-axis and y-axis
+  // x-axis values are first element of nested observations array
+  const [obsXAxisArr] = observationsComboNestedArr.slice(0, 1);
+  // y-axis values are rest of elements of nested observations array
+  const obsYAxisNestedArr = observationsComboNestedArr.slice(1);
+
+  // Create formatted array(s) of observations
+  const formattedObservationsScatterPlotArr = obsYAxisNestedArr.map(
+    (obsYAxisArr) =>
+      formatSensorThingsApiResponseForScatterPlot(obsXAxisArr, obsYAxisArr)
+  );
+
+  drawScatterPlotHighcharts(
+    formattedObservationsScatterPlotArr,
+    extractedFormattedDatastreamProperties
+  );
+};