Skip to content

GitLab

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

Export chart drawing functions for use in Cesium app

parent 268a2bbc
Hide whitespace changes
Inline Side-by-side
public/js/appCesium.js
View file @ 716ef393
"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 =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyODgxYzJlNi1kNDZiLTQ3ZmQtYmUxYy0yMWI0OGM3NDA5MzAiLCJpZCI6NDczOSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MTUyMzU0MX0.shj2hM3pvsvcmE_wMb2aBDuk_cKWmFmbolltInGImwU";
......@@ -269,6 +289,57 @@ const activate3DTileFeaturePicking = function () {
</tbody>
</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);
};
......
public/js/appChart.js
View file @ 716ef393
......@@ -4,9 +4,9 @@
// Observations WITHOUT data gap - Bau 225 / Datastream ID = 80
// 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,
phenomenon,
samplingRate
......@@ -77,9 +77,9 @@ const getDatastreamIdFromBuildingNumber = function (
* @param {Number} datastreamID - Integer representing the Datastream ID
* @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;
const fullDatastreamURL = `${BASE_URL}/Datastreams(${datastreamID})/Observations`;
const fullDatastreamURL = `${baseUrl}/Datastreams(${datastreamID})/Observations`;
return fullDatastreamURL;
};
......@@ -89,33 +89,33 @@ const getObservationsUrl = function (datastreamID) {
* @param {String} dateStop Stop date in YYYY-MM-DD format
* @returns {String} Temporal filter string
*/
const createTemporalFilterString = function (dateStart, dateStop) {
export const createTemporalFilterString = function (dateStart, dateStop) {
if (!dateStart || !dateStop) return;
const filterString = `resultTime ge ${dateStart}T00:00:00.000Z and resultTime le ${dateStop}T00:00:00.000Z`;
return filterString;
};
const BASE_URL_OBSERVATIONS = getObservationsUrl(80);
const PARAM_RESULT_FORMAT = "dataArray";
const PARAM_ORDER_BY = "phenomenonTime asc";
const PARAM_FILTER = createTemporalFilterString("2020-01-01", "2021-01-01");
const PARAM_SELECT = "result,phenomenonTime";
// const BASE_URL_OBSERVATIONS = getObservationsUrl(80);
export const PARAM_RESULT_FORMAT = "dataArray";
export const PARAM_ORDER_BY = "phenomenonTime asc";
// const PARAM_FILTER = createTemporalFilterString("2020-01-01", "2021-01-01");
export const PARAM_SELECT = "result,phenomenonTime";
const axiosGetRequest = axios.get(BASE_URL_OBSERVATIONS, {
params: {
"$resultFormat": PARAM_RESULT_FORMAT,
"$orderBy": PARAM_ORDER_BY,
"$filter": PARAM_FILTER,
"$select": PARAM_SELECT,
},
});
// const axiosGetRequest = axios.get(BASE_URL_OBSERVATIONS, {
// params: {
// "$resultFormat": PARAM_RESULT_FORMAT,
// "$orderBy": PARAM_ORDER_BY,
// "$filter": PARAM_FILTER,
// "$select": PARAM_SELECT,
// },
// });
/**
* Format the response from SensorThings API to make it suitable for heatmap
* @param {Array} obsArray Response from SensorThings API as array
* @returns {Array} Array of formatted observations suitable for use in a heatmap
*/
const formatSTAResponseForHeatMap = function (obsArray) {
export const formatSTAResponseForHeatMap = function (obsArray) {
const dataSTAFormatted = [];
obsArray.forEach((obs) => {
// Get the date/time string; first element in input array; remove trailing "Z"
......@@ -141,7 +141,7 @@ const formatSTAResponseForHeatMap = function (obsArray) {
* @param {Array} obsArray Response from SensorThings API
* @returns {Object} Highcharts library heatmap object
*/
const drawHeatMapHC = function (obsArray) {
export const drawHeatMapHC = function (formattedObsArrayForHeatmap) {
Highcharts.chart("chart-heatmap", {
chart: {
type: "heatmap",
......@@ -215,7 +215,7 @@ const drawHeatMapHC = function (obsArray) {
series: [
{
data: formatSTAResponseForHeatMap(obsArray),
data: formattedObsArrayForHeatmap,
boostThreshold: 100,
borderWidth: 0,
nullColor: "#525252",
......@@ -236,7 +236,7 @@ const drawHeatMapHC = function (obsArray) {
* @param {Array} obsArray Response from SensorThings API as array
* @returns {Array} Array of formatted observations suitable for use in a line chart
*/
const formatSTAResponseForLineChart = function (obsArray) {
export const formatSTAResponseForLineChart = function (obsArray) {
const dataSTAFormatted = [];
obsArray.forEach((result) => {
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) {
* @param {Array} obsArray - Response from SensorThings API
* @returns {Object} Highcharts library line chart object
*/
const drawLineChartHC = function (obsArray) {
export const drawLineChartHC = function (formattedObsArrayForLineChart) {
// Create the chart
Highcharts.stockChart("chart-line", {
chart: {
......@@ -269,7 +269,7 @@ const drawLineChartHC = function (obsArray) {
series: [
{
name: "AAPL",
data: formatSTAResponseForLineChart(obsArray),
data: formattedObsArrayForLineChart,
tooltip: {
valueDecimals: 2,
},
......@@ -286,7 +286,7 @@ const drawLineChartHC = function (obsArray) {
* @param {Object} responsePromise Promise object
* @returns {Object} - Object containing results from all the "@iot.nextLink" links
*/
const followNextLink = function (responsePromise) {
export const followNextLink = function (responsePromise) {
return responsePromise
.then(function (lastSuccess) {
if (lastSuccess.data["@iot.nextLink"]) {
......@@ -308,30 +308,30 @@ const followNextLink = function (responsePromise) {
};
// Get "ALL" the Observations that satisfy our query
followNextLink(axiosGetRequest)
.then((success) => {
const successValue = success.data.value;
// followNextLink(axiosGetRequest)
// .then((success) => {
// const successValue = success.data.value;
// Array that will hold the combined observations
const combinedObservations = [];
// // 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;
// 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);
// 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(observationArr);
drawLineChartHC(observationArr);
});
// return combinedObservations;
// })
// .catch((err) => {
// console.log(err);
// })
// .then((observationArr) => {
// drawHeatMapHC(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

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