0bdf5b29ea
- `selectedSlot` in `kueChartModeSlice.ts` hinzugefügt, um den aktiven Slot zu speichern. - `handleButtonClick.ts` aktualisiert, damit `selectedSlot` in Redux gesetzt wird. - `handleOpenChartModal.ts` angepasst, sodass `selectedSlot` beim Öffnen des Modals gesetzt wird. - `Kue705FO.tsx` nutzt jetzt Redux für die Slot- und Modus-Steuerung (`selectedSlot`, `activeMode`). - Redux-Logik optimiert: `selectedSlot` wird nun konsistent zwischen `TDRChart.tsx` und `ChartSwitcher.tsx` genutzt. - Verbesserung der Benutzererfahrung: Nur `onClick` verwendet, `onMouseOver` wegen Performance-Problemen vermieden. ✅ Jetzt wird der richtige Slot in Redux gespeichert, wenn ein Button oder das Chart-Modal geöffnet wird. ✅ `TDRChart.tsx` zeigt nur das gewählte Modul an, kein unnötiges Neuladen von Daten. ✅ Stabile und optimierte Chart-Steuerung ohne ungewollte Änderungen durch Mausbewegungen.
106 lines
3.1 KiB
TypeScript
106 lines
3.1 KiB
TypeScript
// components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
|
|
"use client";
|
|
|
|
import React, { useEffect, useRef } from "react";
|
|
import { RootState } from "../../../../../../redux/store";
|
|
import { useSelector } from "react-redux";
|
|
import { Chart, registerables } from "chart.js";
|
|
import "chartjs-adapter-date-fns";
|
|
import { getColor } from "../../../../../../utils/colors";
|
|
|
|
const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
|
|
const chartRef = useRef<HTMLCanvasElement>(null);
|
|
const chartInstance = useRef<Chart | null>(null);
|
|
|
|
// 🟢 **Hole den ausgewählten Slot und Messkurve aus Redux**
|
|
const selectedSlot = useSelector(
|
|
(state: RootState) => state.tdrChart.selectedSlot
|
|
);
|
|
const selectedChartType = useSelector(
|
|
(state: RootState) => state.kueChartMode.activeMode
|
|
);
|
|
const tdrChartData = useSelector((state: RootState) =>
|
|
selectedSlot !== null ? state.tdrChart.data[selectedSlot] || [] : []
|
|
);
|
|
|
|
useEffect(() => {
|
|
import("chartjs-plugin-zoom").then((zoomPlugin) => {
|
|
Chart.register(...registerables, zoomPlugin.default);
|
|
|
|
if (chartRef.current && tdrChartData.length > 0) {
|
|
if (chartInstance.current) {
|
|
chartInstance.current.destroy();
|
|
}
|
|
|
|
const ctx = chartRef.current.getContext("2d");
|
|
if (ctx) {
|
|
chartInstance.current = new Chart(ctx, {
|
|
type: "line",
|
|
data: {
|
|
datasets: [
|
|
{
|
|
label: `Modul ${
|
|
selectedSlot !== null ? selectedSlot + 1 : "?"
|
|
} (${selectedChartType})`,
|
|
data: tdrChartData,
|
|
borderColor: getColor("littwin-blue"),
|
|
borderWidth: 1,
|
|
tension: 0.1,
|
|
parsing: {
|
|
xAxisKey: "t",
|
|
yAxisKey: "m",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
x: {
|
|
type: "linear",
|
|
title: {
|
|
display: true,
|
|
text: "Entfernung (m)",
|
|
},
|
|
},
|
|
y: {
|
|
title: {
|
|
display: true,
|
|
text: "Pegel",
|
|
},
|
|
},
|
|
},
|
|
plugins: {
|
|
zoom: {
|
|
pan: {
|
|
enabled: true,
|
|
mode: "xy",
|
|
},
|
|
zoom: {
|
|
wheel: {
|
|
enabled: true,
|
|
},
|
|
pinch: {
|
|
enabled: true,
|
|
},
|
|
mode: "xy",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}, [tdrChartData, selectedSlot, selectedChartType]);
|
|
|
|
return (
|
|
<div style={{ width: "100%", height: isFullScreen ? "90%" : "28rem" }}>
|
|
<canvas ref={chartRef} style={{ width: "100%", height: "100%" }} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TDRChart;
|