mirror of
https://github.com/ConnectedHumber/Air-Quality-Web
synced 2024-12-22 10:25:01 +00:00
Device graph: Add basic time quick selectors
This commit is contained in:
parent
3c9fe2a6d9
commit
12d4f4c8d2
2 changed files with 52 additions and 7 deletions
|
@ -72,14 +72,14 @@ h2.device-name { text-align: center; }
|
|||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
.reading-types {
|
||||
.button-array {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.reading-types button {
|
||||
.button-array button {
|
||||
margin: 0.25em;
|
||||
|
||||
background: hsla(252, 82%, 66%, 0.53);
|
||||
|
|
|
@ -21,6 +21,13 @@ class DeviceReadingDisplay {
|
|||
/** The current reading type to display a graph for. @type {Object} */
|
||||
this.reading_type = null;
|
||||
|
||||
// The number of points to display at a time.
|
||||
this.points_resolution = 50;
|
||||
|
||||
this.start_time = moment().subtract(1, "days");
|
||||
this.end_time = moment();
|
||||
|
||||
|
||||
this.default_colours = {
|
||||
borderColor: "hsla(0, 0%, 50%, 1)",
|
||||
backgroundColor: "hsla(0, 0%, 65%, 0.5)"
|
||||
|
@ -54,7 +61,7 @@ class DeviceReadingDisplay {
|
|||
borderColor: "hsla(258, 67%, 40%, 1)",
|
||||
backgroundColor: "hsla(249, 56%, 40%, 0.66)"
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async setup(default_reading_type) {
|
||||
|
@ -63,9 +70,19 @@ class DeviceReadingDisplay {
|
|||
/** @type {HTMLElement} */
|
||||
this.display = CreateElement("div.chart-device-data",
|
||||
CreateElement("canvas.canvas-chart"),
|
||||
CreateElement("ul.reading-types")
|
||||
CreateElement("ul.reading-types.button-array"),
|
||||
CreateElement("ul.quick-time-selector.button-array",
|
||||
CreateElement("li", CreateElement("button[data-timelength=1h]", "1 hour")),
|
||||
CreateElement("li", CreateElement("button[data-timelength=6h]", "6 hours")),
|
||||
CreateElement("li", CreateElement("button[data-timelength=1d].selected", "1 day")),
|
||||
CreateElement("li", CreateElement("button[data-timelength=1w]", "1 week")),
|
||||
CreateElement("li", CreateElement("button[data-timelength=1M]", "1 month")),
|
||||
CreateElement("li", CreateElement("button[data-timelength=3M]", "3 months")),
|
||||
CreateElement("li", CreateElement("button[data-timelength=1y]", "1 year"))
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
await this.fetch_reading_types();
|
||||
this.reading_type = this.reading_types.find((type) => type.id == default_reading_type);
|
||||
// Default to the 1st reading type if we can't find the default
|
||||
|
@ -87,12 +104,36 @@ class DeviceReadingDisplay {
|
|||
reading_type_list.appendChild(new_element);
|
||||
}
|
||||
|
||||
this.display.querySelector(".quick-time-selector")
|
||||
.addEventListener("click", (this.timelength_button_click_handler).bind(this));
|
||||
|
||||
|
||||
// ----------------------------------------------------
|
||||
|
||||
// Setup the chart itself
|
||||
this.setup_chart();
|
||||
}
|
||||
|
||||
async timelength_button_click_handler(event) {
|
||||
let timelength = event.target.dataset.timelength;
|
||||
if(typeof timelength == "undefined")
|
||||
return;
|
||||
|
||||
let time_unit = timelength.replace(/[0-9]+/g, "");
|
||||
let time_length = timelength.replace(/[^0-9]+/g, "");
|
||||
|
||||
this.start_time = moment().subtract(time_length, time_unit);
|
||||
this.end_time = moment();
|
||||
|
||||
|
||||
|
||||
await this.update_chart();
|
||||
|
||||
// Show the new button to be selected
|
||||
this.display.querySelectorAll(".quick-time-selector button").forEach((button) => button.classList.remove("selected"));
|
||||
event.target.classList.add("selected");
|
||||
}
|
||||
|
||||
setup_chart() {
|
||||
this.chart = new Chart(this.display.querySelector("canvas").getContext("2d"), {
|
||||
type: "line",
|
||||
|
@ -131,14 +172,17 @@ class DeviceReadingDisplay {
|
|||
|
||||
async get_data() {
|
||||
let new_data = null;
|
||||
// Dividing by 1000: ms -> s
|
||||
let average_seconds = (this.end_time.diff(this.start_time) / 1000) / this.points_resolution;
|
||||
console.info("Requesting data with start", this.start_time.toString(), ", end", this.end_time.toString(), ", average-seconds", average_seconds);
|
||||
try {
|
||||
new_data = JSON.parse(await GetFromUrl(`${this.config.api_root}?` + Postify({
|
||||
action: "device-data",
|
||||
"device-id": this.device_id,
|
||||
"reading-type": this.reading_type.id,
|
||||
start: moment().subtract(1, "days").toISOString(),
|
||||
end: moment().toISOString(),
|
||||
"average-seconds": 3600
|
||||
start: this.start_time.toISOString(),
|
||||
end: this.end_time.toISOString(),
|
||||
"average-seconds": average_seconds
|
||||
})));
|
||||
} catch(error) {
|
||||
// TODO: Display a nice error message here instead of an alert()
|
||||
|
@ -148,6 +192,7 @@ class DeviceReadingDisplay {
|
|||
}
|
||||
|
||||
console.log("[marker/popup/device-graph] Fetched data:", new_data);
|
||||
console.log("[marker/popup/device-graph] Point count:", new_data.length);
|
||||
|
||||
return new_data.map((data_point) => { return {
|
||||
t: moment(data_point.datetime),
|
||||
|
|
Loading…
Reference in a new issue