Skip to content

GitLab

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

Draw multiple series on same line chart

parent 6e518409
Hide whitespace changes
Inline Side-by-side
public/js/aggregate.js
View file @ cc82b8a6
...@@ -3,10 +3,7 @@ ...@@ -3,10 +3,7 @@
import { import {
BASE_URL, BASE_URL,
QUERY_PARAMS_COMBINED, QUERY_PARAMS_COMBINED,
getDatastreamIdFromBuildingNumber, getMetadataPlusObservationsFromSingleOrMultipleDatastreams,
createObservationsUrl,
performGetRequestUsingAxios,
extractCombinedObservationsFromAllPages,
} from "./appChart.js"; } from "./appChart.js";
/** /**
...@@ -135,28 +132,23 @@ const aggregateObservationsWithinTimeInterval = function ( ...@@ -135,28 +132,23 @@ const aggregateObservationsWithinTimeInterval = function (
* Test aggregation of observations from a single datastream * Test aggregation of observations from a single datastream
*/ */
const testAggregation = async function () { const testAggregation = async function () {
// Datastream ID const sensorOfInterestNestedArr = [["225", "vl", "60min"]];
const datastreamIdBau225VL = getDatastreamIdFromBuildingNumber(
"225",
"vl",
"60min"
);
// Observations URL const observationsPlusMetadata =
const observationsUrlBau225VL = createObservationsUrl( await getMetadataPlusObservationsFromSingleOrMultipleDatastreams(
BASE_URL, BASE_URL,
datastreamIdBau225VL QUERY_PARAMS_COMBINED,
); sensorOfInterestNestedArr
);
// Observations array // Extract the observations and metadata for each sensor
const observationsBau225VL = await extractCombinedObservationsFromAllPages( // Array elements in same order as input array
performGetRequestUsingAxios(observationsUrlBau225VL, QUERY_PARAMS_COMBINED) const [[obsSensorOneArr], [metadataSensorOne]] = observationsPlusMetadata;
);
// Aggregated observations // Aggregated observations
const observationsBau225VLAggregated = const observationsBau225VLAggregated =
aggregateObservationsWithinTimeInterval( aggregateObservationsWithinTimeInterval(
observationsBau225VL, obsSensorOneArr,
"60 min", "60 min",
"2020-02-01", "2020-02-01",
"2020-03-31" "2020-03-31"
......
public/js/appChart.js
View file @ cc82b8a6
...@@ -91,11 +91,9 @@ const getDatastreamIdFromBuildingNumber = function ( ...@@ -91,11 +91,9 @@ const getDatastreamIdFromBuildingNumber = function (
) )
return; return;
const datastreamIdMatched = Number( return Number(
buildingToDatastreamMapping[buildingNumber][phenomenon][samplingRate] buildingToDatastreamMapping[buildingNumber][phenomenon][samplingRate]
); );
return datastreamIdMatched;
}; };
/** /**
...@@ -106,8 +104,7 @@ const getDatastreamIdFromBuildingNumber = function ( ...@@ -106,8 +104,7 @@ const getDatastreamIdFromBuildingNumber = function (
*/ */
const createDatastreamUrl = function (baseUrl, datastreamID) { const createDatastreamUrl = function (baseUrl, datastreamID) {
if (!datastreamID) return; if (!datastreamID) return;
const fullDatastreamURL = `${baseUrl}/Datastreams(${datastreamID})`; return `${baseUrl}/Datastreams(${datastreamID})`;
return fullDatastreamURL;
}; };
/** /**
...@@ -118,8 +115,7 @@ const createDatastreamUrl = function (baseUrl, datastreamID) { ...@@ -118,8 +115,7 @@ const createDatastreamUrl = function (baseUrl, datastreamID) {
*/ */
const createObservationsUrl = function (baseUrl, datastreamID) { const createObservationsUrl = function (baseUrl, datastreamID) {
if (!datastreamID) return; if (!datastreamID) return;
const fullObservationsURL = `${baseUrl}/Datastreams(${datastreamID})/Observations`; return `${baseUrl}/Datastreams(${datastreamID})/Observations`;
return fullObservationsURL;
}; };
/** /**
...@@ -130,23 +126,33 @@ const createObservationsUrl = function (baseUrl, datastreamID) { ...@@ -130,23 +126,33 @@ const createObservationsUrl = function (baseUrl, datastreamID) {
*/ */
const createTemporalFilterString = function (dateStart, dateStop) { const createTemporalFilterString = function (dateStart, dateStop) {
if (!dateStart || !dateStop) return; if (!dateStart || !dateStop) return;
const filterString = `resultTime ge ${dateStart}T00:00:00.000Z and resultTime le ${dateStop}T00:00:00.000Z`; return `resultTime ge ${dateStart}T00:00:00.000Z and resultTime le ${dateStop}T00:00:00.000Z`;
return filterString; };
/**
* Create a query parameter object that should be sent together with a HTTP GET request using the Axios library
* @param {String} dateStart Start date (for temporal filter) in YYYY-MM-DD format
* @param {String} dateStop Stop date (for temporal filter) in YYYY-MM-DD format
* @returns {Object} A query parameter object
*/
const createUrlParametersForGetRequest = function (dateStart, dateStop) {
const QUERY_PARAM_RESULT_FORMAT = "dataArray";
const QUERY_PARAM_ORDER_BY = "phenomenonTime asc";
const QUERY_PARAM_FILTER = createTemporalFilterString(dateStart, dateStop);
const QUERY_PARAM_SELECT = "result,phenomenonTime";
return {
"$resultFormat": QUERY_PARAM_RESULT_FORMAT,
"$orderBy": QUERY_PARAM_ORDER_BY,
"$filter": QUERY_PARAM_FILTER,
"$select": QUERY_PARAM_SELECT,
};
}; };
const QUERY_PARAM_RESULT_FORMAT = "dataArray"; const QUERY_PARAMS_COMBINED = createUrlParametersForGetRequest(
const QUERY_PARAM_ORDER_BY = "phenomenonTime asc";
const QUERY_PARAM_FILTER = createTemporalFilterString(
"2020-01-01", "2020-01-01",
"2021-01-01" "2021-01-01"
); );
const QUERY_PARAM_SELECT = "result,phenomenonTime";
const QUERY_PARAMS_COMBINED = {
"$resultFormat": QUERY_PARAM_RESULT_FORMAT,
"$orderBy": QUERY_PARAM_ORDER_BY,
"$filter": QUERY_PARAM_FILTER,
"$select": QUERY_PARAM_SELECT,
};
/** /**
* Perform a GET request using the Axios library * Perform a GET request using the Axios library
...@@ -446,22 +452,113 @@ const formatSensorThingsApiResponseForLineChart = function (obsArray) { ...@@ -446,22 +452,113 @@ const formatSensorThingsApiResponseForLineChart = function (obsArray) {
return dataSTAFormatted; return dataSTAFormatted;
}; };
/**
* Extract the properties that make up the formatted datastream metadata object(s)
* @param {Array} formattedDatastreamsMetadataArr An array of formatted metadata object(s) from one or more datastreams
* @returns {Object} An object that contains array(s) of formatted datastream metadata properties
*/
const extractPropertiesFromDatastreamMetadata = function (
formattedDatastreamsMetadataArr
) {
// Create arrays from the properties of the formatted datastream metadata
const datastreamDescriptionsArr = formattedDatastreamsMetadataArr.map(
(datastreamMetadata) => datastreamMetadata.datastreamDescription
);
const datastreamNamesArr = formattedDatastreamsMetadataArr.map(
(datastreamMetadata) => datastreamMetadata.datastreamName
);
const phenomenonNamesArr = formattedDatastreamsMetadataArr.map(
(datastreamMetadata) => datastreamMetadata.phenomenonName
);
const unitOfMeasurementSymbolsArr = formattedDatastreamsMetadataArr.map(
(datastreamMetadata) => datastreamMetadata.unitOfMeasurementSymbol
);
return {
datastreamDescriptionsArr,
datastreamNamesArr,
phenomenonNamesArr,
unitOfMeasurementSymbolsArr,
};
};
/**
* Extracts the sampling rate substring from a datastream name string
* @param {Array} datastreamNamesArr An array of datastream name(s)
* @returns {Array} An array containing the sampling rate substring(s)
*/
const extractSamplingRateFromDatastreamName = function (datastreamNamesArr) {
// The sampling rate string is the last word in the Datastream name string
return datastreamNamesArr.map((datastreamName) =>
datastreamName.split(" ").pop()
);
};
/**
* Concatenates metadata properties to create a string for either the title or subtitle of a line chart
* @param {Array} datastreamMetadataPropArr An array of metadata property strings
* @returns {String} A string of comma separated metadata property strings
*/
const createCombinedTextForLineChartTitles = function (
datastreamMetadataPropArr
) {
return datastreamMetadataPropArr.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
* @param {Array} phenomenonNamesArr An array of phenomenon name(s)
* @param {Array} phenomenonSymbolsArr An array of phenomenon symbol(s)
* @returns {Array} An array made up of series options object(s)
*/
const createSeriesOptionsForLineChart = function (
formattedObsArraysForLineChart,
phenomenonNamesArr,
phenomenonSymbolsArr
) {
// An array of colors provided by the Highcharts object
const seriesColors = Highcharts.getOptions().colors;
// Create an array of seriesOptions objects
// Assumes that the observation array of arrays, phenomenon names array and phenomenon symbols array are of equal length
// Use one of the arrays for looping
return formattedObsArraysForLineChart.map((formattedObsArray, i) => {
return {
name: `${phenomenonNamesArr[i]} (${phenomenonSymbolsArr[i]})`,
data: formattedObsArray,
color: seriesColors[i],
turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release
};
});
};
/** /**
* Draw a line chart using Highcharts library * Draw a line chart using Highcharts library
* @param {Array} formattedObsArrayForLineChart Response from SensorThings API formatted 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
* @param {Object} formattedDatastreamMetadata Object containing Datastream metadata * @param {Object} formattedDatastreamMetadataArr An array made up of object(s) containing Datastream metadata
* @returns {undefined} undefined * @returns {undefined} undefined
*/ */
const drawLineChartHighcharts = function ( const drawLineChartHighcharts = function (
formattedObsArrayForLineChart, formattedObsArraysForLineChart,
formattedDatastreamMetadata formattedDatastreamMetadataArr
) { ) {
// Arrays of datastream properties
const { const {
datastreamDescription: DATASTREAM_DESCRIPTION, datastreamNamesArr,
datastreamName: DATASTREAM_NAME, phenomenonNamesArr,
phenomenonName: PHENOMENON_NAME, unitOfMeasurementSymbolsArr,
unitOfMeasurementSymbol: PHENOMENON_SYMBOL, } = extractPropertiesFromDatastreamMetadata(formattedDatastreamMetadataArr);
} = formattedDatastreamMetadata;
// Create the array of series options object(s)
const seriesOptionsArr = createSeriesOptionsForLineChart(
formattedObsArraysForLineChart,
phenomenonNamesArr,
unitOfMeasurementSymbolsArr
);
Highcharts.stockChart("chart-line", { Highcharts.stockChart("chart-line", {
chart: { chart: {
...@@ -473,25 +570,24 @@ const drawLineChartHighcharts = function ( ...@@ -473,25 +570,24 @@ const drawLineChartHighcharts = function (
}, },
title: { title: {
text: DATASTREAM_DESCRIPTION, text: createCombinedTextForLineChartTitles(phenomenonNamesArr),
"align": "left", "align": "left",
}, },
subtitle: { subtitle: {
text: DATASTREAM_NAME, text: `Sampling rate(s): ${createCombinedTextForLineChartTitles(
extractSamplingRateFromDatastreamName(datastreamNamesArr)
)}`,
align: "left", align: "left",
}, },
series: [ tooltip: {
{ pointFormat:
name: `${PHENOMENON_NAME} (${PHENOMENON_SYMBOL})`, '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',
data: formattedObsArrayForLineChart, valueDecimals: 2,
tooltip: { },
valueDecimals: 2,
}, series: seriesOptionsArr,
turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release
},
],
}); });
}; };
...@@ -670,7 +766,7 @@ const checkForAndDeleteUniqueObservationsFromLargerArray = function ( ...@@ -670,7 +766,7 @@ const checkForAndDeleteUniqueObservationsFromLargerArray = function (
* Extracts and combines observation values from two input observation arrays of equal length * Extracts and combines observation values from two input observation arrays of equal length
* @param {Array} obsArrayOne First set of N observations (timestamp + value) * @param {Array} obsArrayOne First set of N observations (timestamp + value)
* @param {Array} obsArrayTwo Second set of N observations (timestamp + value) * @param {Array} obsArrayTwo Second set of N observations (timestamp + value)
* @returns {Array} A 2*N array of observation values from both input observation arrays * @returns {Array} A N*2 array of observation values from both input observation arrays
*/ */
const createCombinedObservationValues = function (obsArrayOne, obsArrayTwo) { const createCombinedObservationValues = function (obsArrayOne, obsArrayTwo) {
// Extract the values from the two observation arrays // Extract the values from the two observation arrays
...@@ -712,9 +808,9 @@ const formatSensorThingsApiResponseForScatterPlot = function ( ...@@ -712,9 +808,9 @@ const formatSensorThingsApiResponseForScatterPlot = function (
/** /**
* Draw a scatter plot using Highcharts library * Draw a scatter plot using Highcharts library
* @param {*} formattedObsArrayForSeriesOnePlusSeriesTwo Response from SensorThings API formatted for use in a scatter plot * @param {Array} formattedObsArrayForSeriesOnePlusSeriesTwo Response from SensorThings API formatted for use in a scatter plot
* @param {*} formattedDatastreamMetadataSeriesOne Object containing Datastream metadata for the first chart series * @param {Object} formattedDatastreamMetadataSeriesOne Object containing Datastream metadata for the first chart series
* @param {*} formattedDatastreamMetadataSeriesTwo Object containing Datastream metadata for the second chart series * @param {Object} formattedDatastreamMetadataSeriesTwo Object containing Datastream metadata for the second chart series
* @returns {undefined} * @returns {undefined}
*/ */
const drawScatterPlotHighcharts = function ( const drawScatterPlotHighcharts = function (
...@@ -849,10 +945,15 @@ const combineResultsFromAllPages = async function (httpGetRequestPromise) { ...@@ -849,10 +945,15 @@ const combineResultsFromAllPages = async function (httpGetRequestPromise) {
if (!httpGetRequestPromise) return; if (!httpGetRequestPromise) return;
const lastSuccess = await httpGetRequestPromise; const lastSuccess = await httpGetRequestPromise;
// The "success" objects contain a "data" object which in turn has a "value" property
// If the "data" object in turn has a "@iot.nextLink" property, then a next page exists
if (lastSuccess.data["@iot.nextLink"]) { if (lastSuccess.data["@iot.nextLink"]) {
const nextLinkSuccess = await combineResultsFromAllPages( const nextLinkSuccess = await combineResultsFromAllPages(
axios.get(lastSuccess.data["@iot.nextLink"]) axios.get(lastSuccess.data["@iot.nextLink"])
); );
// The "data" object in turn has a "value" property
// The "value" property's value is an array
nextLinkSuccess.data.value = lastSuccess.data.value.concat( nextLinkSuccess.data.value = lastSuccess.data.value.concat(
nextLinkSuccess.data.value nextLinkSuccess.data.value
); );
...@@ -902,32 +1003,6 @@ const extractCombinedObservationsFromAllPages = async function ( ...@@ -902,32 +1003,6 @@ const extractCombinedObservationsFromAllPages = async function (
} }
}; };
/**
* Retrieve the metadata for a Datastream as well as the Observations corresponding to it
* @async
* @param {Promise} metadataPlusObsPromiseArray An array that contains two promises, one for datastream metadata, the other for observations
* @returns {Promise} A promise that contains two arrays when fulfilled, one for datastream metadata and the other for observations
*/
const getMetadataPlusObservationsFromSingleDatastream = async function (
metadataPlusObsPromiseArray
) {
try {
// Array to store our final result
const combinedResolvedPromises = [];
// Use for/of loop - we need to maintain the order of execution of the async operations
for (const promise of metadataPlusObsPromiseArray) {
// Resolved value of a single promise
const resolvedPromise = await promise;
combinedResolvedPromises.push(resolvedPromise);
}
return combinedResolvedPromises;
} catch (err) {
console.error(err);
}
};
/** /**
* Retrieve all the Observations from an array of Observations promises * Retrieve all the Observations from an array of Observations promises
* @async * @async
...@@ -955,55 +1030,55 @@ const getObservationsFromMultipleDatastreams = async function ( ...@@ -955,55 +1030,55 @@ const getObservationsFromMultipleDatastreams = async function (
}; };
/** /**
* Retrieve the metadata from multiple Datastreams and the Observations corresponding to these Datastreams * Retrieve the metadata from a single Datastream or multiple Datastreams and the Observations corresponding to the Datastream(s)
* @async * @param {String} baseUrl Base URL of the STA server
* @param {Array} bldgSensorSamplingRateArr A 3*N array containing buildings, sensors & sampling rates as strings, e.g. ["101", "rl", "60min"] * @param {Object} urlParamObj The URL parameters to be sent together with the GET request
* @returns {Promise} A promise that contains a N*2 array (the first element is an array of Observations and the second element is an array of Datastream metadata objects) when fulfilled * @param {Array} bldgSensorSamplingRateArr A N*1 array (where N >= 1) containing a nested array of buildings, sensors & sampling rates as strings, i.e. [["101", "rl", "15min"]] or [["101", "rl", "15min"], ["102", "vl", "60min"]] or [["101", "rl", "15min"], ["102", "vl", "60min"], ["225", "vl", "60min"]], etc
* @returns {Promise} A promise that contains a 1*2 array (the first element is an array that contans N Observations arrays; and the second element is an array of N Datastream metadata objects) when fulfilled
*/ */
const getMetadataPlusObservationsFromMultipleDatastreams = async function ( const getMetadataPlusObservationsFromSingleOrMultipleDatastreams =
bldgSensorSamplingRateArr async function (baseUrl, urlParamObj, bldgSensorSamplingRateArr) {
) { try {
try { if (!bldgSensorSamplingRateArr) return;
if (!bldgSensorSamplingRateArr) return;
// Datastreams IDs
// Datastreams IDs const datastreamsIdsArr = bldgSensorSamplingRateArr.map(
const datastreamsIdsArr = bldgSensorSamplingRateArr.map( (bldgSensorSamplingRate) =>
(bldgSensorSamplingRate) => getDatastreamIdFromBuildingNumber(...bldgSensorSamplingRate)
getDatastreamIdFromBuildingNumber(...bldgSensorSamplingRate) );
);
// Observations URLs // Observations URLs
const observationsUrlArr = datastreamsIdsArr.map((datastreamId) => const observationsUrlArr = datastreamsIdsArr.map((datastreamId) =>
createObservationsUrl(BASE_URL, datastreamId) createObservationsUrl(baseUrl, datastreamId)
); );
// Datastreams URLs // Datastreams URLs
const datastreamsUrlArr = datastreamsIdsArr.map((datastreamId) => const datastreamsUrlArr = datastreamsIdsArr.map((datastreamId) =>
createDatastreamUrl(BASE_URL, datastreamId) createDatastreamUrl(baseUrl, datastreamId)
); );
// Promise objects - Observations // Promise objects - Observations
const observationsPromisesArr = observationsUrlArr.map((obsUrl) => const observationsPromisesArr = observationsUrlArr.map((obsUrl) =>
extractCombinedObservationsFromAllPages( extractCombinedObservationsFromAllPages(
performGetRequestUsingAxios(obsUrl, QUERY_PARAMS_COMBINED) performGetRequestUsingAxios(obsUrl, urlParamObj)
) )
); );
// Observations array // Observations array
const observationsArr = await getObservationsFromMultipleDatastreams( const observationsArr = await getObservationsFromMultipleDatastreams(
observationsPromisesArr observationsPromisesArr
); );
// Metadata array // Metadata array
const metadataArr = await getMetadataFromMultipleDatastreams( const metadataArr = await getMetadataFromMultipleDatastreams(
datastreamsUrlArr datastreamsUrlArr
); );
return [observationsArr, metadataArr]; return [observationsArr, metadataArr];
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} }
}; };
/** /**
* Calculates the temperature difference, dT, between Vorlauf temperature [VL] and Rücklauf temperature [RL] (i.e., dT = VL - RL) * Calculates the temperature difference, dT, between Vorlauf temperature [VL] and Rücklauf temperature [RL] (i.e., dT = VL - RL)
...@@ -1026,7 +1101,9 @@ const calculateVorlaufMinusRuecklaufTemperature = async function ( ...@@ -1026,7 +1101,9 @@ const calculateVorlaufMinusRuecklaufTemperature = async function (
const SAMPLING_RATE = samplingRate; const SAMPLING_RATE = samplingRate;
const observationsPlusMetadata = const observationsPlusMetadata =
await getMetadataPlusObservationsFromMultipleDatastreams( await getMetadataPlusObservationsFromSingleOrMultipleDatastreams(
BASE_URL,
QUERY_PARAMS_COMBINED,
bldgSensorSamplingRateArr bldgSensorSamplingRateArr
); );
...@@ -1116,46 +1193,75 @@ const drawScatterPlotHCTest2 = async function () { ...@@ -1116,46 +1193,75 @@ const drawScatterPlotHCTest2 = async function () {
]; ];
const observationsPlusMetadata = const observationsPlusMetadata =
await getMetadataPlusObservationsFromMultipleDatastreams( await getMetadataPlusObservationsFromSingleOrMultipleDatastreams(
BASE_URL,
QUERY_PARAMS_COMBINED,
sensorsOfInterestArr sensorsOfInterestArr
); );
// Extract the observations and metadata for each sensor // Extract the combined arrays for observations and metadata
// Array elements in same order as input array const [observationsArr, metadataArr] = observationsPlusMetadata;
const [
[obsSensorOneArr, obsSensorTwoArr], // Create formatted array(s) for observations
[metadataSensorOne, metadataSensorTwo], // This function expects two arguments, these are unpacked using the spread operator
] = observationsPlusMetadata; const formattedObsScatterPlotArr =
formatSensorThingsApiResponseForScatterPlot(...observationsArr);
// Create formatted array(s) for metadata
const formattedMetadataArr = metadataArr.map((metadata) =>
formatDatastreamMetadataForChart(metadata)
);
// This function expects three arguments, the second and third are unpacked using the spread operator
drawScatterPlotHighcharts( drawScatterPlotHighcharts(
formatSensorThingsApiResponseForScatterPlot( formattedObsScatterPlotArr,
obsSensorOneArr, ...formattedMetadataArr
obsSensorTwoArr );
), };
formatDatastreamMetadataForChart(metadataSensorOne),
formatDatastreamMetadataForChart(metadataSensorTwo) /**
* Test drawing of line chart with multiple series
*/
const testLineChartMultipleSeries = async function () {
const sensorsOfInterestArr = [
["225", "vl", "60min"],
["125", "rl", "60min"],
["weather_station_521", "outside_temp", "60min"],
];
const observationsPlusMetadata =
await getMetadataPlusObservationsFromSingleOrMultipleDatastreams(
BASE_URL,
QUERY_PARAMS_COMBINED,
sensorsOfInterestArr
);
// Extract the observations and metadata arrays
const [observationsArr, metadataArr] = observationsPlusMetadata;
// Format the observations and metadata
const formattedObservationsArr = observationsArr.map((observations) =>
formatSensorThingsApiResponseForLineChart(observations)
); );
const formattedMetadataArr = metadataArr.map((metadata) =>
formatDatastreamMetadataForChart(metadata)
);
drawLineChartHighcharts(formattedObservationsArr, formattedMetadataArr);
}; };
(async () => { // drawScatterPlotHCTest2();
// await drawScatterPlotHCTest2(); // drawHeatmapHCUsingTempDifference();
await drawHeatmapHCUsingTempDifference(); // testLineChartMultipleSeries()
})();
export { export {
BASE_URL, BASE_URL,
QUERY_PARAMS_COMBINED, QUERY_PARAMS_COMBINED,
getDatastreamIdFromBuildingNumber,
createDatastreamUrl,
createObservationsUrl,
createTemporalFilterString,
performGetRequestUsingAxios,
getMetadataFromSingleDatastream,
formatDatastreamMetadataForChart, formatDatastreamMetadataForChart,
formatSensorThingsApiResponseForHeatMap, formatSensorThingsApiResponseForHeatMap,
drawHeatMapHighcharts, drawHeatMapHighcharts,
formatSensorThingsApiResponseForLineChart, formatSensorThingsApiResponseForLineChart,
drawLineChartHighcharts, drawLineChartHighcharts,
extractCombinedObservationsFromAllPages, getMetadataPlusObservationsFromSingleOrMultipleDatastreams,
getMetadataPlusObservationsFromSingleDatastream,
}; };
public/js/dropDownList.js
View file @ cc82b8a6
...@@ -3,18 +3,12 @@ ...@@ -3,18 +3,12 @@
import { import {
BASE_URL, BASE_URL,
QUERY_PARAMS_COMBINED, QUERY_PARAMS_COMBINED,
getDatastreamIdFromBuildingNumber,
createDatastreamUrl,
createObservationsUrl,
performGetRequestUsingAxios,
getMetadataFromSingleDatastream,
formatDatastreamMetadataForChart, formatDatastreamMetadataForChart,
formatSensorThingsApiResponseForHeatMap, formatSensorThingsApiResponseForHeatMap,
drawHeatMapHighcharts, drawHeatMapHighcharts,
formatSensorThingsApiResponseForLineChart, formatSensorThingsApiResponseForLineChart,
drawLineChartHighcharts, drawLineChartHighcharts,
extractCombinedObservationsFromAllPages, getMetadataPlusObservationsFromSingleOrMultipleDatastreams,
getMetadataPlusObservationsFromSingleDatastream,
} from "./appChart.js"; } from "./appChart.js";
const buildingsAvailableSensorsArr = [ const buildingsAvailableSensorsArr = [
...@@ -268,13 +262,8 @@ const selectChartTypeFromDropDown = async function () { ...@@ -268,13 +262,8 @@ const selectChartTypeFromDropDown = async function () {
if (selectedOptions === undefined) return; if (selectedOptions === undefined) return;
const abbreviationsArr = getBuildingSensorSamplingRateAbbreviation( const selectedOptionsAbbreviationsArr =
...selectedOptions getBuildingSensorSamplingRateAbbreviation(...selectedOptions);
);
const selectedDatastream = getDatastreamIdFromBuildingNumber(
...abbreviationsArr
);
const selectedChartType = document.querySelector( const selectedChartType = document.querySelector(
"#drop-down--chart-type" "#drop-down--chart-type"
...@@ -285,40 +274,39 @@ const selectChartTypeFromDropDown = async function () { ...@@ -285,40 +274,39 @@ const selectChartTypeFromDropDown = async function () {
// Display the loading indicator // Display the loading indicator
showLoadingSpinner(); showLoadingSpinner();
const URL_DATASTREAM = createDatastreamUrl(BASE_URL, selectedDatastream); // The `getMetadataPlusObservationsFromSingleOrMultipleDatastreams` function expects a nested array structure
const URL_OBSERVATIONS = createObservationsUrl( const abbreviationsNestedArr = [selectedOptionsAbbreviationsArr];
BASE_URL,
selectedDatastream const observationsPlusMetadata =
); await getMetadataPlusObservationsFromSingleOrMultipleDatastreams(
BASE_URL,
QUERY_PARAMS_COMBINED,
abbreviationsNestedArr
);
// Create promises // Extract the combined arrays for observations and metadata
const promiseDatastreamMetadata = const [observationsArr, metadataArr] = observationsPlusMetadata;
getMetadataFromSingleDatastream(URL_DATASTREAM);
const promiseCombinedObservations = extractCombinedObservationsFromAllPages( // Create formatted array(s) for observations - line chart
performGetRequestUsingAxios(URL_OBSERVATIONS, QUERY_PARAMS_COMBINED) const formattedObsLineChartArr = observationsArr.map((observations) =>
formatSensorThingsApiResponseForLineChart(observations)
); );
// Pass promises to our async function // Create formatted array(s) for observations - heatmap
const metadataPlusObservations = const formattedObsHeatMapArr = observationsArr.map((observations) =>
await getMetadataPlusObservationsFromSingleDatastream([ formatSensorThingsApiResponseForHeatMap(observations)
promiseCombinedObservations, );
promiseDatastreamMetadata,
]);
// Extract the metadata and the observations from resulting array // Create formatted array(s) for metadata - same for both chart types
const combinedObs = metadataPlusObservations[0]; const formattedMetadataArr = metadataArr.map((metadata) =>
const datastreamMetadata = metadataPlusObservations[1]; formatDatastreamMetadataForChart(metadata)
);
if (selectedChartType === "Line") { if (selectedChartType === "Line") {
drawLineChartHighcharts( drawLineChartHighcharts(formattedObsLineChartArr, formattedMetadataArr);
formatSensorThingsApiResponseForLineChart(combinedObs),
formatDatastreamMetadataForChart(datastreamMetadata)
);
} else if (selectedChartType === "Heatmap") { } else if (selectedChartType === "Heatmap") {
drawHeatMapHighcharts( // First need to extract the nested arrays for the formatted observations and metadata
formatSensorThingsApiResponseForHeatMap(combinedObs), drawHeatMapHighcharts(...formattedObsHeatMapArr, ...formattedMetadataArr);
formatDatastreamMetadataForChart(datastreamMetadata)
);
} }
} catch (err) { } catch (err) {
console.error(err); console.error(err);
......
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

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal