sbrl-github/Air-Quality-Web
1
0
Fork 0
mirror of https://github.com/ConnectedHumber/Air-Quality-Web synced 2024-12-22 10:25:01 +00:00
Code Issues Releases Wiki Activity

[client] Fix some bugs in the device chart, but there are a bunch still to go.

Browse source
This commit is contained in:
Starbeamrainbowlabs 2019-01-20 20:09:20 +00:00
parent b34ba0dc0b
commit 01404172b5
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
2 changed files with 45 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
client_src/js/DeviceReadingDisplay.mjs
View file

@ -13,31 +13,56 @@ import Postify from './Helpers/Postify.mjs';
class DeviceReadingDisplay {
constructor(in_config, in_device_id, in_reading_type) {
constructor(in_config, in_device_id) {
this.config = in_config;
/** @type {int} */
/** The ID of the device to display a graph for. @type {int} */
this.device_id = in_device_id;
// TODO: Allow the user to change this
/** @type {Object} */
this.reading_type = in_reading_type;
this.setup_display();
/** The current reading type to display a graph for. @type {Object} */
this.reading_type = null;
}
async setup_display() {
async setup(default_reading_type) {
// Create the display element first, as we need it to be immediately available for inclusion in the popup window
/** @type {HTMLElement} */
this.display = CreateElement("div.chart-device-data",
CreateElement("canvas.canvas-chart"),
CreateElement("ul.reading-types")
);
await this.fetch_reading_types();
this.reading_type = this.reading_types.find((type) => type.id == default_reading_type);
let reading_type_list = this.display.querySelector(".reading-types");
for(let reading_type of this.reading_types) {
let new_element = CreateElement("li", reading_type.friendly_text);
new_element.dataset.id = reading_type.id;
reading_type_list.appendChild(new_element);
}
// ----------------------------------------------------
let data = null;
try {
data = await this.get_data();
} catch(error) {
// TODO: Display a nice error message here instead of an alert()
alert(error);
console.error(error);
return false;
}
this.setup_chart(data);
}
setup_chart(data) {
this.chart = new Chart(
this.display.querySelector("canvas").getContext("2d"), {
type: "line",
data: {
datasets: [{
label: this.reading_type.friendly_text,
data: await this.get_data
data
}]
},
options: {
@ -52,8 +77,9 @@ class DeviceReadingDisplay {
action: "device-data",
"device-id": this.device_id,
"reading-type": this.reading_type.id,
start: (new Date()).toISOString(),
end: new Date(new Date - 60*60*24),
// Need to work in milliseconds here, not seconds
start: new Date(new Date - 1000*60*60*24).toISOString(),
end: (new Date()).toISOString(),
"average-seconds": 3600
})));
@ -62,6 +88,10 @@ class DeviceReadingDisplay {
y: data_point.value
}});
}
async fetch_reading_types() {
this.reading_types = JSON.parse(await GetFromUrl(`${this.config.api_root}?action=list-reading-types`));
}
}
export default DeviceReadingDisplay;

6
client_src/js/LayerDeviceMarkers.mjs
View file

@ -123,8 +123,10 @@ class LayerDeviceMarkers {
// ----------------------------------
// TODO: Allow the user to change the reading type
let chart_device_data = new DeviceReadingDisplay(Config, device_info.id, "PM25");
let chart_device_data = new DeviceReadingDisplay(Config, device_info.id);
chart_device_data.setup("PM25").then(() =>
console.info("[layer/markers] Device chart setup complete!")
);
data_container.appendChild(chart_device_data.display);
// ----------------------------------