bd8e114a54
✅ Bessere Wiederverwendbarkeit: Falls du das gleiche Verhalten in einer anderen Komponente brauchst, kannst du einfach useTDRChart importieren. ✅ Kue705FO.tsx ist schlanker: Alle Hooks sind nun ausgelagert! 🎯 🚀 Jetzt ist dein Code perfekt optimiert! 🎉
28 lines
784 B
TypeScript
28 lines
784 B
TypeScript
// 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;
|