feat: TDR-Chart mit Tooltip und Pegel-Darstellung hinzugefügt

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx

@@ -47,8 +47,8 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
                   borderWidth: 1,
                   tension: 0.1,
                   parsing: {
-                    xAxisKey: "t",
-                    yAxisKey: "m",
+                    xAxisKey: "d", // Entfernung/distance // statt "t"
+                    yAxisKey: "p", // Pegel             // statt "m"
                   },
                 },
               ],
@@ -56,6 +56,9 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
             options: {
               responsive: true,
               maintainAspectRatio: false,
+              animation: {
+                duration: 150, // 150 ms Animation
+              },
               scales: {
                 x: {
                   type: "linear",
@@ -74,12 +77,17 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
               plugins: {
                 tooltip: {
                   callbacks: {
+                    title: () => "", // 🚫 Entfernt die erste Zeile mit der Nummer
                     label: function (context) {
-                      const rawData = context.raw as { m: number };
-                      return `${rawData.m.toFixed(0)}`; // Nur den Wert anzeigen, ohne Icon und Modulnummer
+                      const rawData = context.raw as { d: number; p: number };
+                      return [
+                        `Entfernung: ${rawData.d.toFixed(0)} Meter`,
+                        `Pegel: ${rawData.p.toFixed(2)}`,
+                      ];
                     },
                   },
                 },
+
                 zoom: {
                   pan: {
                     enabled: true,
@@ -105,7 +113,13 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
 
   return (
     <div style={{ width: "100%", height: isFullScreen ? "90%" : "28rem" }}>
-      <canvas ref={chartRef} style={{ width: "100%", height: "100%" }} />
+      {tdrChartData.length === 0 ? (
+        <div className="flex items-center justify-center h-full text-gray-500 italic">
+          ⚠️ Keine Daten verfügbar für diesen Slot
+        </div>
+      ) : (
+        <canvas ref={chartRef} style={{ width: "100%", height: "100%" }} />
+      )}
     </div>
   );
 };