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

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

@@ -0,0 +1,203 @@
+"use client";
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { RootState } from "../../../../../../redux/store";
+import {
+  setVonDatum,
+  setBisDatum,
+} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
+import {
+  ComposedChart,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  Line,
+  Brush,
+  Area,
+} from "recharts";
+
+//  Benutzerdefinierter Tooltip für die richtige Anordnung der Werte
+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",
+          textAlign: "center",
+        }}
+      >
+        <strong>{new Date(label).toLocaleString()}</strong>
+        <div style={{ color: "grey" }}>
+          {messwertMax
+            ? `Messwert Maximum: ${messwertMax.value.toFixed(2)} kOhm`
+            : ""}
+        </div>
+        <div style={{ color: "#00AEEF", fontWeight: "bold" }}>
+          {messwert ? `Messwert: ${messwert.value.toFixed(2)} kOhm` : ""}
+          {messwertDurchschnitt
+            ? `Messwert Durchschnitt: ${messwertDurchschnitt.value.toFixed(
+                2
+              )} kOhm`
+            : ""}
+        </div>
+        <div style={{ color: "grey" }}>
+          {messwertMin
+            ? `Messwert Minimum: ${messwertMin.value.toFixed(2)} kOhm`
+            : ""}
+        </div>
+      </div>
+    );
+  }
+  return null;
+};
+
+const LoopMeasurementChart = () => {
+  const littwinBlue = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--littwin-blue");
+  const dispatch = useDispatch();
+  const istVollbild = useSelector(
+    (state: RootState) => state.kabelueberwachungChart.isFullScreen
+  );
+  const { loopMeasurementCurveChartData, vonDatum, bisDatum } = useSelector(
+    (state: RootState) => state.kabelueberwachungChart
+  );
+  const ausgewaehlterModus = useSelector(
+    (state: RootState) => state.kabelueberwachungChart.selectedMode
+  );
+
+  //  Konvertiere Daten für den Chart & kehre Reihenfolge um
+  const formatierteDaten = loopMeasurementCurveChartData
+    .map((eintrag) => ({
+      zeit: new Date(eintrag.t).getTime(), // Zeitstempel
+      messwertMinimum: eintrag.i, // Minimum (Tiefstwert)
+      messwertMaximum: eintrag.a, // Maximum (Höchstwert)
+      messwert: eintrag.m ?? null, // Aktueller Messwert
+      messwertDurchschnitt:
+        ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2"
+          ? eintrag.g ?? null
+          : null, // Durchschnittswert nur in DIA1 & DIA2
+    }))
+    .reverse(); //  Hier wird die Reihenfolge umgekehrt
+
+  // Berechnung des minimalen Werts für Y-Achse
+  const minMesswert = Math.min(
+    ...loopMeasurementCurveChartData.map((entry) => entry.i)
+  );
+
+  const [zoomedXDomain, setZoomedXDomain] = useState([
+    new Date(vonDatum).getTime(),
+    new Date(bisDatum).getTime(),
+  ]);
+
+  const handleZoom = (domain: any) => {
+    setZoomedXDomain(domain);
+  };
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        height: istVollbild ? "90%" : "400px",
+      }}
+    >
+      <ResponsiveContainer width="100%" height="100%">
+        <ComposedChart data={formatierteDaten}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis
+            dataKey="zeit"
+            domain={zoomedXDomain}
+            tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()}
+          />
+          <YAxis
+            label={{ value: "kOhm", angle: -90, position: "insideLeft" }}
+            domain={[minMesswert, "auto"]}
+            tickFormatter={(wert) => `${wert.toFixed(2)} kOhm`}
+          />
+          <Tooltip content={<CustomTooltip />} />
+
+          {/* Manuell definierte Legende mit der richtigen Reihenfolge */}
+          <Legend
+            payload={[
+              { value: "Messwert Maximum", type: "line", color: "lightgrey" },
+              ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2"
+                ? {
+                    value: "Messwert Durchschnitt",
+                    type: "line",
+                    color: littwinBlue,
+                  }
+                : { value: "Messwert", type: "line", color: littwinBlue },
+              { value: "Messwert Minimum", type: "line", color: "lightgrey" },
+            ]}
+          />
+
+          {/* Messwert Minimum als Linie */}
+          <Line
+            type="monotone"
+            dataKey="messwertMinimum"
+            stroke="lightgrey"
+            dot={false}
+            name="Messwert Minimum"
+          />
+
+          {/* Messwert Maximum als Linie */}
+          <Line
+            type="monotone"
+            dataKey="messwertMaximum"
+            stroke="lightgrey"
+            dot={false}
+            name="Messwert Maximum"
+          />
+
+          {/* Messwert Durchschnitt (nur in DIA1 & DIA2) */}
+          {(ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2") && (
+            <Line
+              type="monotone"
+              dataKey="messwertDurchschnitt"
+              stroke={littwinBlue}
+              dot={true}
+              name="Messwert Durchschnitt"
+            />
+          )}
+
+          {/* Messwert als Punktdiagramm */}
+          {ausgewaehlterModus === "DIA0" && (
+            <Line
+              type="monotone"
+              dataKey="messwert"
+              stroke={littwinBlue}
+              dot={true}
+              name="Messwert"
+            />
+          )}
+          <Brush
+            dataKey="zeit"
+            height={30}
+            stroke="#8884d8"
+            onChange={handleZoom}
+          />
+        </ComposedChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default LoopMeasurementChart;

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

