From 57668697397097cee3b04467ba3d3c46514f09d2 Mon Sep 17 00:00:00 2001
From: Pithon Kabiro <pithon.kabiro@hft-stuttgart.de>
Date: Tue, 26 Oct 2021 14:29:38 +0200
Subject: [PATCH] Edit function: format aggregated values for chart
- Rename function since it supports both line and column charts
- Add logic for comparing the lengths of the timestamps and aggregated
values arrays
- Update the function documentation
- Move the function to a different module file
---
public/js/src_modules/aggregateHelpers.mjs | 32 ++++++++++++++++++
public/js/src_modules/chartColumn.mjs | 33 +++----------------
public/js/src_modules/chartHeatmap.mjs | 2 +-
public/js/src_modules/chartLine.mjs | 11 +------
public/js/src_modules/chartScatterPlot.mjs | 6 ++--
.../src_modules/dropDownListChartColumn.mjs | 2 ++
.../src_modules/dropDownListChartHeatmap.mjs | 2 ++
.../js/src_modules/dropDownListChartLine.mjs | 2 ++
.../dropDownListChartScatterPlot.mjs | 2 ++
public/js/src_modules/dropDownListHelpers.mjs | 10 ++----
.../js/src_modules/dropDownListProcessing.mjs | 23 ++++++-------
11 files changed, 64 insertions(+), 61 deletions(-)
diff --git a/public/js/src_modules/aggregateHelpers.mjs b/public/js/src_modules/aggregateHelpers.mjs
index e81f0cb..4f9d780 100644
--- a/public/js/src_modules/aggregateHelpers.mjs
+++ b/public/js/src_modules/aggregateHelpers.mjs
@@ -354,10 +354,42 @@ const extractUniqueCalendarMonthsFromCalendarDates = function (
return [...uniqueCalendarMonths];
};
+/**
+ * Format a computed aggregation result to make it suitable for a chart. Currently, only line and column charts are supported
+ * @param {Array} calendarDatesMonthsStrArr An array of unique calendar dates strings (in "YYYY-MM-DD" fromat) or unique calendar months strings (in "YYYY-MM" format)
+ * @param {Array} aggregatedValuesArr An array of aggregated values
+ * @returns {Array} An array of formatted aggregation values suitable for use in a column chart
+ */
+const formatAggregationResultForChart = function (
+ calendarDatesMonthsStrArr,
+ aggregatedValuesArr
+) {
+ if (!calendarDatesMonthsStrArr || !aggregatedValuesArr) return;
+
+ // Create an array of Unix timestamp strings
+ const timestampsArr = calendarDatesMonthsStrArr.map((calendarStr) =>
+ new Date(calendarStr).getTime()
+ );
+
+ // Combine timestamp and value pairs
+ // The timestamps array and values array have same lengths, use one for looping
+ if (timestampsArr.length !== aggregatedValuesArr.length) {
+ throw new Error(
+ "The timestamps array and aggregated values array have different lengths"
+ );
+ } else {
+ return timestampsArr.map((timestamp, i) => [
+ timestamp,
+ aggregatedValuesArr[i],
+ ]);
+ }
+};
+
export {
extractObservationsWithinDatesInterval,
extractObservationValuesWithinDatesInterval,
extractObservationValuesWithinMonthInterval,
extractUniqueCalendarDatesFromTimestamp,
extractUniqueCalendarMonthsFromCalendarDates,
+ formatAggregationResultForChart,
};
diff --git a/public/js/src_modules/chartColumn.mjs b/public/js/src_modules/chartColumn.mjs
index d971746..646efbc 100644
--- a/public/js/src_modules/chartColumn.mjs
+++ b/public/js/src_modules/chartColumn.mjs
@@ -9,31 +9,6 @@ import {
createTooltipDateString,
} from "./chartHelpers.mjs";
-/**
- * Format a computed aggregation result to make it suitable for a column chart
- * @param {Array} calendarDatesMonthsStrArr An array of unique calendar dates strings (in "YYYY-MM-DD" fromat) or unique calendar months strings (in "YYYY-MM" format)
- * @param {Array} aggregatedValuesArr An array of aggregated values
- * @returns {Array} An array of formatted aggregation values suitable for use in a column chart
- */
-const formatAggregationResultForColumnChart = function (
- calendarDatesMonthsStrArr,
- aggregatedValuesArr
-) {
- if (!calendarDatesMonthsStrArr || !aggregatedValuesArr) return;
-
- // Create an array of Unix timestamp strings
- const timestampsArr = calendarDatesMonthsStrArr.map((calendarStr) =>
- new Date(calendarStr).getTime()
- );
-
- // Combine timestamp and value pairs
- // The timestamps array and values array have same lengths, use one for looping
- return timestampsArr.map((timestamp, i) => [
- timestamp,
- aggregatedValuesArr[i],
- ]);
-};
-
/**
* Creates an options object for each series drawn in a column chart
* @param {Array} formattedAggregatedResultForColumnChart An array of formatted aggregated result array(s) from one or more datastreams
@@ -96,12 +71,12 @@ const createYAxisTitleTextColumnChart = function (
/**
* 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
+ * @param {Array} formattedObsArraysForColumnChart An array made up of formatted observation array(s) suitable for use in a column chart. The observations may either be raw or aggregated
* @param {Object} extractedFormattedDatastreamProperties An object that contains arrays of formatted Datastream properties
* @returns {undefined} undefined
*/
const drawColumnChartHighcharts = function (
- formattedAggResultArraysForColumnChart,
+ formattedObsArraysForColumnChart,
extractedFormattedDatastreamProperties
) {
// Formatted datastream properties
@@ -136,7 +111,7 @@ const drawColumnChartHighcharts = function (
// Create the array of series options object(s)
const seriesOptionsArr = createSeriesOptionsForColumnChart(
- formattedAggResultArraysForColumnChart,
+ formattedObsArraysForColumnChart,
buildingIdsPhenomenonNamesArr
);
@@ -213,4 +188,4 @@ const drawColumnChartHighcharts = function (
});
};
-export { formatAggregationResultForColumnChart, drawColumnChartHighcharts };
+export { drawColumnChartHighcharts };
diff --git a/public/js/src_modules/chartHeatmap.mjs b/public/js/src_modules/chartHeatmap.mjs
index 87884e0..24e997c 100644
--- a/public/js/src_modules/chartHeatmap.mjs
+++ b/public/js/src_modules/chartHeatmap.mjs
@@ -57,7 +57,7 @@ const calculateMinMaxValuesForHeatmapColorAxis = function (
/**
* Draw a heatmap using Highcharts library
- * @param {Array} formattedObsArrayForHeatmap Response from SensorThings API formatted for use in a heatmap
+ * @param {Array} formattedObsArrayForHeatmap Response from SensorThings API formatted for use in a heatmap. Currently, only raw observations are supported, i.e. no aggregation
* @param {Object} extractedFormattedDatastreamProperties An object that contains arrays of formatted Datastream properties
* @returns {undefined} undefined
*/
diff --git a/public/js/src_modules/chartLine.mjs b/public/js/src_modules/chartLine.mjs
index f34b8a9..8a44bf1 100644
--- a/public/js/src_modules/chartLine.mjs
+++ b/public/js/src_modules/chartLine.mjs
@@ -22,15 +22,6 @@ const formatSensorThingsApiResponseForLineOrColumnChart = function (obsArray) {
});
};
-/**
- * Concatenates metadata properties to create a string for either the title or subtitle of a line chart
- * @param {Array} phenomenonNamesArr An array of phenomenon name strings
- * @returns {String} A string made up of combined phenomenon names
- */
-const createCombinedTextForLineChartTitles = function (phenomenonNamesArr) {
- return phenomenonNamesArr.join(", ");
-};
-
/**
* Creates an options object for each series drawn in the line chart
* @param {Array} formattedObsArraysForLineChart An array of formatted observation array(s) from one or more datastreams
@@ -71,7 +62,7 @@ const createSeriesOptionsForLineChart = function (
/**
* Draw a line chart using Highcharts library
- * @param {Array} formattedObsArraysForLineChart An array made up of formatted observation array(s) suitable for use in a line chart
+ * @param {Array} formattedObsArraysForLineChart An array made up of formatted observation array(s) suitable for use in a line chart. The observations may either be raw or aggregated
* @param {Object} extractedFormattedDatastreamPropertiesArr An object that contains arrays of formatted Datastream properties
* @returns {undefined} undefined
*/
diff --git a/public/js/src_modules/chartScatterPlot.mjs b/public/js/src_modules/chartScatterPlot.mjs
index 0c3cf1e..ff11192 100644
--- a/public/js/src_modules/chartScatterPlot.mjs
+++ b/public/js/src_modules/chartScatterPlot.mjs
@@ -209,12 +209,12 @@ const getYAxisUnitOfMeasurementSymbol = function (seriesName) {
/**
* Draw a scatter plot using Highcharts library
- * @param {Array} formattedObsArrayForSeriesOnePlusSeriesTwo Response from SensorThings API formatted for use in a scatter plot
+ * @param {Array} formattedObsArraysForScatterPlot Response from SensorThings API formatted for use in a scatter plot. Currently, only raw observations are supported, i.e. no aggregation
* @param {Object} extractedFormattedDatastreamProperties An object that contains arrays of formatted Datastream properties
* @returns {undefined} undefined
*/
const drawScatterPlotHighcharts = function (
- formattedObsArrayForSeriesOnePlusSeriesTwo,
+ formattedObsArraysForScatterPlot,
extractedFormattedDatastreamProperties
) {
// Arrays of datastream properties
@@ -227,7 +227,7 @@ const drawScatterPlotHighcharts = function (
// Create the array of series options object(s)
const seriesOptionsArr = createSeriesOptionsForScatterPlot(
- formattedObsArrayForSeriesOnePlusSeriesTwo,
+ formattedObsArraysForScatterPlot,
phenomenonNamesArr
);
diff --git a/public/js/src_modules/dropDownListChartColumn.mjs b/public/js/src_modules/dropDownListChartColumn.mjs
index 01c35b9..eda51d7 100644
--- a/public/js/src_modules/dropDownListChartColumn.mjs
+++ b/public/js/src_modules/dropDownListChartColumn.mjs
@@ -1,3 +1,5 @@
+"use strict";
+
import { drawColumnChartHighcharts } from "./chartColumn.mjs";
import {
diff --git a/public/js/src_modules/dropDownListChartHeatmap.mjs b/public/js/src_modules/dropDownListChartHeatmap.mjs
index d50ae63..cad7760 100644
--- a/public/js/src_modules/dropDownListChartHeatmap.mjs
+++ b/public/js/src_modules/dropDownListChartHeatmap.mjs
@@ -1,3 +1,5 @@
+"use strict";
+
import {
formatSensorThingsApiResponseForHeatMap,
drawHeatMapHighcharts,
diff --git a/public/js/src_modules/dropDownListChartLine.mjs b/public/js/src_modules/dropDownListChartLine.mjs
index 37e22a8..7d10a0d 100644
--- a/public/js/src_modules/dropDownListChartLine.mjs
+++ b/public/js/src_modules/dropDownListChartLine.mjs
@@ -1,3 +1,5 @@
+"use strict";
+
import { drawLineChartHighcharts } from "./chartLine.mjs";
import {
diff --git a/public/js/src_modules/dropDownListChartScatterPlot.mjs b/public/js/src_modules/dropDownListChartScatterPlot.mjs
index 6138881..9307a48 100644
--- a/public/js/src_modules/dropDownListChartScatterPlot.mjs
+++ b/public/js/src_modules/dropDownListChartScatterPlot.mjs
@@ -1,3 +1,5 @@
+"use strict";
+
import {
formatSensorThingsApiResponseForScatterPlot,
drawScatterPlotHighcharts,
diff --git a/public/js/src_modules/dropDownListHelpers.mjs b/public/js/src_modules/dropDownListHelpers.mjs
index 50ffbb8..bb37a61 100644
--- a/public/js/src_modules/dropDownListHelpers.mjs
+++ b/public/js/src_modules/dropDownListHelpers.mjs
@@ -279,14 +279,10 @@ const checkIfChartRequiresRawObservations = function (
selectedAggregationType,
selectedAggregationDuration
) {
- if (
- selectedAggregationType === "None (raw data)" &&
+ return selectedAggregationType === "None (raw data)" &&
selectedAggregationDuration === undefined
- ) {
- return true;
- } else {
- return false;
- }
+ ? true
+ : false;
};
/**
diff --git a/public/js/src_modules/dropDownListProcessing.mjs b/public/js/src_modules/dropDownListProcessing.mjs
index fc97b86..508a73d 100644
--- a/public/js/src_modules/dropDownListProcessing.mjs
+++ b/public/js/src_modules/dropDownListProcessing.mjs
@@ -1,8 +1,9 @@
"use strict";
-import { formatAggregationResultForColumnChart } from "./chartColumn.mjs";
-
-import { extractUniqueCalendarMonthsFromCalendarDates } from "./aggregateHelpers.mjs";
+import {
+ extractUniqueCalendarMonthsFromCalendarDates,
+ formatAggregationResultForChart,
+} from "./aggregateHelpers.mjs";
import {
calculateMinimumObservationValuesWithinInterval,
@@ -40,7 +41,7 @@ const calculateAndFormatDailySumObservations = function (
// Format the observations
const formattedObservationsSumDailyNestedArr =
observationsSumDailyNestedArr.map((obsSumDailyArr, i) =>
- formatAggregationResultForColumnChart(
+ formatAggregationResultForChart(
uniqueCalendarDatesNestedArr[i],
obsSumDailyArr
)
@@ -94,7 +95,7 @@ const calculateAndFormatMonthlySumObservations = function (
// Format the observations
const formattedObservationsSumMonthlyNestedArr =
observationsSumMonthlyNestedArr.map((obsSumMonthlyArr, i) =>
- formatAggregationResultForColumnChart(
+ formatAggregationResultForChart(
uniqueCalendarMonthsNestedArr[i],
obsSumMonthlyArr
)
@@ -142,7 +143,7 @@ const calculateAndFormatDailyMaximumObservations = function (
// Format the observations
const formattedObservationsMaximumDailyNestedArr =
observationsMaximumDailyNestedArr.map((obsMinDailyArr, i) =>
- formatAggregationResultForColumnChart(
+ formatAggregationResultForChart(
uniqueCalendarDatesNestedArr[i],
obsMinDailyArr
)
@@ -196,7 +197,7 @@ const calculateAndFormatMonthlyMaximumObservations = function (
// Format the observations
const formattedObservationsMaximumMonthlyNestedArr =
observationsMaximumMonthlyNestedArr.map((obsMaxMonthlyArr, i) =>
- formatAggregationResultForColumnChart(
+ formatAggregationResultForChart(
uniqueCalendarMonthsNestedArr[i],
obsMaxMonthlyArr
)
@@ -244,7 +245,7 @@ const calculateAndFormatDailyMinimumObservations = function (
// Format the observations
const formattedObservationsMinimumDailyNestedArr =
observationsMinimumDailyNestedArr.map((obsMinDailyArr, i) =>
- formatAggregationResultForColumnChart(
+ formatAggregationResultForChart(
uniqueCalendarDatesNestedArr[i],
obsMinDailyArr
)
@@ -298,7 +299,7 @@ const calculateAndFormatMonthlyMinimumObservations = function (
// Format the observations
const formattedObservationsMinimumMonthlyNestedArr =
observationsMinimumMonthlyNestedArr.map((obsMinMonthlyArr, i) =>
- formatAggregationResultForColumnChart(
+ formatAggregationResultForChart(
uniqueCalendarMonthsNestedArr[i],
obsMinMonthlyArr
)
@@ -346,7 +347,7 @@ const calculateAndFormatDailyAverageObservations = function (
// Format the observations
const formattedObservationsAverageDailyNestedArr =
observationsAverageDailyNestedArr.map((obsAverageDailyArr, i) =>
- formatAggregationResultForColumnChart(
+ formatAggregationResultForChart(
uniqueCalendarDatesNestedArr[i],
obsAverageDailyArr
)
@@ -400,7 +401,7 @@ const calculateAndFormatMonthlyAverageObservations = function (
// Format the observations
const formattedObservationsAverageMonthlyNestedArr =
observationsAverageMonthlyNestedArr.map((obsAverageMonthlyArr, i) =>
- formatAggregationResultForColumnChart(
+ formatAggregationResultForChart(
uniqueCalendarMonthsNestedArr[i],
obsAverageMonthlyArr
)
--
GitLab