From 7eca4204bd582a1e76c1225d0fb7a469da12daac Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Wed, 6 Nov 2024 07:00:06 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Implementiere=20dynamischen=20Import=20?=
 =?UTF-8?q?f=C3=BCr=20chartjs-plugin-zoom=20im=20Frontend?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dynamischer Import von chartjs-plugin-zoom im `useEffect` hinzugefügt, um Zugriff auf `window` im Server-Side-Build zu vermeiden.
- Zustandsvariable `zoomPluginLoaded` eingeführt, um sicherzustellen, dass das Plugin nur im Client geladen wird.
- Verwende `useRef` für Canvas-Referenz, um direkten Zugriff auf das Chart-Element zu ermöglichen.
- Optimierung der Chart-Erstellung, um Build-Fehler aufgrund fehlender `window`-Objekte zu verhindern.
---
 components/modules/Kue705FO.jsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/components/modules/Kue705FO.jsx b/components/modules/Kue705FO.jsx
index 2bca810..2b7be0c 100644
--- a/components/modules/Kue705FO.jsx
+++ b/components/modules/Kue705FO.jsx
@@ -1,11 +1,10 @@
 "use client"; // components/modules/Kue705FO.jsx
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import ReactModal from "react-modal";
 import Chart from "chart.js/auto";
 import { useSelector } from "react-redux";
 import KueModal from "../modales/KueModal";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
-import zoomPlugin from "chartjs-plugin-zoom";
 
 function Kue705FO({
   isolationswert,
@@ -16,6 +15,8 @@ function Kue705FO({
   tdrLocation,
   alarmStatus,
 }) {
+  const chartRef = useRef(null);
+  const [zoomPlugin, setZoomPlugin] = useState(null); // Plugin-Status für Chart.js
   const [kueVersion, setKueVersion] = useState("V4.19");
   const [currentAlarmStatus, setCurrentAlarmStatus] = useState(false);
   const [currentModulName, setCurrentModulName] = useState(modulName);
@@ -191,7 +192,15 @@ function Kue705FO({
   };
 
   // Füge das Plugin zu Chart.js hinzu
-  Chart.register(zoomPlugin);
+  useEffect(() => {
+    // Lade das Plugin nur, wenn `window` verfügbar ist
+    if (typeof window !== "undefined") {
+      import("chartjs-plugin-zoom").then((mod) => {
+        setZoomPlugin(mod.default); // Setze das Plugin
+        Chart.register(mod.default); // Plugin zur Chart.js-Instanz registrieren
+      });
+    }
+  }, []);
 
   const createChart = (data) => {
     const ctx = document.getElementById("myChart").getContext("2d");
@@ -206,7 +215,7 @@ function Kue705FO({
             label: "Isolationswiderstand (MOhm)",
             data: data.map((row) => row.m).reverse(),
             borderColor: "#00AEEF",
-            borderWidth: 0.5,
+            borderWidth: 2,
             fill: false,
             yAxisID: "y",
           },
@@ -214,7 +223,7 @@ function Kue705FO({
             label: "Schleifenwiderstand (kOhm)",
             data: data.map((row) => row.n).reverse(),
             borderColor: "black",
-            borderWidth: 0.5,
+            borderWidth: 2,
             fill: false,
             yAxisID: "y1",
           },
@@ -500,6 +509,7 @@ function Kue705FO({
               <h2>Messkurve Slot {slotIndex + 1}</h2>
               <canvas
                 id="myChart"
+                ref={chartRef}
                 style={{ width: "100%", height: "600px" }}
               ></canvas>
             </ReactModal>