feat: Referenzkurve für TDR-Chart integriert

- Neues Verzeichnis `tdr-reference-curves` für JSON-Referenzdaten hinzugefügt
- Redux Slice `tdrReferenceChartSlice` erstellt
- Thunk `fetchAllTDRReferenceChartThunk` zum Laden aller Referenzdaten integriert
- Service `fetchAllTDRReferenceChartData` mit Umgebungsunterscheidung (dev/prod)
- Anzeige der Referenzkurve im TDR-Chart mit Tooltip und gestrichelter Linie
- Referenzdaten werden automatisch beim Laden der Seite in Redux geladen

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

@@ -23,6 +23,12 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
     selectedSlot !== null ? state.tdrChart.data[selectedSlot] || [] : []
   );
 
+  const referenceChartData = useSelector((state: RootState) =>
+    selectedSlot !== null
+      ? state.tdrReferenceChart.referenceData[selectedSlot] || []
+      : []
+  );
+
   useEffect(() => {
     import("chartjs-plugin-zoom").then((zoomPlugin) => {
       Chart.register(...registerables, zoomPlugin.default);
@@ -51,6 +57,21 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
                     yAxisKey: "p", // Pegel             // statt "m"
                   },
                 },
+                {
+                  label: "Referenzkurve",
+                  data: referenceChartData,
+                  borderColor: "black", // Schwarz für Referenzkurve
+                  borderWidth: 1,
+                  borderDash: [5, 5], // Gepunktete Linie
+                  pointRadius: 3, // Punkte für Tooltip sichtbar machen
+                  pointHoverRadius: 5, // Größere Punkte beim Hover
+                  pointBackgroundColor: "black",
+                  tension: 0.1,
+                  parsing: {
+                    xAxisKey: "d",
+                    yAxisKey: "p",
+                  },
+                },
               ],
             },
             options: {
@@ -80,10 +101,21 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
                     title: () => "", // 🚫 Entfernt die erste Zeile mit der Nummer
                     label: function (context) {
                       const rawData = context.raw as { d: number; p: number };
-                      return [
+
-                        `Entfernung: ${rawData.d.toFixed(0)} Meter`,
+                      // 👇 Unterscheide zwischen Mess- und Referenzkurve
-                        `Pegel: ${rawData.p.toFixed(2)}`,
+                      if (context.dataset.label === "Referenzkurve") {
-                      ];
+                        return [
+                          `Referenzwert`,
+                          `Entfernung: ${rawData.d.toFixed(0)} Meter`,
+                          `Pegel: ${rawData.p.toFixed(2)}`,
+                        ];
+                      } else {
+                        return [
+                          `Messwert`,
+                          `Entfernung: ${rawData.d.toFixed(0)} Meter`,
+                          `Pegel: ${rawData.p.toFixed(2)}`,
+                        ];
+                      }
                     },
                   },
                 },

config/webVersion.ts

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

pages/kabelueberwachung.tsx

@@ -4,6 +4,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import Kue705FO from "../components/main/kabelueberwachung/kue705FO/Kue705FO";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchAllTDRChartData } from "../redux/thunks/fetchAllTDRChartThunk";
+import { fetchAllTDRReferenceChartThunk } from "../redux/thunks/fetchAllTDRReferenceChartThunk";
 
 function Kabelueberwachung() {
   const router = useRouter();
@@ -38,6 +39,7 @@ function Kabelueberwachung() {
     if (!tdrData || tdrData.length === 0) {
       // console.log("TDR-Daten abrufen...");
       dispatch(fetchAllTDRChartData());
+      dispatch(fetchAllTDRReferenceChartThunk());
     }
   }, [dispatch, tdrData]);
   //----------------------------------------------------------------

public/CPL/tdr-reference-curves/slot0.json

@@ -0,0 +1 @@
+<%=KTR0%>

public/CPL/tdr-reference-curves/slot1.json

@@ -0,0 +1 @@
+<%=KTR1%>

public/CPL/tdr-reference-curves/slot10.json

