feat: Chart-Bereich mit Kalender synchronisiert

- Chart-Ansicht wird jetzt basierend auf `vonDatum` und `bisDatum` eingeschränkt.
- `startIndex` und `endIndex` werden aus den Datumswerten berechnet und im Redux-Store aktualisiert.
- `Brush`-Grenzen werden automatisch angepasst, um den sichtbaren Bereich zu begrenzen.
- Sicherstellung, dass `bisDatum` nicht kleiner als `vonDatum` wird.

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx

@@ -1,5 +1,5 @@
 "use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import DateRangePicker from "../DateRangePicker";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../../../../../redux/store";
@@ -23,6 +23,7 @@ const LoopChartActionBar: React.FC = () => {
     selectedSlotType,
     isChartOpen,
     slotNumber,
+    loopMeasurementCurveChartData, // ⬅️ HIER FEHLTE DIESE ZEILE
   } = useSelector((state: RootState) => state.kabelueberwachungChart);
 
   /**
@@ -92,6 +93,30 @@ const LoopChartActionBar: React.FC = () => {
     }
   };
 
+  const minDate = useMemo(() => {
+    if (
+      !loopMeasurementCurveChartData ||
+      loopMeasurementCurveChartData.length === 0
+    )
+      return "";
+    return new Date(
+      loopMeasurementCurveChartData[loopMeasurementCurveChartData.length - 1].t
+    )
+      .toISOString()
+      .split("T")[0];
+  }, [loopMeasurementCurveChartData]);
+
+  const maxDate = useMemo(() => {
+    if (
+      !loopMeasurementCurveChartData ||
+      loopMeasurementCurveChartData.length === 0
+    )
+      return "";
+    return new Date(loopMeasurementCurveChartData[0].t)
+      .toISOString()
+      .split("T")[0];
+  }, [loopMeasurementCurveChartData]);
+
   // **Automatische Datenaktualisierung bei Auswahländerung**
   useEffect(() => {
     handleFetchData();
@@ -103,12 +128,26 @@ const LoopChartActionBar: React.FC = () => {
       <DateRangePicker
         setVonDatum={(date) => {
           const isoDate = date.toISOString().split("T")[0];
-          if (isoDate !== vonDatum) dispatch(setVonDatum(isoDate));
+
+          if (isoDate < minDate || isoDate > maxDate) return;
+
+          dispatch(setVonDatum(isoDate));
+
+          if (isoDate > bisDatum) {
+            dispatch(setBisDatum(isoDate)); // Sicherstellen, dass bisDatum >= vonDatum bleibt
+          }
         }}
         setBisDatum={(date) => {
           const isoDate = date.toISOString().split("T")[0];
-          if (isoDate !== bisDatum) dispatch(setBisDatum(isoDate));
+
+          if (isoDate < minDate || isoDate > maxDate) return;
+
+          if (isoDate >= vonDatum) {
+            dispatch(setBisDatum(isoDate));
+          }
         }}
+        minDate={minDate}
+        maxDate={maxDate}
       />
 
       {/* Dropdown für DIA-Modus */}

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

@@ -123,6 +123,27 @@ const LoopMeasurementChart = () => {
     },
     [dispatch, formatierteDaten]
   );
+  useEffect(() => {
+    if (formatierteDaten.length) {
+      const startIndex = formatierteDaten.findIndex(
+        (d) => new Date(d.zeit).toISOString().split("T")[0] === vonDatum
+      );
+      const endIndex = formatierteDaten.findIndex(
+        (d) => new Date(d.zeit).toISOString().split("T")[0] === bisDatum
+      );
+
+      if (startIndex !== -1 && endIndex !== -1) {
+        dispatch(
+          setBrushRange({
+            startIndex,
+            endIndex,
+            startDate: vonDatum,
+            endDate: bisDatum,
+          })
+        );
+      }
+    }
+  }, [vonDatum, bisDatum, formatierteDaten, dispatch]);
 
   return (
     <div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>