Commit 716ef393 authored by Pithon Kabiro's avatar Pithon Kabiro
Browse files

Export chart drawing functions for use in Cesium app

parent 268a2bbc
"use strict"; "use strict";
// Functions
import {
getDatastreamIdFromBuildingNumber,
getObservationsUrl,
createTemporalFilterString,
formatSTAResponseForHeatMap,
drawHeatMapHC,
formatSTAResponseForLineChart,
drawLineChartHC,
followNextLink,
} from "./appChart.js";
// Constants
import {
BASE_URL,
PARAM_RESULT_FORMAT,
PARAM_ORDER_BY,
PARAM_SELECT,
} from "./appChart.js";
Cesium.Ion.defaultAccessToken = Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyODgxYzJlNi1kNDZiLTQ3ZmQtYmUxYy0yMWI0OGM3NDA5MzAiLCJpZCI6NDczOSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MTUyMzU0MX0.shj2hM3pvsvcmE_wMb2aBDuk_cKWmFmbolltInGImwU"; "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyODgxYzJlNi1kNDZiLTQ3ZmQtYmUxYy0yMWI0OGM3NDA5MzAiLCJpZCI6NDczOSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MTUyMzU0MX0.shj2hM3pvsvcmE_wMb2aBDuk_cKWmFmbolltInGImwU";
...@@ -269,6 +289,57 @@ const activate3DTileFeaturePicking = function () { ...@@ -269,6 +289,57 @@ const activate3DTileFeaturePicking = function () {
</tbody> </tbody>
</table> </table>
`; `;
const clickedBuilding = pickedFeature.getProperty("_gebaeude");
const clickedBuildingDatastreamId = getDatastreamIdFromBuildingNumber(
clickedBuilding,
"vl",
"60min"
);
const BASE_URL_OBSERVATIONS = getObservationsUrl(
BASE_URL,
clickedBuildingDatastreamId
);
const PARAM_FILTER = createTemporalFilterString("2020-01-01", "2021-01-01");
const axiosGetRequest = axios.get(BASE_URL_OBSERVATIONS, {
params: {
"$resultFormat": PARAM_RESULT_FORMAT,
"$orderBy": PARAM_ORDER_BY,
"$filter": PARAM_FILTER,
"$select": PARAM_SELECT,
},
});
// Get "ALL" the Observations that satisfy our query
followNextLink(axiosGetRequest)
.then((success) => {
const successValue = success.data.value;
// Array that will hold the combined observations
const combinedObservations = [];
successValue.forEach((dataObj) => {
// Each page of results will have a dataArray that holds the observations
const dataArrays = dataObj.dataArray;
combinedObservations.push(...dataArrays);
});
// DEBUG: Check total number of observations
console.log(combinedObservations.length);
// DEBUG: Print the array of observations
console.log(combinedObservations);
return combinedObservations;
})
.catch((err) => {
console.log(err);
})
.then((observationArr) => {
drawHeatMapHC(formatSTAResponseForHeatMap(observationArr));
drawLineChartHC(formatSTAResponseForLineChart(observationArr));
});
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}; };
......
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
// Observations WITHOUT data gap - Bau 225 / Datastream ID = 80 // Observations WITHOUT data gap - Bau 225 / Datastream ID = 80
// Observations WITH data gap - Bau 112 / Datastream ID = 78 // Observations WITH data gap - Bau 112 / Datastream ID = 78
const BASE_URL = "http://193.196.39.91:8080/frost-icity-tp31/v1.1"; export const BASE_URL = "http://193.196.39.91:8080/frost-icity-tp31/v1.1";
const getDatastreamIdFromBuildingNumber = function ( export const getDatastreamIdFromBuildingNumber = function (
buildingNumber, buildingNumber,
phenomenon, phenomenon,
samplingRate samplingRate
...@@ -77,9 +77,9 @@ const getDatastreamIdFromBuildingNumber = function ( ...@@ -77,9 +77,9 @@ const getDatastreamIdFromBuildingNumber = function (
* @param {Number} datastreamID - Integer representing the Datastream ID * @param {Number} datastreamID - Integer representing the Datastream ID
* @returns {String} URL string for fetching the Observations corresponding to a Datastream * @returns {String} URL string for fetching the Observations corresponding to a Datastream
*/ */
const getObservationsUrl = function (datastreamID) { export const getObservationsUrl = function (baseUrl, datastreamID) {
if (!datastreamID) return; if (!datastreamID) return;
const fullDatastreamURL = `${BASE_URL}/Datastreams(${datastreamID})/Observations`; const fullDatastreamURL = `${baseUrl}/Datastreams(${datastreamID})/Observations`;
return fullDatastreamURL; return fullDatastreamURL;
}; };
...@@ -89,33 +89,33 @@ const getObservationsUrl = function (datastreamID) { ...@@ -89,33 +89,33 @@ const getObservationsUrl = function (datastreamID) {
* @param {String} dateStop Stop date in YYYY-MM-DD format * @param {String} dateStop Stop date in YYYY-MM-DD format
* @returns {String} Temporal filter string * @returns {String} Temporal filter string
*/ */
const createTemporalFilterString = function (dateStart, dateStop) { export 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`; const filterString = `resultTime ge ${dateStart}T00:00:00.000Z and resultTime le ${dateStop}T00:00:00.000Z`;
return filterString; return filterString;
}; };
const BASE_URL_OBSERVATIONS = getObservationsUrl(80); // const BASE_URL_OBSERVATIONS = getObservationsUrl(80);
const PARAM_RESULT_FORMAT = "dataArray"; export const PARAM_RESULT_FORMAT = "dataArray";
const PARAM_ORDER_BY = "phenomenonTime asc"; export const PARAM_ORDER_BY = "phenomenonTime asc";
const PARAM_FILTER = createTemporalFilterString("2020-01-01", "2021-01-01"); // const PARAM_FILTER = createTemporalFilterString("2020-01-01", "2021-01-01");
const PARAM_SELECT = "result,phenomenonTime"; export const PARAM_SELECT = "result,phenomenonTime";
const axiosGetRequest = axios.get(BASE_URL_OBSERVATIONS, { // const axiosGetRequest = axios.get(BASE_URL_OBSERVATIONS, {
params: { // params: {
"$resultFormat": PARAM_RESULT_FORMAT, // "$resultFormat": PARAM_RESULT_FORMAT,
"$orderBy": PARAM_ORDER_BY, // "$orderBy": PARAM_ORDER_BY,
"$filter": PARAM_FILTER, // "$filter": PARAM_FILTER,
"$select": PARAM_SELECT, // "$select": PARAM_SELECT,
}, // },
}); // });
/** /**
* Format the response from SensorThings API to make it suitable for heatmap * Format the response from SensorThings API to make it suitable for heatmap
* @param {Array} obsArray Response from SensorThings API as array * @param {Array} obsArray Response from SensorThings API as array
* @returns {Array} Array of formatted observations suitable for use in a heatmap * @returns {Array} Array of formatted observations suitable for use in a heatmap
*/ */
const formatSTAResponseForHeatMap = function (obsArray) { export const formatSTAResponseForHeatMap = function (obsArray) {
const dataSTAFormatted = []; const dataSTAFormatted = [];
obsArray.forEach((obs) => { obsArray.forEach((obs) => {
// Get the date/time string; first element in input array; remove trailing "Z" // Get the date/time string; first element in input array; remove trailing "Z"
...@@ -141,7 +141,7 @@ const formatSTAResponseForHeatMap = function (obsArray) { ...@@ -141,7 +141,7 @@ const formatSTAResponseForHeatMap = function (obsArray) {
* @param {Array} obsArray Response from SensorThings API * @param {Array} obsArray Response from SensorThings API
* @returns {Object} Highcharts library heatmap object * @returns {Object} Highcharts library heatmap object
*/ */
const drawHeatMapHC = function (obsArray) { export const drawHeatMapHC = function (formattedObsArrayForHeatmap) {
Highcharts.chart("chart-heatmap", { Highcharts.chart("chart-heatmap", {
chart: { chart: {
type: "heatmap", type: "heatmap",
...@@ -215,7 +215,7 @@ const drawHeatMapHC = function (obsArray) { ...@@ -215,7 +215,7 @@ const drawHeatMapHC = function (obsArray) {
series: [ series: [
{ {
data: formatSTAResponseForHeatMap(obsArray), data: formattedObsArrayForHeatmap,
boostThreshold: 100, boostThreshold: 100,
borderWidth: 0, borderWidth: 0,
nullColor: "#525252", nullColor: "#525252",
...@@ -236,7 +236,7 @@ const drawHeatMapHC = function (obsArray) { ...@@ -236,7 +236,7 @@ const drawHeatMapHC = function (obsArray) {
* @param {Array} obsArray Response from SensorThings API as array * @param {Array} obsArray Response from SensorThings API as array
* @returns {Array} Array of formatted observations suitable for use in a line chart * @returns {Array} Array of formatted observations suitable for use in a line chart
*/ */
const formatSTAResponseForLineChart = function (obsArray) { export const formatSTAResponseForLineChart = function (obsArray) {
const dataSTAFormatted = []; const dataSTAFormatted = [];
obsArray.forEach((result) => { obsArray.forEach((result) => {
const timestampObs = new Date(result[0].slice(0, -1)).getTime(); // slice() removes trailing "Z" character in timestamp const timestampObs = new Date(result[0].slice(0, -1)).getTime(); // slice() removes trailing "Z" character in timestamp
...@@ -251,7 +251,7 @@ const formatSTAResponseForLineChart = function (obsArray) { ...@@ -251,7 +251,7 @@ const formatSTAResponseForLineChart = function (obsArray) {
* @param {Array} obsArray - Response from SensorThings API * @param {Array} obsArray - Response from SensorThings API
* @returns {Object} Highcharts library line chart object * @returns {Object} Highcharts library line chart object
*/ */
const drawLineChartHC = function (obsArray) { export const drawLineChartHC = function (formattedObsArrayForLineChart) {
// Create the chart // Create the chart
Highcharts.stockChart("chart-line", { Highcharts.stockChart("chart-line", {
chart: { chart: {
...@@ -269,7 +269,7 @@ const drawLineChartHC = function (obsArray) { ...@@ -269,7 +269,7 @@ const drawLineChartHC = function (obsArray) {
series: [ series: [
{ {
name: "AAPL", name: "AAPL",
data: formatSTAResponseForLineChart(obsArray), data: formattedObsArrayForLineChart,
tooltip: { tooltip: {
valueDecimals: 2, valueDecimals: 2,
}, },
...@@ -286,7 +286,7 @@ const drawLineChartHC = function (obsArray) { ...@@ -286,7 +286,7 @@ const drawLineChartHC = function (obsArray) {
* @param {Object} responsePromise Promise object * @param {Object} responsePromise Promise object
* @returns {Object} - Object containing results from all the "@iot.nextLink" links * @returns {Object} - Object containing results from all the "@iot.nextLink" links
*/ */
const followNextLink = function (responsePromise) { export const followNextLink = function (responsePromise) {
return responsePromise return responsePromise
.then(function (lastSuccess) { .then(function (lastSuccess) {
if (lastSuccess.data["@iot.nextLink"]) { if (lastSuccess.data["@iot.nextLink"]) {
...@@ -308,30 +308,30 @@ const followNextLink = function (responsePromise) { ...@@ -308,30 +308,30 @@ const followNextLink = function (responsePromise) {
}; };
// Get "ALL" the Observations that satisfy our query // Get "ALL" the Observations that satisfy our query
followNextLink(axiosGetRequest) // followNextLink(axiosGetRequest)
.then((success) => { // .then((success) => {
const successValue = success.data.value; // const successValue = success.data.value;
// Array that will hold the combined observations // // Array that will hold the combined observations
const combinedObservations = []; // const combinedObservations = [];
successValue.forEach((dataObj) => { // successValue.forEach((dataObj) => {
// Each page of results will have a dataArray that holds the observations // // Each page of results will have a dataArray that holds the observations
const dataArrays = dataObj.dataArray; // const dataArrays = dataObj.dataArray;
combinedObservations.push(...dataArrays); // combinedObservations.push(...dataArrays);
}); // });
// DEBUG: Check total number of observations // // DEBUG: Check total number of observations
console.log(combinedObservations.length); // console.log(combinedObservations.length);
// DEBUG: Print the array of observations // // DEBUG: Print the array of observations
console.log(combinedObservations); // console.log(combinedObservations);
return combinedObservations; // return combinedObservations;
}) // })
.catch((err) => { // .catch((err) => {
console.log(err); // console.log(err);
}) // })
.then((observationArr) => { // .then((observationArr) => {
drawHeatMapHC(observationArr); // drawHeatMapHC(observationArr);
drawLineChartHC(observationArr); // drawLineChartHC(observationArr);
}); // });
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