TDR Chart bekommt von Redux Daten, aber die Darstellung ist noch zu optimieren

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

@@ -1,46 +1,15 @@
 // components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
+import { useSelector } from "react-redux";
 import Chart from "chart.js/auto";
 import "chartjs-adapter-date-fns";
-import { parseISO } from "date-fns";
 
 const TDRChart: React.FC = () => {
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
 
-  // Zustand für die Chart-Daten
-  const [chartData, setChartData] = useState<
-    { timestamp: string; tdr: number }[]
-  >([]);
-
-  useEffect(() => {
-    // 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);
-      });
-  }, []);
+  // TDR-Daten aus dem Redux Store selektieren
+  const chartData = useSelector((state: any) => state.tdrData.data);
 
   useEffect(() => {
     if (chartRef.current && chartData.length > 0) {
@@ -53,14 +22,17 @@ const TDRChart: React.FC = () => {
         chartInstance.current = new Chart(ctx, {
           type: "line",
           data: {
-            labels: chartData.map((entry) => parseISO(entry.timestamp)),
             datasets: [
               {
                 label: "TDR Entfernung (km)",
-                data: chartData.map((entry) => entry.tdr ?? 0),
+                data: chartData,
                 borderColor: "rgba(255, 99, 132, 1)",
                 backgroundColor: "rgba(255, 99, 132, 0.2)",
                 tension: 0.1,
+                parsing: {
+                  xAxisKey: "t", // Schlüssel für den Zeitstempel
+                  yAxisKey: "m", // Schlüssel für den Messwert
+                },
               },
             ],
           },
@@ -70,11 +42,20 @@ const TDRChart: React.FC = () => {
             scales: {
               x: {
                 type: "time",
-                time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
-                title: { display: true, text: "Zeit" },
+                time: {
+                  unit: "minute",
+                  tooltipFormat: "dd.MM.yyyy HH:mm",
+                },
+                title: {
+                  display: true,
+                  text: "Zeit",
+                },
               },
               y: {
-                title: { display: true, text: "km" },
+                title: {
+                  display: true,
+                  text: "km",
+                },
                 min: 0,
                 max: 3,
               },

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

@@ -2,11 +2,13 @@
 import React, { useState, useEffect, useRef } from "react";
 import DateRangePicker from "../DateRangePicker";
 import TDRChart from "../../../../kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart";
-import { useDispatch } from "react-redux";
 import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
 import { parseISO } from "date-fns";
+import { useDispatch } from "react-redux";
+import { setTDRData } from "../../../../../../redux/slices/tdrDataSlice";
 
 const TDRChartActionBar: React.FC = () => {
+  const dispatch = useDispatch();
   const [jahr, setJahr] = useState(new Date().getFullYear());
   const [monat, setMonat] = useState(new Date().getMonth() + 1);
   const [dateiListe, setDateiListe] = useState<string[]>([]); // Liste der Dateien
@@ -73,6 +75,8 @@ const TDRChartActionBar: React.FC = () => {
         return;
       }
       const data = await response.json();
+      // Daten im Redux Store speichern
+      dispatch(setTDRData(data));
 
       console.log("Daten erfolgreich in Redux gespeichert:", data);
     } catch (error) {
@@ -130,7 +134,6 @@ const TDRChartActionBar: React.FC = () => {
       });
   }, []);
 
-  const dispatch = useDispatch();
   const BASE_URL = "http://localhost:3002";
 
   const [showChart, setShowChart] = useState(false);