fix: Behebt "window is not defined" Fehler und ermöglicht erfolgreichen Build

- Import von `chartjs-plugin-zoom` in `LoopMeasurementChart.tsx` dynamisch in `useEffect` verschoben.
- Stellt sicher, dass `window` nur im Client-Umfeld genutzt wird.
- Erfolgreicher Next.js Production-Build getestet.
This commit is contained in:
ISA
2025-02-21 13:23:52 +01:00
parent 94b40c9b67
commit 4a94fc9ce6
4 changed files with 56 additions and 17 deletions

View File

@@ -1,16 +1,23 @@
// components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
import React, { useEffect, useRef } from "react";
"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
import React, { useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import Chart from "chart.js/auto";
import "chartjs-adapter-moment";
import zoomPlugin from "chartjs-plugin-zoom"; // Zoom-Plugin importieren
Chart.register(zoomPlugin); // Plugin registrieren
const LoopMeasurementChart = () => {
const chartRef = useRef<HTMLCanvasElement>(null);
const chartInstance = useRef<Chart | null>(null);
const [zoomPlugin, setZoomPlugin] = useState<any>(null);
useEffect(() => {
if (typeof window !== "undefined") {
import("chartjs-plugin-zoom").then((mod) => {
setZoomPlugin(mod.default);
Chart.register(mod.default);
});
}
}, []);
// Daten & Datum aus Redux abrufen
const { chartData, vonDatum, bisDatum } = useSelector(
@@ -122,7 +129,9 @@ const LoopMeasurementChart = () => {
},
y: {
ticks: {
callback: (value) => value.toFixed(2) + " kOhm",
callback: (value) =>
(typeof value === "number" ? value.toFixed(2) : value) +
" kOhm",
},
},
},
@@ -130,7 +139,8 @@ const LoopMeasurementChart = () => {
tooltip: {
callbacks: {
label: (tooltipItem) => {
const date = new Date(tooltipItem.raw.x);
const rawItem = tooltipItem.raw as { x: number; y: number };
const date = new Date(rawItem.x);
const timeString = `${date
.getHours()
.toString()
@@ -138,9 +148,9 @@ const LoopMeasurementChart = () => {
.getMinutes()
.toString()
.padStart(2, "0")}`;
return `${
tooltipItem.dataset.label
}: ${tooltipItem.raw.y.toFixed(2)} kOhm `;
return `${tooltipItem.dataset.label}: ${(
tooltipItem.raw as { x: number; y: number }
).y.toFixed(2)} kOhm `;
},
},
},