Fix: Preserve chart state during zoom, pan, and date changes

- Added React.useMemo to memoize chartData and chartOptions to prevent unnecessary re-renders.
- Ensured chart zoom and pan states are maintained during interactions.
- Improved performance and user experience by avoiding chart

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.623
+NEXT_PUBLIC_APP_VERSION=1.6.624
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.623
+NEXT_PUBLIC_APP_VERSION=1.6.624
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [1.6.624] – 2025-07-22
+
+- Fix: Preserve chart state during zoom, pan, and date changes
+
+- Added React.useMemo to memoize chartData and chartOptions to prevent unnecessary re-renders.
+- Ensured chart zoom and pan states are maintained during interactions.
+- Improved performance and user experience by avoiding chart
+
+---
 ## [1.6.623] – 2025-07-22
 
 - feat(AnalogInputsChart): Zeitraum im DatePicker und Redux initialisieren und synchronisieren

components/main/analogInputs/AnalogInputsChart.tsx

@@ -4,10 +4,8 @@ import React, { useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState, AppDispatch } from "@/redux/store";
 import { Line } from "react-chartjs-2";
+import { Chart } from "chart.js";
 import {
-  Chart as ChartJS,
-  LineElement,
-  PointElement,
   CategoryScale,
   LinearScale,
   Tooltip,
@@ -30,20 +28,11 @@ import { getColor } from "@/utils/colors";
 import AnalogInputsDatePicker from "./AnalogInputsDatePicker";
 
 // ✅ Nur die Basis-ChartJS-Module registrieren
-ChartJS.register(
+Chart.register(CategoryScale, LinearScale, Tooltip, Legend, Filler, TimeScale);
-  LineElement,
-  PointElement,
-  CategoryScale,
-  LinearScale,
-  Tooltip,
-  Legend,
-  Filler,
-  TimeScale
-);
 
 export default function AnalogInputsChart() {
   const dispatch = useDispatch<AppDispatch>();
-  const chartRef = useRef<Line | null>(null);
+  const chartRef = useRef<any>(null);
 
   // Redux Werte für Chart-Daten
   const { zeitraum, vonDatum, bisDatum, data, autoLoad, selectedId } =
@@ -239,12 +228,12 @@ export default function AnalogInputsChart() {
         zoom: {
           pan: {
             enabled: true,
-            mode: "x",
+            mode: "x" as const,
           },
           zoom: {
             wheel: { enabled: true },
             pinch: { enabled: true },
-            mode: "x",
+            mode: "x" as const,
           },
         },
       },
@@ -292,7 +281,7 @@ export default function AnalogInputsChart() {
   useEffect(() => {
     if (typeof window !== "undefined") {
       import("chartjs-plugin-zoom").then((module) => {
-        ChartJS.register(module.default);
+        Chart.register(module.default);
       });
     }
   }, []);

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.623",
+  "version": "1.6.624",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.623",
+      "version": "1.6.624",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.623",
+  "version": "1.6.624",
   "private": true,
   "scripts": {
     "dev": "next dev",