feat: AnalogInputsChart mit DateRangePicker und vollständiger Redux-Integration erweitert

- analogInputsHistorySlice angepasst: zeitraum, vonDatum, bisDatum und data hinzugefügt
- Typdefinitionen im Slice und Thunk korrigiert
- getAnalogInputsHistoryThunk erweitert, um vonDatum und bisDatum zu akzeptieren
- DateRangePicker korrekt in AnalogInputsChart.tsx integriert
- Fehler bei Selector-Zugriffen und Dispatch behoben
This commit is contained in:
ISA
2025-07-11 14:01:15 +02:00
parent ca84ac6bb5
commit d278a79030
9 changed files with 128 additions and 77 deletions

View File

@@ -21,8 +21,14 @@ import {
import "chartjs-adapter-date-fns";
import { de } from "date-fns/locale";
import { useSelector, useDispatch } from "react-redux";
import type { RootState, AppDispatch } from "../../../redux/store";
import type { RootState, AppDispatch } from "@/redux/store";
import { getAnalogInputsHistoryThunk } from "@/redux/thunks/getAnalogInputsHistoryThunk";
import DateRangePicker from "@/components/common/DateRangePicker";
import { Listbox } from "@headlessui/react";
import {
setVonDatum,
setBisDatum,
} from "@/redux/slices/analogInputsChartSlice";
// Basis-Registrierung (ohne Zoom-Plugin)
ChartJS.register(
@@ -46,6 +52,7 @@ export default function AnalogInputsChart({
) as unknown as AnalogInput | null;
const dispatch = useDispatch<AppDispatch>();
type AnalogInputHistoryPoint = { t: string | number | Date; m: number };
const { data } = useSelector(
@@ -53,10 +60,20 @@ export default function AnalogInputsChart({
) as {
data: { [key: string]: AnalogInputHistoryPoint[] };
};
const zeitraum = useSelector(
(state: RootState) => state.analogInputsHistory.zeitraum
);
const handleFetchData = () => {
if (!selectedId || !zeitraum) return;
dispatch(getAnalogInputsHistoryThunk({ eingang: selectedId, zeitraum }));
};
useEffect(() => {
dispatch(getAnalogInputsHistoryThunk());
}, [dispatch]);
if (selectedId && zeitraum) {
dispatch(getAnalogInputsHistoryThunk({ eingang: selectedId, zeitraum }));
}
}, [dispatch, selectedId, zeitraum]);
// ✅ Zoom-Plugin dynamisch importieren und registrieren
useEffect(() => {