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

// components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
import React, { useEffect, useRef } from "react";
import { RootState } from "../../../../../../redux/store";
import { useSelector } from "react-redux";
import { Chart, registerables } from "chart.js";
import "chartjs-adapter-date-fns";

const TDRChart: React.FC = () => {
  const isFullScreen = useSelector(
    (state: RootState) => state.kabelueberwachungChart.isFullScreen
  );

  const chartRef = useRef<HTMLCanvasElement>(null);
  const chartInstance = useRef<Chart | null>(null);

  // TDR-Daten aus dem Redux Store selektieren
  const tdrChartData = useSelector(
    (state: any) => state.kabelueberwachungChart.tdrChartData
  );

  useEffect(() => {
    // Importiere und registriere das Zoom-Plugin innerhalb des useEffect-Hooks
    import("chartjs-plugin-zoom").then((zoomPlugin) => {
      Chart.register(...registerables, zoomPlugin.default);

      if (chartRef.current && tdrChartData.length > 0) {
        if (chartInstance.current) {
          chartInstance.current.destroy();
        }

        const ctx = chartRef.current.getContext("2d");
        if (ctx) {
          chartInstance.current = new Chart(ctx, {
            type: "line",
            data: {
              datasets: [
                {
                  label: "TDR Entfernung (km)",
                  data: tdrChartData,
                  borderColor: "rgba(255, 99, 132, 1)",
                  backgroundColor: "rgba(255, 99, 132, 0.2)",
                  tension: 0.1,
                  parsing: {
                    xAxisKey: "t", // Schlüssel für den Zeitstempel
                    yAxisKey: "m", // Schlüssel für den Messwert
                  },
                },
              ],
            },
            options: {
              responsive: true,
              maintainAspectRatio: false,
              scales: {
                x: {
                  type: "linear", // Lineare Skalierung für numerische Daten
                  title: {
                    display: true,
                    text: "Entfernung (m)",
                  },
                },
                y: {
                  title: {
                    display: true,
                    text: "Pegel",
                  },
                },
              },
              plugins: {
                zoom: {
                  pan: {
                    enabled: true,
                    mode: "xy",
                  },
                  zoom: {
                    wheel: {
                      enabled: true,
                    },
                    pinch: {
                      enabled: true,
                    },
                    mode: "xy",
                  },
                },
              },
            },
          });
        }
      }
    });
  }, [tdrChartData]);

  return (
    <div style={{ width: "100%", height: isFullScreen ? "100%" : "20rem" }}>
      <canvas ref={chartRef} style={{ width: "100%", height: "100%" }} />
    </div>
  );
};

export default TDRChart;