feat: Separate Darstellung für Loop- und TDR-Charts implementiert

- `LoopMeasurementChart.tsx` und `TDRChart.tsx` mit Mock-Daten für Tests ergänzt.
- `LoopChartActionBar.tsx` und `TDRChartActionBar.tsx` korrekt in `ChartSwitcher.tsx` integriert.
- `ChartModal.tsx` umbenannt zu `ChartSwitcher.tsx` für klarere Struktur.
- Redux `activeMode` sorgt jetzt für den richtigen Wechsel zwischen Loop- und TDR-Charts.
- Verbesserte Verzeichnisstruktur für bessere Wartbarkeit und Skalierbarkeit.

components/modules/kue705FO/charts/ChartModal.tsx

@@ -1,171 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import ReactModal from "react-modal";
-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";
-import LoopTDRPopup from "../../../modales/kueModal/LoopTDRChartActionBar";
-
-interface ChartModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-const ChartModal: React.FC<ChartModalProps> = ({ isOpen, onClose }) => {
-  const chartRef = useRef<HTMLCanvasElement>(null);
-  const chartInstance = useRef<Chart | null>(null);
-
-  // Redux State abrufen
-  const chartData = useSelector((state: RootState) => state.chartData.data);
-  const activeMode = useSelector(
-    (state: RootState) => state.chartData.activeMode
-  );
-
-  useEffect(() => {
-    if (chartRef.current && chartData.length > 0) {
-      if (chartInstance.current) {
-        chartInstance.current.destroy();
-      }
-
-      const ctx = chartRef.current.getContext("2d");
-      if (ctx) {
-        const labels = chartData.map((entry) =>
-          entry.timestamp ? parseISO(entry.timestamp) : new Date()
-        );
-
-        chartInstance.current = new Chart(ctx, {
-          type: "line",
-          data: {
-            labels,
-            datasets: [
-              {
-                label: "Isolationswiderstand (MOhm)",
-                data: chartData.map((entry) => entry.isolation ?? 0),
-                borderColor: "rgba(0, 123, 255, 1)",
-                backgroundColor: "rgba(0, 123, 255, 0.2)",
-                tension: 0.1,
-                yAxisID: "y-left",
-              },
-              {
-                label: "Schleifenwiderstand (kOhm)",
-                data: chartData.map((entry) => entry.loop ?? 0),
-                borderColor: "rgba(108, 117, 125, 1)",
-                backgroundColor: "rgba(108, 117, 125, 0.2)",
-                tension: 0.1,
-                yAxisID: "y-right",
-              },
-            ],
-          },
-          options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            scales: {
-              x: {
-                type: "time",
-                time: {
-                  unit: "hour",
-                  tooltipFormat: "dd.MM.yyyy HH:mm",
-                },
-                title: {
-                  display: true,
-                  text: "Zeit",
-                },
-                grid: {
-                  drawBorder: true, // 🔥 Stellt sicher, dass die X-Achse sichtbar ist
-                },
-              },
-              y: {
-                id: "y-left",
-                position: "left",
-                title: {
-                  display: true,
-                  text: "MOhm",
-                },
-                min: 0,
-                max:
-                  Math.max(...chartData.map((entry) => entry.isolation ?? 1)) +
-                  10,
-                grid: {
-                  drawOnChartArea: true, // 🔥 Korrektur, damit es sich nicht überlagert
-                },
-              },
-              "y-right": {
-                id: "y-right",
-                position: "right",
-                title: {
-                  display: true,
-                  text: "kOhm",
-                },
-                min: 0,
-                max: Math.max(...chartData.map((entry) => entry.loop ?? 1)) + 1,
-                grid: {
-                  drawOnChartArea: false, // 🔥 Verhindert doppelte Linien
-                },
-              },
-            },
-          },
-        });
-      }
-    }
-
-    return () => {
-      if (chartInstance.current) {
-        chartInstance.current.destroy();
-        chartInstance.current = null;
-      }
-    };
-  }, [chartData, activeMode]);
-
-  return (
-    <ReactModal
-      isOpen={isOpen}
-      onRequestClose={onClose}
-      ariaHideApp={false}
-      style={{
-        overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
-        content: {
-          top: "50%",
-          left: "50%",
-          right: "auto",
-          bottom: "auto",
-          marginRight: "-50%",
-          transform: "translate(-50%, -50%)",
-          width: "80%",
-          maxWidth: "50rem",
-          height: "30rem",
-          padding: "1rem",
-          overflow: "hidden",
-        },
-      }}
-    >
-      <button
-        onClick={onClose}
-        style={{
-          position: "absolute",
-          top: "0.625rem",
-          right: "0.625rem",
-          background: "transparent",
-          border: "none",
-          fontSize: "1.5rem",
-          cursor: "pointer",
-        }}
-      >
-        <i className="bi bi-x-circle-fill"></i>
-      </button>
-
-      {/* Beibehaltung der UI mit Kalender und Buttons */}
-      <div style={{ maxHeight: "100%", overflow: "auto" }}>
-        <LoopTDRPopup />
-      </div>
-
-      {/* Canvas für das Chart */}
-      <canvas
-        ref={chartRef}
-        style={{ width: "100%", height: "20rem", marginTop: "1rem" }}
-      ></canvas>
-    </ReactModal>
-  );
-};
-
-export default ChartModal;

