diff --git a/public/js/appChart.js b/public/js/appChart.js
index 5fffe09ad7a2840eb87351772b3f3f2ebe505373..d7acae3a18fd261662c3cce4bf6c46f9c1dca31f 100644
--- a/public/js/appChart.js
+++ b/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
)
: [];
diff --git a/public/js/src_modules/chartColumn.mjs b/public/js/src_modules/chartColumn.mjs
index 9c151f9a1e5d25c7625071b8a6ccd36dfffc2824..d9717466d55b836e347dc4d8fc536fce9f4cdf7f 100644
--- a/public/js/src_modules/chartColumn.mjs
+++ b/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,
},
},
diff --git a/public/js/src_modules/chartHelpers.mjs b/public/js/src_modules/chartHelpers.mjs
index 1ef57452f34c79c8ad086d2ccf4a9911cdc54f80..0c633b31e97a9681eedbafa54bb0542e9366e35a 100644
--- a/public/js/src_modules/chartHelpers.mjs
+++ b/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,
diff --git a/public/js/src_modules/chartScatterPlot.mjs b/public/js/src_modules/chartScatterPlot.mjs
index c12fd350e5cbd80b7fe4f928c500ca279ee34edb..19195375090783b8096b3a75e159f5dfee8cf480 100644
--- a/public/js/src_modules/chartScatterPlot.mjs
+++ b/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
);
diff --git a/public/js/src_modules/dropDownListHelpers.mjs b/public/js/src_modules/dropDownListHelpers.mjs
index 3f2a8ffca7993aca7491faf1063bf615b000b661..50ffbb8a267c94d0562e976187a1bb36fb0ef079 100644
--- a/public/js/src_modules/dropDownListHelpers.mjs
+++ b/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;
};
/**