Merge branch 'wip_select-sensors-dropdown-list-9' into 'master'

Update logic for drop-down list

Further refactoring of the logic for the drop-down lists into new 
module files

See merge request !24

.gitignore

+# Our custom config file
+config.mjs
+
 # Logs
 logs
 *.log

public/js/appCesium.js

 "use strict";
 
-Cesium.Ion.defaultAccessToken =
-  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyODgxYzJlNi1kNDZiLTQ3ZmQtYmUxYy0yMWI0OGM3NDA5MzAiLCJpZCI6NDczOSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MTUyMzU0MX0.shj2hM3pvsvcmE_wMb2aBDuk_cKWmFmbolltInGImwU";
+import { CESIUM_ION_ACCESS_TOKEN } from "./config.mjs";
+
+Cesium.Ion.defaultAccessToken = CESIUM_ION_ACCESS_TOKEN;
 
 // Flag to determine models that will be loaded
 // Set to `true` or `false`

public/js/appChart.js

 "use strict";
 
-import {
-  BASE_URL,
-  QUERY_PARAMS_COMBINED,
-} from "./src_modules/baseUrlPlusQueryParams.mjs";
+import { SENSORTHINGS_API_BASE_URL } from "./config.mjs";
+
+import { QUERY_PARAMS_COMBINED } from "./src_modules/baseUrlPlusQueryParams.mjs";
 
 import { calculateVorlaufMinusRuecklaufTemperature } from "./src_modules/calculateTemperatureDiff.mjs";
 
@@ -17,12 +16,6 @@ import {
   extractPropertiesFromFormattedDatastreamMetadata,
 } from "./src_modules/fetchedDataProcessing.mjs";
 
