feat: LoopMeasurementChart zeigt Stunden bei 1–2 Tagen, sonst Tagesansicht in X-Achse

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

@@ -17,6 +17,7 @@ import {
 
 import "chartjs-adapter-date-fns";
 import { de } from "date-fns/locale";
+import { differenceInHours, parseISO } from "date-fns";
 
 ChartJS.register(
   LineElement,
@@ -30,6 +31,7 @@ ChartJS.register(
 );
 import { getColor } from "../../../../../../utils/colors";
 import { PulseLoader } from "react-spinners";
+
 const usePreviousData = (data: any[]) => {
   const ref = useRef<any[]>([]);
   useEffect(() => {
@@ -48,6 +50,8 @@ const LoopMeasurementChart = () => {
     unit,
     isFullScreen,
     isLoading,
+    vonDatum,
+    bisDatum,
   } = useSelector((state: RootState) => state.kabelueberwachungChartSlice);
 
   const previousData = usePreviousData(loopMeasurementCurveChartData);
@@ -69,6 +73,12 @@ const LoopMeasurementChart = () => {
     return true;
   };
 
+  // ⏱ Zeitspanne in Stunden berechnen
+  const from = vonDatum ? parseISO(vonDatum) : null;
+  const to = bisDatum ? parseISO(bisDatum) : null;
+  const durationInHours = from && to ? differenceInHours(to, from) : 9999;
+  const timeUnit = durationInHours <= 48 ? "hour" : "day";
+
   useEffect(() => {
     import("chartjs-plugin-zoom").then((zoomPlugin) => {
       if (!ChartJS.registry.plugins.get("zoom")) {
@@ -146,7 +156,7 @@ const LoopMeasurementChart = () => {
         plugins: {
           legend: { position: "top" as const },
           tooltip: {
-            yAlign: "bottom" as const, // ← explizit casten
+            yAlign: "bottom" as const,
             mode: "index" as const,
             intersect: false,
           },
@@ -163,10 +173,9 @@ const LoopMeasurementChart = () => {
           x: {
             type: "time" as const,
             time: {
-              unit: "minute" as const,
+              unit: timeUnit as const,
               tooltipFormat: "dd.MM.yyyy HH:mm:ss",
               displayFormats: {
-                minute: "HH:mm",
                 hour: "HH:mm",
                 day: "dd.MM.",
               },
@@ -174,7 +183,6 @@ const LoopMeasurementChart = () => {
             },
             title: { display: true, text: "Zeit" },
           },
-
           y: {
             title: { display: true, text: unit },
             ticks: { precision: 0 },
@@ -188,7 +196,7 @@ const LoopMeasurementChart = () => {
         options,
       });
     });
-  }, [loopMeasurementCurveChartData, selectedMode]);
+  }, [loopMeasurementCurveChartData, selectedMode, vonDatum, bisDatum]);
 
   return (
     <div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>