fix: Mock-Datenzugriff über API-Handler in Entwicklungsumgebung integriert
- fetchAnalogInputsHistoryService angepasst: nutzt /api/cpl/fetchAnalogInputsHistory bei NODE_ENV=development - Produktionsdaten weiterhin direkt vom CPL-Webserver über CGI-Endpunkte geladen - Chart- und Redux-Datenstrom jetzt vollständig stabil in Entwicklung und Produktion - Fehler beim direkten Zugriff auf Mock-Dateien in Pages Router Next.js behoben
This commit is contained in:
ISA
@@ -1,109 +1,121 @@
|
||||
"use client";
|
||||
// components/main/analogeEingaenge/AnalogInputsChart.tsx
|
||||
import React, { useState, useEffect } from "react";
|
||||
"use client"; // components/main/analogeEingaenge/AnalogInputsChart.tsx
|
||||
import React, { useEffect } from "react";
|
||||
import { Line } from "react-chartjs-2";
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Chart as ChartJS,
|
||||
LineElement,
|
||||
PointElement,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
Legend,
|
||||
Filler,
|
||||
TimeScale,
|
||||
} from "chart.js";
|
||||
import "chartjs-adapter-date-fns";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import type { RootState, AppDispatch } from "../../../redux/store";
|
||||
import { fetchAnalogInputsHistoryThunk } from "../../../redux/thunks/fetchAnalogInputsHistoryThunk";
|
||||
|
||||
interface HistoryDataPoint {
|
||||
t: string; // Timestamp
|
||||
m: number; // Messwert (Value)
|
||||
v: number; // Gültigkeit (0/1)
|
||||
}
|
||||
ChartJS.register(
|
||||
LineElement,
|
||||
PointElement,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
Tooltip,
|
||||
Legend,
|
||||
Filler,
|
||||
TimeScale
|
||||
);
|
||||
|
||||
const colors = [
|
||||
"#007bff",
|
||||
"#28a745",
|
||||
"#dc3545",
|
||||
"#ffc107",
|
||||
"#17a2b8",
|
||||
"#6f42c1",
|
||||
"#fd7e14",
|
||||
"#20c997",
|
||||
];
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const { data, isLoading, error } = useSelector(
|
||||
(state: RootState) => state.analogInputsHistory
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
fetchHistoryData(selectedInput);
|
||||
}, [selectedInput]);
|
||||
dispatch(fetchAnalogInputsHistoryThunk());
|
||||
}, [dispatch]);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setSelectedInput(Number(e.target.value));
|
||||
const datasets = Object.entries(data).map(([key, inputData], index) => ({
|
||||
label: `Eingang ${Number(key) - 99}`,
|
||||
data: inputData.map((point: any) => ({
|
||||
x: point.t,
|
||||
y: point.m,
|
||||
})),
|
||||
fill: false,
|
||||
borderColor: colors[index % colors.length],
|
||||
backgroundColor: colors[index % colors.length],
|
||||
tension: 0.3,
|
||||
}));
|
||||
|
||||
const chartData = {
|
||||
datasets,
|
||||
};
|
||||
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "top" as const,
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
mode: "index" as const,
|
||||
intersect: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: "time" as const,
|
||||
time: {
|
||||
unit: "hour",
|
||||
tooltipFormat: "HH:mm",
|
||||
displayFormats: {
|
||||
hour: "HH:mm",
|
||||
},
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: "Zeit",
|
||||
},
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: "Messwert",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
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
|
||||
Alle analogen Eingänge – Verlauf 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>
|
||||
) : error ? (
|
||||
<div className="text-center text-red-500">Fehler: {error}</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 className="w-full h-[400px]">
|
||||
<Line data={chartData} options={chartOptions} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user