Messkurve mit Chart.js in Modal zeigen , die Daten kommen von json Dateien

components/modules/Kue705FO.jsx

@@ -1,14 +1,16 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import ReactModal from "react-modal";
+import Chart from "chart.js/auto";
 import KueModal from "../modales/KueModal";
 
 function Kue705FO({
-  isolationswert, // Übergabeparameter für den Isolationswert
-  schleifenwiderstand, // Übergabeparameter für den Schleifenwiderstand
-  modulName, // Übergabeparameter für den Modulnamen
-  kueVersion = "V4.19", // Optionaler Parameter für die Version (Standardwert)
-  kueOnline, // Array für den Modulstatus (1: Modul vorhanden, 0: kein Modul)
-  slotIndex, // Der Index des Slots, für den die Anzeige gilt
-  tdrLocation, // Wert für die TDR-Entfernung
+  isolationswert,
+  schleifenwiderstand,
+  modulName,
+  kueVersion = "V4.19",
+  kueOnline,
+  slotIndex,
+  tdrLocation,
 }) {
   const [currentModulName, setCurrentModulName] = useState(modulName);
   const [activeButton, setActiveButton] = useState("Schleife");
@@ -16,9 +18,11 @@ function Kue705FO({
   const [loading, setLoading] = useState(false);
   const [currentDisplayValue, setCurrentDisplayValue] = useState(
     schleifenwiderstand || "0"
-  ); // Wert, der im unteren Display angezeigt wird
-  //--Modales Fenster
+  );
   const [showModal, setShowModal] = useState(false);
+  const [showChartModal, setShowChartModal] = useState(false); // Modal für die Messkurve
+  const [chartData, setChartData] = useState(null); // State für die geladene Chart-Daten
+
   const handleOpenModal = () => {
     setShowModal(true);
   };
@@ -26,23 +30,83 @@ function Kue705FO({
   const handleCloseModal = () => {
     setShowModal(false);
   };
-  //----
-  // Funktion zum Wechseln der Buttons und Anpassen des Anzeigewerts
-  const handleButtonClick = (button) => {
-    if (button === "Schleife") {
-      setActiveButton("Schleife");
-      setDisplayText("Schleifenwiderstand [kOhm]");
-      setCurrentDisplayValue(schleifenwiderstand || "0");
-    } else if (button === "TDR") {
-      setActiveButton("TDR");
-      setDisplayText("Entfernung [Km]");
-      setCurrentDisplayValue(tdrLocation || "0");
-    }
+
+  // Funktion zum Anzeigen des Chart-Modals
+  const handleOpenChartModal = () => {
+    setShowChartModal(true);
+    loadChartData(); // Lade die Daten, wenn das Modal geöffnet wird
+  };
+
+  const handleCloseChartModal = () => {
+    setShowChartModal(false);
+  };
+
+  // Daten laden und den Chart erstellen
+  const loadChartData = () => {
+    const slot = slotIndex;
+    const fileData = `../cpl?4000values/slot${slot}.json`; // Je nach Slot wird die entsprechende Datei geladen
+
+    fetch(fileData)
+      .then((response) => response.json())
+      .then((data) => {
+        setChartData(data); // Daten setzen
+        createChart(data);
+      })
+      .catch((error) => {
+        console.error("Fehler beim Laden der Messkurvendaten:", error);
+      });
+  };
+
+  // Funktion zum Erstellen des Charts
+  const createChart = (data) => {
+    const ctx = document.getElementById("myChart").getContext("2d");
+
+    new Chart(ctx, {
+      type: "line",
+      data: {
+        labels: data.map((row) => row.t), // Zeitwerte
+        datasets: [
+          {
+            label: "Isolationswiderstand",
+            data: data.map((row) => row.m),
+            borderColor: "#00AEEF",
+            fill: false,
+            yAxisID: "y",
+          },
+          {
+            label: "Schleifenwiderstand",
+            data: data.map((row) => row.n),
+            borderColor: "black",
+            fill: false,
+            yAxisID: "y1",
+          },
+          {
+            label: "Messung gültig",
+            data: data.map((row) => row.v),
+            borderColor: "gray",
+            fill: false,
+            yAxisID: "y1",
+          },
+        ],
+      },
+      options: {
+        scales: {
+          y: {
+            type: "linear",
+            position: "left",
+          },
+          y1: {
+            type: "linear",
+            position: "right",
+          },
+        },
+      },
+    });
   };
 
   // Funktion für die TDR-Messung
   const goTDR = () => {
-    let slot = slotIndex; // Verwende direkt slotIndex, da Slot 0 der erste Slot ist
+    let slot = slotIndex;
 
     if (slot >= 32) {
       return;
@@ -51,7 +115,7 @@ function Kue705FO({
     let slotFormat = slot < 10 ? `0${slot}` : `${slot}`;
     const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
 
-    setLoading(true); // Ladezustand setzen
+    setLoading(true);
     fetch(
       `${apiUrl}/CPL?Service/KUEdetailTDR.ACP&KTT${slotFormat}=1&slot=${slot}`,
       {
@@ -68,12 +132,12 @@ function Kue705FO({
       .catch((error) => {
         console.error("Fehler:", error);
       })
-      .finally(() => setLoading(false)); // Ladezustand wieder deaktivieren
+      .finally(() => setLoading(false));
   };
 
   // Funktion für die Schleifenmessung
   const goLoop = () => {
-    let slot = slotIndex; // Verwende direkt slotIndex
+    let slot = slotIndex;
 
     if (slot >= 32) {
       return;
@@ -82,7 +146,7 @@ function Kue705FO({
     let slotFormat = slot < 10 ? `0${slot}` : `${slot}`;
     const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
 
-    setLoading(true); // Ladezustand setzen
+    setLoading(true);
     fetch(
       `${apiUrl}/CPL?Service/KUEdetail.HTML&KS_${slotFormat}=1&slot=${slot}`,
       {
@@ -99,31 +163,34 @@ function Kue705FO({
       .catch((error) => {
         console.error("Fehler:", error);
       })
-      .finally(() => setLoading(false)); // Ladezustand wieder deaktivieren
+      .finally(() => setLoading(false));
+  };
+
+  const handleModulNameChange = (newName) => {
+    setCurrentModulName(newName);
   };
 
   // Überprüfe, ob ein Modul im Slot vorhanden ist
   const isModulPresent = kueOnline[slotIndex] === 1;
 
-  // Bestimme, welche Funktion ausgeführt wird, basierend auf dem aktiven Button
-  const handleRefreshClick = () => {
-    if (activeButton === "Schleife") {
-      goLoop(); // Wenn Schleife aktiv ist, starte goLoop
-    } else if (activeButton === "TDR") {
-      goTDR(); // Wenn TDR aktiv ist, starte goTDR
+  const handleButtonClick = (button) => {
+    if (button === "Schleife") {
+      setActiveButton("Schleife");
+      setDisplayText("Schleifenwiderstand [kOhm]");
+      setCurrentDisplayValue(schleifenwiderstand || "0");
+    } else if (button === "TDR") {
+      setActiveButton("TDR");
+      setDisplayText("Entfernung [Km]");
+      setCurrentDisplayValue(tdrLocation || "0");
     }
   };
 
-  const handleModulNameChange = (newName) => {
-    setCurrentModulName(newName); // Aktualisiere den Namen direkt in Kue705FO
-  };
-
   return (
     <div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
       {isModulPresent ? (
         <>
           <div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0">
-            <div className="flex items-start justify-between h-[30px] ">
+            <div className="flex items-start justify-between h-[30px]">
               <div className="relative w-[20px] h-[20px] bg-gray-800 flex items-center justify-center">
                 <span className="text-white text-[10px]">{slotIndex + 1}</span>
               </div>
@@ -137,16 +204,13 @@ function Kue705FO({
                 <span className="text-white text-[20px]">⚙</span>
               </button>
             </div>
-            {/* Modal */}
+
             <KueModal
               showModal={showModal}
               onClose={handleCloseModal}
               slot={slotIndex}
               onModulNameChange={handleModulNameChange}
-            >
-              <h2>Modul Einstellungen</h2>
-              <p>Hier kannst du Einstellungen für {modulName} vornehmen.</p>
-            </KueModal>
+            />
 
             <div className="flex flex-col mt-[10px] ml-[10px]">
               <div className="flex items-center">
@@ -169,15 +233,6 @@ function Kue705FO({
             <div className="absolute top-0 left-[75px] w-[3px] h-full bg-white z-0"></div>
             <div className="absolute top-[40px] left-[75px] w-[40px] h-[3px] bg-white z-0"></div>
 
-            {/* Modal zum Ändern des Modulnamens */}
-            <KueModal
-              showModal={showModal}
-              onClose={handleCloseModal}
-              slot={slotIndex}
-              onModulNameChange={handleModulNameChange}
-            />
-
-            {/* Modulname */}
             <div className="absolute bottom-[20px] left-[10px] text-black text-[10px] bg-gray-300 p-1 w-[100px] text-center">
               {currentModulName || "Test1"}
             </div>
@@ -192,12 +247,10 @@ function Kue705FO({
               {displayText}
             </span>
 
-            {/* Unterer Bereich, der den dynamischen Wert anzeigt */}
             <div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3">
               <button
-                onClick={handleRefreshClick} // Dynamische Funktion basierend auf aktivem Button
+                onClick={() => console.log("Refresh clicked")}
                 className="absolute -top-1 -right-1 w-[20px] h-[20px] bg-gray-400 flex items-center justify-center"
-                disabled={loading} // Disable button while loading
               >
                 <span className="text-white text-[18px]">⟳</span>
               </button>
@@ -209,7 +262,6 @@ function Kue705FO({
               </div>
             </div>
 
-            {/* Buttons für Schleife und TDR */}
             <div className="flex mt-2 space-x-1">
               <button
                 onClick={() => handleButtonClick("Schleife")}
@@ -232,12 +284,48 @@ function Kue705FO({
             </div>
 
             <button
-              onClick={() => console.log("Messkurve clicked")}
+              onClick={handleOpenChartModal} // Öffnet das Chart-Modal
               className="w-full h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center mt-1"
             >
               Messkurve
             </button>
           </div>
+
+          {/* Modal für Messkurve */}
+          {showChartModal && (
+            <ReactModal
+              isOpen={showChartModal}
+              onRequestClose={handleCloseChartModal}
+              ariaHideApp={false}
+              style={{
+                overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+                content: {
+                  top: "50%",
+                  left: "50%",
+                  right: "auto",
+                  bottom: "auto",
+                  marginRight: "-50%",
+                  transform: "translate(-50%, -50%)",
+                  width: "90%",
+                  maxWidth: "800px",
+                  height: "600px",
+                  padding: "20px",
+                },
+              }}
+            >
+              <h2>Messkurve Slot {slotIndex + 1}</h2>
+              <canvas
+                id="myChart"
+                style={{ width: "100%", height: "400px" }}
+              ></canvas>
+              <button
+                onClick={handleCloseChartModal}
+                className="bg-red-500 text-white p-2 mt-4"
+              >
+                Schließen
+              </button>
+            </ReactModal>
+          )}
         </>
       ) : (
         <div className="flex items-center justify-center h-full text-gray-500">