From 0bc96c6a798f240bd4f515aef69a2a80332fbc9e Mon Sep 17 00:00:00 2001
From: Pithon Kabiro <pithon.kabiro@hft-stuttgart.de>
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 <pithon.kabiro@hft-stuttgart.de>
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 <pithon.kabiro@hft-stuttgart.de>
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 <pithon.kabiro@hft-stuttgart.de>
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