Skip to content
GitLab
Commit 51d91889 authored by Pithon Kabiro's avatar Pithon Kabiro
Browse files

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
parents 398cd5d8 015ec0df
master
1 merge request!24Update logic for drop-down list
Pipeline #5245 passed with stage
in 35 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 237 additions and 200 deletions
+237 -200
.gitignore
+ 3
- 0
View file @ 51d91889
# Our custom config file
config.mjs
# Logs
logs
*.log
......
public/js/appCesium.js
+ 3
- 2
View file @ 51d91889
"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
+ 56
- 188
View file @ 51d91889
"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
+ 1
- 5
View file @ 51d91889
"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
+ 58
- 1
View file @ 51d91889
"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
+ 2
- 1
View file @ 51d91889
......@@ -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
+ 58
- 1
View file @ 51d91889
"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
+ 3
- 2
View file @ 51d91889
......@@ -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 0 → 100644
+ 53
- 0
View file @ 51d91889
"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