diff --git a/src/static/js/tabledefs/cpu_live.mjs b/src/static/js/tabledefs/cpu_live.mjs index de3e3fe..b0caf5a 100644 --- a/src/static/js/tabledefs/cpu_live.mjs +++ b/src/static/js/tabledefs/cpu_live.mjs @@ -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" } ] diff --git a/src/static/js/ui/UIGauge.mjs b/src/static/js/ui/UIGauge.mjs index 4b04d76..dfb6ec2 100644 --- a/src/static/js/ui/UIGauge.mjs +++ b/src/static/js/ui/UIGauge.mjs @@ -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 } + ); } }