createTDRChart TDR Messkurve

components/modules/Kue705FO.jsx

@@ -160,30 +160,50 @@ function Kue705FO({
 
   const handleCloseChartModal = () => setShowChartModal(false);
   // Funktion zum Erstellen des TDR-Charts
+
   const createTDRChart = (dataTDR) => {
     const ctx = document.getElementById("myChart").getContext("2d");
 
     new Chart(ctx, {
       type: "line",
       data: {
-        labels: dataTDR.map((row) => row.t), // Entfernung oder Zeit auf der x-Achse
+        labels: dataTDR.map((row) => row.t),
         datasets: [
           {
             label: "Pegel",
-            data: dataTDR.map((row) => row.m), // Nur Pegel auf der y-Achse
+            data: dataTDR.map((row) => row.m),
             borderColor: "#00AEEF",
             borderWidth: 1,
             pointBorderWidth: 0,
             pointStyle: false,
             fill: false,
+            yAxisID: "y",
           },
         ],
       },
       options: {
         scales: {
-          y: {
+          x: {
             type: "linear",
             position: "left",
+            title: { display: true, text: "Meter" },
+          },
+        },
+        plugins: {
+          zoom: {
+            pan: {
+              enabled: true,
+              mode: "xy",
+            },
+            zoom: {
+              wheel: {
+                enabled: true, // Zoom mit Mausrad
+              },
+              pinch: {
+                enabled: true, // Pinch-Zoom für Touchgeräte
+              },
+              mode: "xy", // x und y Achsen zoomen
+            },
           },
         },
       },
@@ -221,7 +241,7 @@ function Kue705FO({
       .then((response) => response.json())
       .then((data) => {
         setChartData(data);
-        createChart(data, "Schleifenmesskurve");
+        createLoopChart(data, "Schleifenmesskurve");
       })
       .catch((error) =>
         console.error("Fehler beim Laden der Schleifenmesskurvendaten:", error)
@@ -239,7 +259,7 @@ function Kue705FO({
     }
   }, []);
 
-  const createChart = (data) => {
+  const createLoopChart = (data) => {
     const ctx = document.getElementById("myChart").getContext("2d");
     new Chart(ctx, {
       type: "line",