From 611fd34fce842232ea5c59d0b8c4f4dbdfa892e0 Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Tue, 1 Apr 2025 18:24:37 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20LoopMeasurementChart=20auf=20Chart.js?= =?UTF-8?q?=20mit=20canvas=20umgestellt=20=E2=80=93=20Zoom=20&=20Pan=20ble?= =?UTF-8?q?iben=20stabil?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Recharts entfernt und Chart.js direkt über canvas eingebunden - Zoom- und Pan-Funktionalität wie bei TDRChart umgesetzt - Chart wird nicht mehr bei jeder Redux-Aktualisierung neu gezeichnet - Zoom-Stufe bleibt beim Benutzer erhalten --- .../LoopMeasurementChart.tsx | 199 +++++++++--------- config/webVersion.ts | 2 +- utils/loadLoopChartData.ts | 23 -- utils/loadTDRChartData.ts | 29 --- 4 files changed, 103 insertions(+), 150 deletions(-) delete mode 100644 utils/loadLoopChartData.ts delete mode 100644 utils/loadTDRChartData.ts diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx index 3c5f807..bd7de2f 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx @@ -1,6 +1,8 @@ -"use client"; // components/main/Kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx +"use client"; -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useRef } from "react"; +import { useSelector } from "react-redux"; +import { RootState } from "../../../../../../redux/store"; import { Chart as ChartJS, LineElement, @@ -11,13 +13,9 @@ import { Tooltip, Legend, Filler, - ChartOptions, } from "chart.js"; import zoomPlugin from "chartjs-plugin-zoom"; import "chartjs-adapter-date-fns"; -import { Line } from "react-chartjs-2"; -import { useSelector } from "react-redux"; -import { RootState } from "../../../../../../redux/store"; ChartJS.register( LineElement, @@ -32,118 +30,125 @@ ChartJS.register( ); const LoopMeasurementChart = () => { - const chartRef = useRef(null); + const canvasRef = useRef(null); + const chartInstance = useRef(null); + const { loopMeasurementCurveChartData, selectedMode, unit, isFullScreen } = useSelector((state: RootState) => state.kabelueberwachungChartSlice); - const [zoomed, setZoomed] = useState(false); + useEffect(() => { + if (!canvasRef.current) return; + const ctx = canvasRef.current.getContext("2d"); + if (!ctx) return; - const data = { - labels: loopMeasurementCurveChartData - .map((entry) => new Date(entry.t)) - .reverse(), - datasets: [ - { - label: "Messwert Minimum", - data: loopMeasurementCurveChartData.map((e) => e.i).reverse(), - borderColor: "lightgrey", - borderWidth: 1, - fill: false, - pointRadius: 0, - }, - { - label: "Messwert Maximum", - data: loopMeasurementCurveChartData.map((e) => e.a).reverse(), - borderColor: "lightgrey", - borderWidth: 1, - fill: false, - pointRadius: 0, - }, - selectedMode === "DIA0" - ? { - label: "Messwert", - data: loopMeasurementCurveChartData.map((e) => e.m).reverse(), - borderColor: "#00AEEF", - borderWidth: 2, - fill: false, - pointRadius: 2, - } - : { - label: "Messwert Durchschnitt", - data: loopMeasurementCurveChartData.map((e) => e.g).reverse(), - borderColor: "#00AEEF", - borderWidth: 2, - fill: false, - pointRadius: 2, - }, - ], - }; + const chartData = { + labels: loopMeasurementCurveChartData + .map((entry) => new Date(entry.t)) + .reverse(), + datasets: [ + { + label: "Messwert Minimum", + data: loopMeasurementCurveChartData.map((e) => e.i).reverse(), + borderColor: "lightgrey", + borderWidth: 1, + fill: false, + pointRadius: 0, + }, + { + label: "Messwert Maximum", + data: loopMeasurementCurveChartData.map((e) => e.a).reverse(), + borderColor: "lightgrey", + borderWidth: 1, + fill: false, + pointRadius: 0, + }, + selectedMode === "DIA0" + ? { + label: "Messwert", + data: loopMeasurementCurveChartData.map((e) => e.m).reverse(), + borderColor: "#00AEEF", + borderWidth: 2, + fill: false, + pointRadius: 2, + } + : { + label: "Messwert Durchschnitt", + data: loopMeasurementCurveChartData.map((e) => e.g).reverse(), + borderColor: "#00AEEF", + borderWidth: 2, + fill: false, + pointRadius: 2, + }, + ], + }; - const options: ChartOptions<"line"> = { - responsive: true, - maintainAspectRatio: false, - plugins: { - legend: { - position: "top" as const, - }, - tooltip: { - mode: "index", - intersect: false, - }, - zoom: { - pan: { - enabled: true, - mode: "x", + const options = { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + position: "top" as const, + }, + tooltip: { + mode: "index" as const, + intersect: false, }, zoom: { - wheel: { + pan: { enabled: true, + mode: "x", }, - pinch: { - enabled: true, + zoom: { + wheel: { + enabled: true, + }, + pinch: { + enabled: true, + }, + mode: "x", }, - mode: "x", - onZoomComplete: () => setZoomed(true), - }, - limits: { - x: { min: "original", max: "original" }, - y: { min: "original", max: "original" }, }, }, - }, - scales: { - x: { - type: "time", - time: { - unit: "day", - tooltipFormat: "dd.MM.yyyy HH:mm", + scales: { + x: { + type: "time" as const, + time: { + unit: "day", + tooltipFormat: "dd.MM.yyyy HH:mm", + }, + title: { + display: true, + text: "Zeit", + }, }, - title: { - display: true, - text: "Zeit", + y: { + title: { + display: true, + text: unit, + }, + ticks: { + precision: 0, + }, }, }, - y: { - title: { - display: true, - text: unit, - }, - ticks: { - precision: 0, - }, - }, - }, - }; + }; - useEffect(() => { - if (!zoomed && chartRef.current) { - chartRef.current.resetZoom?.(); + if (chartInstance.current) { + chartInstance.current.destroy(); } + + chartInstance.current = new ChartJS(ctx, { + type: "line", + data: chartData, + options, + }); + + // Kein Cleanup mit Destroy, damit Zoom erhalten bleibt }, [loopMeasurementCurveChartData, selectedMode]); return (
- +
); }; diff --git a/config/webVersion.ts b/config/webVersion.ts index dab922b..733e9ef 100644 --- a/config/webVersion.ts +++ b/config/webVersion.ts @@ -6,5 +6,5 @@ 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). */ -const webVersion = "1.6.196"; +const webVersion = "1.6.197"; export default webVersion; diff --git a/utils/loadLoopChartData.ts b/utils/loadLoopChartData.ts deleted file mode 100644 index da98e91..0000000 --- a/utils/loadLoopChartData.ts +++ /dev/null @@ -1,23 +0,0 @@ -// /utils/loadLoopChartData.ts -import { createLoopChart } from "./chartUtils"; - -export const loadLoopChartData = ( - slotIndex: number, - setLoopMeasurementCurveChartData: (data: any) => void -) => { - const environment = process.env.NODE_ENV || "production"; - const fileData = - environment === "production" - ? `/CPL?/CPL/4000values/slot${slotIndex}.json` - : `/CPLmockData/4000values/slot${slotIndex}.json`; - - fetch(fileData) - .then((response) => response.json()) - .then((data) => { - setLoopMeasurementCurveChartData(data); - createLoopChart(data, "Schleifenmesskurve"); - }) - .catch((error) => - console.error("Fehler beim Laden der Schleifenmesskurvendaten:", error) - ); -}; diff --git a/utils/loadTDRChartData.ts b/utils/loadTDRChartData.ts deleted file mode 100644 index 9039215..0000000 --- a/utils/loadTDRChartData.ts +++ /dev/null @@ -1,29 +0,0 @@ -// /utils/loadTDRChartData.ts -import { createTDRChart } from "./chartUtils"; - -export const loadTDRChartData = ( - selectedFileName: string | null, - setLoopMeasurementCurveChartData: (data: any) => void -) => { - if (!selectedFileName) { - console.error("Kein Dateiname in Redux gespeichert."); - return; - } - - const yearFolder = `Year_${new Date().getFullYear().toString().slice(-2)}`; - const monthFolder = `Month_${(new Date().getMonth() + 1) - .toString() - .padStart(2, "0")}`; - - //const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${selectedFileName}`; - const filePath = `/CPLmockData/LastTDR/jsonDatei/${selectedFileName}`; - - fetch(filePath) - .then((response) => response.json()) - .then((data) => { - console.log("Geladene TDR-Daten:", data); - setLoopMeasurementCurveChartData(data); - createTDRChart(data); - }) - .catch((error) => console.error("Fehler beim Laden der TDR-Daten:", error)); -};