components/modules/kue705FO/charts/ChartSwitcher.tsx

@@ -0,0 +1,76 @@
+// /components/modules/kue705FO/charts/ChartSwitcher.tsx
+import React from "react";
+import ReactModal from "react-modal";
+import LoopChartActionBar from "./LoopMeasurementChart/LoopChartActionBar";
+import TDRChartActionBar from "./TDRChart/TDRChartActionBar";
+import LoopMeasurementChart from "./LoopMeasurementChart/LoopMeasurementChart";
+import TDRChart from "./TDRChart/TDRChart";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../../redux/store";
+
+interface ChartSwitcherProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
+  const activeMode = useSelector(
+    (state: RootState) => state.chartData.activeMode
+  );
+
+  return (
+    <ReactModal
+      isOpen={isOpen}
+      onRequestClose={onClose}
+      ariaHideApp={false}
+      style={{
+        overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+        content: {
+          top: "50%",
+          left: "50%",
+          right: "auto",
+          bottom: "auto",
+          marginRight: "-50%",
+          transform: "translate(-50%, -50%)",
+          width: "80%",
+          maxWidth: "50rem",
+          height: "35rem",
+          padding: "1rem",
+          overflow: "hidden",
+        },
+      }}
+    >
+      <button
+        onClick={onClose}
+        style={{
+          position: "absolute",
+          top: "0.625rem",
+          right: "0.625rem",
+          background: "transparent",
+          border: "none",
+          fontSize: "1.5rem",
+          cursor: "pointer",
+        }}
+      >
+        <i className="bi bi-x-circle-fill"></i>
+      </button>
+
+      {/* Nur die richtige ActionBar und das richtige Chart basierend auf dem Modus anzeigen */}
+      {activeMode === "Schleife" ? (
+        <>
+          <h3 className="text-lg font-semibold">Schleifenmessung</h3>
+          <LoopChartActionBar />
+          <LoopMeasurementChart /> {/* 🎯 Hier wird das Chart gerendert */}
+        </>
+      ) : (
+        <>
+          <h3 className="text-lg font-semibold">TDR-Messung</h3>
+          <TDRChartActionBar />
+          <TDRChart /> {/* 🎯 Hier wird das Chart gerendert */}
+        </>
+      )}
+    </ReactModal>
+  );
+};
+
+export default ChartSwitcher;

components/modules/kue705FO/charts/DateRangePicker.tsx

