WIP: Brush funktioniert in Chart, aber soll Datum in Brush angezeigt

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

@@ -1,189 +1,168 @@
-"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
-import React, { useEffect, useRef, useState } from "react";
+"use client";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../../../../../../redux/store";
-import Chart from "chart.js/auto";
-import "chartjs-adapter-moment";
 import {
-  setVonDatum,
-  setBisDatum,
-} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
+  ComposedChart,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  Line,
+  Brush,
+} from "recharts";
+import { setBrushRange } from "../../../../../../redux/slices/brushSlice";
+
+const CustomTooltip = ({ active, payload, label }: any) => {
+  if (active && payload && payload.length) {
+    const messwertMax = payload.find(
+      (p: any) => p.dataKey === "messwertMaximum"
+    );
+    const messwert = payload.find((p: any) => p.dataKey === "messwert");
+    const messwertMin = payload.find(
+      (p: any) => p.dataKey === "messwertMinimum"
+    );
+    const messwertDurchschnitt = payload.find(
+      (p: any) => p.dataKey === "messwertDurchschnitt"
+    );
+
+    return (
+      <div
+        style={{
+          background: "white",
+          padding: "8px",
+          border: "1px solid lightgrey",
+          borderRadius: "5px",
+        }}
+      >
+        <strong>{new Date(label).toLocaleString()}</strong>
+        {messwertMax && (
+          <div style={{ color: "grey" }}>
+            Messwert Maximum: {messwertMax.value.toFixed(2)} kOhm
+          </div>
+        )}
+        {messwert && (
+          <div style={{ color: "#00AEEF", fontWeight: "bold" }}>
+            Messwert: {messwert.value.toFixed(2)} kOhm
+          </div>
+        )}
+        {messwertDurchschnitt && (
+          <div
+            style={{ color: "#00AEEF" }}
+          >{`Messwert Durchschnitt: ${messwertDurchschnitt.value.toFixed(
+            2
+          )} kOhm`}</div>
+        )}
+        {messwertMin && (
+          <div
+            style={{ color: "grey" }}
+          >{`Messwert Minimum: ${messwertMin.value.toFixed(2)} kOhm`}</div>
+        )}
+      </div>
+    );
+  }
+  return null;
+};
 
 const LoopMeasurementChart = () => {
   const dispatch = useDispatch();
-  const isFullScreen = useSelector(
-    (state: RootState) => state.kabelueberwachungChart.isFullScreen
-  );
-  const { loopMeasurementCurveChartData, vonDatum, bisDatum } = useSelector(
-    (state: RootState) => state.kabelueberwachungChart
-  );
-  const selectedMode = useSelector(
-    (state: RootState) => state.kabelueberwachungChart.selectedMode
+
+  const brushRange = useSelector((state: RootState) => state.brush);
+  const {
+    loopMeasurementCurveChartData,
+    selectedMode,
+    vonDatum,
+    bisDatum,
+    isFullScreen,
+  } = useSelector((state: RootState) => state.kabelueberwachungChart);
+
+  const formatierteDaten = useMemo(
+    () =>
+      loopMeasurementCurveChartData
+        .map((eintrag) => ({
+          zeit: new Date(eintrag.t).getTime(),
+          messwertMinimum: eintrag.i,
+          messwertMaximum: eintrag.a,
+          messwert: eintrag.m ?? null,
+          messwertDurchschnitt: ["DIA1", "DIA2"].includes(selectedMode)
+            ? eintrag.g ?? null
+            : null,
+        }))
+        .reverse(),
+    [loopMeasurementCurveChartData, selectedMode]
   );
 
-  const chartRef = useRef<HTMLCanvasElement>(null);
-  const chartInstance = useRef<Chart | null>(null);
-  const [zoomPlugin, setZoomPlugin] = useState<any>(null);
-
+  // Initialisierung des Brush-Bereichs nur beim ersten Laden der Daten
   useEffect(() => {
-    if (typeof window !== "undefined") {
-      import("chartjs-plugin-zoom").then((mod) => {
-        setZoomPlugin(mod.default);
-        Chart.register(mod.default);
-      });
+    if (brushRange.endIndex === 0 && formatierteDaten.length) {
+      dispatch(
+        setBrushRange({
+          startIndex: 0,
+          endIndex: formatierteDaten.length - 1,
+        })
+      );
     }
-  }, []);
+  }, [formatierteDaten, brushRange.endIndex, dispatch]);
 
-  useEffect(() => {
-    if (chartRef.current) {
-      if (chartInstance.current) {
-        chartInstance.current.destroy();
-      }
-
-      console.log("Chart Data:", loopMeasurementCurveChartData);
-      console.log("Von Datum:", vonDatum, "Bis Datum:", bisDatum);
-      console.log("Selected Mode:", selectedMode);
-
-      // Basis-Datasets für alle Datenpunkte
-      const datasets = [
-        {
-          label: "Messwert Minimum ",
-          data: loopMeasurementCurveChartData.map((entry) => ({
-            x: new Date(entry.t).getTime(),
-            y: entry.i,
-          })),
-          borderColor: "rgba(75, 192, 192, 1)", // Türkis
-          backgroundColor: "rgba(75, 192, 192, 0.2)",
-          fill: false,
-        },
-        {
-          label: "Messwert Maximum ",
-          data: loopMeasurementCurveChartData.map((entry) => ({
-            x: new Date(entry.t).getTime(),
-            y: entry.a,
-          })),
-          borderColor: "rgba(192, 75, 75, 1)", // Rot
-          backgroundColor: "rgba(192, 75, 75, 0.2)",
-          fill: false,
-        },
-      ];
-
-      // Falls DIA0: `m` als aktueller Messwert verwenden
-      if (
-        selectedMode === "DIA0" &&
-        loopMeasurementCurveChartData.some((entry) => entry.m !== undefined)
-      ) {
-        datasets.push({
-          label: "Messwert",
-          data: loopMeasurementCurveChartData.map((entry) => ({
-            x: new Date(entry.t).getTime(),
-            y: entry.m ?? NaN,
-          })),
-          borderColor: "rgba(255, 165, 0, 1)", // Orange
-          backgroundColor: "rgba(255, 165, 0, 0.2)",
-          fill: false,
-        });
-      }
-
-      // Falls DIA1 oder DIA2: `g` als Durchschnittswert verwenden
-      if (
-        (selectedMode === "DIA1" || selectedMode === "DIA2") &&
-        loopMeasurementCurveChartData.some((entry) => entry.g !== undefined)
-      ) {
-        datasets.push({
-          label: "Messwert Durchschnitt", // g als Durchschnittswert verwenden
-          data: loopMeasurementCurveChartData.map((entry) => ({
-            x: new Date(entry.t).getTime(),
-            y: entry.g ?? NaN,
-          })),
-          borderColor: "rgba(75, 75, 192, 1)", // Blau
-          backgroundColor: "rgba(75, 75, 192, 0.2)",
-          fill: false,
-        });
-      }
-
-      const ctx = chartRef.current.getContext("2d");
-      if (ctx) {
-        chartInstance.current = new Chart(ctx, {
-          type: "line",
-          data: { datasets },
-          options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            animation: false,
-            elements: {
-              line: {
-                tension: 0.4, // Sorgt für eine weichere Kurve
-                cubicInterpolationMode: "monotone",
-              },
-            },
-            scales: {
-              x: {
-                type: "time",
-                time: {
-                  unit: "day",
-                  tooltipFormat: "dd.MM.yyyy HH:mm",
-                  displayFormats: { day: "dd.MM.yyyy" },
-                },
-                title: { display: true, text: "" }, // kann Zeit oder Datum eingefügt werden für X-Achse
-                min: new Date(vonDatum).getTime(),
-                max: new Date(bisDatum).getTime(),
-              },
-              y: {
-                ticks: {
-                  callback: (value) =>
-                    (typeof value === "number" ? value.toFixed(2) : value) +
-                    " kOhm",
-                },
-              },
-            },
-            plugins: {
-              tooltip: {
-                callbacks: {
-                  label: (tooltipItem) => {
-                    const rawItem = tooltipItem.raw as { x: number; y: number };
-                    return `${tooltipItem.dataset.label}: ${rawItem.y.toFixed(
-                      2
-                    )} kOhm`;
-                  },
-                },
-              },
-              zoom: {
-                pan: { enabled: true, mode: "xy" },
-                zoom: {
-                  wheel: { enabled: true },
-                  pinch: { enabled: true },
-                  mode: "xy",
-                  onZoomComplete: (chart) => {
-                    const xScale = chart.chart.scales.x;
-                    const newVonDatum = new Date(xScale.min)
-                      .toISOString()
-                      .split("T")[0];
-                    const newBisDatum = new Date(xScale.max)
-                      .toISOString()
-                      .split("T")[0];
-
-                    dispatch(setVonDatum(newVonDatum));
-                    dispatch(setBisDatum(newBisDatum));
-                  },
-                },
-              },
-            },
-          },
-        });
-      }
-    }
-  }, [loopMeasurementCurveChartData, vonDatum, bisDatum, selectedMode]);
+  const handleBrushChange = useCallback(
+    ({ startIndex, endIndex }) => {
+      dispatch(setBrushRange({ startIndex, endIndex }));
+    },
+    [dispatch]
+  );
 
   return (
-    <div
-      style={{
-        position: "relative",
-        width: "100%",
-        height: isFullScreen ? "90%" : "400px",
-      }}
-    >
-      <canvas ref={chartRef} style={{ width: "100%", height: "100%" }} />
+    <div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <ComposedChart data={formatierteDaten}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis
+            dataKey="zeit"
+            domain={["dataMin", "dataMax"]}
+            tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()}
+          />
+          <YAxis
+            label={{ value: "kOhm", angle: -90, position: "insideLeft" }}
+            domain={["auto", "auto"]}
+            tickFormatter={(wert) => `${wert.toFixed(2)} kOhm`}
+          />
+          <Tooltip content={<CustomTooltip />} />
+          <Legend />
+          <Line
+            type="monotone"
+            dataKey="messwertMinimum"
+            stroke="lightgrey"
+            dot={false}
+          />
+          <Line
+            type="monotone"
+            dataKey="messwertMaximum"
+            stroke="lightgrey"
+            dot={false}
+          />
+          {["DIA1", "DIA2"].includes(selectedMode) && (
+            <Line
+              type="monotone"
+              dataKey="messwertDurchschnitt"
+              stroke="#00AEEF"
+              dot
+            />
+          )}
+          {selectedMode === "DIA0" && (
+            <Line type="monotone" dataKey="messwert" stroke="#00AEEF" dot />
+          )}
+          <Brush
+            dataKey="zeit"
+            height={30}
+            stroke="#8884d8"
+            onChange={handleBrushChange}
+            startIndex={brushRange.startIndex}
+            endIndex={brushRange.endIndex || formatierteDaten.length - 1}
+          />
+        </ComposedChart>
+      </ResponsiveContainer>
     </div>
   );
 };