409 lines
12 KiB
TypeScript
409 lines
12 KiB
TypeScript
"use client";
|
|
// /components/main/system/DetailModal.tsx
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import { Line } from "react-chartjs-2";
|
|
import { useSelector } from "react-redux";
|
|
import { RootState, useAppDispatch } from "@/redux/store";
|
|
import { Listbox } from "@headlessui/react";
|
|
import { setFullScreen } from "@/redux/slices/kabelueberwachungChartSlice";
|
|
import DateRangePicker from "@/components/common/DateRangePicker";
|
|
import {
|
|
setVonDatum,
|
|
setBisDatum,
|
|
} from "@/redux/slices/kabelueberwachungChartSlice";
|
|
|
|
// Import Thunks
|
|
import { getSystemspannung5VplusThunk } from "@/redux/thunks/getSystemspannung5VplusThunk";
|
|
import { getSystemspannung15VplusThunk } from "@/redux/thunks/getSystemspannung15VplusThunk";
|
|
import { getSystemspannung15VminusThunk } from "@/redux/thunks/getSystemspannung15VminusThunk";
|
|
import { getSystemspannung98VminusThunk } from "@/redux/thunks/getSystemspannung98VminusThunk";
|
|
import { getTemperaturAdWandlerThunk } from "@/redux/thunks/getTemperaturAdWandlerThunk";
|
|
import { getTemperaturProzessorThunk } from "@/redux/thunks/getTemperaturProzessorThunk";
|
|
|
|
import {
|
|
Chart as ChartJS,
|
|
LineElement,
|
|
PointElement,
|
|
CategoryScale,
|
|
LinearScale,
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
Filler,
|
|
TimeScale,
|
|
} from "chart.js";
|
|
|
|
import "chartjs-adapter-date-fns";
|
|
import { de } from "date-fns/locale";
|
|
|
|
ChartJS.register(
|
|
LineElement,
|
|
PointElement,
|
|
CategoryScale,
|
|
LinearScale,
|
|
Title,
|
|
Tooltip,
|
|
Legend,
|
|
Filler,
|
|
TimeScale
|
|
);
|
|
|
|
type ReduxDataEntry = {
|
|
//Alle DIA0 t,m,i,a , DIA1 und DIA2 t,i,a,g
|
|
t: string; // Zeitstempel
|
|
i: number; // Minimum
|
|
a: number; // Maximum
|
|
g?: number; // Durchschnitt (optional, falls vorhanden)
|
|
m?: number; // aktueller Messwert (optional, falls vorhanden)
|
|
};
|
|
|
|
const chartOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { position: "top" as const },
|
|
title: {
|
|
display: true,
|
|
text: "Verlauf",
|
|
},
|
|
tooltip: {
|
|
mode: "index" as const,
|
|
intersect: false,
|
|
callbacks: {
|
|
label: function (ctx: any) {
|
|
return `Messwert: ${ctx.parsed.y}`;
|
|
},
|
|
title: function (items: any[]) {
|
|
const date = items[0].parsed.x;
|
|
return `Zeitpunkt: ${new Date(date).toLocaleString("de-DE")}`;
|
|
},
|
|
},
|
|
},
|
|
zoom: {
|
|
pan: { enabled: true, mode: "x" as const },
|
|
zoom: {
|
|
wheel: { enabled: true },
|
|
pinch: { enabled: true },
|
|
mode: "x" as const,
|
|
},
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
type: "time" as const,
|
|
time: {
|
|
unit: "day" as const,
|
|
tooltipFormat: "dd.MM.yyyy HH:mm",
|
|
displayFormats: {
|
|
day: "dd.MM.yyyy",
|
|
},
|
|
},
|
|
adapters: {
|
|
date: { locale: de },
|
|
},
|
|
title: {
|
|
display: true,
|
|
text: "Zeit",
|
|
},
|
|
},
|
|
y: {
|
|
title: {
|
|
display: true,
|
|
text: "Messwert",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
type Props = {
|
|
isOpen: boolean;
|
|
selectedKey: string | null;
|
|
onClose: () => void;
|
|
zeitraum: "DIA0" | "DIA1" | "DIA2";
|
|
setZeitraum: (typ: "DIA0" | "DIA1" | "DIA2") => void;
|
|
};
|
|
|
|
export const DetailModal = ({
|
|
isOpen,
|
|
selectedKey,
|
|
onClose,
|
|
zeitraum,
|
|
setZeitraum,
|
|
}: Props) => {
|
|
const chartRef = useRef<any>(null);
|
|
const [chartData, setChartData] = useState<any>({
|
|
datasets: [],
|
|
});
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [shouldUpdateChart, setShouldUpdateChart] = useState(false);
|
|
const vonDatum = useSelector(
|
|
(state: RootState) => state.kabelueberwachungChartSlice.vonDatum
|
|
);
|
|
const bisDatum = useSelector(
|
|
(state: RootState) => state.kabelueberwachungChartSlice.bisDatum
|
|
);
|
|
|
|
const [filteredData, setFilteredData] = useState<ReduxDataEntry[]>([]);
|
|
|
|
const reduxData = useSelector((state: RootState) => {
|
|
switch (selectedKey) {
|
|
case "+5V":
|
|
return state.systemspannung5Vplus[zeitraum];
|
|
case "+15V":
|
|
return state.systemspannung15Vplus[zeitraum];
|
|
case "-15V":
|
|
return state.systemspannung15Vminus[zeitraum];
|
|
case "-98V":
|
|
return state.systemspannung98Vminus[zeitraum];
|
|
case "ADC Temp":
|
|
return state.temperaturAdWandler[zeitraum];
|
|
case "CPU Temp":
|
|
return state.temperaturProzessor[zeitraum];
|
|
default:
|
|
return [];
|
|
}
|
|
}) as ReduxDataEntry[];
|
|
|
|
const isFullScreen = useSelector(
|
|
(state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
|
|
);
|
|
const dispatch = useAppDispatch();
|
|
|
|
const toggleFullScreen = () => {
|
|
dispatch(setFullScreen(!isFullScreen));
|
|
setTimeout(() => {
|
|
chartRef.current?.resize();
|
|
}, 50);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
dispatch(setFullScreen(false));
|
|
dispatch(setVonDatum(""));
|
|
dispatch(setBisDatum(""));
|
|
onClose();
|
|
};
|
|
|
|
useEffect(() => {
|
|
const loadZoomPlugin = async () => {
|
|
if (typeof window !== "undefined") {
|
|
const zoomPlugin = (await import("chartjs-plugin-zoom")).default;
|
|
if (!ChartJS.registry.plugins.get("zoom")) {
|
|
ChartJS.register(zoomPlugin);
|
|
}
|
|
}
|
|
};
|
|
loadZoomPlugin();
|
|
}, []);
|
|
|
|
// API-Request beim Klick auf "Daten laden"
|
|
const handleFetchData = () => {
|
|
setIsLoading(true);
|
|
|
|
// Clear previous chart data
|
|
setChartData({ datasets: [] });
|
|
|
|
// Flag setzen, dass Chart nach Datenempfang aktualisiert werden soll
|
|
setShouldUpdateChart(true);
|
|
|
|
switch (selectedKey) {
|
|
case "+5V":
|
|
dispatch(getSystemspannung5VplusThunk(zeitraum));
|
|
break;
|
|
case "+15V":
|
|
dispatch(getSystemspannung15VplusThunk(zeitraum));
|
|
break;
|
|
case "-15V":
|
|
dispatch(getSystemspannung15VminusThunk(zeitraum));
|
|
break;
|
|
case "-98V":
|
|
dispatch(getSystemspannung98VminusThunk(zeitraum));
|
|
break;
|
|
case "ADC Temp":
|
|
dispatch(getTemperaturAdWandlerThunk(zeitraum));
|
|
break;
|
|
case "CPU Temp":
|
|
dispatch(getTemperaturProzessorThunk(zeitraum));
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (chartRef.current && selectedKey) {
|
|
chartRef.current.options.plugins.title.text = `Verlauf ${selectedKey}`;
|
|
chartRef.current.update("none");
|
|
}
|
|
}, [selectedKey]);
|
|
|
|
useEffect(() => {
|
|
if (chartRef.current) {
|
|
chartRef.current.resetZoom();
|
|
}
|
|
}, [zeitraum]);
|
|
|
|
// Chart.js animation complete callback to set isLoading false
|
|
useEffect(() => {
|
|
if (chartRef.current && isLoading) {
|
|
const chartInstance = chartRef.current;
|
|
// Save previous callback to restore later
|
|
const prevCallback = chartInstance.options.animation?.onComplete;
|
|
chartInstance.options.animation = {
|
|
...chartInstance.options.animation,
|
|
onComplete: () => {
|
|
setIsLoading(false);
|
|
if (typeof prevCallback === "function") prevCallback();
|
|
},
|
|
};
|
|
chartInstance.update();
|
|
}
|
|
}, [chartData, isLoading]);
|
|
|
|
// Update chart data when Redux data changes (only after button click)
|
|
useEffect(() => {
|
|
if (shouldUpdateChart && reduxData && reduxData.length > 0) {
|
|
console.log("Redux data for chart:", reduxData);
|
|
|
|
// Convert Redux data to Chart.js format
|
|
const chartDataPoints = reduxData.map((entry) => ({
|
|
x: new Date(entry.t).getTime(),
|
|
y: entry.m || entry.a || entry.i || 0, // Use current value, max, min, or 0
|
|
}));
|
|
|
|
const newChartData = {
|
|
datasets: [
|
|
{
|
|
label: selectedKey || "Messwerte",
|
|
data: chartDataPoints,
|
|
borderColor: "#00AEEF", // littwin-blue
|
|
backgroundColor: "rgba(0, 174, 239, 0.2)", // littwin-blue mit Transparenz
|
|
tension: 0.1,
|
|
fill: false,
|
|
},
|
|
],
|
|
};
|
|
|
|
console.log("Chart data points:", chartDataPoints);
|
|
setChartData(newChartData);
|
|
setShouldUpdateChart(false); // Reset flag
|
|
} else if (shouldUpdateChart && (!reduxData || reduxData.length === 0)) {
|
|
console.log("No Redux data available");
|
|
setChartData({ datasets: [] });
|
|
setShouldUpdateChart(false); // Reset flag
|
|
}
|
|
}, [reduxData, selectedKey, shouldUpdateChart]);
|
|
|
|
if (!isOpen || !selectedKey) return null;
|
|
|
|
return (
|
|
<div
|
|
className={`fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50 ${
|
|
isLoading ? "cursor-wait" : ""
|
|
}`}
|
|
>
|
|
<div
|
|
className={`bg-white p-6 rounded-xl overflow-auto shadow-2xl transition-all duration-300 ${
|
|
isFullScreen ? "w-[95vw] h-[90vh]" : "w-[50%] h-[60%]"
|
|
}`}
|
|
>
|
|
<div className="relative">
|
|
<h2 className="text-xl font-semibold">
|
|
Detailansicht: {selectedKey}
|
|
</h2>
|
|
|
|
<div className="absolute top-0 right-0 flex gap-3">
|
|
<button
|
|
onClick={toggleFullScreen}
|
|
className="text-2xl text-gray-600 hover:text-gray-800"
|
|
>
|
|
<i
|
|
className={
|
|
isFullScreen
|
|
? "bi bi-fullscreen-exit"
|
|
: "bi bi-arrows-fullscreen"
|
|
}
|
|
></i>
|
|
</button>
|
|
|
|
<button
|
|
onClick={handleClose}
|
|
className="text-2xl text-gray-600 hover:text-gray-800"
|
|
>
|
|
<i className="bi bi-x-circle-fill"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-start gap-4 mb-4 flex-wrap">
|
|
<DateRangePicker />
|
|
<label className="font-medium">Zeitraum:</label>
|
|
<Listbox value={zeitraum} onChange={setZeitraum}>
|
|
<div className="relative w-48">
|
|
<Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
|
|
<span>
|
|
{
|
|
{
|
|
DIA0: "Alle Messwerte",
|
|
DIA1: "Stündlich",
|
|
DIA2: "Täglich",
|
|
}[zeitraum]
|
|
}
|
|
</span>
|
|
<svg
|
|
className="w-5 h-5 text-gray-400"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
|
|
clipRule="evenodd"
|
|
/>
|
|
</svg>
|
|
</Listbox.Button>
|
|
<Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
|
|
{["DIA0", "DIA1", "DIA2"].map((option) => (
|
|
<Listbox.Option
|
|
key={option}
|
|
value={option}
|
|
className={({ selected, active }) =>
|
|
`px-4 py-1 cursor-pointer ${
|
|
selected
|
|
? "bg-littwin-blue text-white"
|
|
: active
|
|
? "bg-gray-200"
|
|
: ""
|
|
}`
|
|
}
|
|
>
|
|
{
|
|
{
|
|
DIA0: "Alle Messwerte",
|
|
DIA1: "Stündlich",
|
|
DIA2: "Täglich",
|
|
}[option]
|
|
}
|
|
</Listbox.Option>
|
|
))}
|
|
</Listbox.Options>
|
|
</div>
|
|
</Listbox>
|
|
<button
|
|
onClick={handleFetchData}
|
|
className={`px-4 py-1 bg-littwin-blue text-white rounded text-sm ${
|
|
isLoading ? "cursor-wait" : ""
|
|
}`}
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? "Laden..." : "Daten laden"}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="h-[85%]">
|
|
<Line ref={chartRef} data={chartData} options={chartOptions} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|