Edit heatmap drawing function

Get the max and min values of the heatmap color axis dynamically.
Fix the tooltip text for `null` observation values.

public/js/appChart.js

@@ -261,6 +261,25 @@ export const drawHeatMapHC = function (
     unitOfMeasurementSymbol: PHENOMENON_SYMBOL,
   } = formattedDatastreamMetadata;
 
+  // Function returns the min and max observation values
+  const {
+    minObsValue: MINIMUM_VALUE_COLOR_AXIS,
+    maxObsValue: MAXIMUM_VALUE_COLOR_AXIS,
+  } = (() => {
+    // The observation value is the third element in array
+    const obsValueArr = formattedObsArrayForHeatmap.map((obs) => obs[2]);
+
+    // Extract integer part
+    const minValue = Math.trunc(Math.min(...obsValueArr));
+    const maxValue = Math.trunc(Math.max(...obsValueArr));
+
+    // Calculate the closest multiple of 5
+    const minObsValue = minValue - (minValue % 5);
+    const maxObsValue = maxValue + (5 - (maxValue % 5));
+
+    return { minObsValue, maxObsValue };
+  })();
+
   Highcharts.chart("chart-heatmap", {
     chart: {
       type: "heatmap",
@@ -308,7 +327,6 @@ export const drawHeatMapHC = function (
       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,
@@ -323,8 +341,8 @@ export const drawHeatMapHC = function (
         [0.9, "#c4463a"],
         [1, "#c4463a"],
       ],
-      min: 60,
-      max: 85,
+      min: MINIMUM_VALUE_COLOR_AXIS,
+      max: MAXIMUM_VALUE_COLOR_AXIS,
       startOnTick: false,
       endOnTick: false,
       labels: {
@@ -346,6 +364,7 @@ export const drawHeatMapHC = function (
           pointFormat:
             // "{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>",
             `{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ${PHENOMENON_SYMBOL}</b>`,
+          nullFormat: `{point.x:%e %b, %Y} {point.y}:00: <b>null</b>`,
         },
         turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release
       },