[client/device-graph] Refactor reading for customising the reading type

This commit is contained in:
Starbeamrainbowlabs 2019-01-20 21:54:40 +00:00
parent 5efa223376
commit 25ab294d1c
Signed by: sbrl
GPG key ID: 1BE5172E637709C2

View file

@ -21,6 +21,10 @@ 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;
this.default_colours = {
borderColor: "hsla(0, 0%, 50%, 1)",
backgroundColor: "hsla(0, 0%, 65%, 0.5)"
};
this.reading_type_colours = { this.reading_type_colours = {
"PM10": { "PM10": {
borderColor: "hsla(0, 82%, 56%, 1)", borderColor: "hsla(0, 82%, 56%, 1)",
@ -71,33 +75,17 @@ class DeviceReadingDisplay {
// ---------------------------------------------------- // ----------------------------------------------------
let data = null; this.setup_chart();
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() {
} this.chart = new Chart(this.display.querySelector("canvas").getContext("2d"), {
setup_chart(data) {
console.log("[marker/popup/device-graph] Data:", data);
this.chart = new Chart(
this.display.querySelector("canvas").getContext("2d"), {
type: "line", type: "line",
data: { data: {
labels: data.map((point) => point.t), // We need to define an initial dataset here because otherwise
datasets: [{ // Chart.js gets confused 'cause it has nothing to animate from
borderColor: this.reading_type_colours[this.reading_type.id].borderColor, labels: [],
backgroundColor: this.reading_type_colours[this.reading_type.id].backgroundColor, datasets: []
label: this.reading_type.friendly_text,
data
}]
}, },
options: { options: {
scales: { scales: {
@ -120,12 +108,15 @@ class DeviceReadingDisplay {
}] }]
} }
} }
} });
);
this.update_chart();
} }
async get_data() { async get_data() {
let new_data = JSON.parse(await GetFromUrl(`${this.config.api_root}?` + Postify({ let new_data = null;
try {
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,
@ -133,6 +124,14 @@ class DeviceReadingDisplay {
end: moment().toISOString(), end: moment().toISOString(),
"average-seconds": 3600 "average-seconds": 3600
}))); })));
} catch(error) {
// TODO: Display a nice error message here instead of an alert()
alert(error);
console.error(error);
return false;
}
console.log("[marker/popup/device-graph] Fetched data:", new_data);
return new_data.map((data_point) => { return { return new_data.map((data_point) => { return {
t: moment(data_point.datetime), t: moment(data_point.datetime),
@ -143,6 +142,41 @@ class DeviceReadingDisplay {
async fetch_reading_types() { async fetch_reading_types() {
this.reading_types = JSON.parse(await GetFromUrl(`${this.config.api_root}?action=list-reading-types`)); this.reading_types = JSON.parse(await GetFromUrl(`${this.config.api_root}?action=list-reading-types`));
} }
async switch_graph_type_handler(event) {
// Figure out what the new reading type is
this.reading_type = this.reading_types.find((type) => type.id == event.target.dataset.id);
await this.update_chart();
}
async update_chart() {
this.chart.data.datasets.length = 0;
// Get the Chart.js data object
let new_data_obj = {
label: this.reading_type.friendly_text,
data: await this.get_data()
};
// Update the colour
if(typeof this.reading_type_colours[this.reading_type.id] !== "undefined") {
new_data_obj.borderColor = this.reading_type_colours[this.reading_type.id].borderColor;
new_data_obj.backgroundColor = this.reading_type_colours[this.reading_type.id].backgroundColor;
}
else {
new_data_obj.borderColor = this.default_colours.borderColor;
new_data_obj.backgroundColor = this.default_colours.backgroundColor;
}
this.chart.data.datasets.push(new_data_obj);
// Update the x axis labels
this.chart.data.labels = new_data_obj.data.map((point) => point.t);
// Update the chart
this.chart.update();
}
} }
export default DeviceReadingDisplay; export default DeviceReadingDisplay;