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

"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: {
                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
      style={{
        position: "relative",
        width: "100%",
        height: isFullScreen ? "90%" : "400px",
      }}
    >
      <canvas ref={chartRef} style={{ width: "100%", height: "100%" }} />
    </div>
  );
};

export default LoopMeasurementChart;