Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Redux-Integration für Datumsauswahl und Chart-Zoom verbessert

Browse Source 
- `DateRangePicker.tsx` angepasst, um `vonDatum` und `bisDatum` direkt in Redux zu aktualisieren
- `LoopMeasurementChart.tsx` verbessert, sodass `vonDatum` und `bisDatum` beim Zoomen mit Mausrad automatisch in Redux gespeichert werden
- Chart.js `onZoom` korrekt implementiert, um Änderungen in der X-Achse sofort zu übernehmen
- Redux-Updates optimiert, um unnötige `dispatch`-Aufrufe zu vermeiden
This commit is contained in:
ISA
2025-02-25 11:55:37 +01:00
parent cddb5e7a7f
commit 9424a6cc43
4 changed files with 67 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
View File

@@ -1,19 +1,25 @@
"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
import React, { useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import Chart from "chart.js/auto";
import "chartjs-adapter-moment";
// 🟢 **Prop-Typ für isFullScreen hinzufügen**
interface LoopMeasurementChartProps {
isFullScreen: boolean;
}
import {
setVonDatum,
setBisDatum,
} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
const LoopMeasurementChart = () => {
const dispatch = useDispatch();
const isFullScreen = useSelector(
(state: RootState) => state.kabelueberwachungChart.isFullScreen
);
const { loopMeasurementCurveChartData, vonDatum, bisDatum } = useSelector(
(state: RootState) => state.kabelueberwachungChart
);
const selectedMode = useSelector(
(state: RootState) => state.kabelueberwachungChart.selectedMode
);
const chartRef = useRef<HTMLCanvasElement>(null);
const chartInstance = useRef<Chart | null>(null);
@@ -28,14 +34,6 @@ const LoopMeasurementChart = () => {
}
}, []);
// Daten & Datum aus Redux abrufen
const { loopMeasurementCurveChartData, vonDatum, bisDatum } = useSelector(
(state: RootState) => state.kabelueberwachungChart
);
const selectedMode = useSelector(
(state: RootState) => state.kabelueberwachungChart.selectedMode
);
useEffect(() => {
if (chartRef.current) {
if (chartInstance.current) {
@@ -46,20 +44,11 @@ const LoopMeasurementChart = () => {
console.log("Von Datum:", vonDatum, "Bis Datum:", bisDatum);
console.log("Selected Mode:", selectedMode);
// Daten filtern basierend auf vonDatum und bisDatum
const filteredData = loopMeasurementCurveChartData.filter((entry) => {
const timestampMs = new Date(entry.t).getTime();
return (
timestampMs >= new Date(vonDatum).getTime() &&
timestampMs <= new Date(bisDatum).getTime()
);
});
// Basis-Datasets für i (Minimum) und a (Maximum)
// Basis-Datasets für alle Datenpunkte
const datasets = [
{
label: "Messwert Minimum (kOhm)",
data: filteredData.map((entry) => ({
data: loopMeasurementCurveChartData.map((entry) => ({
x: new Date(entry.t).getTime(),
y: entry.i,
})),
@@ -69,7 +58,7 @@ const LoopMeasurementChart = () => {
},
{
label: "Messwert Maximum (kOhm)",
data: filteredData.map((entry) => ({
data: loopMeasurementCurveChartData.map((entry) => ({
x: new Date(entry.t).getTime(),
y: entry.a,
})),
@@ -82,11 +71,11 @@ const LoopMeasurementChart = () => {
// Falls DIA0: `m` als aktueller Messwert verwenden
if (
selectedMode === "DIA0" &&
filteredData.some((entry) => entry.m !== undefined)
loopMeasurementCurveChartData.some((entry) => entry.m !== undefined)
) {
datasets.push({
label: "Messwert Aktuell (m)",
data: filteredData.map((entry) => ({
data: loopMeasurementCurveChartData.map((entry) => ({
x: new Date(entry.t).getTime(),
y: entry.m ?? NaN,
})),
@@ -99,11 +88,11 @@ const LoopMeasurementChart = () => {
// Falls DIA1 oder DIA2: `g` als Durchschnittswert verwenden
if (
(selectedMode === "DIA1" || selectedMode === "DIA2") &&
filteredData.some((entry) => entry.g !== undefined)
loopMeasurementCurveChartData.some((entry) => entry.g !== undefined)
) {
datasets.push({
label: "Messwert Durchschnitt (g)",
data: filteredData.map((entry) => ({
data: loopMeasurementCurveChartData.map((entry) => ({
x: new Date(entry.t).getTime(),
y: entry.g ?? NaN,
})),
@@ -129,8 +118,8 @@ const LoopMeasurementChart = () => {
type: "time",
time: {
unit: "day",
tooltipFormat: "dd.MM.yyyy HH:mm", // Ändert das Format für Tooltips (inkl. Uhrzeit)
displayFormats: { day: "dd.MM.yyyy" }, // Achse bleibt nur Datum
tooltipFormat: "dd.MM.yyyy HH:mm",
displayFormats: { day: "dd.MM.yyyy" },
},
title: { display: true, text: "Zeit (Datum)" },
min: new Date(vonDatum).getTime(),
@@ -149,17 +138,9 @@ const LoopMeasurementChart = () => {
callbacks: {
label: (tooltipItem) => {
const rawItem = tooltipItem.raw as { x: number; y: number };
const date = new Date(rawItem.x);
const timeString = `${date
.getHours()
.toString()
.padStart(2, "0")}:${date
.getMinutes()
.toString()
.padStart(2, "0")}`;
return `${tooltipItem.dataset.label}: ${(
tooltipItem.raw as { x: number; y: number }
).y.toFixed(2)} kOhm `;
return `${tooltipItem.dataset.label}: ${rawItem.y.toFixed(
2
)} kOhm`;
},
},
},
@@ -169,6 +150,18 @@ const LoopMeasurementChart = () => {
wheel: { enabled: true },
pinch: { enabled: true },
mode: "x",
onZoomComplete: (chart) => {
const xScale = chart.chart.scales.x;
const newVonDatum = new Date(xScale.min)
.toISOString()
.split("T")[0];
const newBisDatum = new Date(xScale.max)
.toISOString()
.split("T")[0];
dispatch(setVonDatum(newVonDatum));
dispatch(setBisDatum(newBisDatum));
},
},
},
},