f3fda3c67f
- Ablaufdiagramm analogInputsHistoryFlow.md erstellt - Redux-Datenfluss analogInputsHistoryReduxFlow.md dokumentiert - Sequenzdiagramm analogInputsHistorySequence.md erstellt - Mermaid-Syntax verwendet für einheitliche Entwicklerdokumentation
40 lines
1.1 KiB
Markdown
40 lines
1.1 KiB
Markdown
# analogInputsHistorySequence.md
|
|
|
|
## Sequenzdiagramm: Historische analoge Eingänge laden und darstellen
|
|
|
|
```mermaid
|
|
sequenceDiagram
|
|
|
|
User->>+ReactComponent: Seite "/analogeEingaenge" wird geladen
|
|
ReactComponent->>+ReduxDispatch: dispatch(fetchAnalogInputsHistoryThunk())
|
|
ReduxDispatch->>+Thunk: fetchAnalogInputsHistoryThunk
|
|
Thunk->>+Service: fetchAnalogInputsHistoryService
|
|
|
|
alt Entwicklungsumgebung
|
|
Service->>+APIHandler: /api/cpl/fetchAnalogInputsHistory
|
|
APIHandler-->>Service: JSON-Mock-Daten
|
|
else Produktionsumgebung
|
|
Service->>+CPLWebserver: /CPL?Service/empty.acp&DIA0
|
|
CPLWebserver-->>Service: JSON-Live-Daten
|
|
end
|
|
|
|
Service-->>Thunk: Ergebnis-Daten
|
|
Thunk-->>ReduxStore: fulfilled action (analogInputsHistorySlice)
|
|
ReduxStore-->>ReactComponent: neue State-Daten verfügbar
|
|
ReactComponent-->>Chart.js: aktualisierte Daten zeichnen
|
|
Chart.js-->>User: Anzeige von 8 Eingängen, einzeln ein-/ausblendbar
|
|
```
|
|
|
|
---
|
|
|
|
## Erklärung:
|
|
|
|
- Unterschiedliche Datenquellen je nach Umgebung (DEV oder PROD)
|
|
- Redux verwaltet den Zwischenstand über Slice + Thunk
|
|
- UI aktualisiert sich automatisch nach erfolgreichem Laden
|
|
|
|
---
|
|
|
|
**Stand:** 29.04.2025
|
|
**Projekt:** CPLv4.0 Weboberfläche
|