feat: API für Systemspannung +5V erfolgreich implementiert
- API-Handler `getSystemspannung5VplusHandler.ts` erstellt - JSON-Daten werden aus dem Verzeichnis `mocks/device-cgi-simulator/chartsData/systemspannung5Vplus/` geladen - unterstützt die Parameter DIA0, DIA1, DIA2 für unterschiedliche Datenfrequenzen - Fehlerbehandlung bei ungültigen Typen und fehlenden Dateien eingebaut - API getestet unter `/api/cpl/getSystemspannung5VplusHandler?typ=DIA0`
This commit is contained in:
ISA
96
components/main/system/DetailModal.tsx
Normal file
96
components/main/system/DetailModal.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
// 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;
|
||||
};
|
||||
|
||||
export const DetailModal = ({ isOpen, selectedKey, onClose }: Props) => {
|
||||
// Mapping: Welcher Redux-Zweig zu welchem selectedKey gehört
|
||||
const typMap: Record<string, "DIA0" | "DIA1" | "DIA2"> = {
|
||||
"+5V": "DIA1",
|
||||
"+15V": "DIA1",
|
||||
"-15V": "DIA1",
|
||||
"-98V": "DIA1",
|
||||
};
|
||||
|
||||
const typ = selectedKey ? typMap[selectedKey] : null;
|
||||
|
||||
// Redux State abrufen
|
||||
const reduxData = useSelector((state: RootState) =>
|
||||
typ ? state.systemspannung5Vplus[typ] : []
|
||||
);
|
||||
|
||||
// Zeitstempel und Werte extrahieren
|
||||
const labels = reduxData.map((e: any) => e.t);
|
||||
const values = reduxData.map((e: any) => 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">
|
||||
<option>Letzte 24 Stunden</option>
|
||||
{/* Optional: dynamische Filter */}
|
||||
</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>
|
||||
);
|
||||
};
|
||||
144
components/main/system/SystemCharts.tsx
Normal file
144
components/main/system/SystemCharts.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
// components/main/system/SystemCharts.tsx
|
||||
|
||||
import React from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from "chart.js";
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend
|
||||
);
|
||||
|
||||
type HistoryEntry = {
|
||||
time: string | number | Date;
|
||||
"+5V": number;
|
||||
"+15V": number;
|
||||
"-15V": number;
|
||||
"-98V": number;
|
||||
"ADC Temp": number;
|
||||
"CPU Temp": number;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
history: HistoryEntry[];
|
||||
};
|
||||
|
||||
export const SystemCharts = ({ history }: Props) => {
|
||||
const labels = history.map((h) => new Date(h.time).toLocaleTimeString());
|
||||
const formatValue = (v: number) => v.toFixed(2);
|
||||
|
||||
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 },
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
|
||||
<div className="h-[300px]">
|
||||
<Line
|
||||
data={{
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "+5V",
|
||||
data: history.map((h) => formatValue(h["+5V"])),
|
||||
borderColor: "rgba(59,130,246,1)",
|
||||
backgroundColor: "rgba(59,130,246,0.5)",
|
||||
fill: false,
|
||||
},
|
||||
{
|
||||
label: "+15V",
|
||||
data: history.map((h) => formatValue(h["+15V"])),
|
||||
borderColor: "rgba(34,197,94,1)",
|
||||
backgroundColor: "rgba(34,197,94,0.5)",
|
||||
fill: false,
|
||||
},
|
||||
{
|
||||
label: "-15V",
|
||||
data: history.map((h) => formatValue(h["-15V"])),
|
||||
borderColor: "rgba(239,68,68,1)",
|
||||
backgroundColor: "rgba(239,68,68,0.5)",
|
||||
fill: false,
|
||||
},
|
||||
{
|
||||
label: "-98V",
|
||||
data: history.map((h) => formatValue(h["-98V"])),
|
||||
borderColor: "rgba(234,179,8,1)",
|
||||
backgroundColor: "rgba(234,179,8,0.5)",
|
||||
fill: false,
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
...baseOptions,
|
||||
plugins: {
|
||||
...baseOptions.plugins,
|
||||
title: { display: true, text: "Systemspannungen" },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="h-[300px]">
|
||||
<Line
|
||||
data={{
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "ADC Temp",
|
||||
data: history.map((h) => h["ADC Temp"]),
|
||||
borderColor: "rgba(168,85,247,1)",
|
||||
backgroundColor: "rgba(168,85,247,0.5)",
|
||||
fill: false,
|
||||
},
|
||||
{
|
||||
label: "CPU Temp",
|
||||
data: history.map((h) =>
|
||||
parseFloat(formatValue(h["CPU Temp"]))
|
||||
),
|
||||
borderColor: "rgba(251,191,36,1)",
|
||||
backgroundColor: "rgba(251,191,36,0.5)",
|
||||
fill: false,
|
||||
},
|
||||
],
|
||||
}}
|
||||
options={{
|
||||
...baseOptions,
|
||||
plugins: {
|
||||
...baseOptions.plugins,
|
||||
title: { display: true, text: "Systemtemperaturen" },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
33
components/main/system/SystemOverviewGrid.tsx
Normal file
33
components/main/system/SystemOverviewGrid.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
// components/main/system/SystemOverviewGrid.tsx
|
||||
import React from "react";
|
||||
|
||||
type Props = {
|
||||
voltages: Record<string, number>;
|
||||
onOpenDetail: (key: string) => void;
|
||||
};
|
||||
|
||||
export const SystemOverviewGrid = ({ voltages, onOpenDetail }: Props) => {
|
||||
const formatValue = (value: number) => value.toFixed(2);
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-4 mb-8">
|
||||
{Object.entries(voltages).map(([key, value]) => {
|
||||
const unit = key.includes("Temp") ? "°C" : "V";
|
||||
return (
|
||||
<div key={key} className="p-4 border rounded shadow">
|
||||
<h2 className="font-semibold">{key}</h2>
|
||||
<p>
|
||||
{formatValue(value)} {unit}
|
||||
<button
|
||||
onClick={() => onOpenDetail(key)}
|
||||
className="ml-2 text-blue-600 hover:underline text-sm"
|
||||
>
|
||||
Details
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user