Update logic for drop-down list

Deactivate 'draw chart' button during async task. In addition, improve legibilty by replacing multiple if's with 'case' statement

public/js/src_modules/aggregate.mjs

@@ -5,6 +5,16 @@ import {
   extractObservationValuesWithinMonthInterval,
 } from "./aggregateHelpers.mjs";
 
+/**
+ * Remove `null` observation values from an array of observation values
+ *
+ * @param {Array} obsValuesArr An array of observation values
+ * @returns {Array} An array with `null` observation values removed
+ */
+const filterOutNullObservationValues = function (obsValuesArr) {
+  return obsValuesArr.filter((obs) => obs !== null);
+};
+
 /**
  * Calculate the minimum observation values that fall within a time interval delimited by a start date and end date
  * @param {Array} obsValuesForDaysIntervalArr An array of observation values that fall within our time interval
@@ -13,7 +23,10 @@ import {
 const calculateMinimumObservationValuesWithinDatesInterval = function (
   obsValuesForDaysIntervalArr
 ) {
-  return Math.min(...obsValuesForDaysIntervalArr);
+  // If the observation value is `null`, skip the calculation
+  return obsValuesForDaysIntervalArr.reduce((previousValue, obsValue) =>
+    obsValue === null ? null : Math.min(previousValue, obsValue)
+  );
 };
 
 /**
@@ -24,7 +37,10 @@ const calculateMinimumObservationValuesWithinDatesInterval = function (
 const calculateMaximumObservationValuesWithinDatesInterval = function (
   obsValuesForDaysIntervalArr
 ) {
-  return Math.max(...obsValuesForDaysIntervalArr);
+  // If the observation value is `null`, skip the calculation
+  return obsValuesForDaysIntervalArr.reduce((previousValue, obsValue) =>
+    obsValue === null ? null : Math.max(previousValue, obsValue)
+  );
 };
 
 /**
@@ -35,8 +51,10 @@ const calculateMaximumObservationValuesWithinDatesInterval = function (
 const calculateSumOfObservationValuesWithinDatesInterval = function (
   obsValuesForDaysIntervalArr
 ) {
-  return obsValuesForDaysIntervalArr.reduce(
-    (accumulator, obsValue) => accumulator + obsValue
+  // Remove the `null` observation values before calculating the sum
+  return filterOutNullObservationValues(obsValuesForDaysIntervalArr).reduce(
+    (previousValue, obsValue) => previousValue + obsValue,
+    0
   );
 };
 
@@ -48,10 +66,11 @@ const calculateSumOfObservationValuesWithinDatesInterval = function (
 const calculateAverageOfObservationValuesWithinDatesInterval = function (
   obsValuesForDaysIntervalArr
 ) {
+  // The observation values array should only include non-`null` values
   return (
     calculateSumOfObservationValuesWithinDatesInterval(
       obsValuesForDaysIntervalArr
-    ) / obsValuesForDaysIntervalArr.length
+    ) / filterOutNullObservationValues(obsValuesForDaysIntervalArr).length
   );
 };
 
@@ -63,7 +82,10 @@ const calculateAverageOfObservationValuesWithinDatesInterval = function (
 const calculateMinimumObservationValuesWithinMonthInterval = function (
   obsValuesForMonthIntervalArr
 ) {
-  return Math.min(...obsValuesForMonthIntervalArr);
+  // If the observation value is `null`, skip the calculation
+  return obsValuesForMonthIntervalArr.reduce((previousValue, obsValue) =>
+    obsValue === null ? null : Math.min(previousValue, obsValue)
+  );
 };
 
 /**
@@ -74,7 +96,10 @@ const calculateMinimumObservationValuesWithinMonthInterval = function (
 const calculateMaximumObservationValuesWithinMonthInterval = function (
   obsValuesForMonthIntervalArr
 ) {
-  return Math.max(...obsValuesForMonthIntervalArr);
+  // If the observation value is `null`, skip the calculation
+  return obsValuesForMonthIntervalArr.reduce((previousValue, obsValue) =>
+    obsValue === null ? null : Math.max(previousValue, obsValue)
+  );
 };
 
 /**
@@ -85,8 +110,10 @@ const calculateMaximumObservationValuesWithinMonthInterval = function (
 const calculateSumOfObservationValuesWithinMonthInterval = function (
   obsValuesForMonthIntervalArr
 ) {
-  return obsValuesForMonthIntervalArr.reduce(
-    (accumulator, obsValue) => accumulator + obsValue
+  // Remove the `null` observation values before calculating the sum
+  return filterOutNullObservationValues(obsValuesForMonthIntervalArr).reduce(
+    (previousValue, obsValue) => previousValue + obsValue,
+    0
   );
 };
 
@@ -98,10 +125,11 @@ const calculateSumOfObservationValuesWithinMonthInterval = function (
 const calculateAverageOfObservationValuesWithinMonthInterval = function (
   obsValuesForMonthIntervalArr
 ) {
+  // The observation values array should only include non-`null` values
   return (
     calculateSumOfObservationValuesWithinMonthInterval(
       obsValuesForMonthIntervalArr
-    ) / obsValuesForMonthIntervalArr.length
+    ) / filterOutNullObservationValues(obsValuesForMonthIntervalArr).length
   );
 };
 

public/js/src_modules/chartColumn.mjs

@@ -131,10 +131,12 @@ const drawColumnChartHighcharts = function (
 
     title: {
       text: textChartTitle,
+      "align": "center",
     },
 
     subtitle: {
       text: textChartSubtitle,
+      "align": "center",
     },
 
     xAxis: {
@@ -143,7 +145,6 @@ const drawColumnChartHighcharts = function (
     },
 
     yAxis: {
-      min: 0,
       title: {
         text: `${phenomenonName} [${unitOfMeasurementSymbol}]`,
       },
@@ -155,10 +156,10 @@ const drawColumnChartHighcharts = function (
         // this.x -- common for all points
         // this.points -- an array containing properties for each series
         // Note that our `reduce` method is in this format:
-        // ((accumulator, currentValue, currentIndex) => {...}, initialValue)
+        // ((previousValue, currentValue, currentIndex) => {...}, initialValue)
         return this.points.reduce(
-          (accumulator, point, i) =>
-            `${accumulator} <br/> <span style="color:${point.color}">${
+          (previousValue, point, i) =>
+            `${previousValue} <br/> <span style="color:${point.color}">${
               point.series.name
             }</span>: <b>${point.y.toFixed(2)} ${
               unitOfMeasurementSymbolsArr[i]

public/js/src_modules/chartHeatmap.mjs

@@ -48,7 +48,8 @@ const calculateMinMaxValuesForHeatmapColorAxis = function (
   const maxValue = Math.trunc(Math.max(...obsValueArr));
 
   // Calculate the closest multiple of 5
-  const minObsValue = minValue - (minValue % 5);
+  const minObsValue =
+    minValue > 0 ? minValue - (minValue % 5) : minValue + (minValue % 5);
   const maxObsValue = maxValue + (5 - (maxValue % 5));
 
   return { minObsValue, maxObsValue };
@@ -98,13 +99,13 @@ const drawHeatMapHighcharts = function (
 
     title: {
       text: TEXT_CHART_TITLE,
-      align: "left",
+      align: "center",
       x: 40,
     },
 
     subtitle: {
       text: TEXT_CHART_SUBTITLE,
-      align: "left",
+      align: "center",
       x: 40,
     },
 

public/js/src_modules/chartLine.mjs

@@ -134,12 +134,12 @@ const drawLineChartHighcharts = function (
 
     title: {
       text: textChartTitle,
-      "align": "left",
+      "align": "center",
     },
 
     subtitle: {
       text: textChartSubtitle,
-      align: "left",
+      align: "center",
     },
 
     tooltip: {

public/js/src_modules/chartScatterPlot.mjs

@@ -231,12 +231,12 @@ const drawScatterPlotHighcharts = function (
 
     title: {
       text: CHART_TITLE,
-      "align": "left",
+      "align": "center",
     },
 
     subtitle: {
       text: CHART_SUBTITLE,
-      "align": "left",
+      "align": "center",
     },
 
     xAxis: {