Skip to content
GitLab
Commit 7917116c authored by Pithon Kabiro's avatar Pithon Kabiro
Browse files

Create new module drop-down list styling logic

parent 398cd5d8
Hide whitespace changes
Inline Side-by-side
public/js/appChart.js
View file @ 7917116c
......@@ -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
......
public/js/src_modules/dropDownListStyling.mjs 0 → 100644
View file @ 7917116c
"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();
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal