Commit cc1a36ef authored by Pithon Kabiro's avatar Pithon Kabiro
Browse files

New function: draw line chart based on selection

This function wraps the logic for drawing column charts based on the
selected options for both raw and aggregated observations
parent 0c17e4f1
...@@ -17,10 +17,6 @@ import { ...@@ -17,10 +17,6 @@ import {
extractPropertiesFromFormattedDatastreamMetadata, extractPropertiesFromFormattedDatastreamMetadata,
} from "./src_modules/fetchedDataProcessing.mjs"; } from "./src_modules/fetchedDataProcessing.mjs";
import { formatSensorThingsApiResponseForLineOrColumnChart } from "./src_modules/chartHelpers.mjs";
import { drawLineChartHighcharts } from "./src_modules/chartLine.mjs";
import { import {
showLoadingSpinner, showLoadingSpinner,
hideLoadingSpinner, hideLoadingSpinner,
...@@ -51,7 +47,7 @@ import { drawColumnChartBasedOnSelectedOptions } from "./src_modules/dropDownLis ...@@ -51,7 +47,7 @@ import { drawColumnChartBasedOnSelectedOptions } from "./src_modules/dropDownLis
import { drawHeatmapBasedOnSelectedOptions } from "./src_modules/dropDownListChartHeatmap.mjs"; import { drawHeatmapBasedOnSelectedOptions } from "./src_modules/dropDownListChartHeatmap.mjs";
import { drawLineChartBasedOnSelectedAggregationOptions } from "./src_modules/dropDownListChartLine.mjs"; import { drawLineChartBasedOnSelectedOptions } from "./src_modules/dropDownListChartLine.mjs";
import { drawScatterPlotBasedOnSelectedOptions } from "./src_modules/dropDownListChartScatterPlot.mjs"; import { drawScatterPlotBasedOnSelectedOptions } from "./src_modules/dropDownListChartScatterPlot.mjs";
...@@ -208,7 +204,6 @@ const drawChartUsingSelectedOptions = async function () { ...@@ -208,7 +204,6 @@ const drawChartUsingSelectedOptions = async function () {
for (const selectedChartType of selectedChartTypeArr) { for (const selectedChartType of selectedChartTypeArr) {
switch (selectedChartType) { switch (selectedChartType) {
// We are interested in raw observations ONLY
case "Heatmap": case "Heatmap":
if ( if (
selectedAggregationOptionsAreValid && selectedAggregationOptionsAreValid &&
...@@ -221,7 +216,6 @@ const drawChartUsingSelectedOptions = async function () { ...@@ -221,7 +216,6 @@ const drawChartUsingSelectedOptions = async function () {
} }
break; break;
// We are interested in raw observations ONLY
case "Scatter Plot": case "Scatter Plot":
if ( if (
selectedAggregationOptionsAreValid && selectedAggregationOptionsAreValid &&
...@@ -234,34 +228,15 @@ const drawChartUsingSelectedOptions = async function () { ...@@ -234,34 +228,15 @@ const drawChartUsingSelectedOptions = async function () {
} }
break; break;
// We are interested in BOTH raw observations and aggregated observations
case "Line": case "Line":
// Raw observations drawLineChartBasedOnSelectedOptions(
if (selectedAggregationType === "None (raw data)") { selectedAggregationType,
// Create formatted array(s) for observations selectedAggregationDuration,
const formattedRawObservationsLineChartNestedArr = observationsComboNestedFinalArr,
observationsComboNestedFinalArr.map((observationsArr) => selectedSamplingRateAbbrev,
formatSensorThingsApiResponseForLineOrColumnChart( uniqueCalendarDatesNestedArr,
observationsArr formattedMetadataNestedArr
) );
);
drawLineChartHighcharts(
formattedRawObservationsLineChartNestedArr,
rawObsExtractedFormattedDatastreamProperties
);
}
// Aggregated observations
else {
drawLineChartBasedOnSelectedAggregationOptions(
selectedAggregationType,
selectedAggregationDuration,
observationsComboNestedFinalArr,
selectedSamplingRateAbbrev,
uniqueCalendarDatesNestedArr,
formattedMetadataNestedArr
);
}
break; break;
case "Column": case "Column":
......
"use strict"; "use strict";
import { formatSensorThingsApiResponseForLineOrColumnChart } from "./chartHelpers.mjs";
import { extractPropertiesFromFormattedDatastreamMetadata } from "./fetchedDataProcessing.mjs";
import { drawLineChartHighcharts } from "./chartLine.mjs"; import { drawLineChartHighcharts } from "./chartLine.mjs";
import { import {
...@@ -33,7 +37,7 @@ import { ...@@ -33,7 +37,7 @@ import {
* @param {Array} formattedMetadataNestedArr An array of sub-arrays of formatted metadata properties * @param {Array} formattedMetadataNestedArr An array of sub-arrays of formatted metadata properties
* @returns {undefined} undefined * @returns {undefined} undefined
*/ */
export const drawLineChartBasedOnSelectedAggregationOptions = function ( const drawLineChartBasedOnSelectedAggregationOptions = function (
selectedAggregationType, selectedAggregationType,
selectedAggregationDuration, selectedAggregationDuration,
observationsNestedArr, observationsNestedArr,
...@@ -157,3 +161,56 @@ export const drawLineChartBasedOnSelectedAggregationOptions = function ( ...@@ -157,3 +161,56 @@ export const drawLineChartBasedOnSelectedAggregationOptions = function (
); );
} }
}; };
/**
* Draw a line 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 drawLineChartBasedOnSelectedOptions = function (
selectedAggregationType,
selectedAggregationDuration,
observationsNestedArr,
selectedSamplingRateAbbrev,
uniqueCalendarDatesNestedArr,
formattedMetadataNestedArr
) {
// Raw observations
if (selectedAggregationType === "None (raw data)") {
// Create formatted array(s) for observations
const formattedRawObservationsLineChartNestedArr =
observationsNestedArr.map((observationsArr) =>
formatSensorThingsApiResponseForLineOrColumnChart(observationsArr)
);
// Extract formatted metadata properties
const rawObsExtractedFormattedDatastreamProperties =
extractPropertiesFromFormattedDatastreamMetadata(
formattedMetadataNestedArr,
false
);
drawLineChartHighcharts(
formattedRawObservationsLineChartNestedArr,
rawObsExtractedFormattedDatastreamProperties
);
}
// Aggregated observations
else {
drawLineChartBasedOnSelectedAggregationOptions(
selectedAggregationType,
selectedAggregationDuration,
observationsNestedArr,
selectedSamplingRateAbbrev,
uniqueCalendarDatesNestedArr,
formattedMetadataNestedArr
);
}
};
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment