diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx index de5f262..c8174d9 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx +++ b/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 = () => { { 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 */} diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx index c99f5d2..8c53f44 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx +++ b/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 (