Update logic for drop-down list

Refactor the logic for the drop-down lists into new module files

public/js/src_modules/aggregateHelpers.mjs

@@ -354,10 +354,42 @@ const extractUniqueCalendarMonthsFromCalendarDates = function (
   return [...uniqueCalendarMonths];
 };
 
+/**
+ * Format a computed aggregation result to make it suitable for a chart. Currently, only line and column charts are supported
+ * @param {Array} calendarDatesMonthsStrArr An array of unique calendar dates strings (in "YYYY-MM-DD" fromat) or unique calendar months strings (in "YYYY-MM" format)
+ * @param {Array} aggregatedValuesArr An array of aggregated values
+ * @returns {Array} An array of formatted aggregation values suitable for use in a column chart
+ */
+const formatAggregationResultForChart = function (
+  calendarDatesMonthsStrArr,
+  aggregatedValuesArr
+) {
+  if (!calendarDatesMonthsStrArr || !aggregatedValuesArr) return;
+
+  // Create an array of Unix timestamp strings
+  const timestampsArr = calendarDatesMonthsStrArr.map((calendarStr) =>
+    new Date(calendarStr).getTime()
+  );
+
+  // Combine timestamp and value pairs
+  // The timestamps array and values array have same lengths, use one for looping
+  if (timestampsArr.length !== aggregatedValuesArr.length) {
+    throw new Error(
+      "The timestamps array and aggregated values array have different lengths"
+    );
+  } else {
+    return timestampsArr.map((timestamp, i) => [
+      timestamp,
+      aggregatedValuesArr[i],
+    ]);
+  }
+};
+
 export {
   extractObservationsWithinDatesInterval,
   extractObservationValuesWithinDatesInterval,
   extractObservationValuesWithinMonthInterval,
   extractUniqueCalendarDatesFromTimestamp,
   extractUniqueCalendarMonthsFromCalendarDates,
+  formatAggregationResultForChart,
 };

public/js/src_modules/chartColumn.mjs

@@ -9,31 +9,6 @@ import {
   createTooltipDateString,
 } from "./chartHelpers.mjs";
 
-/**
- * Format a computed aggregation result to make it suitable for a column chart
- * @param {Array} calendarDatesMonthsStrArr An array of unique calendar dates strings (in "YYYY-MM-DD" fromat) or unique calendar months strings (in "YYYY-MM" format)
- * @param {Array} aggregatedValuesArr An array of aggregated values
- * @returns {Array} An array of formatted aggregation values suitable for use in a column chart
- */
-const formatAggregationResultForColumnChart = function (
-  calendarDatesMonthsStrArr,
-  aggregatedValuesArr
-) {
-  if (!calendarDatesMonthsStrArr || !aggregatedValuesArr) return;
-
-  // Create an array of Unix timestamp strings
-  const timestampsArr = calendarDatesMonthsStrArr.map((calendarStr) =>
-    new Date(calendarStr).getTime()
-  );
-
-  // Combine timestamp and value pairs
-  // The timestamps array and values array have same lengths, use one for looping
-  return timestampsArr.map((timestamp, i) => [
-    timestamp,
-    aggregatedValuesArr[i],
-  ]);
-};
-
 /**
  * Creates an options object for each series drawn in a column chart
  * @param {Array} formattedAggregatedResultForColumnChart An array of formatted aggregated result array(s) from one or more datastreams
@@ -96,12 +71,12 @@ const createYAxisTitleTextColumnChart = function (
 
 /**
  * Draw a column chart using Highcharts library
- * @param {Array} formattedAggResultArraysForColumnChart An array made up of formatted aggregated result array(s) suitable for use in a column chart
+ * @param {Array} formattedObsArraysForColumnChart An array made up of formatted observation array(s) suitable for use in a column chart. The observations may either be raw or aggregated
  * @param {Object} extractedFormattedDatastreamProperties An object that contains arrays of formatted Datastream properties
  * @returns {undefined} undefined
  */
 const drawColumnChartHighcharts = function (
-  formattedAggResultArraysForColumnChart,
+  formattedObsArraysForColumnChart,
   extractedFormattedDatastreamProperties
 ) {
   // Formatted datastream properties
@@ -136,7 +111,7 @@ const drawColumnChartHighcharts = function (
 
   // Create the array of series options object(s)
   const seriesOptionsArr = createSeriesOptionsForColumnChart(
-    formattedAggResultArraysForColumnChart,
+    formattedObsArraysForColumnChart,
     buildingIdsPhenomenonNamesArr
   );
 
@@ -213,4 +188,4 @@ const drawColumnChartHighcharts = function (
   });
 };
 
-export { formatAggregationResultForColumnChart, drawColumnChartHighcharts };
+export { drawColumnChartHighcharts };

public/js/src_modules/chartHeatmap.mjs

