Change heatmap chart, use Highcharts lib; edit HTML <div> element names

index.html

@@ -16,27 +16,39 @@
       rel="stylesheet"
       crossorigin="anonymous"
     />
+
+    <!-- Font Awesome icons -->
     <script
       src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js"
       crossorigin="anonymous"
     ></script>
+
     <!-- Axios -->
     <!-- <script src="./node_modules/axios/dist/axios.min.js"></script> -->
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+
     <!-- Higcharts lib -->
-    <script src="https://code.highcharts.com/stock/highstock.js"></script>
+    <script src="https://code.highcharts.com/highcharts.js"></script>
     <script src="https://code.highcharts.com/stock/modules/data.js"></script>
     <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
     <script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
+    <script src="https://code.highcharts.com/modules/heatmap.js"></script>
+    <script src="https://code.highcharts.com/modules/data.js"></script>
+    <script src="https://code.highcharts.com/modules/boost-canvas.js"></script>
+    <script src="https://code.highcharts.com/modules/boost.js"></script>
+    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
+
     <!-- Apexcharts lib -->
     <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
     <link rel="stylesheet" href="css/styles.css" />
+
     <!-- Cesium lib -->
     <script src="https://cesium.com/downloads/cesiumjs/releases/1.48/Build/Cesium/Cesium.js"></script>
     <link
       href="https://cesium.com/downloads/cesiumjs/releases/1.48/Build/Cesium/Widgets/widgets.css"
       rel="stylesheet"
     />
+
     <!-- Bootstrap dashboard template -->
     <script
       defer
@@ -49,6 +61,7 @@
       crossorigin="anonymous"
     ></script>
     <script defer src="js/thirdparty/scripts.js"></script>
+
     <!--     
     Custom JS -->
     <script defer src="js/appCesium.js"></script>
@@ -97,7 +110,11 @@
                     3D Visualization
                   </div>
                   <div class="card-body">
-                    <div id="myCesiumContainer" width="100%" height="40"></div>
+                    <div
+                      id="cesiumGlobeContainer"
+                      width="100%"
+                      height="40"
+                    ></div>
                   </div>
                 </div>
               </div>
@@ -110,7 +127,7 @@
                     Line Chart Example
                   </div>
                   <div class="card-body">
-                    <div id="chart-apex-line" width="100%" height="40"></div>
+                    <div id="chart-line" width="100%" height="40"></div>
                   </div>
                 </div>
               </div>
@@ -121,7 +138,7 @@
                     Area Chart Example
                   </div>
                   <div class="card-body">
-                    <div id="chart-apex-heatmap" width="100%" height="40"></div>
+                    <div id="chart-heatmap" width="100%" height="40"></div>
                   </div>
                 </div>
               </div>

public/js/appCesium.js

@@ -8,7 +8,7 @@ Cesium.Ion.defaultAccessToken =
 const LOAD_DETAILED_BLDG225 = false;
 
 // Global variable
