From e6c9b061feb88f09e5c6cc4794bece407c18a0f8 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Fri, 9 May 2025 08:08:42 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20Tooltip=20optimiert=20und=20Einheiten?=
 =?UTF-8?q?=20in=20System-=C3=9Cbersicht=20erg=C3=A4nzt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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.
---
 pages/system.tsx | 33 +++++++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/pages/system.tsx b/pages/system.tsx
index a452670..f83cc3c 100644
--- a/pages/system.tsx
+++ b/pages/system.tsx
@@ -44,7 +44,7 @@ const SystemPage = () => {
 
   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 = [
     {
@@ -87,7 +87,7 @@ const SystemPage = () => {
     },
     {
       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)",
       backgroundColor: "rgba(251,191,36,0.5)",
       fill: false,
@@ -122,6 +122,17 @@ const SystemPage = () => {
       legend: {
         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>
 
       <div className="grid grid-cols-2 gap-4 mb-8">
-        {Object.entries(voltages).map(([key, value]) => (
-          <div key={key} className="p-4 border rounded shadow">
-            <h2 className="font-semibold">{key}</h2>
-            <p>{formatValue(value)}</p>
-          </div>
-        ))}
+        {Object.entries(voltages).map(([key, value]) => {
+          const formattedValue = formatValue(value);
+          const unit = key.includes("Temp") ? "°C" : "V";
+          return (
+            <div key={key} className="p-4 border rounded shadow">
+              <h2 className="font-semibold">{key}</h2>
+              <p>
+                {formattedValue} {unit}
+              </p>
+            </div>
+          );
+        })}
       </div>
 
       <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">