Struktur für components/main verbessert

components/main/modules/kue705FO/charts/TDRChart/TDRChart.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useRef } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../redux/store";
+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);
+
+  // 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 },
+  ];
+
+  useEffect(() => {
+    if (chartRef.current) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+
+      const ctx = chartRef.current.getContext("2d");
+      if (ctx) {
+        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),
+                borderColor: "rgba(255, 99, 132, 1)",
+                backgroundColor: "rgba(255, 99, 132, 0.2)",
+                tension: 0.1,
+              },
+            ],
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+              x: {
+                type: "time",
+                time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
+                title: { display: true, text: "Zeit" },
+              },
+              y: {
+                title: { display: true, text: "km" },
+                min: 0,
+                max: 3,
+              },
+            },
+          },
+        });
+      }
+    }
+
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+        chartInstance.current = null;
+      }
+    };
+  }, [chartData]);
+
+  return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
+};
+
+export default TDRChart;

components/main/modules/kue705FO/charts/TDRChart/TDRChartActionBar.tsx

@@ -0,0 +1,41 @@
+// /components/modules/kue705FO/charts/TDRChart/TDRChartActionBar.tsx
+import React, { useState } from "react";
+import DateRangePicker from "../DateRangePicker";
+import TDRChart from "./TDRChart";
+import { useDispatch } from "react-redux";
+import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
+
+const TDRChartActionBar: React.FC = () => {
+  const dispatch = useDispatch();
+  const BASE_URL = "http://localhost:3002";
+
+  const [showChart, setShowChart] = useState(false);
+
+  const handleFetchData = async () => {
+    try {
+      const response = await fetch(`${BASE_URL}/tdr`);
+      if (!response.ok) throw new Error("Fehler beim Abrufen der Daten");
+
+      const data = await response.json();
+      dispatch(setChartData(data));
+      setShowChart(true);
+    } catch (error) {
+      console.error("Fehler beim Laden der Daten:", error);
+    }
+  };
+
+  return (
+    <div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
+      <DateRangePicker setVonDatum={() => {}} setBisDatum={() => {}} />
+      <button
+        onClick={handleFetchData}
+        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
+      >
+        Aktualisieren
+      </button>
+      {showChart && <TDRChart />}
+    </div>
+  );
+};
+
+export default TDRChartActionBar;