refactor: Auslagerung der Chart-Erstellungsfunktionen in chartUtils.ts

- createLoopChart und createTDRChart aus Kue705FO.tsx in eine separate Datei chartUtils.ts verschoben
- Verbesserte Code-Struktur und Wiederverwendbarkeit der Chart-Funktionen
- Import der ausgelagerten Funktionen in Kue705FO.tsx angepasst

utils/chartUtils.ts

@@ -0,0 +1,153 @@
+"use client";
+
+import Chart from "chart.js/auto";
+import { DataTDR } from "../redux/types/chartDataTypesTDR";
+
+const chartInstance = { current: null as Chart | null };
+
+/**
+ * Erstellt ein TDR-Chart basierend auf den übergebenen Daten.
+ */
+export const createTDRChart = (dataTDR: DataTDR[]) => {
+  const canvas = document.getElementById("myChart") as HTMLCanvasElement;
+  if (!canvas) {
+    console.error("Canvas mit ID 'myChart' nicht gefunden.");
+    return;
+  }
+
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    console.error("2D-Kontext für Canvas konnte nicht erstellt werden.");
+    return;
+  }
+
+  if (chartInstance.current) {
+    chartInstance.current.destroy();
+    chartInstance.current = null;
+  }
+
+  const minX = Math.min(...dataTDR.map((row) => row.t));
+  const maxX = Math.max(...dataTDR.map((row) => row.t));
+  const minY = Math.min(...dataTDR.map((row) => row.m));
+  const maxY = Math.max(...dataTDR.map((row) => row.m));
+
+  try {
+    chartInstance.current = new Chart(ctx, {
+      type: "line",
+      data: {
+        labels: dataTDR.map((row) => row.t),
+        datasets: [
+          {
+            label: "Pegel",
+            data: dataTDR.map((row) => row.m),
+            borderColor: "#00AEEF",
+            borderWidth: 2,
+            fill: false,
+            tension: 0.1,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          x: {
+            type: "linear",
+            position: "bottom",
+            title: { display: true, text: "Entfernung" },
+            min: minX - 5,
+            max: maxX + 5,
+          },
+          y: {
+            title: { display: true, text: "Pegel" },
+            min: minY - 10,
+            max: maxY + 10,
+          },
+        },
+      },
+    });
+  } catch (error) {
+    console.error("Fehler beim Erstellen des TDR-Charts:", error);
+  }
+};
+
+interface DataLoop {
+  t: number;
+  m: number;
+  n: number;
+}
+
+/**
+ * Erstellt ein Schleifenmess-Chart basierend auf den übergebenen Daten.
+ */
+export const createLoopChart = (data: DataLoop[], title: string) => {
+  const canvas = document.getElementById("myChart") as HTMLCanvasElement;
+  if (!canvas) {
+    console.error("Canvas mit ID 'myChart' nicht gefunden.");
+    return;
+  }
+
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    console.error("2D-Kontext für Canvas konnte nicht erstellt werden.");
+    return;
+  }
+
+  const labels = data.map((row) => {
+    const date = new Date(String(row.t).replace(/-/g, "/"));
+    return date.toLocaleString("de-DE", {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+  });
+
+  new Chart(ctx, {
+    type: "line",
+    data: {
+      labels,
+      datasets: [
+        {
+          label: "Isolationswiderstand (MOhm)",
+          data: data.map((row) => row.m),
+          borderColor: "#00AEEF",
+          borderWidth: 1,
+          tension: 0.1,
+          pointRadius: 1,
+          pointHoverRadius: 5,
+          fill: false,
+          yAxisID: "y",
+        },
+        {
+          label: "Schleifenwiderstand (kOhm)",
+          data: data.map((row) => row.n),
+          borderColor: "black",
+          borderWidth: 1,
+          tension: 0.1,
+          pointRadius: 1,
+          pointHoverRadius: 5,
+          fill: false,
+          yAxisID: "y1",
+        },
+      ],
+    },
+    options: {
+      scales: {
+        x: {
+          type: "category",
+          title: { display: true, text: "Zeit" },
+        },
+        y: {
+          type: "linear",
+          position: "left",
+          title: { display: true, text: "MOhm" },
+        },
+        y1: {
+          type: "linear",
+          position: "right",
+          title: { display: true, text: "kOhm" },
+        },
+      },
+    },
+  });
+};