client: prettify gauge UI
This commit is contained in:
parent
61c8b76719
commit
6c5e27efba
2 changed files with 32 additions and 6 deletions
|
@ -7,7 +7,7 @@ export default {
|
|||
{
|
||||
name: "Frequency (GHz)",
|
||||
type: "gauge_multi",
|
||||
gauge: { min: 0, max: 6 },
|
||||
gauge_unit: "GHz",
|
||||
content: {
|
||||
"min": "frequency.min",
|
||||
"max": "frequency.max",
|
||||
|
@ -23,14 +23,14 @@ export default {
|
|||
{
|
||||
name: "Temperature (°C)",
|
||||
type: "gauge",
|
||||
gauge: { min: 0, max: 100 },
|
||||
gauge_unit: "°C",
|
||||
content: (table) => table.temperature.cores
|
||||
.reduce((acc, next) => acc + next, 0) / table.temperature.cores.length,
|
||||
},
|
||||
{
|
||||
name: "Chipset temperature (°C)",
|
||||
type: "gauge",
|
||||
gauge: { min: 0, max: 100 },
|
||||
gauge_unit: "°C",
|
||||
content: "temperature.chipset"
|
||||
}
|
||||
]
|
||||
|
|
|
@ -32,7 +32,10 @@ class UIGauge extends AbstractUIItem {
|
|||
const data = {
|
||||
x: [], // Labels
|
||||
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) {
|
||||
|
@ -43,15 +46,38 @@ class UIGauge extends AbstractUIItem {
|
|||
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);
|
||||
|
||||
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) {
|
||||
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 {
|
||||
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 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue