fix: nur Daten abrufen, wenn 'Daten laden' button geklickt wird

components/main/system/DetailModal.tsx

@@ -135,6 +135,7 @@ export const DetailModal = ({
     datasets: [],
   });
   const [isLoading, setIsLoading] = useState(false);
+  const [shouldUpdateChart, setShouldUpdateChart] = useState(false);
   const vonDatum = useSelector(
     (state: RootState) => state.kabelueberwachungChartSlice.vonDatum
   );
@@ -197,6 +198,13 @@ export const DetailModal = ({
   // API-Request beim Klick auf "Daten laden"
   const handleFetchData = () => {
     setIsLoading(true);
+
+    // Clear previous chart data
+    setChartData({ datasets: [] });
+
+    // Flag setzen, dass Chart nach Datenempfang aktualisiert werden soll
+    setShouldUpdateChart(true);
+
     switch (selectedKey) {
       case "+5V":
         dispatch(getSystemspannung5VplusThunk(zeitraum));
@@ -233,12 +241,6 @@ export const DetailModal = ({
       chartRef.current.resetZoom();
     }
   }, [zeitraum]);
-  // beim start soll der Chart einmal aufgerufen wird, also einmal der Button "Daten laden" geklickt werden
-  useEffect(() => {
-    if (isOpen && selectedKey) {
-      handleFetchData();
-    }
-  }, [isOpen, selectedKey]);
 
   // Chart.js animation complete callback to set isLoading false
   useEffect(() => {
@@ -257,6 +259,40 @@ export const DetailModal = ({
     }
   }, [chartData, isLoading]);
 
+  // Update chart data when Redux data changes (only after button click)
+  useEffect(() => {
+    if (shouldUpdateChart && reduxData && reduxData.length > 0) {
+      console.log("Redux data for chart:", reduxData);
+
+      // Convert Redux data to Chart.js format
+      const chartDataPoints = reduxData.map((entry) => ({
+        x: new Date(entry.t).getTime(),
+        y: entry.m || entry.a || entry.i || 0, // Use current value, max, min, or 0
+      }));
+
+      const newChartData = {
+        datasets: [
+          {
+            label: selectedKey || "Messwerte",
+            data: chartDataPoints,
+            borderColor: "#00AEEF", // littwin-blue
+            backgroundColor: "rgba(0, 174, 239, 0.2)", // littwin-blue mit Transparenz
+            tension: 0.1,
+            fill: false,
+          },
+        ],
+      };
+
+      console.log("Chart data points:", chartDataPoints);
+      setChartData(newChartData);
+      setShouldUpdateChart(false); // Reset flag
+    } else if (shouldUpdateChart && (!reduxData || reduxData.length === 0)) {
+      console.log("No Redux data available");
+      setChartData({ datasets: [] });
+      setShouldUpdateChart(false); // Reset flag
+    }
+  }, [reduxData, selectedKey, shouldUpdateChart]);
+
   if (!isOpen || !selectedKey) return null;
 
   return (