TDR-Chart findet die dateien, aber zeichnet die Chart noch nicht

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

@@ -1,6 +1,5 @@
-import React, { useEffect, useRef } from "react";
-import { useSelector } from "react-redux";
-import { RootState } from "../../../../../../redux/store";
+// components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
+import React, { useEffect, useRef, useState } from "react";
 import Chart from "chart.js/auto";
 import "chartjs-adapter-date-fns";
 import { parseISO } from "date-fns";
@@ -9,15 +8,42 @@ const TDRChart: React.FC = () => {
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
 
-  // Nutze entweder Redux-Daten oder Mock-Daten
-  const chartData = useSelector((state: RootState) => state.chartData.data) || [
-    { timestamp: "2025-02-13T12:00:00", tdr: 2.1 },
-    { timestamp: "2025-02-13T12:10:00", tdr: 2.3 },
-    { timestamp: "2025-02-13T12:20:00", tdr: 2.6 },
-  ];
+  // Zustand für die Chart-Daten
+  const [chartData, setChartData] = useState<
+    { timestamp: string; tdr: number }[]
+  >([]);
 
   useEffect(() => {
-    if (chartRef.current) {
+    // Aktuelles Jahr und Monat ermitteln
+    const currentYear = new Date().getFullYear();
+    const currentMonth = new Date().getMonth() + 1; // Monate sind 0-basiert
+
+    // Pfad zur directory.json-Datei erstellen
+    const yearFolder = `Year_${String(currentYear).slice(-2)}`;
+    const monthFolder = `Month_${String(currentMonth).padStart(2, "0")}`;
+    const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;
+
+    // Daten abrufen
+    fetch(path)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(
+            `Fehler beim Laden der Datei: ${response.statusText}`
+          );
+        }
+        return response.json();
+      })
+      .then((data) => {
+        // Annahme: data ist ein Array von Objekten mit den Eigenschaften 'timestamp' und 'tdr'
+        setChartData(data);
+      })
+      .catch((error) => {
+        console.error("Fehler beim Abrufen der Daten:", error);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (chartRef.current && chartData.length > 0) {
       if (chartInstance.current) {
         chartInstance.current.destroy();
       }
@@ -57,16 +83,13 @@ const TDRChart: React.FC = () => {
         });
       }
     }
-
-    return () => {
-      if (chartInstance.current) {
-        chartInstance.current.destroy();
-        chartInstance.current = null;
-      }
-    };
   }, [chartData]);
 
-  return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
+  return (
+    <div>
+      <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />
+    </div>
+  );
 };
 
 export default TDRChart;