Merge branch 'wip_chart-titles-yaxis' into 'master'

Edit creation of y-axis chart titles

Abbreviate the 'temperature' phenomenon names before rendering on 
chart y-axis

See merge request !20

public/js/appChart.js

@@ -179,32 +179,24 @@ const drawChartUsingSelectedOptions = async function () {
         selectedBuildingsDataPointsSamplingRateAbbrevNestedArr
       );
 
-    // Create copies of the arrays of building(s) + data point(s) + sampling rate
-    const selectedBuildingsDataPointsSamplingRateAbbrevRawObsCopyArr = [
-      ...selectedBuildingsDataPointsSamplingRateAbbrevNestedArr,
-    ];
-
-    const selectedBuildingsDataPointsSamplingRateAbbrevTempDiffCopyArr = [
-      ...selectedBuildingsDataPointsSamplingRateAbbrevNestedArr,
-    ];
-
-    // Check if we have raw observations
+    // Check whether we have dT (temperature difference), if so, delete these options,
+    // then compute abbreviations for raw observations
     const selectedBuildingsDataPointsSamplingRateAbbrevRawObsArr =
       checkIfSelectedOptionsContainTemperatureDifference(
-        selectedBuildingsDataPointsSamplingRateAbbrevRawObsCopyArr
+        selectedBuildingsDataPointsSamplingRateAbbrevNestedArr
       )
         ? deleteTemperatureDifferenceOptions(
-            selectedBuildingsDataPointsSamplingRateAbbrevRawObsCopyArr
+            selectedBuildingsDataPointsSamplingRateAbbrevNestedArr
           )
-        : selectedBuildingsDataPointsSamplingRateAbbrevRawObsCopyArr;
+        : selectedBuildingsDataPointsSamplingRateAbbrevNestedArr;
 
     // Check if we have dT (temperature difference)
     const selectedBuildingsDataPointsSamplingRateAbbrevTempDiffArr =
       checkIfSelectedOptionsContainTemperatureDifference(
-        selectedBuildingsDataPointsSamplingRateAbbrevTempDiffCopyArr
+        selectedBuildingsDataPointsSamplingRateAbbrevNestedArr
       )
         ? extractTemperatureDifferenceOptions(
-            selectedBuildingsDataPointsSamplingRateAbbrevTempDiffCopyArr
+            selectedBuildingsDataPointsSamplingRateAbbrevNestedArr
           )
         : [];
 

public/js/src_modules/chartColumn.mjs

@@ -3,7 +3,9 @@
 import {
   chartExportOptions,
   createFullTitleForLineOrColumnChart,
+  createCombinedTextDelimitedByComma,
   createSubtitleForChart,
+  abbreviateTemperaturePhenomenonNames,
   createTooltipDateString,
 } from "./chartHelpers.mjs";
 
@@ -65,6 +67,33 @@ const createSeriesOptionsForColumnChart = function (
   }
 };
 
