From bd8e114a54bad0421d113315dd1bd535e33b027f Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Mon, 24 Feb 2025 15:19:08 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Modularisierung=20verbessert:=20use?=
 =?UTF-8?q?Effect=20f=C3=BCr=20createTDRChart=20ist=20jetzt=20in=20useTDRC?=
 =?UTF-8?q?hart.ts=20ausgelagert.=20=E2=9C=85=20Bessere=20Wiederverwendbar?=
 =?UTF-8?q?keit:=20Falls=20du=20das=20gleiche=20Verhalten=20in=20einer=20a?=
 =?UTF-8?q?nderen=20Komponente=20brauchst,=20kannst=20du=20einfach=20useTD?=
 =?UTF-8?q?RChart=20importieren.=20=E2=9C=85=20Kue705FO.tsx=20ist=20schlan?=
 =?UTF-8?q?ker:=20Alle=20Hooks=20sind=20nun=20ausgelagert!=20=F0=9F=8E=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🚀 Jetzt ist dein Code perfekt optimiert! 🎉
---
 .../kabelueberwachung/kue705FO/Kue705FO.tsx   | 22 ++-------------
 .../kue705FO/hooks/useTDRChart.ts             | 27 +++++++++++++++++++
 2 files changed, 29 insertions(+), 20 deletions(-)
 create mode 100644 components/main/kabelueberwachung/kue705FO/hooks/useTDRChart.ts

diff --git a/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx b/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
index e09d9ab..7e5f451 100644
--- a/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
@@ -24,6 +24,7 @@ import useIsoDisplay from "./hooks/useIsoDisplay";
 import useLoopDisplay from "./hooks/useLoopDisplay";
 import useModulName from "./hooks/useModulName";
 import useChartData from "./hooks/useChartData";
+import useTDRChart from "./hooks/useTDRChart";
 
 const Kue705FO: React.FC<Kue705FOProps> = ({
   isolationswert,
@@ -125,26 +126,6 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
     setShowChartModal(false);
   };
 
-  // Funktion zum Erstellen des TDR-Charts
-
-  const chartInstance = useRef<Chart | null>(null);
-
-  //----------------------------------
-  useEffect(() => {
-    if (selectedChartData) {
-      createTDRChart(selectedChartData); // Neues Chart erstellen
-    }
-
-    return () => {
-      // Cleanup beim Komponentenwechsel
-      if (chartInstance.current) {
-        console.log("Chart wird beim Komponentenwechsel zerstört.");
-        chartInstance.current.destroy();
-        chartInstance.current = null;
-      }
-    };
-  }, [selectedChartData]);
-
   //----------------------------------
   //hooks einbinden
   const kueVersion = useKueVersion(slotIndex, reduxKueVersion);
@@ -184,6 +165,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
 
   const zoomPlugin = useChartPlugin();
   useChartData(loopMeasurementCurveChartData);
+  const { chartInstance } = useTDRChart(selectedChartData);
 
   //---------------------------------
   return (
diff --git a/components/main/kabelueberwachung/kue705FO/hooks/useTDRChart.ts b/components/main/kabelueberwachung/kue705FO/hooks/useTDRChart.ts
new file mode 100644
index 0000000..6d8ccf7
--- /dev/null
+++ b/components/main/kabelueberwachung/kue705FO/hooks/useTDRChart.ts
@@ -0,0 +1,27 @@
+// components/main/kabelueberwachung/kue705FO/hooks/useTDRChart.ts
+import { useEffect, useRef } from "react";
+import Chart from "chart.js/auto";
+import { createTDRChart } from "../../../../../utils/chartUtils";
+
+const useTDRChart = (selectedChartData: any) => {
+  const chartInstance = useRef<Chart | null>(null);
+
+  useEffect(() => {
+    if (selectedChartData) {
+      createTDRChart(selectedChartData); // Neues Chart erstellen
+    }
+
+    return () => {
+      // Cleanup beim Komponentenwechsel
+      if (chartInstance.current) {
+        console.log("Chart wird beim Komponentenwechsel zerstört.");
+        chartInstance.current.destroy();
+        chartInstance.current = null;
+      }
+    };
+  }, [selectedChartData]);
+
+  return { chartInstance };
+};
+
+export default useTDRChart;