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 {
  Chart as ChartJS,
  LineElement,
  PointElement,
  LinearScale,
  TimeScale,
  Title,
  Tooltip,
  Legend,
  Filler,
  ChartOptions,
} from "chart.js";
import zoomPlugin from "chartjs-plugin-zoom";
import "chartjs-adapter-date-fns";
import { Line } from "react-chartjs-2";
import { useSelector } from "react-redux";
import { RootState } from "../../../../../../redux/store";

ChartJS.register(
  LineElement,
  PointElement,
  LinearScale,
  TimeScale,
  Title,
  Tooltip,
  Legend,
  Filler,
  zoomPlugin
);

const LoopMeasurementChart = () => {
  const chartRef = useRef<any>(null);
  const { loopMeasurementCurveChartData, selectedMode, unit, isFullScreen } =
    useSelector((state: RootState) => state.kabelueberwachungChartSlice);

  const [zoomed, setZoomed] = useState(false);

  const data = {
    labels: loopMeasurementCurveChartData
      .map((entry) => new Date(entry.t))
      .reverse(),
    datasets: [
      {
        label: "Messwert Minimum",
        data: loopMeasurementCurveChartData.map((e) => e.i).reverse(),
        borderColor: "lightgrey",
        borderWidth: 1,
        fill: false,
        pointRadius: 0,
      },
      {
        label: "Messwert Maximum",
        data: loopMeasurementCurveChartData.map((e) => e.a).reverse(),
        borderColor: "lightgrey",
        borderWidth: 1,
        fill: false,
        pointRadius: 0,
      },
      selectedMode === "DIA0"
        ? {
            label: "Messwert",
            data: loopMeasurementCurveChartData.map((e) => e.m).reverse(),
            borderColor: "#00AEEF",
            borderWidth: 2,
            fill: false,
            pointRadius: 2,
          }
        : {
            label: "Messwert Durchschnitt",
            data: loopMeasurementCurveChartData.map((e) => e.g).reverse(),
            borderColor: "#00AEEF",
            borderWidth: 2,
            fill: false,
            pointRadius: 2,
          },
    ],
  };

  const options: ChartOptions<"line"> = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: "top" as const,
      },
      tooltip: {
        mode: "index",
        intersect: false,
      },
      zoom: {
        pan: {
          enabled: true,
          mode: "x",
        },
        zoom: {
          wheel: {
            enabled: true,
          },
          pinch: {
            enabled: true,
          },
          mode: "x",
          onZoomComplete: () => setZoomed(true),
        },
        limits: {
          x: { min: "original", max: "original" },
          y: { min: "original", max: "original" },
        },
      },
    },
    scales: {
      x: {
        type: "time",
        time: {
          unit: "day",
          tooltipFormat: "dd.MM.yyyy HH:mm",
        },
        title: {
          display: true,
          text: "Zeit",
        },
      },
      y: {
        title: {
          display: true,
          text: unit,
        },
        ticks: {
          precision: 0,
        },
      },
    },
  };

  useEffect(() => {
    if (!zoomed && chartRef.current) {
      chartRef.current.resetZoom?.();
    }
  }, [loopMeasurementCurveChartData, selectedMode]);

  return (
    <div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
      <Line ref={chartRef} data={data} options={options} />
    </div>
  );
};

export default LoopMeasurementChart;