diff --git a/public/js/appChart.js b/public/js/appChart.js index 4ab1d8accff72d414bf271295482630c6b87f8cf..f4c567fb7928a29c719e94496e0b70d0e88f919d 100644 --- a/public/js/appChart.js +++ b/public/js/appChart.js @@ -17,10 +17,6 @@ import { extractPropertiesFromFormattedDatastreamMetadata, } from "./src_modules/fetchedDataProcessing.mjs"; -import { formatSensorThingsApiResponseForLineOrColumnChart } from "./src_modules/chartHelpers.mjs"; - -import { drawLineChartHighcharts } from "./src_modules/chartLine.mjs"; - import { showLoadingSpinner, hideLoadingSpinner, @@ -51,7 +47,7 @@ import { drawColumnChartBasedOnSelectedOptions } from "./src_modules/dropDownLis 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"; @@ -208,7 +204,6 @@ const drawChartUsingSelectedOptions = async function () { for (const selectedChartType of selectedChartTypeArr) { switch (selectedChartType) { - // We are interested in raw observations ONLY case "Heatmap": if ( selectedAggregationOptionsAreValid && @@ -221,7 +216,6 @@ const drawChartUsingSelectedOptions = async function () { } break; - // We are interested in raw observations ONLY case "Scatter Plot": if ( selectedAggregationOptionsAreValid && @@ -234,34 +228,15 @@ const drawChartUsingSelectedOptions = async function () { } break; - // We are interested in BOTH raw observations and aggregated observations case "Line": - // Raw observations - if (selectedAggregationType === "None (raw data)") { - // Create formatted array(s) for observations - const formattedRawObservationsLineChartNestedArr = - observationsComboNestedFinalArr.map((observationsArr) => - formatSensorThingsApiResponseForLineOrColumnChart( - observationsArr - ) - ); - - drawLineChartHighcharts( - formattedRawObservationsLineChartNestedArr, - rawObsExtractedFormattedDatastreamProperties - ); - } - // Aggregated observations - else { - drawLineChartBasedOnSelectedAggregationOptions( - selectedAggregationType, - selectedAggregationDuration, - observationsComboNestedFinalArr, - selectedSamplingRateAbbrev, - uniqueCalendarDatesNestedArr, - formattedMetadataNestedArr - ); - } + drawLineChartBasedOnSelectedOptions( + selectedAggregationType, + selectedAggregationDuration, + observationsComboNestedFinalArr, + selectedSamplingRateAbbrev, + uniqueCalendarDatesNestedArr, + formattedMetadataNestedArr + ); break; case "Column": diff --git a/public/js/src_modules/dropDownListChartLine.mjs b/public/js/src_modules/dropDownListChartLine.mjs index 494e466c718cdd041267ee95b4ae31fca1d50b18..6f182f204748cb8da983f9f3cd3c04cf722bf897 100644 --- a/public/js/src_modules/dropDownListChartLine.mjs +++ b/public/js/src_modules/dropDownListChartLine.mjs @@ -1,5 +1,9 @@ "use strict"; +import { formatSensorThingsApiResponseForLineOrColumnChart } from "./chartHelpers.mjs"; + +import { extractPropertiesFromFormattedDatastreamMetadata } from "./fetchedDataProcessing.mjs"; + import { drawLineChartHighcharts } from "./chartLine.mjs"; import { @@ -33,7 +37,7 @@ import { * @param {Array} formattedMetadataNestedArr An array of sub-arrays of formatted metadata properties * @returns {undefined} undefined */ -export const drawLineChartBasedOnSelectedAggregationOptions = function ( +const drawLineChartBasedOnSelectedAggregationOptions = function ( selectedAggregationType, selectedAggregationDuration, observationsNestedArr, @@ -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 + ); + } +};