TDR Messung von JSON datei in Chart Diagramm bereich zeichnen

components/modules/Kue705FO.tsx

@@ -8,7 +8,10 @@ import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
 import { RootState } from "../../redux/store/store";
 import { DataTDR } from "../../redux/types/chartDataTypesTDR";
 import { useDispatch } from "react-redux";
-import { setSelectedChartData } from "../../redux/store/variablesSlice";
+import {
+  setSelectedChartData,
+  setSelectedFileName,
+} from "../../redux/store/variablesSlice";
 
 const Kue705FO: React.FC<Kue705FOProps> = ({
   isolationswert,
@@ -55,7 +58,12 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   const [showChartModal, setShowChartModal] = useState(false);
   const [chartData, setChartData] = useState(null);
 
-  dispatch(setSelectedChartData(chartData));
+  useEffect(() => {
+    if (chartData) {
+      dispatch(setSelectedChartData(chartData));
+    }
+  }, [chartData, dispatch]); // Führe dispatch nur aus, wenn chartData sich ändert
+
   // Redux-Variablen abrufen
   const {
     kuePSTmMinus96V,
@@ -170,91 +178,119 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
     }
   };
 
-  const handleCloseChartModal = () => setShowChartModal(false);
+  const handleCloseChartModal = () => {
+    if (chartInstance.current) {
+      console.log("Chart wird beim Schließen des Modals zerstört.");
+      chartInstance.current.destroy();
+      chartInstance.current = null;
+    }
+    setShowChartModal(false);
+  };
+
   // Funktion zum Erstellen des TDR-Charts
 
   const chartInstance = useRef<Chart | null>(null);
 
   const createTDRChart = (dataTDR: DataTDR[]) => {
     const canvas = document.getElementById("myChart") as HTMLCanvasElement;
-    if (!canvas) return;
 
-    const ctx = canvas.getContext("2d");
+    if (!canvas) {
-    if (!ctx) return;
+      console.error("Canvas mit ID 'myChart' nicht gefunden.");
-
+      return;
-    // Zerstöre vorhandenes Diagramm
-    if (chartInstance.current) {
-      chartInstance.current.destroy();
     }
 
-    // Erstelle neues Diagramm
+    const ctx = canvas.getContext("2d");
-    chartInstance.current = new Chart(ctx, {
+    if (!ctx) {
-      type: "line",
+      console.error("2D-Kontext für Canvas konnte nicht erstellt werden.");
-      data: {
+      return;
-        labels: dataTDR.map((row) => row.t),
+    }
-        datasets: [
+
-          {
+    // Vorhandenes Chart zerstören, falls vorhanden
-            label: "Pegel",
+    if (chartInstance.current) {
-            data: dataTDR.map((row) => row.m),
+      console.log("Vorhandenes Chart wird zerstört.");
-            borderColor: "#00AEEF",
+      chartInstance.current.destroy();
-            borderWidth: 1,
+      chartInstance.current = null; // Referenz zurücksetzen
-            fill: false,
+    }
-          },
+
-        ],
+    // Neues Chart erstellen
-      },
+    try {
-      options: {
+      chartInstance.current = new Chart(ctx, {
-        responsive: true,
+        type: "line",
-        plugins: {
+        data: {
-          zoom: {
+          labels: dataTDR.map((row) => row.t),
-            pan: {
+          datasets: [
-              enabled: true,
+            {
-              mode: "xy",
+              label: "Pegel",
+              data: dataTDR.map((row) => row.m),
+              borderColor: "#00AEEF",
+              borderWidth: 1,
+              fill: false,
             },
+          ],
+        },
+        options: {
+          responsive: true,
+          plugins: {
             zoom: {
-              wheel: {
+              pan: {
                 enabled: true,
+                mode: "xy",
               },
-              pinch: {
+              zoom: {
-                enabled: true,
+                wheel: {
+                  enabled: true,
+                },
+                pinch: {
+                  enabled: true,
+                },
+                mode: "xy",
               },
-              mode: "xy",
+            },
+          },
+          scales: {
+            x: {
+              type: "linear",
+              position: "bottom",
+              title: { display: true, text: "Zeit" },
+            },
+            y: {
+              title: { display: true, text: "Pegel" },
             },
           },
         },
-        scales: {
+      });
-          x: {
+      console.log("Neues Chart erfolgreich erstellt.");
-            type: "linear",
+    } catch (error) {
-            position: "bottom",
+      console.error("Fehler beim Erstellen des Charts:", error);
-            title: { display: true, text: "Zeit" },
+    }
-          },
-          y: {
-            title: { display: true, text: "Pegel" },
-          },
-        },
-      },
-    });
   };
 
-  const loadTDRChartData = () => {
+  const selectedFileName = useSelector(
-    const slot = slotIndex;
+    (state: RootState) => state.variables.selectedFileName
-    const environment = process.env.NODE_ENV || "production";
+  );
-    const fileData =
-      environment === "production"
-        ? `/CPL?/CPL/lastTDR/slot${slot}.json`
-        : `/CPLmockData/lastTDR/slot${slot}.json`;
 
-    fetch(fileData)
+  const loadTDRChartData = () => {
+    if (!selectedFileName) {
+      console.error("Kein Dateiname in Redux gespeichert.");
+      return;
+    }
+
+    const yearFolder = `Year_${jahr.toString().slice(-2)}`;
+    const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
+
+    //const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${selectedFileName}`;
+    const filePath = `/CPLmockData/LastTDR/kue_01/Year_24/Month_01/02-1911.json`;
+
+    fetch(filePath)
       .then((response) => response.json())
       .then((data) => {
-        console.log("Geladene Daten:", data); // Debug-Ausgabe
+        console.log("Geladene Daten:", data);
-        if (data && data.length > 0) {
+        setChartData(data);
-          setChartData(data);
+        createTDRChart(data);
-          createTDRChart(data);
-        } else {
-          console.error("Keine Daten gefunden.");
-        }
       })
-      .catch((error) => console.error("Fehler beim Laden der Daten:", error));
+      .catch((error) =>
+        console.error("Fehler beim Laden der TDR-Daten:", error)
+      );
   };
 
   const loadLoopChartData = () => {
@@ -512,6 +548,24 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
 
   //---------------------------------------------------
 
+  //----------------------------------
+  useEffect(() => {
+    if (selectedChartData) {
+      createTDRChart(selectedChartData); // Neues Chart erstellen
+    }
+
+    return () => {
+      // Cleanup beim Komponentenwechsel
+      if (chartInstance.current) {
+        console.log("Chart wird beim Komponentenwechsel zerstört.");
+        chartInstance.current.destroy();
+        chartInstance.current = null;
+      }
+    };
+  }, [selectedChartData]);
+
+  //----------------------------------
+
   return (
     <div
       className="relative bg-gray-300 w-[7.25rem] h-[24.375rem] border border-gray-400 transform laptop:-translate-y-12 2xl:-translate-y-0
@@ -765,23 +819,19 @@ const TDRPopup: React.FC = () => {
   // Fetch directory.json basierend auf Jahr und Monat
   useEffect(() => {
     const loadDirectory = async () => {
-      const yearFolder = getYearFolderName(jahr); // Jahr in Year_xx umwandeln
+      const yearFolder = getYearFolderName(jahr);
       const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
+      const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
+
+      console.log("Verwendeter Pfad:", path);
 
       try {
-        const response = await fetch(
+        const response = await fetch(path);
-          `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`
-        );
-
-        console.log(
-          `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`
-        );
-
         if (!response.ok) {
           console.error(
             `Fehler beim Laden der Datei directory.json. HTTP-Status: ${response.status}`
           );
-          setDateiListe([]);
+          setDateiListe([]); // Setze eine leere Liste
           return;
         }
 
@@ -810,12 +860,39 @@ const TDRPopup: React.FC = () => {
   const handleAktualisieren = () => {
     console.log("Daten werden aktualisiert für:", jahr, monat);
   };
-
+  //----------------------------------
+  const loadAndStoreChartData = async (url: string) => {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        console.error(
+          `Fehler beim Laden der Daten. HTTP-Status: ${response.status}`
+        );
+        return;
+      }
+      const data = await response.json();
+      dispatch(setSelectedChartData(data));
+      console.log("Daten erfolgreich in Redux gespeichert:", data);
+    } catch (error) {
+      console.error("Fehler beim Laden der JSON-Daten:", error);
+    }
+  };
+  const handleLoadData = (filename: string) => {
+    const yearFolder = `Year_${jahr.toString().slice(-2)}`;
+    const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
+    const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`;
+    loadAndStoreChartData(filePath);
+  };
   const handleDateiAuswahl = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const selectedFile = event.target.value;
     setAusgewählteDatei(selectedFile);
     console.log("Ausgewählte Datei:", selectedFile);
-    loadSelectedFileData(selectedFile);
+
+    // Datei in Redux speichern
+    dispatch(setSelectedFileName(selectedFile));
+
+    // Lade die Datei und speichere sie in Redux
+    handleLoadData(selectedFile);
   };
 
   const loadSelectedFileData = async (filename: string) => {

redux/store/variablesSlice.ts

@@ -5,6 +5,7 @@ import { DataTDR } from "../types/chartDataTypesTDR";
 // Typ für den State
 export interface VariablesState {
   selectedChartData: DataTDR[] | null;
+  selectedFileName: string | null;
   //------------
   kueBezeichnungen: string[];
   isolationsgrenzwerte: number[];
@@ -64,6 +65,7 @@ export interface VariablesState {
 
 // Initialer Zustand
 const initialState: VariablesState = {
+  selectedFileName: null,
   //------------
   selectedChartData: null,
   kueBezeichnungen: [],
@@ -147,9 +149,16 @@ const variablesSlice = createSlice({
     setSelectedChartData(state, action: PayloadAction<DataTDR[] | null>) {
       state.selectedChartData = action.payload;
     },
+    setSelectedFileName(state, action: PayloadAction<string | null>) {
+      state.selectedFileName = action.payload;
+    },
   },
 });
 
-export const { setVariable, setVariables, setSelectedChartData } =
+export const {
-  variablesSlice.actions;
+  setVariable,
+  setVariables,
+  setSelectedChartData,
+  setSelectedFileName,
+} = variablesSlice.actions;
 export default variablesSlice.reducer;