diff --git a/index.html b/index.html
index 940013fd4ea084b59ce18b4e04f3615fbf3ac0ce..5997c90cf7e349bf09e5253809f3ca0a7debb6b7 100644
--- a/index.html
+++ b/index.html
@@ -131,24 +131,82 @@
<label for="droneMode">Drone View</label>
</div>
<br /> -->
- <div id="drop-down--bldg-parent">
- <span><strong>Building</strong></span>
+ <div id="drop-down--bldg-data-point-parent">
+ <span><strong>Building(s), Data Point(s)</strong></span>
<div class="nowrap">
- <select id="drop-down--bldg" multiple></select>
+ <select
+ id="drop-down--bldg-data-point"
+ multiple
+ size="5"
+ >
+ <!-- Note: The values of the option elements have to be unique -->
+ <optgroup label="Bau 101">
+ <option>101/VL</option>
+ <option>101/RL</option>
+ <option>101/dT</option>
+ </optgroup>
+ <optgroup label="Bau 102">
+ <option>102/VL</option>
+ <option>102/RL</option>
+ <option>102/dT</option>
+ </optgroup>
+ <optgroup label="Bau 107">
+ <option>107/VL</option>
+ <option>107/RL</option>
+ <option>107/dT</option>
+ </optgroup>
+ <optgroup label="Bau 112">
+ <option>112/VL</option>
+ <option>112/RL</option>
+ <option>112/dT</option>
+ </optgroup>
+ <optgroup label="Bau 125">
+ <option>125/VL</option>
+ <option>125/RL</option>
+ <option>125/dT</option>
+ </optgroup>
+ <optgroup label="Bau 225">
+ <option>225/VL</option>
+ <option>225/RL</option>
+ <option>225/dT</option>
+ <option>225/Durchfluss</option>
+ <option>225/Leistung</option>
+ <option>225/Energie</option>
+ <option>225/Energie_VERBR</option>
+ </optgroup>
+ <optgroup label="Other">
+ <option>Außentemp</option>
+ </optgroup>
+ </select>
</div>
</div>
<br />
- <div id="drop-down--sensor-parent">
- <span><strong>Sensor</strong></span>
+ <div id="drop-down--aggregation-type-parent">
+ <span
+ ><strong>Aggregation (Type, Duration)</strong></span
+ >
<div class="nowrap">
- <select id="drop-down--sensor"></select>
+ <select id="drop-down--aggregation-type">
+ <option>None (raw data)</option>
+ <option>Sum/Daily</option>
+ <option>Sum/Monthly</option>
+ <option>Maximum/Daily</option>
+ <option>Maximum/Monthly</option>
+ <option>Minimum/Daily</option>
+ <option>Minimum/Monthly</option>
+ <option>Average/Daily</option>
+ <option>Average/Monthly</option>
+ </select>
</div>
</div>
<br />
<div id="drop-down--sampling-rate-parent">
<span><strong>Sampling rate</strong></span>
<div class="nowrap">
- <select id="drop-down--sampling-rate"></select>
+ <select id="drop-down--sampling-rate">
+ <option>15 min</option>
+ <option>60 min</option>
+ </select>
</div>
</div>
<br />
@@ -156,11 +214,15 @@
<span><strong>Chart type</strong></span>
<div class="nowrap">
<select id="drop-down--chart-type">
+ <option>Column</option>
<option>Line</option>
<option>Heatmap</option>
+ <option>Scatter Plot</option>
</select>
</div>
</div>
+ <br />
+ <button id="btn-draw-chart">Draw Chart</button>
<!-- <span><strong>Display Options</strong></span>
<div class="nowrap">
<input id="shadows" type="checkbox" />
diff --git a/public/js/dropDownList.js b/public/js/dropDownList.js
index b59951573304eef9acfbd78ea359a479a8bb0fcb..14cde18483aee2fcd315418d6d4a356b770ee77a 100644
--- a/public/js/dropDownList.js
+++ b/public/js/dropDownList.js
@@ -29,165 +29,42 @@ import {
import { vanillaSelectBox } from "./thirdparty/vanillaSelectBox.mjs";
-const buildingsAvailableSensorsArr = [
- // ["--Select--", "", ""],
-
- ["Bau 101", "Vorlauftemperatur", "15 min"],
- ["Bau 101", "Vorlauftemperatur", "60 min"],
- ["Bau 101", "Rücklauftemperatur", "15 min"],
- ["Bau 101", "Rücklauftemperatur", "60 min"],
-
- ["Bau 102", "Vorlauftemperatur", "15 min"],
- ["Bau 102", "Vorlauftemperatur", "60 min"],
- ["Bau 102", "Rücklauftemperatur", "15 min"],
- ["Bau 102", "Rücklauftemperatur", "60 min"],
-
- ["Bau 107", "Vorlauftemperatur", "15 min"],
- ["Bau 107", "Vorlauftemperatur", "60 min"],
- ["Bau 107", "Rücklauftemperatur", "15 min"],
- ["Bau 107", "Rücklauftemperatur", "60 min"],
-
- ["Bau 112", "Vorlauftemperatur", "15 min"],
- ["Bau 112", "Vorlauftemperatur", "60 min"],
- ["Bau 112", "Rücklauftemperatur", "15 min"],
- ["Bau 112", "Rücklauftemperatur", "60 min"],
-
- ["Bau 125", "Vorlauftemperatur", "15 min"],
- ["Bau 125", "Vorlauftemperatur", "60 min"],
- ["Bau 125", "Rücklauftemperatur", "15 min"],
- ["Bau 125", "Rücklauftemperatur", "60 min"],
-
- ["Bau 225", "Vorlauftemperatur", "15 min"],
- ["Bau 225", "Vorlauftemperatur", "60 min"],
- ["Bau 225", "Rücklauftemperatur", "15 min"],
- ["Bau 225", "Rücklauftemperatur", "60 min"],
- ["Bau 225", "Durchfluss", "15 min"],
- ["Bau 225", "Durchfluss", "60 min"],
- ["Bau 225", "Leistung", "15 min"],
- ["Bau 225", "Leistung", "60 min"],
- ["Bau 225", "Energie", "15 min"],
- ["Bau 225", "Energie", "60 min"],
- ["Bau 225", "Energie_VERBR", "15 min"],
- ["Bau 225", "Energie_VERBR", "60 min"],
-];
-
-/**
- * Get the unique values from an array
- * @param {Array} dataArr Input array
- * @param {Number} index Integer representing a zero-based index of the columns in the array
- * @returns {Array} An array of unique options
- */
-const getUniqueValues = function (dataArr, index) {
- const uniqueOptions = new Set();
-
- dataArr.forEach((row) => uniqueOptions.add(row[index]));
-
- return [...uniqueOptions];
-};
-
-/**
- * Populate the HTML elements that make up a drop down list
- * @param {Object} element HTMLElement object of a drop down list element
- * @param {Array} uniqueValuesArr An array of unique values
- * @returns {undefined}
- */
-const populateDropDown = function (element, uniqueValuesArr) {
- element.innerHTML = "";
-
- uniqueValuesArr.forEach((item) => {
- const option = document.createElement("option");
- option.textContent = item;
- element.appendChild(option);
- });
-};
-
-/**
- * Filter an array using filter strings of variable length
- * @param {Array} dataArr Input array
- * @param {Array} filtersAsArray An array of filter strings
- * @returns {Array} An array that contains the filter result
- */
-const filterArray = function (dataArr, filtersAsArray) {
- return dataArr.filter((row) =>
- filtersAsArray.every((filterItem, i) => filterItem === row[i])
- );
-};
-
-/**
- * Create a drop down list in the HTML document
- * @param {Array} dataArr Input array
- * @param {Array} filtersAsArray An array of strings tp be used as filters
- * @param {Object} targetElement HTMLElement object of a drop down list element
- * @returns {undefined}
- */
-const makeDropDown = function (dataArr, filtersAsArray, targetElement) {
- const filteredArr = filterArray(dataArr, filtersAsArray);
-
- const uniqueList = getUniqueValues(filteredArr, filtersAsArray.length);
-
- getUniqueValues(dataArr);
-
- populateDropDown(targetElement, uniqueList);
-};
-
/**
- * Use the `makeDropDown` function to create the first two levels of the linked drop down lists
+ * Use the `vanillaDropDown` library to style the first level drop down list
+ *
* @returns {undefined}
*/
-const applyDropDownLevelOneTwo = function () {
- const selectLevel1Value = document.querySelector("#drop-down--bldg").value;
- const selectLevel2DOMString = "#drop-down--sensor";
- const selectLevel2 = document.querySelector(selectLevel2DOMString);
- makeDropDown(buildingsAvailableSensorsArr, [selectLevel1Value], selectLevel2);
-
- applyDropDownLevelThree();
-
- // Create our dropdown list using `vanillaSelectBox`
- new vanillaSelectBox(selectLevel2DOMString, {
+const styleLevelOneDropDown = 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 `makeDropDown` function to create the third level of the linked drop down lists
+ * Use the `vanillaDropDown` library to style the second level drop down list
+ *
* @returns {undefined}
*/
-const applyDropDownLevelThree = function () {
- const selectLevel1Value = document.querySelector("#drop-down--bldg").value;
- const selectLevel2Value = document.querySelector("#drop-down--sensor").value;
- const selectLevel3DOMString = "#drop-down--sampling-rate";
- const selectLevel3 = document.querySelector(selectLevel3DOMString);
- makeDropDown(
- buildingsAvailableSensorsArr,
- [selectLevel1Value, selectLevel2Value],
- selectLevel3
- );
-
+const styleLevelTwoDropDown = function () {
// Create our dropdown list using `vanillaSelectBox`
- new vanillaSelectBox(selectLevel3DOMString, {
+ new vanillaSelectBox("#drop-down--aggregation-type", {
"placeHolder": "--Select--",
});
-
- // Create our fourth level dropdown
- styleFourthLevelDropDown();
};
/**
- * Use the `populateDropDown` function to populate the first level drop down
+ * Use the `vanillaDropDown` library to style the third level drop down list
+ *
* @returns {undefined}
*/
-const populateFirstLevelDropDown = function () {
- const selectLevel1DOMString = "#drop-down--bldg";
- const selectLevel1 = document.querySelector(selectLevel1DOMString);
- const uniqueList = getUniqueValues(buildingsAvailableSensorsArr, 0);
- populateDropDown(selectLevel1, uniqueList);
-
- // Create our dropdown list using `vanillaSelectBox`; supports the selection of multiple options
- new vanillaSelectBox(selectLevel1DOMString, {
- "disableSelectAll": true,
- "maxSelect": 3,
+const styleLevelThreeDropDown = function () {
+ // Create our dropdown list using `vanillaSelectBox`
+ new vanillaSelectBox("#drop-down--sampling-rate", {
"placeHolder": "--Select--",
- "search": false,
});
};
@@ -196,22 +73,13 @@ const populateFirstLevelDropDown = function () {
*
* @returns {undefined}
*/
-const styleFourthLevelDropDown = function () {
- const selectLevel4DOMString = "#drop-down--chart-type";
-
+const styleLevelFourDropDown = function () {
// Create our dropdown list using `vanillaSelectBox`
- new vanillaSelectBox(selectLevel4DOMString, {
+ new vanillaSelectBox("#drop-down--chart-type", {
"placeHolder": "--Select--",
});
};
-document
- .querySelector("#drop-down--bldg")
- .addEventListener("change", applyDropDownLevelOneTwo);
-document
- .querySelector("#drop-down--sensor")
- .addEventListener("change", applyDropDownLevelThree);
-
/**
* Callback function that wraps the logic of populating the linked drop down lists.
* Will run on `DOMContentLoaded` event
@@ -219,12 +87,12 @@ document
* @returns {undefined}
*/
const afterDocumentLoads = function () {
- populateFirstLevelDropDown();
- applyDropDownLevelOneTwo();
+ styleLevelOneDropDown();
+ styleLevelTwoDropDown();
+ styleLevelThreeDropDown();
+ styleLevelFourDropDown();
};
-document.addEventListener("DOMContentLoaded", afterDocumentLoads);
-
/**
* Get the values from the currently selected options in the linked drop dpwn lists
* @returns {Array} An array containing the values of the selected options
@@ -373,6 +241,8 @@ const selectChartTypeFromDropDown = async function () {
}
};
+document.addEventListener("DOMContentLoaded", afterDocumentLoads);
+
document
.querySelector("#drop-down--chart-type")
.addEventListener("change", selectChartTypeFromDropDown);