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

.env.production

@@ -1,4 +1,4 @@
 NEXT_PUBLIC_NODE_ENV=production
 NEXT_PUBLIC_ENCRYPTION_KEY=1
 NEXT_PUBLIC_ENCRYPTION_IV=1
-NEXT_PUBLIC_CPL_API_PATH=/CPL
+NEXT_PUBLIC_CPL_API_PATH=/CPL

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

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.143";
+const webVersion = "1.6.144";
 export default webVersion;

redux/thunks/fetchAllTDRChartThunk.ts

@@ -1,34 +1,18 @@
 // /redux/thunks/fetchAllTDRChartThunk.ts
+
 import { createAsyncThunk } from "@reduxjs/toolkit";
 import { RootState } from "../store";
 import isEqual from "lodash/isEqual";
-
-const BASE_PATH = "/CPLmockData/LastTDR/jsonDatei";
+import { fetchAllTDRChartDataFromServer } from "../../services/fetchAllTDRChartData"; // ✅ importieren
 
 export const fetchAllTDRChartData = createAsyncThunk(
   "tdrChart/fetchAllTDRChartData",
   async (_, { getState, rejectWithValue }) => {
-    const state: RootState = getState() as RootState;
-    const currentData = state.tdrChart.data; // Aktuelle Redux-Daten
+    const state = getState() as RootState;
+    const currentData = state.tdrChart.data;
 
-    const fileNames = Array.from({ length: 32 }, (_, i) => `slot${i}.json`);
-    const fetchPromises = fileNames.map(async (fileName) => {
-      try {
-        const response = await fetch(`${BASE_PATH}/${fileName}`);
-        if (!response.ok)
-          throw new Error(`Fehler bei ${fileName}: ${response.statusText}`);
-        return await response.json();
-      } catch (error) {
-        console.error(`Fehler beim Laden von ${fileName}:`, error);
-        return null;
-      }
-    });
+    const newData = await fetchAllTDRChartDataFromServer(); // ✅ Service aufrufen
 
-    const newData = await Promise.all(fetchPromises);
-
-    //console.log("Geladene Daten:", newData);
-
-    // Falls die Daten leer oder identisch sind, aber initial leer waren, trotzdem speichern
     if (newData.every((d) => d === null || d === undefined)) {
       console.warn("⚠ Keine gültigen Daten empfangen.");
       return rejectWithValue("Keine gültigen Daten empfangen.");

services/fetchAllTDRChartData.ts

@@ -1,21 +1,21 @@
 // /services/fetchAllTDRChartData.ts
-import { Dispatch } from "@reduxjs/toolkit";
-import { setTDRData, selectTDRData } from "../redux/slices/tdrChartSlice";
-import { RootState } from "../redux/store";
 
-const BASE_PATH = "/CPLmockData/LastTDR/jsonDatei";
+const getTDRBasePath = () => {
+  if (typeof window !== "undefined") {
+    return window.location.hostname === "localhost"
+      ? "/CPLmockData/LastTDR/jsonDatei"
+      : "/CPL?/CPL/LastTDR";
+  }
+  return "";
+};
 
-export const fetchAllTDRChartData = async (
-  dispatch: Dispatch,
-  getState: () => RootState
-) => {
-  const state = getState();
-  const currentData = selectTDRData(state);
+export const fetchAllTDRChartDataFromServer = async (): Promise<any[]> => {
+  const basePath = getTDRBasePath();
+  const fileNames = Array.from({ length: 32 }, (_, i) => `slot${i}.json`);
 
-  const fileNames = Array.from({ length: 32 }, (_, i) => `json${i}`);
   const fetchPromises = fileNames.map(async (fileName) => {
     try {
-      const response = await fetch(`${BASE_PATH}/${fileName}.json`);
+      const response = await fetch(`${basePath}/${fileName}`);
       if (!response.ok)
         throw new Error(`Fehler bei ${fileName}: ${response.statusText}`);
       return await response.json();
@@ -25,10 +25,5 @@ export const fetchAllTDRChartData = async (
     }
   });
 
-  const newData = await Promise.all(fetchPromises);
-
-  // Nur aktualisieren, wenn sich die Daten geändert haben
-  if (JSON.stringify(currentData) !== JSON.stringify(newData)) {
-    dispatch(setTDRData(newData));
-  }
+  return await Promise.all(fetchPromises);
 };

services/fetchTDRChartData.ts

@@ -1,33 +0,0 @@
-// /services/fetchTDRChartData.ts
-
-export const fetchTDRChartData = async (
-  selectedFileName: string | null
-): Promise<any | null> => {
-  if (!selectedFileName) {
-    console.error("Kein Dateiname in Redux gespeichert.");
-    return null;
-  }
-
-  const yearFolder = `Year_${new Date().getFullYear().toString().slice(-2)}`;
-  const monthFolder = `Month_${(new Date().getMonth() + 1)
-    .toString()
-    .padStart(2, "0")}`;
-
-  // const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${selectedFileName}`;
-  const filePath = `/CPLmockData/LastTDR/jsonDatei/${selectedFileName}`;
-
-  try {
-    const response = await fetch(filePath);
-    if (!response.ok) {
-      throw new Error(
-        `Fehler beim Laden der TDR-Daten: ${response.statusText}`
-      );
-    }
-    const data = await response.json();
-    console.log("Geladene TDR-Daten:", data);
-    return data;
-  } catch (error) {
-    console.error("Fehler beim Laden der TDR-Daten:", error);
-    return null;
-  }
-};