From 0c17e4f13b2080c78766391db986072604d596fb Mon Sep 17 00:00:00 2001
From: Pithon Kabiro <pithon.kabiro@hft-stuttgart.de>
Date: Thu, 28 Oct 2021 10:04:33 +0200
Subject: [PATCH] New function: draw column chart selection-based
This function wraps the logic for drawing column charts based on the
selected options for both raw and aggregated observations
---
public/js/appChart.js | 43 ++++----------
.../src_modules/dropDownListChartColumn.mjs | 59 ++++++++++++++++++-
.../src_modules/dropDownListChartHeatmap.mjs | 3 +-
.../dropDownListChartScatterPlot.mjs | 5 +-
4 files changed, 74 insertions(+), 36 deletions(-)
diff --git a/public/js/appChart.js b/public/js/appChart.js
index b4d1e7b..4ab1d8a 100644
--- a/public/js/appChart.js
+++ b/public/js/appChart.js
@@ -21,8 +21,6 @@ import { formatSensorThingsApiResponseForLineOrColumnChart } from "./src_modules
import { drawLineChartHighcharts } from "./src_modules/chartLine.mjs";
-import { drawColumnChartHighcharts } from "./src_modules/chartColumn.mjs";
-
import {
showLoadingSpinner,
hideLoadingSpinner,
@@ -49,13 +47,13 @@ import {
getAbbreviationsForSelectedOptionsFromAllDropDownLists,
} from "./src_modules/dropDownListHelpers.mjs";
-import { drawColumnChartBasedOnSelectedAggregationOptions } from "./src_modules/dropDownListChartColumn.mjs";
+import { drawColumnChartBasedOnSelectedOptions } from "./src_modules/dropDownListChartColumn.mjs";
import { drawHeatmapBasedOnSelectedOptions } from "./src_modules/dropDownListChartHeatmap.mjs";
import { drawLineChartBasedOnSelectedAggregationOptions } from "./src_modules/dropDownListChartLine.mjs";
-import { drawScatterPlotFromChartSelection } from "./src_modules/dropDownListChartScatterPlot.mjs";
+import { drawScatterPlotBasedOnSelectedOptions } from "./src_modules/dropDownListChartScatterPlot.mjs";
/**
* Callback function that wraps the logic of populating the linked drop down lists.
@@ -229,7 +227,7 @@ const drawChartUsingSelectedOptions = async function () {
selectedAggregationOptionsAreValid &&
selectedBuildingDataPointsOptionsAreValid
) {
- drawScatterPlotFromChartSelection(
+ drawScatterPlotBasedOnSelectedOptions(
observationsComboNestedFinalArr,
rawObsExtractedFormattedDatastreamProperties
);
@@ -266,34 +264,15 @@ const drawChartUsingSelectedOptions = async function () {
}
break;
- // We are interested in BOTH raw observations and aggregated observations
case "Column":
- // Raw observations
- if (selectedAggregationType === "None (raw data)") {
- // Create formatted array(s) for observations
- const formattedRawObservationsColumnChartNestedArr =
- observationsComboNestedFinalArr.map((observationsArr) =>
- formatSensorThingsApiResponseForLineOrColumnChart(
- observationsArr
- )
- );
-
- drawColumnChartHighcharts(
- formattedRawObservationsColumnChartNestedArr,
- rawObsExtractedFormattedDatastreamProperties
- );
- }
- // Aggregated observations
- else {
- drawColumnChartBasedOnSelectedAggregationOptions(
- selectedAggregationType,
- selectedAggregationDuration,
- observationsComboNestedFinalArr,
- selectedSamplingRateAbbrev,
- uniqueCalendarDatesNestedArr,
- formattedMetadataNestedArr
- );
- }
+ drawColumnChartBasedOnSelectedOptions(
+ selectedAggregationType,
+ selectedAggregationDuration,
+ observationsComboNestedFinalArr,
+ selectedSamplingRateAbbrev,
+ uniqueCalendarDatesNestedArr,
+ formattedMetadataNestedArr
+ );
break;
default:
diff --git a/public/js/src_modules/dropDownListChartColumn.mjs b/public/js/src_modules/dropDownListChartColumn.mjs
index 7c2aeee..78bf21d 100644
--- a/public/js/src_modules/dropDownListChartColumn.mjs
+++ b/public/js/src_modules/dropDownListChartColumn.mjs
@@ -1,5 +1,9 @@
"use strict";
+import { formatSensorThingsApiResponseForLineOrColumnChart } from "./chartHelpers.mjs";
+
+import { extractPropertiesFromFormattedDatastreamMetadata } from "./fetchedDataProcessing.mjs";
+
import { drawColumnChartHighcharts } from "./chartColumn.mjs";
import {
@@ -33,7 +37,7 @@ import {
* @param {Array} formattedMetadataNestedArr An array of sub-arrays of formatted metadata properties
* @returns {undefined} undefined
*/
-export const drawColumnChartBasedOnSelectedAggregationOptions = function (
+const drawColumnChartBasedOnSelectedAggregationOptions = function (
selectedAggregationType,
selectedAggregationDuration,
observationsNestedArr,
@@ -157,3 +161,56 @@ export const drawColumnChartBasedOnSelectedAggregationOptions = function (
);
}
};
+
+/**
+ * Draw a column chart based on the selected options from a drop-down list.
+ * This chart type supports both raw observations and aggregated observations
+ *
+ * @param {String} selectedAggregationType The selected aggregation type. The currently supported strings include `Sum`, `Maximum`, `Minimum` and `Average`
+ * @param {String} selectedAggregationDuration The selected aggregation duration. The currently supported strings include `Daily` and `Monthly`
+ * @param {Array} observationsNestedArr An array made up of sub-array(s) of observations
+ * @param {String} selectedSamplingRateAbbrev The abbreviated form of the selected sampling rate option
+ * @param {Array} uniqueCalendarDatesNestedArr An array made up of sub-array(s) of unique calendar date(s) string(s)
+ * @param {Array} formattedMetadataNestedArr An array of sub-arrays of formatted metadata properties
+ * @returns {undefined} undefined
+ */
+export const drawColumnChartBasedOnSelectedOptions = function (
+ selectedAggregationType,
+ selectedAggregationDuration,
+ observationsNestedArr,
+ selectedSamplingRateAbbrev,
+ uniqueCalendarDatesNestedArr,
+ formattedMetadataNestedArr
+) {
+ // Case 1: Raw observations
+ if (selectedAggregationType === "None (raw data)") {
+ // Create formatted array(s) for observations
+ const formattedRawObservationsColumnChartNestedArr =
+ observationsNestedArr.map((observationsArr) =>
+ formatSensorThingsApiResponseForLineOrColumnChart(observationsArr)
+ );
+
+ // Extract formatted metadata properties
+ const rawObsExtractedFormattedDatastreamProperties =
+ extractPropertiesFromFormattedDatastreamMetadata(
+ formattedMetadataNestedArr,
+ false
+ );
+
+ drawColumnChartHighcharts(
+ formattedRawObservationsColumnChartNestedArr,
+ rawObsExtractedFormattedDatastreamProperties
+ );
+ }
+ // Case 2: Aggregated observations
+ else {
+ drawColumnChartBasedOnSelectedAggregationOptions(
+ selectedAggregationType,
+ selectedAggregationDuration,
+ observationsNestedArr,
+ selectedSamplingRateAbbrev,
+ uniqueCalendarDatesNestedArr,
+ formattedMetadataNestedArr
+ );
+ }
+};
diff --git a/public/js/src_modules/dropDownListChartHeatmap.mjs b/public/js/src_modules/dropDownListChartHeatmap.mjs
index cad7760..d5ee1b6 100644
--- a/public/js/src_modules/dropDownListChartHeatmap.mjs
+++ b/public/js/src_modules/dropDownListChartHeatmap.mjs
@@ -6,7 +6,8 @@ import {
} from "./chartHeatmap.mjs";
/**
- * Draw a heatmap based on the selected options from a drop-down list
+ * Draw a heatmap based on the selected options from a drop-down list.
+ * Currently, this chart type only supports raw observations
*
* @param {Array} observationsComboNestedArr An array that contains non-computed (raw) observations and computed (temperature difference, dT) observations
* @param {Object} extractedFormattedDatastreamProperties An object that contains array(s) of formatted Datastream properties
diff --git a/public/js/src_modules/dropDownListChartScatterPlot.mjs b/public/js/src_modules/dropDownListChartScatterPlot.mjs
index 9307a48..1f42d2f 100644
--- a/public/js/src_modules/dropDownListChartScatterPlot.mjs
+++ b/public/js/src_modules/dropDownListChartScatterPlot.mjs
@@ -6,13 +6,14 @@ import {
} from "./chartScatterPlot.mjs";
/**
- * Draw a scatter plot based on the selected options from a drop-down list
+ * Draw a scatter plot based on the selected options from a drop-down list.
+ * Currently, this chart type only supports raw observations
*
* @param {Array} observationsComboNestedArr An array that contains non-computed (raw) observations and computed (temperature difference, dT) observations
* @param {Object} extractedFormattedDatastreamProperties An object that contains array(s) of formatted Datastream properties
* @returns {undefined} undefined
*/
-export const drawScatterPlotFromChartSelection = function (
+export const drawScatterPlotBasedOnSelectedOptions = function (
observationsComboNestedArr,
extractedFormattedDatastreamProperties
) {
--
GitLab