sbrl/systemquery
1
0
Fork 0
Code Issues Pull requests Releases Activity

client: prettify gauge UI

Browse source
This commit is contained in:
Starbeamrainbowlabs 2022-05-25 03:14:18 +01:00
parent 61c8b76719
commit 6c5e27efba
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
2 changed files with 32 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/static/js/tabledefs/cpu_live.mjs
View file

@ -7,7 +7,7 @@ export default {
{ {
name: "Frequency (GHz)", name: "Frequency (GHz)",
type: "gauge_multi", type: "gauge_multi",
gauge: { min: 0, max: 6 }, gauge_unit: "GHz",
content: { content: {
"min": "frequency.min", "min": "frequency.min",
"max": "frequency.max", "max": "frequency.max",
@ -23,14 +23,14 @@ export default {
{ {
name: "Temperature (°C)", name: "Temperature (°C)",
type: "gauge", type: "gauge",
gauge: { min: 0, max: 100 }, gauge_unit: "°C",
content: (table) => table.temperature.cores content: (table) => table.temperature.cores
.reduce((acc, next) => acc + next, 0) / table.temperature.cores.length, .reduce((acc, next) => acc + next, 0) / table.temperature.cores.length,
}, },
{ {
name: "Chipset temperature (°C)", name: "Chipset temperature (°C)",
type: "gauge", type: "gauge",
gauge: { min: 0, max: 100 }, gauge_unit: "°C",
content: "temperature.chipset" content: "temperature.chipset"
} }
] ]

32
src/static/js/ui/UIGauge.mjs
View file

@ -32,7 +32,10 @@ class UIGauge extends AbstractUIItem {
const data = { const data = {
x: [], // Labels x: [], // Labels
y: [], // Data numbers y: [], // Data numbers
type: "bar" type: "bar",
marker: {
color: "hsla(178, 61%, 59%, 0.75)" // --tech-d, taken from the CSS
}
}; };
for (const itemdef of this.#chart_data) { for (const itemdef of this.#chart_data) {
@ -43,15 +46,38 @@ class UIGauge extends AbstractUIItem {
data.y.push(itemdef.data_item); data.y.push(itemdef.data_item);
} }
data.text = data.y.map(value => this.def.gauge_unit ? `${value} ${this.def.gauge_unit}` : value);
console.log(`def ${this.def.name} plotly definition`, data); console.log(`def ${this.def.name} plotly definition`, data);
const layout = {
// title: this.def.name // We already have a title, but if we didn't we'd add one like this
paper_bgcolor: window.getComputedStyle(this.el_gauge, null).backgroundColor,
plot_bgcolor: "transparent",
modebar: { bgcolor: "transparent" },
font: {
color: "white"
},
margin: {
b: 40, l: 40, r: 40, t: 40
}
}
if(this.#chart === null) { if(this.#chart === null) {
console.log(`def ${this.def.name} plotly NEW`); console.log(`def ${this.def.name} plotly NEW`);
this.#chart = Plotly.newPlot(this.el_gauge, [data]); this.#chart = Plotly.newPlot(
this.el_gauge,
[data], layout,
{ responsive: true }
);
} }
else { else {
console.log(`def ${this.def.name} plotly REACT`); console.log(`def ${this.def.name} plotly REACT`);
this.#chart = Plotly.react(this.el_gauge, [data]); this.#chart = Plotly.react(
this.el_gauge,
[data], layout,
{ responsive: true }
);
} }
} }