New function: create y-axis title column chart

public/js/src_modules/chartColumn.mjs

@@ -3,6 +3,7 @@
 import {
   chartExportOptions,
   createFullTitleForLineOrColumnChart,
+  createCombinedTextDelimitedByComma,
   createSubtitleForChart,
   createTooltipDateString,
 } from "./chartHelpers.mjs";
@@ -65,6 +66,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 +139,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 +147,11 @@ const drawColumnChartHighcharts = function (
 
   const textChartSubtitle = createSubtitleForChart(datastreamNamesArr);
 
+  const textYAxisTitle = createYAxisTitleTextColumnChart(
+    phenomenonNamesArr,
+    unitOfMeasurementSymbolsArr
+  );
+
   Highcharts.chart("chart-column", {
     chart: {
       type: "column",
@@ -148,7 +175,7 @@ const drawColumnChartHighcharts = function (
 
     yAxis: {
       title: {
-        text: `${phenomenonName} [${unitOfMeasurementSymbol}]`,
+        text: textYAxisTitle,
       },
     },