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

This commit is contained in:
ISA
2025-05-07 15:30:03 +02:00
parent b5aaac3caf
commit d9314c7bb2
2 changed files with 14 additions and 6 deletions

View File

@@ -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" }}>

View File

@@ -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;