From 0bc96c6a798f240bd4f515aef69a2a80332fbc9e Mon Sep 17 00:00:00 2001 From: Pithon Kabiro Date: Fri, 22 Oct 2021 18:27:45 +0200 Subject: [PATCH 1/4] Edit function: delete temperature diff options - Create a copy of the array passed in as an argument, which will be modified in place - Replace 'forEach' method with 'filter' method for brevity --- public/js/appChart.js | 22 ++++++------------ public/js/src_modules/dropDownListHelpers.mjs | 23 ++++++++----------- 2 files changed, 17 insertions(+), 28 deletions(-) diff --git a/public/js/appChart.js b/public/js/appChart.js index 5fffe09..d7acae3 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/dropDownListHelpers.mjs b/public/js/src_modules/dropDownListHelpers.mjs index 3f2a8ff..50ffbb8 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; }; /** -- GitLab From 58b529fc1b04d8e85d92c3a4d1b173dc510c3f4e Mon Sep 17 00:00:00 2001 From: Pithon Kabiro Date: Fri, 22 Oct 2021 18:29:24 +0200 Subject: [PATCH 2/4] Edit function: create y-axis title scatter plot Move creation of the combined names + symbols array to the if/else block --- public/js/src_modules/chartScatterPlot.mjs | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/public/js/src_modules/chartScatterPlot.mjs b/public/js/src_modules/chartScatterPlot.mjs index c12fd35..e10275b 100644 --- a/public/js/src_modules/chartScatterPlot.mjs +++ b/public/js/src_modules/chartScatterPlot.mjs @@ -106,11 +106,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 +115,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); } }; -- GitLab From 99dd13622635c402aed390edd17fc6b781122b11 Mon Sep 17 00:00:00 2001 From: Pithon Kabiro Date: Fri, 22 Oct 2021 18:31:55 +0200 Subject: [PATCH 3/4] New function: create y-axis title column chart --- public/js/src_modules/chartColumn.mjs | 41 ++++++++++++++++++++++----- 1 file changed, 34 insertions(+), 7 deletions(-) diff --git a/public/js/src_modules/chartColumn.mjs b/public/js/src_modules/chartColumn.mjs index 9c151f9..1608f4a 100644 --- a/public/js/src_modules/chartColumn.mjs +++ b/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, }, }, -- GitLab From 742f0c14c03cff7df585b681522551cceed0a879 Mon Sep 17 00:00:00 2001 From: Pithon Kabiro Date: Fri, 22 Oct 2021 18:34:56 +0200 Subject: [PATCH 4/4] New function: abbreviate temp phenomenon name ... for use in the y-axis text of charts --- public/js/src_modules/chartColumn.mjs | 3 ++- public/js/src_modules/chartHelpers.mjs | 26 ++++++++++++++++++++++ public/js/src_modules/chartScatterPlot.mjs | 3 ++- 3 files changed, 30 insertions(+), 2 deletions(-) diff --git a/public/js/src_modules/chartColumn.mjs b/public/js/src_modules/chartColumn.mjs index 1608f4a..d971746 100644 --- a/public/js/src_modules/chartColumn.mjs +++ b/public/js/src_modules/chartColumn.mjs @@ -5,6 +5,7 @@ import { createFullTitleForLineOrColumnChart, createCombinedTextDelimitedByComma, createSubtitleForChart, + abbreviateTemperaturePhenomenonNames, createTooltipDateString, } from "./chartHelpers.mjs"; @@ -148,7 +149,7 @@ const drawColumnChartHighcharts = function ( const textChartSubtitle = createSubtitleForChart(datastreamNamesArr); const textYAxisTitle = createYAxisTitleTextColumnChart( - phenomenonNamesArr, + abbreviateTemperaturePhenomenonNames(phenomenonNamesArr), unitOfMeasurementSymbolsArr ); diff --git a/public/js/src_modules/chartHelpers.mjs b/public/js/src_modules/chartHelpers.mjs index 1ef5745..0c633b3 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 e10275b..1919537 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"; @@ -211,7 +212,7 @@ const drawScatterPlotHighcharts = function ( ); const Y_AXIS_TITLE = createYAxisTitleTextScatterPlot( - phenomenonNamesArr, + abbreviateTemperaturePhenomenonNames(phenomenonNamesArr), unitOfMeasurementSymbolsArr ); -- GitLab