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

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

Browse source
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
1 changed files with 88 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

142
client_src/js/DeviceReadingDisplay.mjs
View file

@ -21,6 +21,10 @@ class DeviceReadingDisplay {
/** The current reading type to display a graph for. @type {Object} */
this.reading_type = null;
this.default_colours = {
borderColor: "hsla(0, 0%, 50%, 1)",
backgroundColor: "hsla(0, 0%, 65%, 0.5)"
};
this.reading_type_colours = {
"PM10": {
borderColor: "hsla(0, 82%, 56%, 1)",
@ -71,9 +75,55 @@ class DeviceReadingDisplay {
// ----------------------------------------------------
let data = null;
this.setup_chart();
}
setup_chart() {
this.chart = new Chart(this.display.querySelector("canvas").getContext("2d"), {
type: "line",
data: {
// We need to define an initial dataset here because otherwise
// Chart.js gets confused 'cause it has nothing to animate from
labels: [],
datasets: []
},
options: {
scales: {
xAxes: [{
type: "time",
time: {
format: "YYYY-MM-DD HH:mm",
tooltipFormat: 'll HH:mm'
},
scaleLabel: {
display: true,
labelString: "Time"
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: "Value"
}
}]
}
}
});
this.update_chart();
}
async get_data() {
let new_data = null;
try {
data = await this.get_data();
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
})));
} catch(error) {
// TODO: Display a nice error message here instead of an alert()
alert(error);
@ -81,58 +131,7 @@ class DeviceReadingDisplay {
return false;
}
this.setup_chart(data);
}
setup_chart(data) {
console.log("[marker/popup/device-graph] Data:", data);
this.chart = new Chart(
this.display.querySelector("canvas").getContext("2d"), {
type: "line",
data: {
labels: data.map((point) => point.t),
datasets: [{
borderColor: this.reading_type_colours[this.reading_type.id].borderColor,
backgroundColor: this.reading_type_colours[this.reading_type.id].backgroundColor,
label: this.reading_type.friendly_text,
data
}]
},
options: {
scales: {
xAxes: [{
type: "time",
time: {
format: "YYYY-MM-DD HH:mm",
tooltipFormat: 'll HH:mm'
},
scaleLabel: {
display: true,
labelString: "Time"
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: "Value"
}
}]
}
}
}
);
}
async get_data() {
let 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
})));
console.log("[marker/popup/device-graph] Fetched data:", new_data);
return new_data.map((data_point) => { return {
t: moment(data_point.datetime),
@ -143,6 +142,41 @@ class DeviceReadingDisplay {
async fetch_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;