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

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
parent 4f2643c5
...@@ -354,10 +354,42 @@ const extractUniqueCalendarMonthsFromCalendarDates = function ( ...@@ -354,10 +354,42 @@ const extractUniqueCalendarMonthsFromCalendarDates = function (
return [...uniqueCalendarMonths]; 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 { export {
extractObservationsWithinDatesInterval, extractObservationsWithinDatesInterval,
extractObservationValuesWithinDatesInterval, extractObservationValuesWithinDatesInterval,
extractObservationValuesWithinMonthInterval, extractObservationValuesWithinMonthInterval,
extractUniqueCalendarDatesFromTimestamp, extractUniqueCalendarDatesFromTimestamp,
extractUniqueCalendarMonthsFromCalendarDates, extractUniqueCalendarMonthsFromCalendarDates,
formatAggregationResultForChart,
}; };
...@@ -9,31 +9,6 @@ import { ...@@ -9,31 +9,6 @@ import {
createTooltipDateString, createTooltipDateString,
} from "./chartHelpers.mjs"; } 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 * 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 * @param {Array} formattedAggregatedResultForColumnChart An array of formatted aggregated result array(s) from one or more datastreams
...@@ -96,12 +71,12 @@ const createYAxisTitleTextColumnChart = function ( ...@@ -96,12 +71,12 @@ const createYAxisTitleTextColumnChart = function (
/** /**
* Draw a column chart using Highcharts library * 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 * @param {Object} extractedFormattedDatastreamProperties An object that contains arrays of formatted Datastream properties
* @returns {undefined} undefined * @returns {undefined} undefined
*/ */
const drawColumnChartHighcharts = function ( const drawColumnChartHighcharts = function (
formattedAggResultArraysForColumnChart, formattedObsArraysForColumnChart,
extractedFormattedDatastreamProperties extractedFormattedDatastreamProperties
) { ) {
// Formatted datastream properties // Formatted datastream properties
...@@ -136,7 +111,7 @@ const drawColumnChartHighcharts = function ( ...@@ -136,7 +111,7 @@ const drawColumnChartHighcharts = function (
// Create the array of series options object(s) // Create the array of series options object(s)
const seriesOptionsArr = createSeriesOptionsForColumnChart( const seriesOptionsArr = createSeriesOptionsForColumnChart(
formattedAggResultArraysForColumnChart, formattedObsArraysForColumnChart,
buildingIdsPhenomenonNamesArr buildingIdsPhenomenonNamesArr
); );
...@@ -213,4 +188,4 @@ const drawColumnChartHighcharts = function ( ...@@ -213,4 +188,4 @@ const drawColumnChartHighcharts = function (
}); });
}; };
export { formatAggregationResultForColumnChart, drawColumnChartHighcharts }; export { drawColumnChartHighcharts };
...@@ -57,7 +57,7 @@ const calculateMinMaxValuesForHeatmapColorAxis = function ( ...@@ -57,7 +57,7 @@ const calculateMinMaxValuesForHeatmapColorAxis = function (
/** /**
* Draw a heatmap using Highcharts library * 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 * @param {Object} extractedFormattedDatastreamProperties An object that contains arrays of formatted Datastream properties
* @returns {undefined} undefined * @returns {undefined} undefined
*/ */
......
...@@ -22,15 +22,6 @@ const formatSensorThingsApiResponseForLineOrColumnChart = function (obsArray) { ...@@ -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 * 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 * @param {Array} formattedObsArraysForLineChart An array of formatted observation array(s) from one or more datastreams
...@@ -71,7 +62,7 @@ const createSeriesOptionsForLineChart = function ( ...@@ -71,7 +62,7 @@ const createSeriesOptionsForLineChart = function (
/** /**
* Draw a line chart using Highcharts library * 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 * @param {Object} extractedFormattedDatastreamPropertiesArr An object that contains arrays of formatted Datastream properties
* @returns {undefined} undefined * @returns {undefined} undefined
*/ */
......
...@@ -209,12 +209,12 @@ const getYAxisUnitOfMeasurementSymbol = function (seriesName) { ...@@ -209,12 +209,12 @@ const getYAxisUnitOfMeasurementSymbol = function (seriesName) {
/** /**
* Draw a scatter plot using Highcharts library * 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 * @param {Object} extractedFormattedDatastreamProperties An object that contains arrays of formatted Datastream properties
* @returns {undefined} undefined * @returns {undefined} undefined
*/ */
const drawScatterPlotHighcharts = function ( const drawScatterPlotHighcharts = function (
formattedObsArrayForSeriesOnePlusSeriesTwo, formattedObsArraysForScatterPlot,
extractedFormattedDatastreamProperties extractedFormattedDatastreamProperties
) { ) {
// Arrays of datastream properties // Arrays of datastream properties
...@@ -227,7 +227,7 @@ const drawScatterPlotHighcharts = function ( ...@@ -227,7 +227,7 @@ const drawScatterPlotHighcharts = function (
// Create the array of series options object(s) // Create the array of series options object(s)
const seriesOptionsArr = createSeriesOptionsForScatterPlot( const seriesOptionsArr = createSeriesOptionsForScatterPlot(
formattedObsArrayForSeriesOnePlusSeriesTwo, formattedObsArraysForScatterPlot,
phenomenonNamesArr phenomenonNamesArr
); );
......
"use strict";
import { drawColumnChartHighcharts } from "./chartColumn.mjs"; import { drawColumnChartHighcharts } from "./chartColumn.mjs";
import { import {
......
"use strict";
import { import {
formatSensorThingsApiResponseForHeatMap, formatSensorThingsApiResponseForHeatMap,
drawHeatMapHighcharts, drawHeatMapHighcharts,
......
"use strict";
import { drawLineChartHighcharts } from "./chartLine.mjs"; import { drawLineChartHighcharts } from "./chartLine.mjs";
import { import {
......
"use strict";
import { import {
formatSensorThingsApiResponseForScatterPlot, formatSensorThingsApiResponseForScatterPlot,
drawScatterPlotHighcharts, drawScatterPlotHighcharts,
......
...@@ -279,14 +279,10 @@ const checkIfChartRequiresRawObservations = function ( ...@@ -279,14 +279,10 @@ const checkIfChartRequiresRawObservations = function (
selectedAggregationType, selectedAggregationType,
selectedAggregationDuration selectedAggregationDuration
) { ) {
if ( return selectedAggregationType === "None (raw data)" &&
selectedAggregationType === "None (raw data)" &&
selectedAggregationDuration === undefined selectedAggregationDuration === undefined
) { ? true
return true; : false;
} else {
return false;
}
}; };
/** /**
......
"use strict"; "use strict";
import { formatAggregationResultForColumnChart } from "./chartColumn.mjs"; import {
extractUniqueCalendarMonthsFromCalendarDates,
import { extractUniqueCalendarMonthsFromCalendarDates } from "./aggregateHelpers.mjs"; formatAggregationResultForChart,
} from "./aggregateHelpers.mjs";
import { import {
calculateMinimumObservationValuesWithinInterval, calculateMinimumObservationValuesWithinInterval,
...@@ -40,7 +41,7 @@ const calculateAndFormatDailySumObservations = function ( ...@@ -40,7 +41,7 @@ const calculateAndFormatDailySumObservations = function (
// Format the observations // Format the observations
const formattedObservationsSumDailyNestedArr = const formattedObservationsSumDailyNestedArr =
observationsSumDailyNestedArr.map((obsSumDailyArr, i) => observationsSumDailyNestedArr.map((obsSumDailyArr, i) =>
formatAggregationResultForColumnChart( formatAggregationResultForChart(
uniqueCalendarDatesNestedArr[i], uniqueCalendarDatesNestedArr[i],
obsSumDailyArr obsSumDailyArr
) )
...@@ -94,7 +95,7 @@ const calculateAndFormatMonthlySumObservations = function ( ...@@ -94,7 +95,7 @@ const calculateAndFormatMonthlySumObservations = function (
// Format the observations // Format the observations
const formattedObservationsSumMonthlyNestedArr = const formattedObservationsSumMonthlyNestedArr =
observationsSumMonthlyNestedArr.map((obsSumMonthlyArr, i) => observationsSumMonthlyNestedArr.map((obsSumMonthlyArr, i) =>
formatAggregationResultForColumnChart( formatAggregationResultForChart(
uniqueCalendarMonthsNestedArr[i], uniqueCalendarMonthsNestedArr[i],
obsSumMonthlyArr obsSumMonthlyArr
) )
...@@ -142,7 +143,7 @@ const calculateAndFormatDailyMaximumObservations = function ( ...@@ -142,7 +143,7 @@ const calculateAndFormatDailyMaximumObservations = function (
// Format the observations // Format the observations
const formattedObservationsMaximumDailyNestedArr = const formattedObservationsMaximumDailyNestedArr =
observationsMaximumDailyNestedArr.map((obsMinDailyArr, i) => observationsMaximumDailyNestedArr.map((obsMinDailyArr, i) =>
formatAggregationResultForColumnChart( formatAggregationResultForChart(
uniqueCalendarDatesNestedArr[i], uniqueCalendarDatesNestedArr[i],
obsMinDailyArr obsMinDailyArr
) )
...@@ -196,7 +197,7 @@ const calculateAndFormatMonthlyMaximumObservations = function ( ...@@ -196,7 +197,7 @@ const calculateAndFormatMonthlyMaximumObservations = function (
// Format the observations // Format the observations
const formattedObservationsMaximumMonthlyNestedArr = const formattedObservationsMaximumMonthlyNestedArr =
observationsMaximumMonthlyNestedArr.map((obsMaxMonthlyArr, i) => observationsMaximumMonthlyNestedArr.map((obsMaxMonthlyArr, i) =>
formatAggregationResultForColumnChart( formatAggregationResultForChart(
uniqueCalendarMonthsNestedArr[i], uniqueCalendarMonthsNestedArr[i],
obsMaxMonthlyArr obsMaxMonthlyArr
) )
...@@ -244,7 +245,7 @@ const calculateAndFormatDailyMinimumObservations = function ( ...@@ -244,7 +245,7 @@ const calculateAndFormatDailyMinimumObservations = function (
// Format the observations // Format the observations
const formattedObservationsMinimumDailyNestedArr = const formattedObservationsMinimumDailyNestedArr =
observationsMinimumDailyNestedArr.map((obsMinDailyArr, i) => observationsMinimumDailyNestedArr.map((obsMinDailyArr, i) =>
formatAggregationResultForColumnChart( formatAggregationResultForChart(
uniqueCalendarDatesNestedArr[i], uniqueCalendarDatesNestedArr[i],
obsMinDailyArr obsMinDailyArr
) )
...@@ -298,7 +299,7 @@ const calculateAndFormatMonthlyMinimumObservations = function ( ...@@ -298,7 +299,7 @@ const calculateAndFormatMonthlyMinimumObservations = function (
// Format the observations // Format the observations
const formattedObservationsMinimumMonthlyNestedArr = const formattedObservationsMinimumMonthlyNestedArr =
observationsMinimumMonthlyNestedArr.map((obsMinMonthlyArr, i) => observationsMinimumMonthlyNestedArr.map((obsMinMonthlyArr, i) =>
formatAggregationResultForColumnChart( formatAggregationResultForChart(
uniqueCalendarMonthsNestedArr[i], uniqueCalendarMonthsNestedArr[i],
obsMinMonthlyArr obsMinMonthlyArr
) )
...@@ -346,7 +347,7 @@ const calculateAndFormatDailyAverageObservations = function ( ...@@ -346,7 +347,7 @@ const calculateAndFormatDailyAverageObservations = function (
// Format the observations // Format the observations
const formattedObservationsAverageDailyNestedArr = const formattedObservationsAverageDailyNestedArr =
observationsAverageDailyNestedArr.map((obsAverageDailyArr, i) => observationsAverageDailyNestedArr.map((obsAverageDailyArr, i) =>
formatAggregationResultForColumnChart( formatAggregationResultForChart(
uniqueCalendarDatesNestedArr[i], uniqueCalendarDatesNestedArr[i],
obsAverageDailyArr obsAverageDailyArr
) )
...@@ -400,7 +401,7 @@ const calculateAndFormatMonthlyAverageObservations = function ( ...@@ -400,7 +401,7 @@ const calculateAndFormatMonthlyAverageObservations = function (
// Format the observations // Format the observations
const formattedObservationsAverageMonthlyNestedArr = const formattedObservationsAverageMonthlyNestedArr =
observationsAverageMonthlyNestedArr.map((obsAverageMonthlyArr, i) => observationsAverageMonthlyNestedArr.map((obsAverageMonthlyArr, i) =>
formatAggregationResultForColumnChart( formatAggregationResultForChart(
uniqueCalendarMonthsNestedArr[i], uniqueCalendarMonthsNestedArr[i],
obsAverageMonthlyArr obsAverageMonthlyArr
) )
......
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