b2a3518c85
- Historische Messdaten von analogInput1 bis analogInput8 im Verzeichnis /apiMockData/analogInputsHistoryData angelegt - Namensschema analogInputX gewählt für bessere Lesbarkeit und Klarheit - Daten wurden per CPL-Endpunkt (DIA0) vom Webinterface geladen und lokal gespeichert - Grundlage für Entwicklung, Tests und Offline-Visualisierung im Chart
112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
"use client";
|
|
// components/main/analogeEingaenge/AnalogInputsChart.tsx
|
|
import React, { useState, useEffect } from "react";
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from "recharts";
|
|
|
|
interface HistoryDataPoint {
|
|
t: string; // Timestamp
|
|
m: number; // Messwert (Value)
|
|
v: number; // Gültigkeit (0/1)
|
|
}
|
|
|
|
export default function AnalogInputsChart() {
|
|
const [selectedInput, setSelectedInput] = useState<number>(1);
|
|
const [historyData, setHistoryData] = useState<HistoryDataPoint[]>([]);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
// Simulierter API-Aufruf für Historische Daten
|
|
const fetchHistoryData = async (inputNumber: number) => {
|
|
setIsLoading(true);
|
|
try {
|
|
// Hier ersetzt du später mit deinem echten API-Call
|
|
// Beispiel: const response = await fetch(`/api/analogInputs/history?input=${inputNumber}`);
|
|
// const data = await response.json();
|
|
|
|
// Temporär: Dummy-Daten für Simulation
|
|
const now = new Date();
|
|
const dummyData = Array.from({ length: 24 }, (_, i) => ({
|
|
t: new Date(now.getTime() - i * 60 * 60 * 1000).toISOString(), // letzte 24 Stunden
|
|
m: Math.random() * 100, // Zufälliger Wert
|
|
v: 1, // Gültig
|
|
})).reverse();
|
|
|
|
setHistoryData(dummyData);
|
|
} catch (error) {
|
|
console.error("Fehler beim Laden der Historie:", error);
|
|
setHistoryData([]);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchHistoryData(selectedInput);
|
|
}, [selectedInput]);
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
|
setSelectedInput(Number(e.target.value));
|
|
};
|
|
|
|
return (
|
|
<div className="w-full bg-white shadow-md rounded-lg p-4 border border-gray-200">
|
|
<h2 className="text-lg font-bold mb-4">
|
|
Historische Werte für Analogen Eingang der letzten 24 Stunden
|
|
</h2>
|
|
|
|
<div className="mb-4">
|
|
<label className="mr-2 font-semibold" htmlFor="inputSelect">
|
|
Eingang wählen:
|
|
</label>
|
|
<select
|
|
id="inputSelect"
|
|
className="border rounded p-1"
|
|
value={selectedInput}
|
|
onChange={handleInputChange}
|
|
>
|
|
{[...Array(8)].map((_, index) => (
|
|
<option key={index} value={index + 1}>
|
|
Eingang {index + 1}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="text-center text-gray-500">Lade Daten...</div>
|
|
) : (
|
|
<div className="w-full h-[350px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart
|
|
data={historyData}
|
|
margin={{ top: 10, right: 20, left: 0, bottom: 10 }}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis
|
|
dataKey="t"
|
|
tickFormatter={(str) => str.substring(11, 16)}
|
|
/>
|
|
<YAxis />
|
|
<Tooltip labelFormatter={(label) => `Zeit: ${label}`} />
|
|
<Line
|
|
type="monotone"
|
|
dataKey="m"
|
|
stroke="#4A90E2"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|