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:
@@ -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">
|
||||||
|
|||||||
Reference in New Issue
Block a user