feat: Struktur für Charts verbessert und Komponenten getrennt

- `LoopMeasurementChart.tsx` und `TDRChart.tsx` erstellt für separate Diagramm-Darstellungen. - Neue Struktur unter `/components/modules/kue705FO/charts/` eingeführt. - `ChartModal.tsx` bleibt für generelle Nutzung erhalten. - Erhöhte Wartbarkeit und Modularität durch Trennung der Chart-Komponenten.
2025-02-13 11:55:52 +01:00
parent d67ad97f83
commit 5c7b5555c4
17 changed files with 411 additions and 91 deletions
--- a/components/modules/kue705FO/charts/LoopMeasurementChart.tsx
+++ b/components/modules/kue705FO/charts/LoopMeasurementChart.tsx
@@ -0,0 +1,110 @@
+import React, { useEffect, useRef } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
+import Chart from "chart.js/auto";
+import "chartjs-adapter-date-fns";
+import { parseISO } from "date-fns";
+
+const LoopMeasurementChart: React.FC = () => {
+  const chartRef = useRef<HTMLCanvasElement>(null);
+  const chartInstance = useRef<Chart | null>(null);
+
+  // Redux-Daten abrufen
+  const chartData = useSelector((state: RootState) => state.chartData.data);
+
+  useEffect(() => {
+    if (chartRef.current && chartData.length > 0) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy(); // Bestehendes Chart zerstören
+      }
+
+      const ctx = chartRef.current.getContext("2d");
+      if (ctx) {
+        const labels = chartData.map((entry) =>
+          entry.timestamp ? parseISO(entry.timestamp) : new Date()
+        );
+
+        chartInstance.current = new Chart(ctx, {
+          type: "line",
+          data: {
+            labels,
+            datasets: [
+              {
+                label: "Schleifenwiderstand (kOhm)",
+                data: chartData.map((entry) => entry.loop ?? 0),
+                borderColor: "rgba(75, 192, 192, 1)", // Türkis
+                backgroundColor: "rgba(75, 192, 192, 0.2)",
+                tension: 0.1,
+                yAxisID: "y-left",
+              },
+              {
+                label: "Zusätzliche Schleifenmesswerte",
+                data: chartData.map((entry) => entry.additional ?? 0),
+                borderColor: "rgba(255, 159, 64, 1)", // Orange
+                backgroundColor: "rgba(255, 159, 64, 0.2)",
+                tension: 0.1,
+                yAxisID: "y-right",
+              },
+            ],
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+              x: {
+                type: "time",
+                time: {
+                  unit: "hour",
+                  tooltipFormat: "dd.MM.yyyy HH:mm",
+                },
+                title: {
+                  display: true,
+                  text: "Zeit",
+                },
+                grid: {
+                  drawBorder: true,
+                },
+              },
+              y: {
+                id: "y-left",
+                position: "left",
+                title: {
+                  display: true,
+                  text: "kOhm",
+                },
+                min: 0,
+                max: Math.max(...chartData.map((entry) => entry.loop ?? 1)) + 1,
+              },
+              "y-right": {
+                id: "y-right",
+                position: "right",
+                title: {
+                  display: true,
+                  text: "Zusätzliche Werte",
+                },
+                min: 0,
+                max:
+                  Math.max(...chartData.map((entry) => entry.additional ?? 1)) +
+                  1,
+                grid: {
+                  drawOnChartArea: false,
+                },
+              },
+            },
+          },
+        });
+      }
+    }
+
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+        chartInstance.current = null;
+      }
+    };
+  }, [chartData]);
+
+  return <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />;
+};
+
+export default LoopMeasurementChart;