Export chart drawing functions for use in Cesium app

public/js/appCesium.js

 "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

@@ -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);
+//   });