client: prettify gauge UI

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"
 		}
 	]

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 }
+			);
 		}
 	}