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; }; /**