diff --git a/public/js/appChart.js b/public/js/appChart.js index 7e4047912e90616217ea8c1945d8709cf9b7bfa4..f1a1d08b8f1aae01a0b9b239fa1ce0b31f4252d8 100644 --- a/public/js/appChart.js +++ b/public/js/appChart.js @@ -19,36 +19,37 @@ const PARAM_FILTER2 = "resultTime ge 2020-06-01T00:00:00.000Z and resultTime le 2021-01-01T00:00:00.000Z"; /** - * Draw a heatmap using Highcharts library + * Format the response from SensorThings API to make it suitable for heatmap * @param {*} obsArray - Response from SensorThings API as array + * @returns {Array} + */ +const formatSTAResponseForHeatMap = function (obsArray) { + const dataSTAFormatted = []; + obsArray.forEach((obs) => { + // Get the date/time string; first element in input array; remove trailing "Z" + const obsDateTimeInput = obs[0].slice(0, -1); + // Get the "date" part of an observation + const obsDateInput = obs[0].slice(0, 10); + // Create Date objects + const obsDateTime = new Date(obsDateTimeInput); + const obsDate = new Date(obsDateInput); + // x-axis -> timestamp; will be the same for observations from the same date + const timestamp = Date.parse(obsDate); + // y-axis -> hourOfDay + const hourOfDay = obsDateTime.getHours(); + // value -> the observation's value; second element in input array + const value = obs[1]; + dataSTAFormatted.push([timestamp, hourOfDay, value]); + }); + return dataSTAFormatted; +}; + +/** + * Draw a heatmap using Highcharts library + * @param {*} obsArray - Response from SensorThings API * @returns {void} */ const drawHeatMapHC = function (obsArray) { - /** - * Format the response from SensorThings API to make it suitable for heatmap - * @returns {Array} - */ - const formatSTAResponseForHeatMap = function () { - const dataSTAFormatted = []; - obsArray.forEach((obs) => { - // Get the date/time string; first element in input array; remove trailing "Z" - const obsDateTimeInput = obs[0].slice(0, -1); - // Get the "date" part of an observation - const obsDateInput = obs[0].slice(0, 10); - // Create Date objects - const obsDateTime = new Date(obsDateTimeInput); - const obsDate = new Date(obsDateInput); - // x-axis -> timestamp; will be the same for observations from the same date - const timestamp = Date.parse(obsDate); - // y-axis -> hourOfDay - const hourOfDay = obsDateTime.getHours(); - // value -> the observation's value; second element in input array - const value = obs[1]; - dataSTAFormatted.push([timestamp, hourOfDay, value]); - }); - return dataSTAFormatted; - }; - Highcharts.chart("chart-heatmap", { chart: { type: "heatmap", @@ -122,7 +123,7 @@ const drawHeatMapHC = function (obsArray) { series: [ { - data: formatSTAResponseForHeatMap(), + data: formatSTAResponseForHeatMap(obsArray), boostThreshold: 100, borderWidth: 0, nullColor: "#525252", @@ -200,6 +201,5 @@ followNextLink( console.log(err); }) .then((observationArr) => { - // drawHeatMapAC2(observationArr); drawHeatMapHC(observationArr); });