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

"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;