esLint

components/main/kabelueberwachung/kue705FO/hooks/useTDRChart.ts

@@ -1,27 +1,22 @@
 // components/main/kabelueberwachung/kue705FO/hooks/useTDRChart.ts
-import { useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import Chart from "chart.js/auto";
-import { createTDRChart } from "../../../../../utils/chartUtils";
 
-const useTDRChart = (selectedChartData: any) => {
-  const chartInstance = useRef<Chart | null>(null);
+type ZoomPluginType = { id: string } | null;
+
+const useChartPlugin = () => {
+  const [zoomPlugin, setZoomPlugin] = useState<ZoomPluginType>(null);
 
   useEffect(() => {
-    if (selectedChartData) {
-      createTDRChart(selectedChartData); // Neues Chart erstellen
+    if (typeof window !== "undefined") {
+      import("chartjs-plugin-zoom").then((mod) => {
+        setZoomPlugin(mod.default);
+        Chart.register(mod.default);
+      });
     }
+  }, []);
 
-    return () => {
-      // Cleanup beim Komponentenwechsel
-      if (chartInstance.current) {
-        console.log("Chart wird beim Komponentenwechsel zerstört.");
-        chartInstance.current.destroy();
-        chartInstance.current = null;
-      }
-    };
-  }, [selectedChartData]);
-
-  return { chartInstance };
+  return zoomPlugin;
 };
 
-export default useTDRChart;
+export default useChartPlugin;