Version 1.6.200

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

@@ -1,163 +0,0 @@
-"use client";
-
-import React, { useEffect, useRef } from "react";
-import { useSelector } from "react-redux";
-import { RootState } from "../../../../../../redux/store";
-import {
-  Chart as ChartJS,
-  LineElement,
-  PointElement,
-  LinearScale,
-  TimeScale,
-  Title,
-  Tooltip,
-  Legend,
-  Filler,
-} from "chart.js";
-import zoomPlugin from "chartjs-plugin-zoom";
-import "chartjs-adapter-date-fns";
-import { de } from "date-fns/locale";
-
-ChartJS.register(
-  LineElement,
-  PointElement,
-  LinearScale,
-  TimeScale,
-  Title,
-  Tooltip,
-  Legend,
-  Filler,
-  zoomPlugin
-);
-
-const LoopMeasurementChart = () => {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const chartInstance = useRef<ChartJS | null>(null);
-
-  const { loopMeasurementCurveChartData, selectedMode, unit, isFullScreen } =
-    useSelector((state: RootState) => state.kabelueberwachungChartSlice);
-
-  useEffect(() => {
-    if (!canvasRef.current) return;
-    const ctx = canvasRef.current.getContext("2d");
-    if (!ctx) return;
-
-    const chartData = {
-      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,
-        },
-
-        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,
-            },
-        {
-          label: "Messwert Maximum",
-          data: loopMeasurementCurveChartData.map((e) => e.a).reverse(),
-          borderColor: "lightgrey",
-          borderWidth: 1,
-          fill: false,
-          pointRadius: 0,
-        },
-      ],
-    };
-
-    const options = {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          position: "top" as const,
-        },
-        tooltip: {
-          mode: "index" as const,
-          intersect: false,
-        },
-        zoom: {
-          pan: {
-            enabled: true,
-            mode: "x",
-          },
-          zoom: {
-            wheel: {
-              enabled: true,
-            },
-            pinch: {
-              enabled: true,
-            },
-            mode: "x",
-          },
-        },
-      },
-      scales: {
-        x: {
-          type: "time" as const,
-          time: {
-            unit: "day",
-            tooltipFormat: "dd.MM.yyyy HH:mm",
-            displayFormats: {
-              day: "dd.MM", // z. B. 02.04
-            },
-          },
-          title: {
-            display: true,
-            text: "Zeit",
-          },
-          // Hier Deutsch setzen:
-          locale: de,
-        },
-        y: {
-          title: {
-            display: true,
-            text: unit,
-          },
-          ticks: {
-            precision: 0,
-          },
-        },
-      },
-    };
-
-    if (chartInstance.current) {
-      chartInstance.current.destroy();
-    }
-
-    chartInstance.current = new ChartJS(ctx, {
-      type: "line",
-      data: chartData,
-      options,
-    });
-
-    // Kein Cleanup mit Destroy, damit Zoom erhalten bleibt
-  }, [loopMeasurementCurveChartData, selectedMode]);
-
-  return (
-    <div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
-      <canvas ref={canvasRef} style={{ width: "100%", height: "100%" }} />
-    </div>
-  );
-};
-
-export default LoopMeasurementChart;