@@ -0,0 +1 @@
+<%=KTR10%>

public/CPL/tdr-reference-curves/slot11.json

@@ -0,0 +1 @@
+<%=KTR11%>

public/CPL/tdr-reference-curves/slot12.json

@@ -0,0 +1 @@
+<%=KTR12%>

public/CPL/tdr-reference-curves/slot13.json

@@ -0,0 +1 @@
+<%=KTR13%>

public/CPL/tdr-reference-curves/slot14.json

@@ -0,0 +1 @@
+<%=KTR14%>

public/CPL/tdr-reference-curves/slot15.json

@@ -0,0 +1 @@
+<%=KTR15%>

public/CPL/tdr-reference-curves/slot16.json

@@ -0,0 +1 @@
+<%=KTR16%>

public/CPL/tdr-reference-curves/slot17.json

@@ -0,0 +1 @@
+<%=KTR17%>

public/CPL/tdr-reference-curves/slot18.json

@@ -0,0 +1 @@
+<%=KTR18%>

public/CPL/tdr-reference-curves/slot19.json

@@ -0,0 +1 @@
+<%=KTR19%>

public/CPL/tdr-reference-curves/slot2.json

@@ -0,0 +1 @@
+<%=KTR1%>

public/CPL/tdr-reference-curves/slot20.json

@@ -0,0 +1 @@
+<%=KTR20%>

public/CPL/tdr-reference-curves/slot21.json

@@ -0,0 +1 @@
+<%=KTR21%>

public/CPL/tdr-reference-curves/slot22.json

@@ -0,0 +1 @@
+<%=KTR22%>

public/CPL/tdr-reference-curves/slot23.json

@@ -0,0 +1 @@
+<%=KTR23%>

public/CPL/tdr-reference-curves/slot24.json

@@ -0,0 +1 @@
+<%=KTR24%>

public/CPL/tdr-reference-curves/slot25.json

@@ -0,0 +1 @@
+<%=KTR25%>

public/CPL/tdr-reference-curves/slot26.json

@@ -0,0 +1 @@
+<%=KTR26%>

public/CPL/tdr-reference-curves/slot27.json

@@ -0,0 +1 @@
+<%=KTR27%>

public/CPL/tdr-reference-curves/slot28.json

@@ -0,0 +1 @@
+<%=KTR28%>

public/CPL/tdr-reference-curves/slot29.json

@@ -0,0 +1 @@
+<%=KTR29%>

public/CPL/tdr-reference-curves/slot3.json

@@ -0,0 +1 @@
+<%=KTR3%>

public/CPL/tdr-reference-curves/slot30.json

@@ -0,0 +1 @@
+<%=KTR30%>

public/CPL/tdr-reference-curves/slot31.json

@@ -0,0 +1 @@
+<%=KTR31%>

public/CPL/tdr-reference-curves/slot4.json

@@ -0,0 +1 @@
+<%=KTR4%>

public/CPL/tdr-reference-curves/slot5.json

@@ -0,0 +1 @@
+<%=KTR5%>

public/CPL/tdr-reference-curves/slot6.json

@@ -0,0 +1 @@
+<%=KTR6%>

public/CPL/tdr-reference-curves/slot7.json

@@ -0,0 +1 @@
+<%=KTR7%>

public/CPL/tdr-reference-curves/slot8.json

@@ -0,0 +1 @@
+<%=KTR8%>

public/CPL/tdr-reference-curves/slot9.json

@@ -0,0 +1 @@
+<%=KTR9%>

public/CPLmockData/tdr-reference-curves/slot0.json

@@ -0,0 +1,20 @@
+[
+  { "d": 0, "p": 0 },
+  { "d": 1000, "p": 1 },
+  { "d": 2000, "p": 10 },
+  { "d": 3000, "p": 50 },
+  { "d": 4000, "p": 110 },
+  { "d": 5000, "p": 90 },
+  { "d": 6000, "p": 40 },
+  { "d": 7000, "p": 10 },
+  { "d": 8000, "p": 0 },
+  { "d": 10000, "p": -10 },
+  { "d": 15000, "p": -5 },
+  { "d": 20000, "p": -2 },
+  { "d": 25000, "p": 0 },
+  { "d": 30000, "p": 1 },
+  { "d": 35000, "p": 2 },
+  { "d": 40000, "p": 3 },
+  { "d": 45000, "p": 3.5 },
+  { "d": 50000, "p": 4 }
+]

