diff --git a/components/modules/Kue705FO.tsx b/components/modules/Kue705FO.tsx index 9cd2da7..7323719 100644 --- a/components/modules/Kue705FO.tsx +++ b/components/modules/Kue705FO.tsx @@ -281,83 +281,94 @@ const Kue705FO: React.FC = ({ const createLoopChart = (data: DataLoop[], title: string) => { const canvas = document.getElementById("myChart") as HTMLCanvasElement; - const ctx = canvas?.getContext("2d"); - if (!ctx) { - console.error("Canvas context konnte nicht gefunden werden"); + if (!canvas) { + console.error("Canvas mit ID 'myChart' nicht gefunden."); return; } - - const createLoopChart = (data: DataLoop[], title: string) => { - const canvas = document.getElementById("myChart") as HTMLCanvasElement; - const ctx = canvas?.getContext("2d"); - if (!ctx) { - console.error("Canvas context konnte nicht gefunden werden"); - return; - } - - new Chart(ctx, { - type: "line", - data: { - labels: data.map((row) => new Date(row.t).toLocaleString("de-DE")), - datasets: [ - { - label: "Isolationswiderstand (MOhm)", - data: data.map((row) => row.m), - borderColor: "#00AEEF", - borderWidth: 1, - tension: 0.1, // Ersatz für lineTension - pointRadius: 0.3, - pointHoverRadius: 5, - fill: false, - yAxisID: "y", - }, - { - label: "Schleifenwiderstand (kOhm)", - data: data.map((row) => row.n), - borderColor: "black", - borderWidth: 1, - tension: 0.1, // Ersatz für lineTension - pointRadius: 0.3, - pointHoverRadius: 5, - fill: false, - yAxisID: "y1", - }, - ], - }, - options: { - scales: { - 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", - }, - }, - }, - }, + + 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(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 = () => {