@@ -57,7 +57,7 @@ const calculateMinMaxValuesForHeatmapColorAxis = function (
 
 /**
  * Draw a heatmap using Highcharts library
- * @param {Array} formattedObsArrayForHeatmap Response from SensorThings API formatted for use in a heatmap
+ * @param {Array} formattedObsArrayForHeatmap Response from SensorThings API formatted for use in a heatmap. Currently, only raw observations are supported, i.e. no aggregation
  * @param {Object} extractedFormattedDatastreamProperties An object that contains arrays of formatted Datastream properties
  * @returns {undefined} undefined
  */

public/js/src_modules/chartHelpers.mjs

@@ -177,6 +177,21 @@ const checkForAndDeleteUniqueObservationsFromLargerArray = function (
   }
 };
 
+/**
+ * Format the response from SensorThings API to make it suitable for use in a line chart or column chart
+ * @param {Array} obsArray Array of observations (timestamp + value) that is response from SensorThings API
+ * @returns {Array} Array of formatted observations suitable for use in a line chart
+ */
+const formatSensorThingsApiResponseForLineOrColumnChart = function (obsArray) {
+  if (!obsArray) return;
+
+  return obsArray.map((result) => {
+    const timestampObs = new Date(result[0].slice(0, -1)).getTime(); // slice() removes trailing "Z" character in timestamp
+    const valueObs = result[1];
+    return [timestampObs, valueObs];
+  });
+};
+
 /**
  * Convert a hexadecimal color code obtained from the Highcharts object (`Highcharts.getOptions().colors`) to its equivalent RGB color code
  * @param {String} hexCode Input hex color code
@@ -406,6 +421,7 @@ const removeTransparencyFromColor = function (rgbaColor) {
 export {
   chartExportOptions,
   checkForAndDeleteUniqueObservationsFromLargerArray,
+  formatSensorThingsApiResponseForLineOrColumnChart,
   createCombinedTextDelimitedByAmpersand,
   createCombinedTextDelimitedByComma,
   extractSamplingRateFromDatastreamName,

public/js/src_modules/chartLine.mjs

@@ -7,30 +7,6 @@ import {
   createTooltipDateString,
 } from "./chartHelpers.mjs";
 
-/**
- * Format the response from SensorThings API to make it suitable for use in a line chart or column chart
- * @param {Array} obsArray Array of observations (timestamp + value) that is response from SensorThings API
- * @returns {Array} Array of formatted observations suitable for use in a line chart
- */
-const formatSensorThingsApiResponseForLineOrColumnChart = function (obsArray) {
-  if (!obsArray) return;
-
-  return obsArray.map((result) => {
-    const timestampObs = new Date(result[0].slice(0, -1)).getTime(); // slice() removes trailing "Z" character in timestamp
-    const valueObs = result[1];
-    return [timestampObs, valueObs];
-  });
-};
-
-/**
- * Concatenates metadata properties to create a string for either the title or subtitle of a line chart
- * @param {Array} phenomenonNamesArr An array of phenomenon name strings
- * @returns {String} A string made up of combined phenomenon names
- */
-const createCombinedTextForLineChartTitles = function (phenomenonNamesArr) {
-  return phenomenonNamesArr.join(", ");
-};
-
 /**
  * Creates an options object for each series drawn in the line chart
  * @param {Array} formattedObsArraysForLineChart An array of formatted observation array(s) from one or more datastreams
@@ -42,10 +18,10 @@ const createSeriesOptionsForLineChart = function (
   buildingIdsPhenomenonNamesArr
 ) {
   // An array of colors, in hexadecimal format, provided by the global Highcharts object
-  const seriesColors = Highcharts.getOptions().colors;
+  const seriesColorsArr = Highcharts.getOptions().colors;
 
-  // Create a copy of the colors array
-  const seriesColorsArr = [...seriesColors];
+  // Create a local copy of the colors array
+  const seriesColorsForLineChartArr = [...seriesColorsArr];
 
   // Create an array of seriesOptions objects
   // Assumes that the observation array of arrays and building IDs + phenomenon names array are of equal length
@@ -62,7 +38,7 @@ const createSeriesOptionsForLineChart = function (
       return {
         name: `${buildingIdsPhenomenonNamesArr[i]}`,
         data: formattedObsArray,
-        color: seriesColorsArr[i],
+        color: seriesColorsForLineChartArr[i],
         turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release
       };
     });
@@ -71,7 +47,7 @@ const createSeriesOptionsForLineChart = function (
 
 /**
  * Draw a line chart using Highcharts library
- * @param {Array} formattedObsArraysForLineChart An array made up of formatted observation array(s) suitable for use in a line chart
+ * @param {Array} formattedObsArraysForLineChart An array made up of formatted observation array(s) suitable for use in a line chart. The observations may either be raw or aggregated
  * @param {Object} extractedFormattedDatastreamPropertiesArr An object that contains arrays of formatted Datastream properties
  * @returns {undefined} undefined
  */
@@ -171,7 +147,4 @@ const drawLineChartHighcharts = function (
   });
 };
 
-export {
-  formatSensorThingsApiResponseForLineOrColumnChart,
-  drawLineChartHighcharts,
-};
+export { drawLineChartHighcharts };