Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Auslagerung der Chart-Erstellungsfunktionen in chartUtils.ts

Browse Source 
- 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
This commit is contained in:
ISA
2025-02-10 13:32:53 +01:00
parent cb6e6d3926
commit 21e415a8ea
5 changed files with 266 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
components/modules/Kue705FO.tsx
View File

@@ -13,6 +13,7 @@ import {
setSelectedFileName,
} from "../../redux/slices/variablesSlice";
import TDRPopup from "../modales/kueModal/TDRPopup";
import { createLoopChart, createTDRChart } from "../../utils/chartUtils";
const Kue705FO: React.FC<Kue705FOProps> = ({
isolationswert,
@@ -192,97 +193,6 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
const chartInstance = useRef<Chart | null>(null);
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;
}
// Vorhandenes Chart zerstören, falls vorhanden
if (chartInstance.current) {
console.log("Vorhandenes Chart wird zerstört.");
chartInstance.current.destroy();
chartInstance.current = null; // Referenz zurücksetzen
}
// Maximal- und Minimalwerte berechnen
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));
// Neues Chart erstellen
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, // Weiche Kurve
},
],
},
options: {
responsive: true,
maintainAspectRatio: false, // Ermöglicht flexible Größe
layout: {
padding: {
bottom: 25, // Fügt zusätzliches Padding unten hinzu
},
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: "xy",
},
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
mode: "xy",
},
},
},
scales: {
x: {
type: "linear",
position: "bottom",
title: { display: true, text: "Entfernung" },
min: minX - 5, // Etwas Puffer hinzufügen
max: maxX + 5,
},
y: {
title: { display: true, text: "Pegel" },
min: minY - 10, // Puffer für Y-Werte
max: maxY + 10,
},
},
},
});
console.log("Neues Chart erfolgreich erstellt.");
} catch (error) {
console.error("Fehler beim Erstellen des Charts:", error);
}
};
const selectedFileName = useSelector(
(state: RootState) => state.variables.selectedFileName
);
@@ -347,96 +257,6 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
n: number; // Schleifenwiderstand
}
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;
}
// Konvertiere Zeitstempel in ein lesbares Format für die X-Achse
const labels = data.map((row) => {
const date = new Date(String(row.t).replace(/-/g, "/")); // Zeitstring parsen
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, // Glättung der Linie
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" },
},
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: "xy",
},
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
mode: "xy",
},
},
},
},
});
};
useEffect(() => {
const updateAlarmStatus = () => {
const alarmStatus =