@@ -0,0 +1,189 @@
+"use client";
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { RootState } from "../../../../../../redux/store";
+import {
+  setVonDatum,
+  setBisDatum,
+} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
+import {
+  ComposedChart,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  Line,
+} from "recharts";
+
+// 📌 Benutzerdefinierter Tooltip für die richtige Anordnung der Werte
+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",
+          textAlign: "center",
+        }}
+      >
+        <strong>{new Date(label).toLocaleString()}</strong>
+        <div style={{ color: "grey" }}>
+          {messwertMax
+            ? `Messwert Maximum: ${messwertMax.value.toFixed(2)} kOhm`
+            : ""}
+        </div>
+        <div style={{ color: "#00AEEF", fontWeight: "bold" }}>
+          {messwert ? `Messwert: ${messwert.value.toFixed(2)} kOhm` : ""}
+          {messwertDurchschnitt
+            ? `Messwert Durchschnitt: ${messwertDurchschnitt.value.toFixed(
+                2
+              )} kOhm`
+            : ""}
+        </div>
+        <div style={{ color: "grey" }}>
+          {messwertMin
+            ? `Messwert Minimum: ${messwertMin.value.toFixed(2)} kOhm`
+            : ""}
+        </div>
+      </div>
+    );
+  }
+  return null;
+};
+
+const LoopMeasurementChart = () => {
+  const littwinBlue = getComputedStyle(
+    document.documentElement
+  ).getPropertyValue("--littwin-blue");
+  const dispatch = useDispatch();
+  const istVollbild = useSelector(
+    (state: RootState) => state.kabelueberwachungChart.isFullScreen
+  );
+  const { loopMeasurementCurveChartData, vonDatum, bisDatum } = useSelector(
+    (state: RootState) => state.kabelueberwachungChart
+  );
+  const ausgewaehlterModus = useSelector(
+    (state: RootState) => state.kabelueberwachungChart.selectedMode
+  );
+
+  // 📌 Konvertiere Daten für den Chart & kehre Reihenfolge um
+  const formatierteDaten = loopMeasurementCurveChartData
+    .map((eintrag) => ({
+      zeit: new Date(eintrag.t).getTime(), // Zeitstempel
+      messwertMinimum: eintrag.i, // Minimum (Tiefstwert)
+      messwertMaximum: eintrag.a, // Maximum (Höchstwert)
+      messwert: eintrag.m ?? null, // Aktueller Messwert
+      messwertDurchschnitt:
+        ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2"
+          ? eintrag.g ?? null
+          : null, // Durchschnittswert nur in DIA1 & DIA2
+    }))
+    .reverse(); // 🔄 Hier wird die Reihenfolge umgekehrt
+
+  // Berechnung des minimalen Werts für Y-Achse
+  const minMesswert = Math.min(
+    ...loopMeasurementCurveChartData.map((entry) => entry.i)
+  );
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        height: istVollbild ? "90%" : "400px",
+      }}
+    >
+      <ResponsiveContainer width="100%" height="100%">
+        <ComposedChart data={formatierteDaten}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis
+            dataKey="zeit"
+            domain={[
+              new Date(vonDatum).getTime(),
+              new Date(bisDatum).getTime(),
+            ]}
+            tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()}
+          />
+          <YAxis
+            label={{ value: "kOhm", angle: -90, position: "insideLeft" }}
+            domain={[minMesswert, "auto"]}
+            tickFormatter={(wert) => `${wert.toFixed(2)} kOhm`}
+          />
+          <Tooltip content={<CustomTooltip />} />
+
+          {/* 📌 Manuell definierte Legende mit der richtigen Reihenfolge */}
+          <Legend
+            payload={[
+              { value: "Messwert Maximum", type: "line", color: "lightgrey" },
+              ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2"
+                ? {
+                    value: "Messwert Durchschnitt",
+                    type: "line",
+                    color: littwinBlue,
+                  }
+                : { value: "Messwert", type: "line", color: littwinBlue },
+              { value: "Messwert Minimum", type: "line", color: "lightgrey" },
+            ]}
+          />
+
+          {/* Messwert Minimum als Linie */}
+          <Line
+            type="monotone"
+            dataKey="messwertMinimum"
+            stroke="lightgrey"
+            dot={false}
+            name="Messwert Minimum"
+          />
+
+          {/* Messwert Maximum als Linie */}
+          <Line
+            type="monotone"
+            dataKey="messwertMaximum"
+            stroke="lightgrey"
+            dot={false}
+            name="Messwert Maximum"
+          />
+
+          {/* Messwert Durchschnitt (nur in DIA1 & DIA2) */}
+          {(ausgewaehlterModus === "DIA1" || ausgewaehlterModus === "DIA2") && (
+            <Line
+              type="monotone"
+              dataKey="messwertDurchschnitt"
+              stroke={littwinBlue}
+              dot={true}
+              name="Messwert Durchschnitt"
+            />
+          )}
+
+          {/* Messwert als Punktdiagramm */}
+          {ausgewaehlterModus === "DIA0" && (
+            <Line
+              type="monotone"
+              dataKey="messwert"
+              stroke={littwinBlue}
+              dot={true}
+              name="Messwert"
+            />
+          )}
+        </ComposedChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default LoopMeasurementChart;

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