-const viewer = new Cesium.Viewer("myCesiumContainer", {
+const viewer = new Cesium.Viewer("cesiumGlobeContainer", {
   //   terrainProvider: Cesium.createWorldTerrain(),
 });
 // viewer.scene.globe.depthTestAgainstTerrain = true;

public/js/appChart.js

 "use strict";
 
 // Request parameters
+
+// Observations WITHOUT data gap - Bau 225
 const BASE_URL =
   "http://193.196.39.91:8080/frost-icity-tp31/v1.1/Datastreams(80)/Observations";
-const BASE_URL2 =
-  "http://193.196.39.91:8080/frost-icity-tp31-v2/v1.1/Datastreams(41)/Observations";
+
 const PARAM_RESULT_FORMAT = "dataArray";
 const PARAM_ORDER_BY = "phenomenonTime asc";
 const PARAM_FILTER =
-  "resultTime ge 2020-01-01T00:00:00.000Z and resultTime le 2020-07-01T00:00:00.000Z";
+  "resultTime ge 2020-01-01T00:00:00.000Z and resultTime le 2021-01-01T00:00:00.000Z";
 const PARAM_SELECT = "result,phenomenonTime";
 
+// Observations WITH data gap - Bau 112
+const BASE_URL2 =
+  "http://193.196.39.91:8080/frost-icity-tp31-v2/v1.1/Datastreams(78)/Observations";
+const PARAM_FILTER2 =
+  "resultTime ge 2020-06-01T00:00:00.000Z and resultTime le 2021-01-01T00:00:00.000Z";
+
 /**
  * Draw an EMPTY chart using Apexcharts library
  * @param {HTMLElement} htmlElement - HTML element where chart will be drawn
@@ -95,7 +102,7 @@ const drawEmptyLineChartAC = function (
 };
 
 // Line chart 1 constants
-const chart1LineHTML = document.querySelector("#chart-apex-line");
+const chart1LineHTML = document.querySelector("#chart-line");
 const chart1LineTitle = "Inlet flow (Vorlauf)";
 const chart1LineYAxisTitle = "Temperature (°C)";
 
@@ -369,12 +376,132 @@ const drawHeatMapAC2 = function (obsArray) {
   };
 
   const chart = new ApexCharts(
-    document.querySelector("#chart-apex-heatmap"),
+    document.querySelector("#chart-heatmap"),
     options
   );
   chart.render();
 };
 
+/**
+ * Draw a heatmap using Highcharts library
+ * @param {*} obsArray - Response from SensorThings API as array
+ * @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",
+      zoomType: "x",
+    },
+
+    boost: {
+      useGPUTranslations: true,
+    },
+
+    title: {
+      text: "Inlet flow (Vorlauf)",
+      align: "left",
+      x: 40,
+    },
+
+    subtitle: {
+      text: "Temperature variation by day and hour in 2020",
+      align: "left",
+      x: 40,
+    },
+
+    xAxis: {
+      type: "datetime",
+      // min: Date.UTC(2017, 0, 1),
+      // max: Date.UTC(2017, 11, 31, 23, 59, 59),
+      labels: {
+        align: "left",
+        x: 5,
+        y: 14,
+        format: "{value:%B}", // long month
+      },
+      showLastLabel: false,
+      tickLength: 16,
+    },
+
+    yAxis: {
+      title: {
+        text: null,
+      },
+      labels: {
+        format: "{value}:00",
+      },
+      minPadding: 0,
+      maxPadding: 0,
+      startOnTick: false,
+      endOnTick: false,
+      // tickPositions: [0, 6, 12, 18, 24],
+      tickPositions: [0, 3, 6, 9, 12, 15, 18, 21, 24],
+      tickWidth: 1,
+      min: 0,
+      max: 23,
+      reversed: true,
+    },
+
+    colorAxis: {
+      stops: [
+        [0, "#3060cf"],
+        [0.5, "#fffbbc"],
+        [0.9, "#c4463a"],
+        [1, "#c4463a"],
+      ],
+      min: 60,
+      max: 85,
+      startOnTick: false,
+      endOnTick: false,
+      labels: {
+        format: "{value}℃",
+      },
+    },
+
+    series: [
+      {
+        data: formatSTAResponseForHeatMap(),
+        boostThreshold: 100,
+        borderWidth: 0,
+        nullColor: "#525252",
+        colsize: 24 * 36e5, // one day
+        tooltip: {
+          headerFormat: "Temperature<br/>",
+          pointFormat:
+            "{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>",
+        },
+        turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release
+      },
+    ],
+  });
+};
+
 /**
  * Follows "@iot.nextLink" links in SensorThingsAPI's response
  * Appends new results to existing results
@@ -437,6 +564,7 @@ followNextLink(
     console.log(err);
   })
   .then((observationArr) => {
-    updateLineChartAC(chart1LineTitle, observationArr);
-    drawHeatMapAC2(observationArr);
+    // updateLineChartAC(chart1LineTitle, observationArr);
+    // drawHeatMapAC2(observationArr);
+    drawHeatMapHC(observationArr);
   });