@@ -0,0 +1,66 @@
+// /components/modules/kue705FO/charts/DateRangePicker.tsx
+import React, { useState, useEffect } from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+interface DateRangePickerProps {
+  setVonDatum: (date: Date) => void;
+  setBisDatum: (date: Date) => void;
+}
+
+const DateRangePicker: React.FC<DateRangePickerProps> = ({
+  setVonDatum,
+  setBisDatum,
+}) => {
+  // Nutze die Props als Standardwerte für das Datum
+  const [startDate, setStartDate] = useState<Date>(new Date());
+  const [endDate, setEndDate] = useState<Date>(new Date());
+
+  useEffect(() => {
+    setVonDatum(startDate);
+    setBisDatum(endDate);
+  }, []);
+
+  return (
+    <div className="flex space-x-4">
+      <div>
+        <label className="block text-sm font-semibold">Von</label>
+        <DatePicker
+          selected={startDate}
+          onChange={(date) => {
+            if (date) {
+              setStartDate(date);
+              setVonDatum(date);
+            }
+          }}
+          selectsStart
+          startDate={startDate}
+          endDate={endDate}
+          dateFormat="dd.MM.yyyy"
+          className="border px-2 py-1 rounded"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-semibold">Bis</label>
+        <DatePicker
+          selected={endDate}
+          onChange={(date) => {
+            if (date) {
+              setEndDate(date);
+              setBisDatum(date);
+            }
+          }}
+          selectsEnd
+          startDate={startDate}
+          endDate={endDate}
+          minDate={startDate || undefined}
+          dateFormat="dd.MM.yyyy"
+          className="border px-2 py-1 rounded"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DateRangePicker;

components/modules/kue705FO/charts/LoopMeasurementChart.tsx

@@ -1,110 +0,0 @@
-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 LoopMeasurementChart: React.FC = () => {
-  const chartRef = useRef<HTMLCanvasElement>(null);
-  const chartInstance = useRef<Chart | null>(null);
-
-  // Redux-Daten abrufen
-  const chartData = useSelector((state: RootState) => state.chartData.data);
-
-  useEffect(() => {
-    if (chartRef.current && chartData.length > 0) {
-      if (chartInstance.current) {
-        chartInstance.current.destroy(); // Bestehendes Chart zerstören
-      }
-
-      const ctx = chartRef.current.getContext("2d");
-      if (ctx) {
-        const labels = chartData.map((entry) =>
-          entry.timestamp ? parseISO(entry.timestamp) : new Date()
-        );
-
-        chartInstance.current = new Chart(ctx, {
-          type: "line",
-          data: {
-            labels,
-            datasets: [
-              {
-                label: "Schleifenwiderstand (kOhm)",
-                data: chartData.map((entry) => entry.loop ?? 0),
-                borderColor: "rgba(75, 192, 192, 1)", // Türkis
-                backgroundColor: "rgba(75, 192, 192, 0.2)",
-                tension: 0.1,
-                yAxisID: "y-left",
-              },
-              {
-                label: "Zusätzliche Schleifenmesswerte",
-                data: chartData.map((entry) => entry.additional ?? 0),
-                borderColor: "rgba(255, 159, 64, 1)", // Orange
-                backgroundColor: "rgba(255, 159, 64, 0.2)",
-                tension: 0.1,
-                yAxisID: "y-right",
-              },
-            ],
-          },
-          options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            scales: {
-              x: {
-                type: "time",
-                time: {
-                  unit: "hour",
-                  tooltipFormat: "dd.MM.yyyy HH:mm",
-                },
-                title: {
-                  display: true,
-                  text: "Zeit",
-                },
-                grid: {
-                  drawBorder: true,
-                },
-              },
-              y: {
-                id: "y-left",
-                position: "left",
-                title: {
-                  display: true,
-                  text: "kOhm",
-                },
-                min: 0,
-                max: Math.max(...chartData.map((entry) => entry.loop ?? 1)) + 1,
-              },
-              "y-right": {
-                id: "y-right",
-                position: "right",
-                title: {
-                  display: true,
-                  text: "Zusätzliche Werte",
-                },
-                min: 0,
-                max:
-                  Math.max(...chartData.map((entry) => entry.additional ?? 1)) +
-                  1,
-                grid: {
-                  drawOnChartArea: false,
-                },
-              },
-            },
-          },
-        });
-      }
-    }
-
-    return () => {
-      if (chartInstance.current) {
-        chartInstance.current.destroy();
-        chartInstance.current = null;
-      }
-    };
-  }, [chartData]);
-
-  return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
-};
-
-export default LoopMeasurementChart;

components/modules/kue705FO/charts/LoopMeasurementChart/LoopChartActionBar.tsx

@@ -0,0 +1,41 @@
+// /components/modules/kue705FO/charts/LoopMeasurementChart/LoopChartActionBar.tsx
+import React, { useState } from "react";
+import DateRangePicker from "../DateRangePicker";
+import LoopMeasurementChart from "./LoopMeasurementChart";
+import { useDispatch } from "react-redux";
+import { setChartData } from "../../../../../redux/slices/chartDataSlice";
+
+const LoopChartActionBar: 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}/loop`);
+      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 && <LoopMeasurementChart />}
+    </div>
+  );
+};
+
+export default LoopChartActionBar;

components/modules/kue705FO/charts/LoopMeasurementChart/LoopMeasurementChart.tsx

@@ -1,17 +1,23 @@
 import React, { useEffect, useRef } from "react";
 import { useSelector } from "react-redux";
-import { RootState } from "../../../redux/store";
+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 LoopMeasurementChart: React.FC = () => {
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
-  const chartData = useSelector((state: RootState) => state.chartData.data);
+
+  // Nutze entweder Redux-Daten oder Mock-Daten
+  const chartData = useSelector((state: RootState) => state.chartData.data) || [
+    { timestamp: "2025-02-13T12:00:00", loop: 0.8 },
+    { timestamp: "2025-02-13T12:10:00", loop: 1.2 },
+    { timestamp: "2025-02-13T12:20:00", loop: 1.5 },
+  ];
 
   useEffect(() => {
-    if (chartRef.current && chartData.length > 0) {
+    if (chartRef.current) {
       if (chartInstance.current) {
         chartInstance.current.destroy();
       }
@@ -24,8 +30,8 @@ const TDRChart: React.FC = () => {
             labels: chartData.map((entry) => parseISO(entry.timestamp)),
             datasets: [
               {
-                label: "Isolationswiderstand (MOhm)",
-                data: chartData.map((entry) => entry.isolation ?? 0),
+                label: "Schleifenwiderstand (kOhm)",
+                data: chartData.map((entry) => entry.loop ?? 0),
                 borderColor: "rgba(0, 123, 255, 1)",
                 backgroundColor: "rgba(0, 123, 255, 0.2)",
                 tension: 0.1,
@@ -38,18 +44,13 @@ const TDRChart: React.FC = () => {
             scales: {
               x: {
                 type: "time",
-                time: {
-                  unit: "hour",
-                  tooltipFormat: "dd.MM.yyyy HH:mm",
-                },
+                time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
                 title: { display: true, text: "Zeit" },
               },
               y: {
-                title: { display: true, text: "MOhm" },
+                title: { display: true, text: "kOhm" },
                 min: 0,
-                max:
-                  Math.max(...chartData.map((entry) => entry.isolation ?? 1)) +
-                  10,
+                max: 2,
               },
             },
           },
@@ -68,4 +69,4 @@ const TDRChart: React.FC = () => {
   return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
 };
 
-export default TDRChart;
+export default LoopMeasurementChart;

components/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/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;