-import { formatSensorThingsApiResponseForLineOrColumnChart } from "./src_modules/chartHelpers.mjs";
-
-import { drawLineChartHighcharts } from "./src_modules/chartLine.mjs";
-
-import { drawColumnChartHighcharts } from "./src_modules/chartColumn.mjs";
-
 import {
   showLoadingSpinner,
   hideLoadingSpinner,
@@ -30,7 +23,7 @@ import {
   enableDrawChartButton,
 } from "./src_modules/loadingIndicator.mjs";
 
-import { vanillaSelectBox } from "./thirdparty/vanillaSelectBox.mjs";
+import { styleAllDropDownLists } from "./src_modules/dropDownListStyling.mjs";
 
 import {
   extractObservationsWithinDatesInterval,
@@ -49,73 +42,13 @@ import {
   getAbbreviationsForSelectedOptionsFromAllDropDownLists,
 } from "./src_modules/dropDownListHelpers.mjs";
 
-import { drawColumnChartBasedOnSelectedAggregationOptions } from "./src_modules/dropDownListChartColumn.mjs";
+import { drawColumnChartBasedOnSelectedOptions } from "./src_modules/dropDownListChartColumn.mjs";
 
 import { drawHeatmapBasedOnSelectedOptions } from "./src_modules/dropDownListChartHeatmap.mjs";
 
-import { drawLineChartBasedOnSelectedAggregationOptions } from "./src_modules/dropDownListChartLine.mjs";
-
-import { drawScatterPlotFromChartSelection } from "./src_modules/dropDownListChartScatterPlot.mjs";
-
-/**
- * Use the `vanillaDropDown` library to style the buildings & data points drop down list
- *
- * @returns {undefined}
- */
-const styleBuildingsDataPointsDropDown = function () {
-  // Create our dropdown list using `vanillaSelectBox`; supports the selection of multiple options
-  new vanillaSelectBox("#drop-down--bldg-data-point", {
-    "disableSelectAll": true,
-    "maxSelect": 5,
-    "placeHolder": "--Select--",
-    "search": false,
-  });
-};
-
-/**
- * Use the `vanillaDropDown` library to style the aggregation type drop down list
- *
- * @returns {undefined}
- */
-const styleAggregationDropDown = function () {
-  // Create our dropdown list using `vanillaSelectBox`
-  new vanillaSelectBox("#drop-down--aggregation-type", {
-    "disableSelectAll": true,
-    "maxSelect": 1,
-    "placeHolder": "--Select--",
-    "search": false,
-  });
-};
-
-/**
- * Use the `vanillaDropDown` library to style the third sampling rate down list
- *
- * @returns {undefined}
- */
-const styleSamplingRateDropDown = function () {
-  // Create our dropdown list using `vanillaSelectBox`
-  new vanillaSelectBox("#drop-down--sampling-rate", {
-    "disableSelectAll": true,
-    "maxSelect": 1,
-    "placeHolder": "--Select--",
-    "search": false,
-  });
-};
+import { drawLineChartBasedOnSelectedOptions } from "./src_modules/dropDownListChartLine.mjs";
 
-/**
- * Use the `vanillaDropDown` library to style the chart type drop down list
- *
- * @returns {undefined}
- */
-const styleChartTypeDropDown = function () {
-  // Create our dropdown list using `vanillaSelectBox`
-  new vanillaSelectBox("#drop-down--chart-type", {
-    "disableSelectAll": true,
-    "maxSelect": 1,
-    "placeHolder": "--Select--",
-    "search": false,
-  });
-};
+import { drawScatterPlotBasedOnSelectedOptions } from "./src_modules/dropDownListChartScatterPlot.mjs";
 
 /**
  * Callback function that wraps the logic of populating the linked drop down lists.
@@ -124,10 +57,7 @@ const styleChartTypeDropDown = function () {
  * @returns {undefined}
  */
 const afterDocumentLoads = function () {
-  styleBuildingsDataPointsDropDown();
-  styleAggregationDropDown();
-  styleSamplingRateDropDown();
-  styleChartTypeDropDown();
+  styleAllDropDownLists();
 };
 
 /**
@@ -140,33 +70,34 @@ const afterDocumentLoads = function () {
  */
 const drawChartUsingSelectedOptions = async function () {
   try {
-    const selectedOptionsAllDropDownLists =
-      getSelectedOptionsFromAllDropDownLists();
-
     // Note: The chart type amd aggregation type + duration are the first and
     // third elements respectively, we have ignored the second and fourth elements
     const [selectedChartTypeArr, , selectedAggregationTypeDurationArr] =
-      selectedOptionsAllDropDownLists;
+      getSelectedOptionsFromAllDropDownLists();
 
-    // Create an array of aggregation type and duration
-    const selectedAggregationTypeDurationSplitNestedArr =
+    // Note: the resulting array is nested, it only has one sub-array
+    // Separate the aggregation type and the aggregation duration strings
+    const [[selectedAggregationType, selectedAggregationDuration]] =
       splitMultipleOptionsTextDelimitedBySlash(
         selectedAggregationTypeDurationArr
       );
 
-    // Separate the aggregation type and the aggregation duration strings
-    const [selectedAggregationTypeDurationSplitArr] =
-      selectedAggregationTypeDurationSplitNestedArr;
-
-    const [selectedAggregationType, selectedAggregationDuration] =
-      selectedAggregationTypeDurationSplitArr;
-
     // Array of building(s) + data point(s) + sampling rate
     const selectedBuildingsDataPointsSamplingRateAbbrevNestedArr =
       getAbbreviationsForSelectedOptionsFromAllDropDownLists(
-        selectedOptionsAllDropDownLists
+        getSelectedOptionsFromAllDropDownLists()
       );
 
+    // The formatted abbreviations array is nested, we are interested in the first sub-array
+    // We assume that all the phenomena have the same sampling rate
+    // Extract the formatted sampling rate string - used by ALL chart types
+    const [[, , selectedSamplingRateAbbrev]] =
+      selectedBuildingsDataPointsSamplingRateAbbrevNestedArr;
+
+    // User-specified start date and end date for aggregation - used by MULTIPLE chart types
+    const AGGREGATION_START_DATE = "2020-01-01";
+    const AGGREGATION_STOP_DATE = "2020-12-31";
+
     // The values of these references is either equal to `true` or an error will be thrown
     // We would like the errors to be thrown at this point before we begin performing any asynchronous tasks
     const selectedAggregationOptionsAreValid =
@@ -209,81 +140,58 @@ const drawChartUsingSelectedOptions = async function () {
     // Disable the 'draw chart' button
     disableDrawChartButton();
 
-    // Fetch the observations + metadata / raw observations
-    const observationsRawPlusMetadataArr =
+    // Fetch and extract the observations + metadata / raw observations
+    const [observationsRawNestedArr, metadataRawNestedArr] =
       selectedBuildingsDataPointsSamplingRateAbbrevRawObsArr.length === 0
         ? [[], []]
         : await getMetadataPlusObservationsFromSingleOrMultipleDatastreams(
-            BASE_URL,
+            SENSORTHINGS_API_BASE_URL,
             QUERY_PARAMS_COMBINED,
             selectedBuildingsDataPointsSamplingRateAbbrevRawObsArr
           );
 
-    // Fetch the observations + metadata / temperature difference (dT)
-    const observationsTempDiffPlusMetadataArr =
+    // Fetch and extract the observations + metadata / temperature difference (dT)
+    const [observationsTempDiffNestedArr, metadataTempDiffNestedArr] =
       selectedBuildingsDataPointsSamplingRateAbbrevTempDiffArr.length === 0
         ? [[], []]
         : await calculateVorlaufMinusRuecklaufTemperature(
-            BASE_URL,
+            SENSORTHINGS_API_BASE_URL,
             QUERY_PARAMS_COMBINED,
             extractBuildingPlusSamplingRate(
               selectedBuildingsDataPointsSamplingRateAbbrevTempDiffArr
             )
           );
 
-    // Extract the combined arrays for observations and metadata / raw observations
-    const [observationsRawNestedArr, metadataRawNestedArr] =
-      observationsRawPlusMetadataArr;
-
-    // Extract the combined arrays for observations and metadata / temperature difference (dT)
-    const [observationsTempDiffNestedArr, metadataTempDiffNestedArr] =
-      observationsTempDiffPlusMetadataArr;
-
-    // Create a combined array of observations and metadata
-    const observationsPlusMetadataCombined = [
+    // Create and extract the combined observations and metadata
+    const [observationsCombinedNestedArr, metadataCombinedNestedArr] = [
       [...observationsRawNestedArr, ...observationsTempDiffNestedArr],
       [...metadataRawNestedArr, ...metadataTempDiffNestedArr],
     ];
 
-    const [observationsComboNestedArr, metadataComboNestedArr] =
-      observationsPlusMetadataCombined;
-
     // Create formatted array(s) for metadata - used by ALL chart types
-    const formattedMetadataNestedArr = metadataComboNestedArr.map(
+    const formattedMetadataNestedArr = metadataCombinedNestedArr.map(
       (metadataObj) => formatDatastreamMetadataForChart(metadataObj)
     );
 
     // Extract the formatted metadata properties for the raw observations - used by ALL chart types
-    const rawObservationsExtractedFormattedDatastreamProperties =
+    const rawObsExtractedFormattedDatastreamProperties =
       extractPropertiesFromFormattedDatastreamMetadata(
         formattedMetadataNestedArr,
         false
       );
 
-    // The formatted abbreviations array is nested
-    const [selectedBuildingsDataPointsSamplingRateAbbrevArr] =
-      selectedBuildingsDataPointsSamplingRateAbbrevNestedArr;
-
-    // Extract the formatted sampling rate string - used by ALL chart types
-    const [, , selectedSamplingRateAbbrev] =
-      selectedBuildingsDataPointsSamplingRateAbbrevArr;
-
-    // User-specified start date and end date for aggregation - used by MULTIPLE chart types
-    const aggregationStartDate = "2020-01-01";
-    const aggregationEndDate = "2020-12-31";
-
     // Create final array of observations- used by MULTIPLE chart types
     // If we are performing aggregation, it was envisioned that the user would
     // select observations that fall within a start and end date
     const observationsComboNestedFinalArr =
       selectedAggregationType === "None (raw data)"
-        ? observationsComboNestedArr
-        : observationsComboNestedArr.map((observationsArr) =>
+        ? observationsCombinedNestedArr
+        : observationsCombinedNestedArr.map((observationsArr) =>
             extractObservationsWithinDatesInterval(
               observationsArr,
               selectedSamplingRateAbbrev,
-              aggregationStartDate,
-              aggregationEndDate
+              AGGREGATION_START_DATE,
+              AGGREGATION_STOP_DATE
             )
           );
 
@@ -295,7 +203,6 @@ const drawChartUsingSelectedOptions = async function () {
 
     for (const selectedChartType of selectedChartTypeArr) {
       switch (selectedChartType) {
-        // We are interested in raw observations ONLY
         case "Heatmap":
           if (
             selectedAggregationOptionsAreValid &&
@@ -303,82 +210,43 @@ const drawChartUsingSelectedOptions = async function () {
           ) {
             drawHeatmapBasedOnSelectedOptions(
               observationsComboNestedFinalArr,
-              rawObservationsExtractedFormattedDatastreamProperties
+              rawObsExtractedFormattedDatastreamProperties
             );
           }
           break;
 
-        // We are interested in raw observations ONLY
         case "Scatter Plot":
           if (
             selectedAggregationOptionsAreValid &&
             selectedBuildingDataPointsOptionsAreValid
           ) {
-            drawScatterPlotFromChartSelection(
+            drawScatterPlotBasedOnSelectedOptions(
               observationsComboNestedFinalArr,
-              rawObservationsExtractedFormattedDatastreamProperties
+              rawObsExtractedFormattedDatastreamProperties
             );
           }
           break;
 
-        // We are interested in BOTH raw observations and aggregated observations
         case "Line":
-          // Raw observations
-          if (selectedAggregationType === "None (raw data)") {
-            // Create formatted array(s) for observations
-            const formattedRawObservationsLineChartNestedArr =
-              observationsComboNestedFinalArr.map((observationsArr) =>
-                formatSensorThingsApiResponseForLineOrColumnChart(
-                  observationsArr
-                )
-              );
-
-            drawLineChartHighcharts(
-              formattedRawObservationsLineChartNestedArr,
-              rawObservationsExtractedFormattedDatastreamProperties
-            );
-          }
-          // Aggregated observations
-          else {
-            drawLineChartBasedOnSelectedAggregationOptions(
-              selectedAggregationType,
-              selectedAggregationDuration,
-              observationsComboNestedFinalArr,
-              selectedSamplingRateAbbrev,
-              uniqueCalendarDatesNestedArr,
-              formattedMetadataNestedArr
-            );
-          }
+          drawLineChartBasedOnSelectedOptions(
+            selectedAggregationType,
+            selectedAggregationDuration,
+            observationsComboNestedFinalArr,
+            selectedSamplingRateAbbrev,
+            uniqueCalendarDatesNestedArr,
+            formattedMetadataNestedArr
+          );
           break;
 
-        // We are interested in BOTH raw observations and aggregated observations
         case "Column":
-          // Raw observations
-          if (selectedAggregationType === "None (raw data)") {
-            // Create formatted array(s) for observations
-            const formattedRawObservationsColumnChartNestedArr =
-              observationsComboNestedFinalArr.map((observationsArr) =>
-                formatSensorThingsApiResponseForLineOrColumnChart(
-                  observationsArr
-                )
-              );
-
-            drawColumnChartHighcharts(
-              formattedRawObservationsColumnChartNestedArr,
-              rawObservationsExtractedFormattedDatastreamProperties
-            );
-          }
-          // Aggregated observations
-          else {
-            drawColumnChartBasedOnSelectedAggregationOptions(
-              selectedAggregationType,
-              selectedAggregationDuration,
-              observationsComboNestedFinalArr,
-              selectedSamplingRateAbbrev,
-              uniqueCalendarDatesNestedArr,
-              formattedMetadataNestedArr
-            );
-          }
+          drawColumnChartBasedOnSelectedOptions(
+            selectedAggregationType,
+            selectedAggregationDuration,
+            observationsComboNestedFinalArr,
+            selectedSamplingRateAbbrev,
+            uniqueCalendarDatesNestedArr,
+            formattedMetadataNestedArr
+          );
           break;
 
         default:

public/js/src_modules/baseUrlPlusQueryParams.mjs

 "use strict";
 
-const BASE_URL = "http://193.196.39.91:8080/frost-icity-tp31/v1.1";
-
 /**
  * Create a temporal filter string for the fetched Observations
  * @param {String} dateStart Start date in YYYY-MM-DD format
@@ -33,9 +31,7 @@ const createUrlParametersForGetRequest = function (dateStart, dateStop) {
   };
 };
 
-const QUERY_PARAMS_COMBINED = createUrlParametersForGetRequest(
+export const QUERY_PARAMS_COMBINED = createUrlParametersForGetRequest(
   "2020-01-01",
   "2021-01-01"
 );
-
-export { BASE_URL, QUERY_PARAMS_COMBINED };

public/js/src_modules/dropDownListChartColumn.mjs

 "use strict";
 
+import { formatSensorThingsApiResponseForLineOrColumnChart } from "./chartHelpers.mjs";
+
+import { extractPropertiesFromFormattedDatastreamMetadata } from "./fetchedDataProcessing.mjs";
+
 import { drawColumnChartHighcharts } from "./chartColumn.mjs";
 
 import {
@@ -33,7 +37,7 @@ import {
  * @param {Array} formattedMetadataNestedArr An array of sub-arrays of formatted metadata properties
  * @returns {undefined} undefined
  */
-export const drawColumnChartBasedOnSelectedAggregationOptions = function (
+const drawColumnChartBasedOnSelectedAggregationOptions = function (
   selectedAggregationType,
   selectedAggregationDuration,
   observationsNestedArr,
@@ -157,3 +161,56 @@ export const drawColumnChartBasedOnSelectedAggregationOptions = function (
     );
   }
 };
+
+/**
+ * Draw a column chart based on the selected options from a drop-down list.
+ * This chart type supports both raw observations and aggregated observations
+ *
+ * @param {String} selectedAggregationType The selected aggregation type. The currently supported strings include `Sum`, `Maximum`, `Minimum` and `Average`
+ * @param {String} selectedAggregationDuration The selected aggregation duration. The currently supported strings include `Daily` and `Monthly`
+ * @param {Array} observationsNestedArr An array made up of sub-array(s) of observations
+ * @param {String} selectedSamplingRateAbbrev The abbreviated form of the selected sampling rate option
+ * @param {Array} uniqueCalendarDatesNestedArr An array made up of sub-array(s) of unique calendar date(s) string(s)
+ * @param {Array} formattedMetadataNestedArr An array of sub-arrays of formatted metadata properties
+ * @returns {undefined} undefined
+ */
+export const drawColumnChartBasedOnSelectedOptions = function (
+  selectedAggregationType,
+  selectedAggregationDuration,
+  observationsNestedArr,
+  selectedSamplingRateAbbrev,
+  uniqueCalendarDatesNestedArr,
+  formattedMetadataNestedArr
+) {
+  // Case 1: Raw observations
+  if (selectedAggregationType === "None (raw data)") {
+    // Create formatted array(s) for observations
+    const formattedRawObservationsColumnChartNestedArr =
+      observationsNestedArr.map((observationsArr) =>
+        formatSensorThingsApiResponseForLineOrColumnChart(observationsArr)
+      );
+
+    // Extract formatted metadata properties
+    const rawObsExtractedFormattedDatastreamProperties =
+      extractPropertiesFromFormattedDatastreamMetadata(
+        formattedMetadataNestedArr,
+        false
+      );
+
+    drawColumnChartHighcharts(
+      formattedRawObservationsColumnChartNestedArr,
+      rawObsExtractedFormattedDatastreamProperties
+    );
+  }
+  // Case 2: Aggregated observations
+  else {
+    drawColumnChartBasedOnSelectedAggregationOptions(
+      selectedAggregationType,
+      selectedAggregationDuration,
+      observationsNestedArr,
+      selectedSamplingRateAbbrev,
+      uniqueCalendarDatesNestedArr,
+      formattedMetadataNestedArr
+    );
+  }
+};

public/js/src_modules/dropDownListChartHeatmap.mjs

@@ -6,7 +6,8 @@ import {
 } from "./chartHeatmap.mjs";
 
 /**
- * Draw a heatmap based on the selected options from a drop-down list
+ * Draw a heatmap based on the selected options from a drop-down list.
+ * Currently, this chart type only supports raw observations
  *
  * @param {Array} observationsComboNestedArr An array that contains non-computed (raw) observations and computed (temperature difference, dT) observations
  * @param {Object} extractedFormattedDatastreamProperties An object that contains array(s) of formatted Datastream properties

public/js/src_modules/dropDownListChartLine.mjs

 "use strict";
 
+import { formatSensorThingsApiResponseForLineOrColumnChart } from "./chartHelpers.mjs";
+
+import { extractPropertiesFromFormattedDatastreamMetadata } from "./fetchedDataProcessing.mjs";
+
 import { drawLineChartHighcharts } from "./chartLine.mjs";
 
 import {
@@ -33,7 +37,7 @@ import {
  * @param {Array} formattedMetadataNestedArr An array of sub-arrays of formatted metadata properties
  * @returns {undefined} undefined
  */
-export const drawLineChartBasedOnSelectedAggregationOptions = function (
+const drawLineChartBasedOnSelectedAggregationOptions = function (
   selectedAggregationType,
   selectedAggregationDuration,
   observationsNestedArr,
@@ -157,3 +161,56 @@ export const drawLineChartBasedOnSelectedAggregationOptions = function (
     );
   }
 };
+
+/**
+ * Draw a line chart based on the selected options from a drop-down list.
+ * This chart type supports both raw observations and aggregated observations
+ *
+ * @param {String} selectedAggregationType The selected aggregation type. The currently supported strings include `Sum`, `Maximum`, `Minimum` and `Average`
+ * @param {String} selectedAggregationDuration The selected aggregation duration. The currently supported strings include `Daily` and `Monthly`
+ * @param {Array} observationsNestedArr An array made up of sub-array(s) of observations
+ * @param {String} selectedSamplingRateAbbrev The abbreviated form of the selected sampling rate option
+ * @param {Array} uniqueCalendarDatesNestedArr An array made up of sub-array(s) of unique calendar date(s) string(s)
+ * @param {Array} formattedMetadataNestedArr An array of sub-arrays of formatted metadata properties
+ * @returns {undefined} undefined
+ */
+export const drawLineChartBasedOnSelectedOptions = function (
+  selectedAggregationType,
+  selectedAggregationDuration,
+  observationsNestedArr,
+  selectedSamplingRateAbbrev,
+  uniqueCalendarDatesNestedArr,
+  formattedMetadataNestedArr
+) {
+  // Raw observations
+  if (selectedAggregationType === "None (raw data)") {
+    // Create formatted array(s) for observations
+    const formattedRawObservationsLineChartNestedArr =
+      observationsNestedArr.map((observationsArr) =>
+        formatSensorThingsApiResponseForLineOrColumnChart(observationsArr)
+      );
+
+    // Extract formatted metadata properties
+    const rawObsExtractedFormattedDatastreamProperties =
+      extractPropertiesFromFormattedDatastreamMetadata(
+        formattedMetadataNestedArr,
+        false
+      );
+
+    drawLineChartHighcharts(
+      formattedRawObservationsLineChartNestedArr,
+      rawObsExtractedFormattedDatastreamProperties
+    );
+  }
+  // Aggregated observations
+  else {
+    drawLineChartBasedOnSelectedAggregationOptions(
+      selectedAggregationType,
+      selectedAggregationDuration,
+      observationsNestedArr,
+      selectedSamplingRateAbbrev,
+      uniqueCalendarDatesNestedArr,
+      formattedMetadataNestedArr
+    );
+  }
+};

public/js/src_modules/dropDownListChartScatterPlot.mjs

@@ -6,13 +6,14 @@ import {
 } from "./chartScatterPlot.mjs";
 
 /**
- * Draw a scatter plot based on the selected options from a drop-down list
+ * Draw a scatter plot based on the selected options from a drop-down list.
+ * Currently, this chart type only supports raw observations
  *
  * @param {Array} observationsComboNestedArr An array that contains non-computed (raw) observations and computed (temperature difference, dT) observations
  * @param {Object} extractedFormattedDatastreamProperties An object that contains array(s) of formatted Datastream properties
  * @returns {undefined} undefined
  */
-export const drawScatterPlotFromChartSelection = function (
+export const drawScatterPlotBasedOnSelectedOptions = function (
   observationsComboNestedArr,
   extractedFormattedDatastreamProperties
 ) {

public/js/src_modules/dropDownListStyling.mjs

+"use strict";
+
+import { vanillaSelectBox } from "../thirdparty/vanillaSelectBox.mjs";
+
+/**
+ * Use the `vanillaDropDown` library to style the buildings & data points drop down list
+ *
+ * @returns {undefined}
+ */
+const styleBuildingsDataPointsDropDown = function () {
+  // Create our dropdown list using `vanillaSelectBox`; supports the selection of multiple options
+  new vanillaSelectBox("#drop-down--bldg-data-point", {
+    disableSelectAll: true,
+    maxSelect: 5,
+    placeHolder: "--Select--",
+    search: false,
+  });
+};
+
+/**
+ * Use the `vanillaDropDown` library to style the chart type,
+ * aggregation type and sampling rates drop down lists
+ *
+ * @returns {undefined} undefined
+ */
+const styleOtherDropDownLists = function () {
+  // Array of CSS selector strings
+  const cssSelectorStringsArr = [
+    "#drop-down--chart-type",
+    "#drop-down--aggregation-type",
+    "#drop-down--sampling-rate",
+  ];
+
+  // Create our dropdown lists using `vanillaSelectBox`
+  cssSelectorStringsArr.forEach((cssSelectorString) => {
+    new vanillaSelectBox(cssSelectorString, {
+      disableSelectAll: true,
+      maxSelect: 1,
+      placeHolder: "--Select--",
+      search: false,
+    });
+  });
+};
+
+/**
+ *  Use the `vanillaDropDown` library to style all the drop down lists
+ *
+ * @returns {undefined} undefined
+ */
+export const styleAllDropDownLists = function () {
+  styleBuildingsDataPointsDropDown();
+  styleOtherDropDownLists();
+};