dropDownList.js 10.3 KB
Newer Older
1
2
"use strict";

3
4
5
6
import {
  BASE_URL,
  QUERY_PARAMS_COMBINED,
  formatDatastreamMetadataForChart,
7
8
9
10
  formatSensorThingsApiResponseForHeatMap,
  drawHeatMapHighcharts,
  formatSensorThingsApiResponseForLineChart,
  drawLineChartHighcharts,
11
  getMetadataPlusObservationsFromSingleOrMultipleDatastreams,
12
13
} from "./appChart.js";

14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
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];
68
69
};

70
71
72
73
74
75
76
77
78
79
80
81
82
83
/**
 * Populate the HTML elements that make up a drop down list
 * @param {String} element String corresponding to the ID of a drop down HTML 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);
  });
84
85
};

86
87
88
89
90
91
92
93
94
95
/**
 * Filter an array using filter strings of variable length
 * @param {*} dataArr Input array
 * @param {*} 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])
  );
Pithon Kabiro's avatar
Pithon Kabiro committed
96
97
};

98
99
100
101
102
/**
 * Create a drop down list in the HTML document
 * @param {*} dataArr Input array
 * @param {*} filtersAsArray An array of strings tp be used as filters
 * @param {*} targetElement String corresponding to the ID of a drop down HTML element
103
 * @returns {undefined}
104
105
106
107
108
109
110
111
112
113
114
115
116
 */
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
117
 * @returns {undefined}
118
119
120
121
122
123
124
 */
const applyDropDown = function () {
  const selectLevel1Value = document.querySelector("#drop-down--bldg").value;
  const selectLevel2 = document.querySelector("#drop-down--sensor");
  makeDropDown(buildingsAvailableSensorsArr, [selectLevel1Value], selectLevel2);

  applyDropDown2();
125
126
};

127
128
/**
 * Use the `makeDropDown` function to create the third level of the linked drop down lists
129
 * @returns {undefined}
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 */
const applyDropDown2 = function () {
  const selectLevel1Value = document.querySelector("#drop-down--bldg").value;
  const selectLevel2Value = document.querySelector("#drop-down--sensor").value;
  const selectLevel3 = document.querySelector("#drop-down--sampling-rate");
  makeDropDown(
    buildingsAvailableSensorsArr,
    [selectLevel1Value, selectLevel2Value],
    selectLevel3
  );
};

/**
 * Use the `populateDropDown` function to populate the first level drop down
144
 * @returns {undefined}
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
 */
const populateFirstLevelDropDown = function () {
  const el = document.querySelector("#drop-down--bldg");
  const uniqueList = getUniqueValues(buildingsAvailableSensorsArr, 0);
  populateDropDown(el, uniqueList);
};

document
  .querySelector("#drop-down--bldg")
  .addEventListener("change", applyDropDown);
document
  .querySelector("#drop-down--sensor")
  .addEventListener("change", applyDropDown2);

// These functions run after "DOMContentLoaded" event
populateFirstLevelDropDown();
applyDropDown();
162
163
164
165
166
167
168
169
170
171
172
173

/**
 * 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
 */
const getSelectedOptionsFromDropDownLists = function () {
  const selectedBuilding = document.querySelector("#drop-down--bldg").value;
  const selectedSensor = document.querySelector("#drop-down--sensor").value;
  const selectedSamplingRate = document.querySelector(
    "#drop-down--sampling-rate"
  ).value;

174
175
176
177
178
179
180
  if (
    selectedBuilding === "--Select--" ||
    selectedSensor === "" ||
    selectedSamplingRate === ""
  )
    return;

181
182
  return [selectedBuilding, selectedSensor, selectedSamplingRate];
};
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229

/**
 * Get the abbreviated form of building IDs, phenomenon names and sensor sampling rates
 * @param {String} buildingFullForm A string representation of the full form of a building ID
 * @param {String} phenomenonFullForm A string representation of the full form of a phenomenon name
 * @param {String} samplingRateFullForm A string representation of the full form of a sensor's sampling rate
 * @returns {Array} An array of abbreviated strings
 */
