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 = ({ isolationswert, @@ -125,26 +126,6 @@ const Kue705FO: React.FC = ({ setShowChartModal(false); }; - // Funktion zum Erstellen des TDR-Charts - - const chartInstance = useRef(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 = ({ 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(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;