diff --git a/public/js/appChart.js b/public/js/appChart.js
index 24f546851cdb1d63e33a9f77d1c9b321f8629cc1..b4d1e7bc401630ba49b551cabfc22a718c5da02e 100644
--- a/public/js/appChart.js
+++ b/public/js/appChart.js
@@ -30,7 +30,7 @@ import {
enableDrawChartButton,
} from "./src_modules/loadingIndicator.mjs";
-import { vanillaSelectBox } from "./thirdparty/vanillaSelectBox.mjs";
+import { styleAllDropDownLists } from "./src_modules/dropDownListStyling.mjs";
import {
extractObservationsWithinDatesInterval,
@@ -57,66 +57,6 @@ import { drawLineChartBasedOnSelectedAggregationOptions } from "./src_modules/dr
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,
- });
-};
-
-/**
- * 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,
- });
-};
-
/**
* Callback function that wraps the logic of populating the linked drop down lists.
* Will run on `DOMContentLoaded` event
@@ -124,10 +64,7 @@ const styleChartTypeDropDown = function () {
* @returns {undefined}
*/
const afterDocumentLoads = function () {
- styleBuildingsDataPointsDropDown();
- styleAggregationDropDown();
- styleSamplingRateDropDown();
- styleChartTypeDropDown();
+ styleAllDropDownLists();
};
/**
@@ -140,33 +77,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,8 +147,8 @@ 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(
@@ -219,8 +157,8 @@ const drawChartUsingSelectedOptions = async function () {
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(
@@ -231,59 +169,36 @@ const drawChartUsingSelectedOptions = async function () {
)
);
- // 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
)
);
@@ -303,7 +218,7 @@ const drawChartUsingSelectedOptions = async function () {
) {
drawHeatmapBasedOnSelectedOptions(
observationsComboNestedFinalArr,
- rawObservationsExtractedFormattedDatastreamProperties
+ rawObsExtractedFormattedDatastreamProperties
);
}
break;
@@ -316,7 +231,7 @@ const drawChartUsingSelectedOptions = async function () {
) {
drawScatterPlotFromChartSelection(
observationsComboNestedFinalArr,
- rawObservationsExtractedFormattedDatastreamProperties
+ rawObsExtractedFormattedDatastreamProperties
);
}
break;
@@ -335,7 +250,7 @@ const drawChartUsingSelectedOptions = async function () {
drawLineChartHighcharts(
formattedRawObservationsLineChartNestedArr,
- rawObservationsExtractedFormattedDatastreamProperties
+ rawObsExtractedFormattedDatastreamProperties
);
}
// Aggregated observations
@@ -365,7 +280,7 @@ const drawChartUsingSelectedOptions = async function () {
drawColumnChartHighcharts(
formattedRawObservationsColumnChartNestedArr,
- rawObservationsExtractedFormattedDatastreamProperties
+ rawObsExtractedFormattedDatastreamProperties
);
}
// Aggregated observations
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();
+};