const getBuildingSensorSamplingRateAbbreviation = function (
  buildingFullForm,
  phenomenonFullForm,
  samplingRateFullForm
) {
  const fullFormToAbbreviationMapping = {
    buildings: {
      "Bau 101": "101",
      "Bau 102": "102",
      "Bau 107": "107",
      "Bau 112": "112, 118",
      "Bau 125": "125",
      "Bau 225": "225",
    },
    phenomenon: {
      Vorlauftemperatur: "vl",
      Rücklauftemperatur: "rl",
      Durchfluss: "flow",
      Leistung: "power",
      Energie: "energy",
      Energie_VERBR: "energy_verb",
    },
    samplingRate: {
      "15 min": "15min",
      "60 min": "60min",
    },
  };

  const buildingAbbrev =
    fullFormToAbbreviationMapping["buildings"]?.[buildingFullForm];

  const phenomenonAbbrev =
    fullFormToAbbreviationMapping["phenomenon"]?.[phenomenonFullForm];

  const samplingRateAbbrev =
    fullFormToAbbreviationMapping["samplingRate"]?.[samplingRateFullForm];

  return [buildingAbbrev, phenomenonAbbrev, samplingRateAbbrev];
};
230

231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
/**
 * Show a loading indicator at the start of an async task. The indicator consists of a spinner and a transluscent mask placed on top of page elements
 * @returns {undefined}
 */
const showLoadingSpinner = function () {
  const loadingIndicatorMask = document.querySelector("#loadingIndicator");
  const loadingIconSpinner = document.querySelector("#loadingIcon");

  loadingIndicatorMask.style.display = "block";
  loadingIconSpinner.style.display = "block";
};

/**
 * Hide the loading indicator after completion of the async tasks
 * @returns {undefined}
 */
const hideLoadingSpinner = function () {
  const loadingIndicatorMask = document.querySelector("#loadingIndicator");
  const loadingIconSpinner = document.querySelector("#loadingIcon");

  loadingIndicatorMask.style.display = "none";
  loadingIconSpinner.style.display = "none";
};

/**
 * Callback function for chart selection using drop down list
 * @returns {undefined}
 */
259
const selectChartTypeFromDropDown = async function () {
260
261
262
  try {
    const selectedOptions = getSelectedOptionsFromDropDownLists();

263
264
    if (selectedOptions === undefined) return;

265
266
    const selectedOptionsAbbreviationsArr =
      getBuildingSensorSamplingRateAbbreviation(...selectedOptions);
267

268
269
270
271
272
273
    const selectedChartType = document.querySelector(
      "#drop-down--chart-type"
    ).value;

    if (selectedChartType === "--Select--") return;

274
275
    // Display the loading indicator
    showLoadingSpinner();
276

277
278
279
280
281
282
283
284
285
    // The `getMetadataPlusObservationsFromSingleOrMultipleDatastreams` function expects a nested array structure
    const abbreviationsNestedArr = [selectedOptionsAbbreviationsArr];

    const observationsPlusMetadata =
      await getMetadataPlusObservationsFromSingleOrMultipleDatastreams(
        BASE_URL,
        QUERY_PARAMS_COMBINED,
        abbreviationsNestedArr
      );
286

287
288
289
290
291
292
    // Extract the combined arrays for observations and metadata
    const [observationsArr, metadataArr] = observationsPlusMetadata;

    // Create formatted array(s) for observations - line chart
    const formattedObsLineChartArr = observationsArr.map((observations) =>
      formatSensorThingsApiResponseForLineChart(observations)
293
294
    );

295
296
297
298
    // Create formatted array(s) for observations - heatmap
    const formattedObsHeatMapArr = observationsArr.map((observations) =>
      formatSensorThingsApiResponseForHeatMap(observations)
    );
299

300
301
302
303
    // Create formatted array(s) for metadata - same for both chart types
    const formattedMetadataArr = metadataArr.map((metadata) =>
      formatDatastreamMetadataForChart(metadata)
    );
304

305
    if (selectedChartType === "Line") {
306
      drawLineChartHighcharts(formattedObsLineChartArr, formattedMetadataArr);
307
    } else if (selectedChartType === "Heatmap") {
308
309
      // First need to extract the nested arrays for the formatted observations and metadata
      drawHeatMapHighcharts(...formattedObsHeatMapArr, ...formattedMetadataArr);
310
    }
311
312
  } catch (err) {
    console.error(err);
313
314
315
  } finally {
    // Hide the loading indicator
    hideLoadingSpinner();
316
317
318
319
  }
};

document
320
  .querySelector("#drop-down--chart-type")
321
  .addEventListener("change", selectChartTypeFromDropDown);