TDR Chart von Dropdown Menü Auwahl zeichnen

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx

@@ -7,12 +7,16 @@ import { useSelector } from "react-redux";
 import { Chart, registerables } from "chart.js";
 import "chartjs-adapter-date-fns";
 import { getColor } from "../../../../../../utils/colors";
+import TDRChartActionBar from "./TDRChartActionBar";
 
 const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
 
   // 🟢 **Hole den ausgewählten Slot und Messkurve aus Redux**
+  const selectedId = useSelector(
+    (state: RootState) => state.tdrDataById.selectedId
+  );
   const selectedSlot = useSelector(
     (state: RootState) => state.kueChartMode.selectedSlot
   );
@@ -20,7 +24,7 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
     (state: RootState) => state.kueChartMode.activeMode
   );
   const tdrChartData = useSelector((state: RootState) =>
-    selectedSlot !== null ? state.tdrChart.data[selectedSlot] || [] : []
+    selectedId !== null ? state.tdrDataById.dataById[selectedId] || [] : []
   );
 
   const referenceChartData = useSelector((state: RootState) =>
@@ -142,9 +146,10 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
       }
     });
   }, [JSON.stringify(tdrChartData), selectedSlot, selectedChartType]);
-
   return (
     <div style={{ width: "100%", height: isFullScreen ? "90%" : "28rem" }}>
+      <TDRChartActionBar />
+
       {tdrChartData.length === 0 ? (
         <div className="flex items-center justify-center h-full text-gray-500 italic">
           ⚠️ Keine Daten verfügbar für diesen Slot