feat: Tooltip optimiert und Einheiten in System-Übersicht ergänzt

- Tooltip-Werte in beiden Charts (Spannung & Temperatur) auf exakt zwei Nachkommastellen formatiert (z. B. 2.00).
- Einheit °C für Temperaturen und V für Spannungen im Tooltip ergänzt.
- Auch in der Kachel-Übersicht oberhalb der Charts werden die Werte mit Einheiten (V, °C) und zwei Nachkommastellen angezeigt.
This commit is contained in:
ISA
2025-05-09 08:08:42 +02:00
parent 4f6b664ad0
commit e6c9b061fe

View File

@@ -44,7 +44,7 @@ const SystemPage = () => {
const labels = history.map((h) => new Date(h.time).toLocaleTimeString()); const labels = history.map((h) => new Date(h.time).toLocaleTimeString());
const formatValue = (value: number) => parseFloat(value.toFixed(2)); const formatValue = (value: number) => value.toFixed(2);
const voltageDatasets = [ const voltageDatasets = [
{ {
@@ -87,7 +87,7 @@ const SystemPage = () => {
}, },
{ {
label: "CPU Temp", label: "CPU Temp",
data: history.map((h) => h["CPU Temp"]), data: history.map((h) => Number(formatValue(h["CPU Temp"]))),
borderColor: "rgba(251,191,36,1)", borderColor: "rgba(251,191,36,1)",
backgroundColor: "rgba(251,191,36,0.5)", backgroundColor: "rgba(251,191,36,0.5)",
fill: false, fill: false,
@@ -122,6 +122,17 @@ const SystemPage = () => {
legend: { legend: {
position: "bottom" as const, position: "bottom" as const,
}, },
tooltip: {
callbacks: {
label: function (context: any) {
const label = context.dataset.label || "";
const value =
context.parsed.y !== null ? context.parsed.y.toFixed(2) : "";
const unit = label.includes("Temp") ? "°C" : "V";
return `${label}: ${value} ${unit}`;
},
},
},
}, },
}; };
@@ -132,12 +143,18 @@ const SystemPage = () => {
</h1> </h1>
<div className="grid grid-cols-2 gap-4 mb-8"> <div className="grid grid-cols-2 gap-4 mb-8">
{Object.entries(voltages).map(([key, value]) => ( {Object.entries(voltages).map(([key, value]) => {
<div key={key} className="p-4 border rounded shadow"> const formattedValue = formatValue(value);
<h2 className="font-semibold">{key}</h2> const unit = key.includes("Temp") ? "°C" : "V";
<p>{formatValue(value)}</p> return (
</div> <div key={key} className="p-4 border rounded shadow">
))} <h2 className="font-semibold">{key}</h2>
<p>
{formattedValue} {unit}
</p>
</div>
);
})}
</div> </div>
<div className="grid grid-cols-1 xl:grid-cols-2 gap-8"> <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">