110 lines
3.0 KiB
TypeScript
110 lines
3.0 KiB
TypeScript
// components/main/system/DetailModal.tsx
|
||
"use client";
|
||
import React from "react";
|
||
import { Line } from "react-chartjs-2";
|
||
import { useSelector } from "react-redux";
|
||
import { RootState } from "@/redux/store";
|
||
|
||
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 typMap: Record<string, "DIA0" | "DIA1" | "DIA2"> = {
|
||
"+5V": zeitraum,
|
||
"+15V": zeitraum,
|
||
"-15V": zeitraum,
|
||
"-98V": zeitraum,
|
||
};
|
||
|
||
const typ = selectedKey ? typMap[selectedKey] : null;
|
||
type ReduxDataItem = { t: string; i: number };
|
||
|
||
const reduxData = useSelector((state: RootState) =>
|
||
typ ? (state.systemspannung5Vplus[typ] as ReduxDataItem[]) : []
|
||
);
|
||
|
||
const labels = reduxData.map((e: ReduxDataItem) => e.t);
|
||
const values = reduxData.map((e: ReduxDataItem) => e.i);
|
||
|
||
const baseOptions = {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
scales: {
|
||
y: {
|
||
beginAtZero: false,
|
||
grid: { color: "rgba(200,200,200,0.2)" },
|
||
title: { display: true, text: "Wert" },
|
||
},
|
||
x: {
|
||
grid: { color: "rgba(200,200,200,0.2)" },
|
||
title: { display: true, text: "Zeit" },
|
||
},
|
||
},
|
||
plugins: {
|
||
legend: { position: "bottom" as const },
|
||
title: { display: true, text: `Verlauf – ${selectedKey}` },
|
||
},
|
||
};
|
||
|
||
if (!isOpen || !selectedKey) return null;
|
||
|
||
return (
|
||
<div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50">
|
||
<div className="bg-white p-6 rounded-xl w-[90%] max-w-[1200px] h-[80vh] overflow-auto shadow-2xl">
|
||
<div className="flex justify-between items-center mb-4">
|
||
<h2 className="text-xl font-semibold">
|
||
Detailansicht: {selectedKey}
|
||
</h2>
|
||
<button onClick={onClose} className="text-red-500 hover:text-red-700">
|
||
✕
|
||
</button>
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<label className="mr-2 font-medium">Zeitraum:</label>
|
||
<select
|
||
className="border px-2 py-1 rounded"
|
||
value={zeitraum}
|
||
onChange={(e) =>
|
||
setZeitraum(e.target.value as "DIA0" | "DIA1" | "DIA2")
|
||
}
|
||
>
|
||
<option value="DIA0">Alle Messwerte</option>
|
||
<option value="DIA1">Stündlich</option>
|
||
<option value="DIA2">Täglich</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div className="h-[500px]">
|
||
<Line
|
||
data={{
|
||
labels,
|
||
datasets: [
|
||
{
|
||
label: selectedKey,
|
||
data: values,
|
||
borderColor: "rgba(59,130,246,1)",
|
||
backgroundColor: "rgba(59,130,246,0.2)",
|
||
fill: false,
|
||
},
|
||
],
|
||
}}
|
||
options={baseOptions}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|