feat: LoopMeasurementChart zeigt Stunden bei 1–2 Tagen, sonst Tagesansicht in X-Achse
This commit is contained in:
@@ -17,6 +17,7 @@ import {
|
|||||||
|
|
||||||
import "chartjs-adapter-date-fns";
|
import "chartjs-adapter-date-fns";
|
||||||
import { de } from "date-fns/locale";
|
import { de } from "date-fns/locale";
|
||||||
|
import { differenceInHours, parseISO } from "date-fns";
|
||||||
|
|
||||||
ChartJS.register(
|
ChartJS.register(
|
||||||
LineElement,
|
LineElement,
|
||||||
@@ -30,6 +31,7 @@ ChartJS.register(
|
|||||||
);
|
);
|
||||||
import { getColor } from "../../../../../../utils/colors";
|
import { getColor } from "../../../../../../utils/colors";
|
||||||
import { PulseLoader } from "react-spinners";
|
import { PulseLoader } from "react-spinners";
|
||||||
|
|
||||||
const usePreviousData = (data: any[]) => {
|
const usePreviousData = (data: any[]) => {
|
||||||
const ref = useRef<any[]>([]);
|
const ref = useRef<any[]>([]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -48,6 +50,8 @@ const LoopMeasurementChart = () => {
|
|||||||
unit,
|
unit,
|
||||||
isFullScreen,
|
isFullScreen,
|
||||||
isLoading,
|
isLoading,
|
||||||
|
vonDatum,
|
||||||
|
bisDatum,
|
||||||
} = useSelector((state: RootState) => state.kabelueberwachungChartSlice);
|
} = useSelector((state: RootState) => state.kabelueberwachungChartSlice);
|
||||||
|
|
||||||
const previousData = usePreviousData(loopMeasurementCurveChartData);
|
const previousData = usePreviousData(loopMeasurementCurveChartData);
|
||||||
@@ -69,6 +73,12 @@ const LoopMeasurementChart = () => {
|
|||||||
return true;
|
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(() => {
|
useEffect(() => {
|
||||||
import("chartjs-plugin-zoom").then((zoomPlugin) => {
|
import("chartjs-plugin-zoom").then((zoomPlugin) => {
|
||||||
if (!ChartJS.registry.plugins.get("zoom")) {
|
if (!ChartJS.registry.plugins.get("zoom")) {
|
||||||
@@ -146,7 +156,7 @@ const LoopMeasurementChart = () => {
|
|||||||
plugins: {
|
plugins: {
|
||||||
legend: { position: "top" as const },
|
legend: { position: "top" as const },
|
||||||
tooltip: {
|
tooltip: {
|
||||||
yAlign: "bottom" as const, // ← explizit casten
|
yAlign: "bottom" as const,
|
||||||
mode: "index" as const,
|
mode: "index" as const,
|
||||||
intersect: false,
|
intersect: false,
|
||||||
},
|
},
|
||||||
@@ -163,10 +173,9 @@ const LoopMeasurementChart = () => {
|
|||||||
x: {
|
x: {
|
||||||
type: "time" as const,
|
type: "time" as const,
|
||||||
time: {
|
time: {
|
||||||
unit: "minute" as const,
|
unit: timeUnit as const,
|
||||||
tooltipFormat: "dd.MM.yyyy HH:mm:ss",
|
tooltipFormat: "dd.MM.yyyy HH:mm:ss",
|
||||||
displayFormats: {
|
displayFormats: {
|
||||||
minute: "HH:mm",
|
|
||||||
hour: "HH:mm",
|
hour: "HH:mm",
|
||||||
day: "dd.MM.",
|
day: "dd.MM.",
|
||||||
},
|
},
|
||||||
@@ -174,7 +183,6 @@ const LoopMeasurementChart = () => {
|
|||||||
},
|
},
|
||||||
title: { display: true, text: "Zeit" },
|
title: { display: true, text: "Zeit" },
|
||||||
},
|
},
|
||||||
|
|
||||||
y: {
|
y: {
|
||||||
title: { display: true, text: unit },
|
title: { display: true, text: unit },
|
||||||
ticks: { precision: 0 },
|
ticks: { precision: 0 },
|
||||||
@@ -188,7 +196,7 @@ const LoopMeasurementChart = () => {
|
|||||||
options,
|
options,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}, [loopMeasurementCurveChartData, selectedMode]);
|
}, [loopMeasurementCurveChartData, selectedMode, vonDatum, bisDatum]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
|
<div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
|
||||||
|
|||||||
@@ -6,5 +6,5 @@
|
|||||||
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
||||||
|
|
||||||
*/
|
*/
|
||||||
const webVersion = "1.6.392";
|
const webVersion = "1.6.393";
|
||||||
export default webVersion;
|
export default webVersion;
|
||||||
|
|||||||
Reference in New Issue
Block a user