diff --git a/.gitignore b/.gitignore
index 67045665db202cf951f839a5f3e73efdcfd45021..f600fad880dc0ab76ec8e7a4cc0fa58271e5c5c6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,6 @@
+# Our custom config file
+config.mjs
+
# Logs
logs
*.log
diff --git a/public/js/appCesium.js b/public/js/appCesium.js
index 709aae58eefa7a3df531548bdc69df5c18275b04..c32da2298dd25602b5be478336b3f2f39c52886e 100644
--- a/public/js/appCesium.js
+++ b/public/js/appCesium.js
@@ -1,7 +1,8 @@
"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`
diff --git a/public/js/appChart.js b/public/js/appChart.js
index 24f546851cdb1d63e33a9f77d1c9b321f8629cc1..de1a5cf09344c929bda931cc28306ef5e7b6bd41 100644
--- a/public/js/appChart.js
+++ b/public/js/appChart.js
@@ -1,9 +1,8 @@
"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:
diff --git a/public/js/src_modules/baseUrlPlusQueryParams.mjs b/public/js/src_modules/baseUrlPlusQueryParams.mjs
index 4c2b8b6621965682ff98d18ef333a9249d401357..93207d279ad262d9653a4d6bab4eca541d680570 100644
--- a/public/js/src_modules/baseUrlPlusQueryParams.mjs
+++ b/public/js/src_modules/baseUrlPlusQueryParams.mjs
@@ -1,7 +1,5 @@
"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 };
diff --git a/public/js/src_modules/dropDownListChartColumn.mjs b/public/js/src_modules/dropDownListChartColumn.mjs
index 7c2aeee80ad43a592c9d9a2bbf56c39f05547251..78bf21d68719ae008868a02075ab78c31c823914 100644
--- a/public/js/src_modules/dropDownListChartColumn.mjs
+++ b/public/js/src_modules/dropDownListChartColumn.mjs
@@ -1,5 +1,9 @@
"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
+ );
+ }
+};
diff --git a/public/js/src_modules/dropDownListChartHeatmap.mjs b/public/js/src_modules/dropDownListChartHeatmap.mjs
index cad77602c6c55491a624c9430a4f3a22326338aa..d5ee1b6cb068ebc6f9e1ec43e890d5259c8c6977 100644
--- a/public/js/src_modules/dropDownListChartHeatmap.mjs
+++ b/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
diff --git a/public/js/src_modules/dropDownListChartLine.mjs b/public/js/src_modules/dropDownListChartLine.mjs
index 494e466c718cdd041267ee95b4ae31fca1d50b18..6f182f204748cb8da983f9f3cd3c04cf722bf897 100644
--- a/public/js/src_modules/dropDownListChartLine.mjs
+++ b/public/js/src_modules/dropDownListChartLine.mjs
@@ -1,5 +1,9 @@
"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
+ );
+ }
+};
diff --git a/public/js/src_modules/dropDownListChartScatterPlot.mjs b/public/js/src_modules/dropDownListChartScatterPlot.mjs
index 9307a48dfd99cc8c016923b8c194b25c33e703a4..1f42d2fb8df7d56dc9d01aac856667b47e5a7623 100644
--- a/public/js/src_modules/dropDownListChartScatterPlot.mjs
+++ b/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
) {
diff --git a/public/js/src_modules/dropDownListStyling.mjs b/public/js/src_modules/dropDownListStyling.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..acc028414a6d63a683a09a51377a226adcc96ddc
--- /dev/null
+++ b/public/js/src_modules/dropDownListStyling.mjs
@@ -0,0 +1,53 @@
+"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();
+};