+/**
+ * Create string for the y-axis title of a column chart
+ *
+ * @param {Array} phenomenonNamesArr Array of phenomenon name strings
+ * @param {Array} unitOfMeasurementSymbolsArr Array of unit of measurement symbol strings
+ * @returns {String} Y-axis title string for column chart
+ */
+const createYAxisTitleTextColumnChart = function (
+  phenomenonNamesArr,
+  unitOfMeasurementSymbolsArr
+) {
+  // The phenomenon names and unit of measurement arrays should have equal lengths
+  // Use one of the arrays for looping
+  if (phenomenonNamesArr.length !== unitOfMeasurementSymbolsArr.length) {
+    throw new Error(
+      "The phenomenon names array and unit of measurement symbols array have different lengths"
+    );
+  } else {
+    const combinedNameSymbolArr = phenomenonNamesArr.map(
+      (phenomenonName, i) =>
+        `${phenomenonName} [${unitOfMeasurementSymbolsArr[i]}]`
+    );
+
+    return createCombinedTextDelimitedByComma(combinedNameSymbolArr);
+  }
+};
+
 /**
  * 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
@@ -111,12 +140,6 @@ const drawColumnChartHighcharts = function (
     buildingIdsPhenomenonNamesArr
   );
 
-  // Assume that we will be comparing similar phenomena, so we can use the first phenomenon name
-  const phenomenonName = phenomenonNamesArr[0];
-
-  // Assume that we will be comparing similar phenomena, so we can use the first phenomenon symbol
-  const unitOfMeasurementSymbol = unitOfMeasurementSymbolsArr[0];
-
   const textChartTitle = createFullTitleForLineOrColumnChart(
     phenomenonNamesArr,
     aggregationInterval,
@@ -125,6 +148,11 @@ const drawColumnChartHighcharts = function (
 
   const textChartSubtitle = createSubtitleForChart(datastreamNamesArr);
 
+  const textYAxisTitle = createYAxisTitleTextColumnChart(
+    abbreviateTemperaturePhenomenonNames(phenomenonNamesArr),
+    unitOfMeasurementSymbolsArr
+  );
+
   Highcharts.chart("chart-column", {
     chart: {
       type: "column",
@@ -148,7 +176,7 @@ const drawColumnChartHighcharts = function (
 
     yAxis: {
       title: {
-        text: `${phenomenonName} [${unitOfMeasurementSymbol}]`,
+        text: textYAxisTitle,
       },
     },
 

public/js/src_modules/chartHelpers.mjs

@@ -352,6 +352,31 @@ const createSubtitleForHeatmap = function (datastreamNamesArr) {
   )}`;
 };
 
+/**
+ * Abbreviate temperature phenomenon names for use in chart y-axis title strings where space is limited
+ *
+ * @param {Array} phenomenonNamesArr An array of phenomenon name strings
+ * @returns {Array} An array that contains abbreviated temperature phenomenon strings
+ */
+const abbreviateTemperaturePhenomenonNames = function (phenomenonNamesArr) {
+  // We're interested in phenomenon names that contain the substrings
+  // `temperature` or `Temperature`
+  return phenomenonNamesArr.map((phenomenonName) => {
+    // Case 1: Temperature phenomenon name string variant 1
+    if (phenomenonName.includes("temperature")) {
+      return phenomenonName.replace("temperature", "temp.");
+    }
+    // Case 2: Temperature phenomenon name string variant 2
+    else if (phenomenonName.includes("Temperature")) {
+      return phenomenonName.replace("Temperature", "Temp.");
+    }
+    // Case 3: The other phenomenon name strings
+    else {
+      return phenomenonName;
+    }
+  });
+};
+
 /**
  * Creates a date string that is used in a shared tooltip for a line or column chart
  * @param {Number} pointXAxisValue The x-axis value (Unix timestamp) which is common for a set of data points
@@ -389,6 +414,7 @@ export {
   createTitleForHeatmap,
   createSubtitleForChart,
   createSubtitleForHeatmap,
+  abbreviateTemperaturePhenomenonNames,
   createTooltipDateString,
   convertHexColorToRGBColor,
   removeTransparencyFromColor,

public/js/src_modules/chartScatterPlot.mjs

@@ -6,6 +6,7 @@ import {
   convertHexColorToRGBColor,
   createCombinedTextDelimitedByAmpersand,
   createCombinedTextDelimitedByComma,
+  abbreviateTemperaturePhenomenonNames,
   createSubtitleForChart,
   removeTransparencyFromColor,
 } from "./chartHelpers.mjs";
@@ -106,11 +107,6 @@ const createYAxisTitleTextScatterPlot = function (
   // y-axis phenomenon symbols start at array index 1
   const unitOfMeasurementSymbolsYAxisArr = unitOfMeasurementSymbolsArr.slice(1);
 
-  const combinedNameSymbolArr = phenomenonNamesYAxisArr.map(
-    (phenomenonNameYAxis, i) =>
-      `${phenomenonNameYAxis} [${unitOfMeasurementSymbolsYAxisArr[i]}]`
-  );
-
   // The phenomenon names and unit of measurement arrays should have equal lengths
   // Use one of the arrays for looping
   if (
@@ -120,6 +116,11 @@ const createYAxisTitleTextScatterPlot = function (
       "The phenomenon names array and unit of measurement symbols array have different lengths"
     );
   } else {
+    const combinedNameSymbolArr = phenomenonNamesYAxisArr.map(
+      (phenomenonNameYAxis, i) =>
+        `${phenomenonNameYAxis} [${unitOfMeasurementSymbolsYAxisArr[i]}]`
+    );
+
     return createCombinedTextDelimitedByComma(combinedNameSymbolArr);
   }
 };
@@ -211,7 +212,7 @@ const drawScatterPlotHighcharts = function (
   );
 
   const Y_AXIS_TITLE = createYAxisTitleTextScatterPlot(
-    phenomenonNamesArr,
+    abbreviateTemperaturePhenomenonNames(phenomenonNamesArr),
     unitOfMeasurementSymbolsArr
   );
 

public/js/src_modules/dropDownListHelpers.mjs

@@ -180,31 +180,28 @@ const getIndexesOfTemperatureDifferenceOptions = function (
 const deleteTemperatureDifferenceOptions = function (
   buildingDataPointSamplingRateAbbrevArr
 ) {
+  // Create a copy of the input array, will be modified in place
+  const buildingDataPointSamplingRateAbbrevCopyArr = [
+    ...buildingDataPointSamplingRateAbbrevArr,
+  ];
+
   // Calculate the index(es) that we wish to delete
   const foundIndexesArr = getIndexesOfTemperatureDifferenceOptions(
-    buildingDataPointSamplingRateAbbrevArr
+    buildingDataPointSamplingRateAbbrevCopyArr
   );
 
   // Delete the index(es) of `dT`, modifies the array in place
   // Note: The resulting array is sparse
   foundIndexesArr.forEach(
-    (foundIndex) => delete buildingDataPointSamplingRateAbbrevArr[foundIndex]
+    (foundIndex) =>
+      delete buildingDataPointSamplingRateAbbrevCopyArr[foundIndex]
   );
 
-  // Array to store our final result
-  const buildingDataPointFinalArr = [];
-
   // Remove the empty sub array(s) that makes entire array sparse
   // Note: `empty` does not mean `undefined` or `null`
-  buildingDataPointSamplingRateAbbrevArr.forEach(
-    (bldgDataPntSmplingRateAbbrvArr) => {
-      if (typeof bldgDataPntSmplingRateAbbrvArr === "object") {
-        buildingDataPointFinalArr.push(bldgDataPntSmplingRateAbbrvArr);
-      }
-    }
+  return buildingDataPointSamplingRateAbbrevCopyArr.filter(
+    (bldgDataPntSamplingRate) => typeof bldgDataPntSamplingRate === "object"
   );
-
-  return buildingDataPointFinalArr;
 };
 
 /**