8c01dd3fc3
- Layout verbessert: Tabelle und Diagramm jetzt nebeneinander (grid-responsive) - Responsivität optimiert: Kein unnötiges horizontales Scrollen mehr - Diagramm verbessert: - Höhere Lesbarkeit mit stärkeren Linien und Abstand für Achsenbeschriftungen - Anpassung der Höhe und Breite für mobile & große Bildschirme - Tabelle optimiert: - Bessere Lesbarkeit mit größeren Abständen - Hover-Effekte für Zeilen - Dynamisches Spaltenlayout für kleine & große Bildschirme - Code aufgeräumt und verbessert Test auf verschiedenen Bildschirmgrößen erfolgreich!"
51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
"use client"; // components/main/analogeEingaenge/AnalogInputsChart.tsx
|
|
import React from "react";
|
|
import { useSelector } from "react-redux";
|
|
import { RootState } from "../../../redux/store";
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from "recharts";
|
|
|
|
export default function AnalogInputsChart() {
|
|
const analogInputs = useSelector(
|
|
(state: RootState) => state.analogeEingaenge
|
|
);
|
|
|
|
// Daten für das Diagramm vorbereiten
|
|
const chartData = Object.values(analogInputs).map((input) => ({
|
|
name: `Input ${input.id}`,
|
|
value: input.value ?? 0, // Falls kein Wert vorhanden ist, wird 0 gesetzt
|
|
}));
|
|
|
|
return (
|
|
<div className="w-full h-[350px] bg-white shadow-md rounded-lg p-4 border border-gray-200">
|
|
<h3 className="text-sm font-semibold mb-2 text-gray-700">
|
|
Analog Inputs Chart
|
|
</h3>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart
|
|
data={chartData}
|
|
margin={{ top: 10, right: 20, left: 0, bottom: 10 }}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="name" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Line
|
|
type="monotone"
|
|
dataKey="value"
|
|
stroke="#4A90E2"
|
|
strokeWidth={2}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|