redux/slices/tdrReferenceChartSlice.ts

@@ -0,0 +1,42 @@
+// /redux/slices/tdrReferenceChartSlice.ts
+
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { fetchAllTDRReferenceChartThunk } from "../thunks/fetchAllTDRReferenceChartThunk";
+
+interface TDRReferenceChartState {
+  referenceData: any[]; // Array mit Slot-Daten (Index = Slot)
+  loading: boolean;
+  error: string | null;
+}
+
+const initialState: TDRReferenceChartState = {
+  referenceData: [],
+  loading: false,
+  error: null,
+};
+
+const tdrReferenceChartSlice = createSlice({
+  name: "tdrReferenceChart",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchAllTDRReferenceChartThunk.pending, (state) => {
+        state.loading = true;
+        state.error = null;
+      })
+      .addCase(
+        fetchAllTDRReferenceChartThunk.fulfilled,
+        (state, action: PayloadAction<any[]>) => {
+          state.loading = false;
+          state.referenceData = action.payload;
+        }
+      )
+      .addCase(fetchAllTDRReferenceChartThunk.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.payload as string | null;
+      });
+  },
+});
+
+export default tdrReferenceChartSlice.reducer;

redux/store.ts

@@ -14,6 +14,7 @@ import brushReducer from "./slices/brushSlice";
 import tdrChartReducer from "./slices/tdrChartSlice";
 import analogeEingaengeReducer from "./slices/analogeEingaengeSlice";
 import digitalInputsReducer from "./slices/digitalInputsSlice";
+import tdrReferenceChartReducer from "./slices/tdrReferenceChartSlice";
 
 const store = configureStore({
   reducer: {
@@ -30,6 +31,7 @@ const store = configureStore({
     analogeEingaenge: analogeEingaengeReducer,
     brush: brushReducer,
     tdrChart: tdrChartReducer,
+    tdrReferenceChart: tdrReferenceChartReducer,
   },
 });
 

redux/thunks/fetchAllTDRReferenceChartThunk.ts

@@ -0,0 +1,16 @@
+// /redux/thunks/fetchAllTDRReferenceChartThunk.ts
+
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { fetchAllTDRReferenceChartData } from "../../services/fetchAllTDRReferenceChartData";
+
+export const fetchAllTDRReferenceChartThunk = createAsyncThunk(
+  "tdrReferenceChart/fetchAll",
+  async (_, { rejectWithValue }) => {
+    try {
+      const data = await fetchAllTDRReferenceChartData();
+      return data;
+    } catch (error) {
+      return rejectWithValue("Referenzdaten konnten nicht geladen werden");
+    }
+  }
+);

services/fetchAllTDRReferenceChartData.ts

@@ -0,0 +1,32 @@
+// /services/fetchAllTDRReferenceChartData.ts
+
+const getTDRReferenceBasePath = () => {
+  if (typeof window !== "undefined") {
+    return window.location.hostname === "localhost"
+      ? "/CPLMockData/tdr-reference-curves"
+      : "/CPL?/CPL/tdr-reference-curves";
+  }
+  return "";
+};
+
+export const fetchAllTDRReferenceChartData = async () => {
+  const maxSlots = 32;
+  const results = [];
+  const basePath = getTDRReferenceBasePath();
+
+  for (let i = 0; i < maxSlots; i++) {
+    try {
+      const response = await fetch(`${basePath}/slot${i}.json`);
+      if (!response.ok) {
+        results[i] = null;
+        continue;
+      }
+      const json = await response.json();
+      results[i] = json;
+    } catch (error) {
+      results[i] = null;
+    }
+  }
+
+  return results;
+};