Messkurve für Schleife und TDR auf 90% maximieren

components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx

@@ -23,8 +23,8 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
 
   // **Modal schließen + Redux-Status zurücksetzen**
   const handleClose = () => {
-    dispatch(setChartOpen(false)); // Schalter zurücksetzen
+    dispatch(setChartOpen(false));
-    onClose(); // Originale Schließen-Funktion aufrufen
+    onClose();
   };
 
   // **Vollbildmodus umschalten**
@@ -35,7 +35,7 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
   return (
     <ReactModal
       isOpen={isOpen}
-      onRequestClose={handleClose} // Hier `handleClose` statt `onClose`
+      onRequestClose={handleClose}
       ariaHideApp={false}
       style={{
         overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
@@ -45,36 +45,29 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
           bottom: "auto",
           marginRight: "-50%",
           transform: "translate(-50%, -50%)",
-          width: isFullScreen ? "100vw" : "70rem",
+          width: isFullScreen ? "90vw" : "70rem",
-          height: isFullScreen ? "100vh" : "35rem",
+          height: isFullScreen ? "90vh" : "35rem",
           padding: "1rem",
           transition: "all 0.3s ease-in-out",
+          display: "flex",
+          flexDirection: "column",
         },
       }}
     >
-      {/* Schließen-Button */}
+      {/* Action-Buttons */}
-      <button
+      <div
-        onClick={handleClose}
-        style={{
-          position: "absolute",
-          top: "0.625rem",
-          right: "3rem",
-          background: "transparent",
-          border: "none",
-          fontSize: "1.5rem",
-          cursor: "pointer",
-        }}
-      >
-        <i className="bi bi-x-circle-fill"></i>
-      </button>
-
-      {/* Fullscreen-Button */}
-      <button
-        onClick={toggleFullScreen}
         style={{
           position: "absolute",
           top: "0.625rem",
           right: "0.625rem",
+          display: "flex",
+          gap: "0.75rem",
+        }}
+      >
+        {/* Fullscreen-Button */}
+        <button
+          onClick={toggleFullScreen}
+          style={{
             background: "transparent",
             border: "none",
             fontSize: "1.5rem",
@@ -88,20 +81,47 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
           ></i>
         </button>
 
-      {/* Nur die richtige ActionBar und das richtige Chart basierend auf dem Modus anzeigen */}
+        {/* Schließen-Button */}
+        <button
+          onClick={handleClose}
+          style={{
+            background: "transparent",
+            border: "none",
+            fontSize: "1.5rem",
+            cursor: "pointer",
+          }}
+        >
+          <i className="bi bi-x-circle-fill"></i>
+        </button>
+      </div>
+
+      {/* Chart-Container */}
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+        }}
+      >
         {activeMode === "Schleife" ? (
           <>
             <h3 className="text-lg font-semibold">Schleifenmessung</h3>
             <LoopChartActionBar />
-          <LoopMeasurementChart />
+            <div style={{ flex: 1, height: "100%" }}>
+              <LoopMeasurementChart isFullScreen={isFullScreen} />
+            </div>
           </>
         ) : (
           <>
             <h3 className="text-lg font-semibold">TDR-Messung</h3>
             <TDRChartActionBar />
-          <TDRChart />
+            <div style={{ flex: 1, height: "100%" }}>
+              <TDRChart isFullScreen={isFullScreen} />
+            </div>
           </>
         )}
+      </div>
     </ReactModal>
   );
 };

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx

@@ -1,11 +1,12 @@
 "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";
 
-const LoopMeasurementChart = () => {
+const LoopMeasurementChart = ({ isFullScreen }: { isFullScreen: boolean }) => {
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
   const [zoomPlugin, setZoomPlugin] = useState<any>(null);
@@ -170,8 +171,14 @@ const LoopMeasurementChart = () => {
   }, [loopMeasurementCurveChartData, vonDatum, bisDatum, selectedMode]);
 
   return (
-    <div style={{ position: "relative", width: "100%", height: "400px" }}>
+    <div
-      <canvas ref={chartRef} />
+      style={{
+        position: "relative",
+        width: "100%",
+        height: isFullScreen ? "90%" : "400px",
+      }}
+    >
+      <canvas ref={chartRef} style={{ width: "100%", height: "100%" }} />
     </div>
   );
 };

components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import { Chart, registerables } from "chart.js";
 import "chartjs-adapter-date-fns";
 
-const TDRChart: React.FC = () => {
+const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
 
@@ -85,8 +85,8 @@ const TDRChart: React.FC = () => {
   }, [tdrChartData]);
 
   return (
-    <div>
+    <div style={{ width: "100%", height: isFullScreen ? "100%" : "20rem" }}>
-      <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />
+      <canvas ref={chartRef} style={{ width: "100%", height: "100%" }} />
     </div>
   );
 };

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.107";
+const webVersion = "1.6.108";
 export default webVersion;