sbrl-github
/
Air-Quality-Web
mirror of https://github.com/ConnectedHumber/Air-Quality-Web
1
0
Fork 0
Code Issues Releases Wiki Activity

[client/device-graph] Add colours for the different reading types 

....but you can't switch between them yet.
This commit is contained in:
Starbeamrainbowlabs 2019-01-20 21:31:16 +00:00
parent a4ab7a0e61
commit 5efa223376
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
1 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
client_src/js/DeviceReadingDisplay.mjs
View File

@ -20,6 +20,29 @@ class DeviceReadingDisplay {
this.device_id = in_device_id;
/** The current reading type to display a graph for. @type {Object} */
this.reading_type = null;
this.reading_type_colours = {
"PM10": {
borderColor: "hsla(0, 82%, 56%, 1)",
backgroundColor: "hsla(14, 94%, 71%, 0.57)"
},
"PM25": {
borderColor: "hsla(33, 70%, 51%, 1)",
backgroundColor: "hsla(28, 77%, 58%, 0.63)"
},
"temperature": {
borderColor: "hsla(0, 77%, 45%, 1)",
backgroundColor: "hsla(0, 61%, 58%, 0.59)"
},
"humidity": {
borderColor: "hsla(184, 69%, 40%, 1)",
backgroundColor: "hsla(188, 53%, 46%, 0.58)"
},
"pressure": {
borderColor: "hsla(258, 67%, 40%, 1)",
backgroundColor: "hsla(249, 56%, 40%, 0.66)"
}
}
}
async setup(default_reading_type) {
@ -69,8 +92,9 @@ class DeviceReadingDisplay {
data: {
labels: data.map((point) => point.t),
datasets: [{
borderColor: "hsl(184, 69%, 40%)",
backgroundColor: "hsla(188, 53%, 46%, 0.58)",
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
}]