Zoom und Pan funktionieren in beide Richtungen (xy).

This commit is contained in:
ISA
2025-02-25 13:10:22 +01:00
parent 9424a6cc43
commit c93afc35fd
5 changed files with 57 additions and 70 deletions

View File

@@ -1,17 +1,21 @@
// /components/modules/kue705FO/charts/DateRangePicker.tsx
// /components/modules/kue705FO/charts/DateRangePicker.tsx
import React from "react";
import DatePicker from "react-datepicker";
import { useSelector, useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import { RootState } from "../../../../../redux/store";
import {
setVonDatum,
setBisDatum,
} from "../../../../../redux/slices/kabelueberwachungChartSlice";
import "react-datepicker/dist/react-datepicker.css";
const DateRangePicker: React.FC = () => {
const dispatch = useDispatch();
// ✅ Props-Definition für die Komponente hinzugefügt
interface DateRangePickerProps {
setVonDatum: (date: Date) => void;
setBisDatum: (date: Date) => void;
}
const DateRangePicker: React.FC<DateRangePickerProps> = ({
setVonDatum,
setBisDatum,
}) => {
// Redux-Werte abrufen
const reduxVonDatum = useSelector(
(state: RootState) => state.kabelueberwachungChart.vonDatum
@@ -28,8 +32,7 @@ const DateRangePicker: React.FC = () => {
selected={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
onChange={(date) => {
if (date) {
const isoDate = date.toISOString().split("T")[0];
dispatch(setVonDatum(isoDate));
setVonDatum(date);
}
}}
selectsStart
@@ -46,8 +49,7 @@ const DateRangePicker: React.FC = () => {
selected={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
onChange={(date) => {
if (date) {
const isoDate = date.toISOString().split("T")[0];
dispatch(setBisDatum(isoDate));
setBisDatum(date);
}
}}
selectsEnd