CPLv4.0/components/main/analogInputs/AnalogInputsChart.tsx

"use client";
type AnalogInput = {
  id: number;
  label: string;
  unit: string;
};
import React, { useEffect } from "react";
import { Line } from "react-chartjs-2";
import { getColor } from "@/utils/colors";
import {
  Chart as ChartJS,
  LineElement,
  PointElement,
  CategoryScale,
  LinearScale,
  Tooltip,
  Legend,
  Filler,
  TimeScale,
} from "chart.js";
import "chartjs-adapter-date-fns";
import { de } from "date-fns/locale";
import { useSelector, useDispatch } from "react-redux";
import type { RootState, AppDispatch } from "@/redux/store";
import { getAnalogInputsHistoryThunk } from "@/redux/thunks/getAnalogInputsHistoryThunk";
import DateRangePicker from "@/components/common/DateRangePicker";
import { Listbox } from "@headlessui/react";
import {
  setVonDatum,
  setBisDatum,
} from "@/redux/slices/analogInputsChartSlice";

// Basis-Registrierung (ohne Zoom-Plugin)
ChartJS.register(
  LineElement,
  PointElement,
  CategoryScale,
  LinearScale,
  Tooltip,
  Legend,
  Filler,
  TimeScale
);

export default function AnalogInputsChart({
  selectedId,
}: {
  selectedId: number | null;
}) {
  const selectedInput = useSelector(
    (state: RootState) => state.selectedAnalogInput
  ) as unknown as AnalogInput | null;

  const dispatch = useDispatch<AppDispatch>();

  type AnalogInputHistoryPoint = { t: string | number | Date; m: number };

  const { data } = useSelector(
    (state: RootState) => state.analogInputsHistory
  ) as {
    data: { [key: string]: AnalogInputHistoryPoint[] };
  };
  const zeitraum = useSelector(
    (state: RootState) => state.analogInputsHistory.zeitraum
  );

  const handleFetchData = () => {
    if (!selectedId || !zeitraum) return;
    dispatch(getAnalogInputsHistoryThunk({ eingang: selectedId, zeitraum }));
  };

  useEffect(() => {
    if (selectedId && zeitraum) {
      dispatch(getAnalogInputsHistoryThunk({ eingang: selectedId, zeitraum }));
    }
  }, [dispatch, selectedId, zeitraum]);

  // ✅ Zoom-Plugin dynamisch importieren und registrieren
  useEffect(() => {
    const loadZoomPlugin = async () => {
      if (typeof window !== "undefined") {
        const zoomPlugin = (await import("chartjs-plugin-zoom")).default;
        if (!ChartJS.registry.plugins.get("zoom")) {
          ChartJS.register(zoomPlugin);
        }
      }
    };
    loadZoomPlugin();
  }, []);

  if (!selectedId) {
    return (
      <div className="text-gray-500">Bitte einen Messwerteingang auswählen</div>
    );
  }

  const key = String(selectedId + 99);
  const inputData = data[key];

  if (!inputData) {
    return (
      <div className="text-red-500">
        Keine Verlaufsdaten für Messwerteingang {selectedId} gefunden.
      </div>
    );
  }

  const chartData = {
    datasets: [
      {
        label: `Messkurve ${selectedInput?.label ?? "Eingang"} [${
          selectedInput?.unit ?? ""
        }]`,
        data: inputData.map((point: AnalogInputHistoryPoint) => ({
          x: point.t,
          y: point.m,
        })),
        fill: false,
        borderColor: getColor("littwin-blue"),
        backgroundColor: "rgba(59,130,246,0.5)",
        borderWidth: 2,
        pointRadius: 0,
        pointHoverRadius: 10,
        tension: 0.1,
      },
    ],
  };

  const chartOptions = {
    responsive: true,
    plugins: {
      legend: { position: "top" as const },
      tooltip: {
        mode: "index" as const,
        intersect: false,
        callbacks: {
          label: function (context: import("chart.js").TooltipItem<"line">) {
            const y = context.parsed.y;
            return `Messwert: ${y}`;
          },
          title: function (
            tooltipItems: import("chart.js").TooltipItem<"line">[]
          ) {
            const date = tooltipItems[0].parsed.x;
            return `Zeitpunkt: ${new Date(date).toLocaleString("de-DE")}`;
          },
        },
      },

      title: {
        display: true,
        text: `Verlauf der letzten 30 Tage`,
      },
      zoom: {
        pan: {
          enabled: true,
          mode: "x" as const,
        },
        zoom: {
          wheel: { enabled: true },
          pinch: { enabled: true },
          mode: "x" as const,
        },
      },
    },
    scales: {
      x: {
        type: "time" as const,
        time: {
          unit: "day" as const, // nur Datum in Achse
          tooltipFormat: "dd.MM.yyyy HH:mm", // aber Uhrzeit im Tooltip sichtbar
          displayFormats: {
            day: "dd.MM.yyyy",
          },
        },

        adapters: {
          date: {
            locale: de,
          },
        },
        title: {
          display: true,
          text: "Zeit",
        },
      },
      y: {
        title: {
          display: true,
          text: `Messwert [${selectedInput?.unit ?? ""}]`,
        },
      },
    },
  };

  return (
    <div className="w-full h-full">
      <Line data={chartData} options={chartOptions} />
    </div>
  );
}