@@ -0,0 +1,188 @@
+"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
+import React, { useEffect, useRef, useState } 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";
+
+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 chartRef = useRef<HTMLCanvasElement>(null);
+  const chartInstance = useRef<Chart | null>(null);
+  const [zoomPlugin, setZoomPlugin] = useState<any>(null);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      import("chartjs-plugin-zoom").then((mod) => {
+        setZoomPlugin(mod.default);
+        Chart.register(mod.default);
+      });
+    }
+  }, []);
+
+  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: { spanGaps: true },
+            },
+            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]);
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        height: isFullScreen ? "90%" : "400px",
+      }}
+    >
+      <canvas ref={chartRef} style={{ width: "100%", height: "100%" }} />
+    </div>
+  );
+};
+
+export default LoopMeasurementChart;

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

@@ -1,189 +1,168 @@
-"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
+"use client";
-import React, { useEffect, useRef, useState } from "react";
+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,
+  ComposedChart,
-  setBisDatum,
+  XAxis,
-} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
+  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 brushRange = useSelector((state: RootState) => state.brush);
-  );
+  const {
-  const { loopMeasurementCurveChartData, vonDatum, bisDatum } = useSelector(
+    loopMeasurementCurveChartData,
-    (state: RootState) => state.kabelueberwachungChart
+    selectedMode,
-  );
+    vonDatum,
-  const selectedMode = useSelector(
+    bisDatum,
-    (state: RootState) => state.kabelueberwachungChart.selectedMode
+    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);
+  // Initialisierung des Brush-Bereichs nur beim ersten Laden der Daten
-  const chartInstance = useRef<Chart | null>(null);
-  const [zoomPlugin, setZoomPlugin] = useState<any>(null);
-
   useEffect(() => {
-    if (typeof window !== "undefined") {
+    if (brushRange.endIndex === 0 && formatierteDaten.length) {
-      import("chartjs-plugin-zoom").then((mod) => {
+      dispatch(
-        setZoomPlugin(mod.default);
+        setBrushRange({
-        Chart.register(mod.default);
+          startIndex: 0,
-      });
+          endIndex: formatierteDaten.length - 1,
+        })
+      );
     }
-  }, []);
+  }, [formatierteDaten, brushRange.endIndex, dispatch]);
 
