Device graph: Add basic time quick selectors

This commit is contained in:
Starbeamrainbowlabs 2019-02-10 14:29:16 +00:00
parent 3c9fe2a6d9
commit 12d4f4c8d2
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
2 changed files with 52 additions and 7 deletions

View File

@ -72,14 +72,14 @@ h2.device-name { text-align: center; }
padding-left: 0.5em; padding-left: 0.5em;
} }
.reading-types { .button-array {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.reading-types button { .button-array button {
margin: 0.25em; margin: 0.25em;
background: hsla(252, 82%, 66%, 0.53); background: hsla(252, 82%, 66%, 0.53);

View File

@ -21,6 +21,13 @@ class DeviceReadingDisplay {
/** The current reading type to display a graph for. @type {Object} */ /** The current reading type to display a graph for. @type {Object} */
this.reading_type = null; 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 = { this.default_colours = {
borderColor: "hsla(0, 0%, 50%, 1)", borderColor: "hsla(0, 0%, 50%, 1)",
backgroundColor: "hsla(0, 0%, 65%, 0.5)" backgroundColor: "hsla(0, 0%, 65%, 0.5)"
@ -54,7 +61,7 @@ class DeviceReadingDisplay {
borderColor: "hsla(258, 67%, 40%, 1)", borderColor: "hsla(258, 67%, 40%, 1)",
backgroundColor: "hsla(249, 56%, 40%, 0.66)" backgroundColor: "hsla(249, 56%, 40%, 0.66)"
} }
} };
} }
async setup(default_reading_type) { async setup(default_reading_type) {
@ -63,9 +70,19 @@ class DeviceReadingDisplay {
/** @type {HTMLElement} */ /** @type {HTMLElement} */
this.display = CreateElement("div.chart-device-data", this.display = CreateElement("div.chart-device-data",
CreateElement("canvas.canvas-chart"), 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(); await this.fetch_reading_types();
this.reading_type = this.reading_types.find((type) => type.id == default_reading_type); 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 // 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); 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 // Setup the chart itself
this.setup_chart(); 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() { setup_chart() {
this.chart = new Chart(this.display.querySelector("canvas").getContext("2d"), { this.chart = new Chart(this.display.querySelector("canvas").getContext("2d"), {
type: "line", type: "line",
@ -131,14 +172,17 @@ class DeviceReadingDisplay {
async get_data() { async get_data() {
let new_data = null; 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 { try {
new_data = JSON.parse(await GetFromUrl(`${this.config.api_root}?` + Postify({ new_data = JSON.parse(await GetFromUrl(`${this.config.api_root}?` + Postify({
action: "device-data", action: "device-data",
"device-id": this.device_id, "device-id": this.device_id,
"reading-type": this.reading_type.id, "reading-type": this.reading_type.id,
start: moment().subtract(1, "days").toISOString(), start: this.start_time.toISOString(),
end: moment().toISOString(), end: this.end_time.toISOString(),
"average-seconds": 3600 "average-seconds": average_seconds
}))); })));
} catch(error) { } catch(error) {
// TODO: Display a nice error message here instead of an alert() // 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] Fetched data:", new_data);
console.log("[marker/popup/device-graph] Point count:", new_data.length);
return new_data.map((data_point) => { return { return new_data.map((data_point) => { return {
t: moment(data_point.datetime), t: moment(data_point.datetime),