docs: Diagramme für historische analoge Eingänge hinzugefügt

- Ablaufdiagramm analogInputsHistoryFlow.md erstellt
- Redux-Datenfluss analogInputsHistoryReduxFlow.md dokumentiert
- Sequenzdiagramm analogInputsHistorySequence.md erstellt
- Mermaid-Syntax verwendet für einheitliche Entwicklerdokumentation
This commit is contained in:
ISA
2025-04-29 12:05:33 +02:00
parent 11c6be27ff
commit f3fda3c67f
5 changed files with 137 additions and 1 deletions

View File

@@ -0,0 +1,37 @@
# analogInputsHistoryFlow.md
## Ablaufdiagramm: Historische Daten der analogen Eingänge in Chart.js
```mermaid
flowchart TD
User["User öffnet Seite /analogeEingaenge"] --> ReduxDispatch["Thunk ausgelöst: fetchAnalogInputsHistoryThunk"]
ReduxDispatch --> Entwicklung["Entwicklungsumgebung"]
ReduxDispatch --> Produktion["Produktivumgebung"]
Entwicklung --> ApiHandler["/api/cpl/fetchAnalogInputsHistory"]
Produktion --> CPLWebserver["CPL: /CPL?Service/empty.acp&DIA0"]
ApiHandler --> MockData["Mockdaten analogInput1 bis 8"]
CPLWebserver --> LiveData["Live-Messdaten AE1 bis AE8"]
MockData --> ReduxStore["Slice speichert Daten"]
LiveData --> ReduxStore["Slice speichert Daten"]
ReduxStore --> Chart["Chart.js zeigt 8 Linien"]
Chart --> UserAction["Legende: Eingänge ein-/ausblenden"]
```
---
## Erklärung:
- In der Entwicklungsumgebung werden die Daten aus Mock-Dateien geladen.
- In der Produktion werden die realen Daten vom CPL-Webserver über CGI-Endpoints geladen.
- Chart.js zeigt alle 8 analogen Eingänge gleichzeitig an, Nutzer kann über die Legende steuern.
---
**Stand:** 29.04.2025
**Projekt:** CPLv4.0 Weboberfläche

View File

@@ -0,0 +1,39 @@
# analogInputsHistoryReduxFlow.md
## Flussdiagramm: Redux-Datenfluss der historischen analogen Eingänge
```mermaid
flowchart TD
Component["React-Komponente: AnalogInputsChart"] --> DispatchThunk["dispatch → fetchAnalogInputsHistoryThunk"]
DispatchThunk --> ThunkLogik["Thunk-Logik"]
ThunkLogik --> fetchService["fetchAnalogInputsHistoryService"]
fetchService -->|DEV| APIHandler["/api/cpl/fetchAnalogInputsHistory"]
fetchService -->|PROD| CPLWebserver["CPL: DIA0-Endpunkt"]
APIHandler --> DatenMock["Mockdaten geladen"]
CPLWebserver --> DatenLive["Live-Daten geladen"]
DatenMock --> Fulfilled["fulfilled → Redux aktualisieren"]
DatenLive --> Fulfilled["fulfilled → Redux aktualisieren"]
Fulfilled --> Slice["analogInputsHistorySlice speichert"]
Slice --> Update["Chart.js aktualisiert sich"]
```
---
## Erklärung:
- Die Komponente dispatcht den Thunk beim Laden.
- Der Service entscheidet, ob Mock-Daten oder Live-Daten geholt werden.
- Das Redux-Slice speichert die Daten zentral im State.
- Sobald die Daten da sind, aktualisiert sich das Chart automatisch.
---
**Stand:** 29.04.2025
**Projekt:** CPLv4.0 Weboberfläche

View File

@@ -0,0 +1,39 @@
# 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