feat: Zeitraum einstellbar in AnalogInputsChart mit Zoom- und Pan-Funktion umgesetzt

This commit is contained in:
ISA
2025-06-25 13:48:14 +02:00
parent 2fcd0755a4
commit 53c2a02224
13 changed files with 291 additions and 14 deletions

View File

@@ -0,0 +1,60 @@
<!-- /docs/components/main/analogInputs/README.md -->
# 📂 Komponentenübersicht: Analoge Eingänge
Dieses Verzeichnis enthält alle React-Komponenten zur Visualisierung und Konfiguration der analogen Eingänge im System.
---
## 📋 Übersicht der Komponenten
### 1. [`AnalogInputsTable`](./AnalogInputsTable.md)
Zeigt eine tabellarische Übersicht aller analogen Eingänge mit Messwert, Einheit und Bezeichnung.
- Auswahl eines Eingangs durch Klick
- Öffnet Einstellungen per Zahnrad-Icon
- Nutzt Redux für Datenabruf
➡️ Dokumentation: [AnalogInputsTable.md](./AnalogInputsTable.md)
---
### 2. [`AnalogInputsChart`](./AnalogInputsChart.md)
Zeigt den zeitlichen Verlauf eines Messwerteingangs im Liniendiagramm.
- Zoom & Pan steuerbar über Feature-Flag `NEXT_PUBLIC_FEATURE_MESSWERTANZEIGE_EINGANG`
- Chart.js mit Zeitachse (TimeScale)
- Daten aus Redux-State
➡️ Dokumentation: [AnalogInputsChart.md](./AnalogInputsChart.md)
---
### 3. [`AnalogInputsSettingsModal`](./AnalogInputsSettingsModal.md)
Modal zur Bearbeitung eines analogen Eingangs (Label, Offset, Faktor, Einheit, Speicherintervall).
- Werte werden lokal oder über API/CGI gespeichert
- Dynamische Anzeige der aktuellen Einstellungen
- Eingaben mit `useState` gebunden
➡️ Dokumentation: [AnalogInputsSettingsModal.md](./AnalogInputsSettingsModal.md)
---
## 🧩 Technologien
- React & Redux
- Chart.js / react-chartjs-2
- Tailwind CSS
- Iconify
- API-Anbindung & lokale Mockdaten
---
## 🗂️ Speicherort
Pfad: `/components/main/analogInputs/`
Dokumentation: `/docs/components/main/analogInputs/`