Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
iCity
EnergyDashboard
Commits
7917116c
Commit
7917116c
authored
3 years ago
by
Pithon Kabiro
Browse files
Options
Download
Email Patches
Plain Diff
Create new module drop-down list styling logic
parent
398cd5d8
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
public/js/appChart.js
+33
-118
public/js/appChart.js
public/js/src_modules/dropDownListStyling.mjs
+53
-0
public/js/src_modules/dropDownListStyling.mjs
with
86 additions
and
118 deletions
+86
-118
public/js/appChart.js
+
33
-
118
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
]
=
s
electedOptionsAllDropDownLists
;
getS
electedOptions
From
AllDropDownLists
()
;
// 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
(
s
electedOptionsAllDropDownLists
getS
electedOptions
From
AllDropDownLists
()
);
// 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
observationsRaw
PlusMetadata
Arr
=
// Fetch
and extract
the observations + metadata / raw observations
const
[
observationsRaw
NestedArr
,
metadataRawNested
Arr
]
=
selectedBuildingsDataPointsSamplingRateAbbrevRawObsArr
.
length
===
0
?
[[],
[]]
:
await
getMetadataPlusObservationsFromSingleOrMultipleDatastreams
(
...
...
@@ -219,8 +157,8 @@ const drawChartUsingSelectedOptions = async function () {
selectedBuildingsDataPointsSamplingRateAbbrevRawObsArr
);
// Fetch the observations + metadata / temperature difference (dT)
const
observationsTempDiff
PlusMetadata
Arr
=
// Fetch
and extract
the observations + metadata / temperature difference (dT)
const
[
observationsTempDiff
NestedArr
,
metadataTempDiffNested
Arr
]
=
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
=
metadataComb
o
NestedArr
.
map
(
const
formattedMetadataNestedArr
=
metadataComb
ined
NestedArr
.
map
(
(
metadataObj
)
=>
formatDatastreamMetadataForChart
(
metadataObj
)
);
// Extract the formatted metadata properties for the raw observations - used by ALL chart types
const
rawObs
ervations
ExtractedFormattedDatastreamProperties
=
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)
"
?
observationsComb
o
NestedArr
:
observationsComb
o
NestedArr
.
map
((
observationsArr
)
=>
?
observationsComb
ined
NestedArr
:
observationsComb
ined
NestedArr
.
map
((
observationsArr
)
=>
extractObservationsWithinDatesInterval
(
observationsArr
,
selectedSamplingRateAbbrev
,
aggregationStartDate
,
aggregationEndDate
AGGREGATION_START_DATE
,
AGGREGATION_STOP_DATE
)
);
...
...
@@ -303,7 +218,7 @@ const drawChartUsingSelectedOptions = async function () {
)
{
drawHeatmapBasedOnSelectedOptions
(
observationsComboNestedFinalArr
,
rawObs
ervations
ExtractedFormattedDatastreamProperties
rawObsExtractedFormattedDatastreamProperties
);
}
break
;
...
...
@@ -316,7 +231,7 @@ const drawChartUsingSelectedOptions = async function () {
)
{
drawScatterPlotFromChartSelection
(
observationsComboNestedFinalArr
,
rawObs
ervations
ExtractedFormattedDatastreamProperties
rawObsExtractedFormattedDatastreamProperties
);
}
break
;
...
...
@@ -335,7 +250,7 @@ const drawChartUsingSelectedOptions = async function () {
drawLineChartHighcharts
(
formattedRawObservationsLineChartNestedArr
,
rawObs
ervations
ExtractedFormattedDatastreamProperties
rawObsExtractedFormattedDatastreamProperties
);
}
// Aggregated observations
...
...
@@ -365,7 +280,7 @@ const drawChartUsingSelectedOptions = async function () {
drawColumnChartHighcharts
(
formattedRawObservationsColumnChartNestedArr
,
rawObs
ervations
ExtractedFormattedDatastreamProperties
rawObsExtractedFormattedDatastreamProperties
);
}
// Aggregated observations
...
...
This diff is collapsed.
Click to expand it.
public/js/src_modules/dropDownListStyling.mjs
0 → 100644
+
53
-
0
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
();
};
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment