[client/device-graph] Allow reading type selection works! Finally :P

This commit is contained in:
Starbeamrainbowlabs 2019-01-20 22:32:34 +00:00
parent ee6cf4a86e
commit f73cf8b1f6
Signed by: sbrl
GPG key ID: 1BE5172E637709C2

View file

@ -25,20 +25,28 @@ class DeviceReadingDisplay {
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)"
}; };
this.reading_type_colours = { this.reading_type_defs = {
"PM10": { "PM10": {
suggestedMin: 0,
suggestedMax: 110,
borderColor: "hsla(0, 82%, 56%, 1)", borderColor: "hsla(0, 82%, 56%, 1)",
backgroundColor: "hsla(14, 94%, 71%, 0.57)" backgroundColor: "hsla(14, 94%, 71%, 0.57)"
}, },
"PM25": { "PM25": {
suggestedMin: 0,
suggestedMax: 75,
borderColor: "hsla(33, 70%, 51%, 1)", borderColor: "hsla(33, 70%, 51%, 1)",
backgroundColor: "hsla(28, 77%, 58%, 0.63)" backgroundColor: "hsla(28, 77%, 58%, 0.63)"
}, },
"temperature": { "temperature": {
suggestedMin: -5,
suggestedMax: 40,
borderColor: "hsla(0, 77%, 45%, 1)", borderColor: "hsla(0, 77%, 45%, 1)",
backgroundColor: "hsla(0, 61%, 58%, 0.59)" backgroundColor: "hsla(0, 61%, 58%, 0.59)"
}, },
"humidity": { "humidity": {
suggestedMin: 0,
suggestedMax: 100,
borderColor: "hsla(184, 69%, 40%, 1)", borderColor: "hsla(184, 69%, 40%, 1)",
backgroundColor: "hsla(188, 53%, 46%, 0.58)" backgroundColor: "hsla(188, 53%, 46%, 0.58)"
}, },
@ -61,13 +69,16 @@ class DeviceReadingDisplay {
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);
// Create the reading type buttons
let reading_type_list = this.display.querySelector(".reading-types"); let reading_type_list = this.display.querySelector(".reading-types");
for(let reading_type of this.reading_types) { for(let reading_type of this.reading_types) {
let new_element = CreateElement("li", let new_element = CreateElement("li",
CreateElement("button", reading_type.friendly_text) CreateElement("button", reading_type.friendly_text)
); );
let button = new_element.querySelector("button");
if(reading_type.id == this.reading_type.id) if(reading_type.id == this.reading_type.id)
new_element.querySelector("button").classList.add("selected"); button.classList.add("selected");
button.addEventListener("click", this.switch_graph_type_handler.bind(this));
new_element.dataset.id = reading_type.id; new_element.dataset.id = reading_type.id;
reading_type_list.appendChild(new_element); reading_type_list.appendChild(new_element);
@ -75,6 +86,7 @@ class DeviceReadingDisplay {
// ---------------------------------------------------- // ----------------------------------------------------
// Setup the chart itself
this.setup_chart(); this.setup_chart();
} }
@ -101,6 +113,7 @@ class DeviceReadingDisplay {
} }
}], }],
yAxes: [{ yAxes: [{
ticks: { },
scaleLabel: { scaleLabel: {
display: true, display: true,
labelString: "Value" labelString: "Value"
@ -144,10 +157,21 @@ class DeviceReadingDisplay {
} }
async switch_graph_type_handler(event) { async switch_graph_type_handler(event) {
let old_reading_type = this.reading_type;
// Figure out what the new reading type is // Figure out what the new reading type is
this.reading_type = this.reading_types.find((type) => type.id == event.target.dataset.id); this.reading_type = this.reading_types.find((type) => type.id == event.target.parentNode.dataset.id);
console.log("[marker/device-graph] Reading type is now", this.reading_type);
await this.update_chart(); await this.update_chart();
// If we get to here, we updated the chart without error
// Update the button list to highlight the newly-selected reading type
// Remove the selected class from the old one
event.target.parentNode.parentNode.querySelector(`[data-id=${old_reading_type.id}] button`).classList.remove("selected");
// Add the selected class to the new one
event.target.classList.add("selected");
} }
async update_chart() { async update_chart() {
@ -159,15 +183,25 @@ class DeviceReadingDisplay {
data: await this.get_data() data: await this.get_data()
}; };
// Update the colour // Update the colour & suggested min/max values
if(typeof this.reading_type_colours[this.reading_type.id] !== "undefined") { let def = this.reading_type_defs[this.reading_type.id],
new_data_obj.borderColor = this.reading_type_colours[this.reading_type.id].borderColor; y_axis = this.chart.options.scales.yAxes[0];
new_data_obj.backgroundColor = this.reading_type_colours[this.reading_type.id].backgroundColor; if(typeof def !== "undefined") {
new_data_obj.borderColor = def.borderColor;
new_data_obj.backgroundColor = def.backgroundColor;
} }
else { else {
new_data_obj.borderColor = this.default_colours.borderColor; new_data_obj.borderColor = this.default_colours.borderColor;
new_data_obj.backgroundColor = this.default_colours.backgroundColor; new_data_obj.backgroundColor = this.default_colours.backgroundColor;
} }
if(typeof def !== "undefined" && typeof def.suggestedMin !== "undefined") {
y_axis.ticks.suggestedMin = def.suggestedMin;
y_axis.ticks.suggestedMax = def.suggestedMax;
}
else {
delete y_axis.ticks.suggestedMin;
delete y_axis.ticks.suggestedMax;
}
this.chart.data.datasets.push(new_data_obj); this.chart.data.datasets.push(new_data_obj);