-  useEffect(() => {
+  const handleBrushChange = useCallback(
-    if (chartRef.current) {
+    ({ startIndex, endIndex }) => {
-      if (chartInstance.current) {
+      dispatch(setBrushRange({ startIndex, endIndex }));
-        chartInstance.current.destroy();
+    },
-      }
+    [dispatch]
-
+  );
-      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]);
 
   return (
-    <div
+    <div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
-      style={{
+      <ResponsiveContainer width="100%" height="100%">
-        position: "relative",
+        <ComposedChart data={formatierteDaten}>
-        width: "100%",
+          <CartesianGrid strokeDasharray="3 3" />
-        height: isFullScreen ? "90%" : "400px",
+          <XAxis
-      }}
+            dataKey="zeit"
-    >
+            domain={["dataMin", "dataMax"]}
-      <canvas ref={chartRef} style={{ width: "100%", height: "100%" }} />
+            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>
   );
 };

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.119";
+const webVersion = "1.6.120";
 export default webVersion;

redux/slices/brushSlice.ts

@@ -0,0 +1,19 @@
+// brushSlice.ts (✅ Korrekt)
+import { createSlice } from "@reduxjs/toolkit";
+
+const brushSlice = createSlice({
+  name: "brush",
+  initialState: {
+    startIndex: 0,
+    endIndex: 0,
+  },
+  reducers: {
+    setBrushRange(state, action) {
+      state.startIndex = action.payload.startIndex;
+      state.endIndex = action.payload.endIndex;
+    },
+  },
+});
+
+export const { setBrushRange } = brushSlice.actions;
+export default brushSlice.reducer;

redux/store.ts

@@ -11,6 +11,7 @@ import systemSettingsReducer from "./slices/systemSettingsSlice";
 import opcuaSettingsReducer from "./slices/opcuaSettingsSlice";
 import digitalOutputsReducer from "./slices/digitalOutputsSlice";
 import analogeEingaengeReducer from "./slices/analogeEingaengeSlice";
+import brushReducer from "./slices/brushSlice";
 
 const store = configureStore({
   reducer: {
@@ -25,6 +26,7 @@ const store = configureStore({
     opcuaSettings: opcuaSettingsReducer,
     digitalOutputs: digitalOutputsReducer,
     analogeEingaenge: analogeEingaengeReducer,
+    brush: brushReducer,
   },
 });
 

styles/globals.css

@@ -6,6 +6,7 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --littwin-blue: #00aeef;
 }
 
 @media (prefers-color-scheme: dark) {