20e20dec30
- Renamed all slice names (createSlice `name` attribute) to match their file names (e.g. loopChartSlice, authSlice, kueDataSlice etc.) - Updated `store.ts` to register each reducer with consistent key names (e.g. state.loopChartSlice instead of state.loopChart) - Adjusted all `useSelector` and Redux state accesses across the codebase - Improves maintainability, searchability and consistency across files and Redux DevTools
55 lines
1.9 KiB
Markdown
55 lines
1.9 KiB
Markdown
### 🧭 Zoom-Verhalten beim Schleifen-/Isolationsdiagramm
|
||
|
||
In dieser Komponente wird das automatische Nachladen der Messwerte temporär deaktiviert, wenn der Benutzer per Maus in das Diagramm zoomt oder pannt. Nach 30 Sekunden ohne Zoom/Pan-Aktion wird die automatische Aktualisierung wieder aktiviert. Dieses Verhalten dient dazu, den Zoom-Zustand nicht durch neue Daten zu verlieren.
|
||
|
||
---
|
||
|
||
### 📁 Enthaltene Komponenten
|
||
|
||
- `LoopChartActionBar.tsx`
|
||
→ Auswahlleiste für Slot-Nummer, Zeitraum (über `DateRangePicker`), Messmodus (`DIA0`, `DIA1`, `DIA2`) und Slot-Typ (Schleife/Isolation).
|
||
→ Ruft alle 10 Sekunden neue Messdaten ab – außer der Zoom-Modus pausiert das.
|
||
- `LoopMeasurementChart.tsx`
|
||
→ Das eigentliche Liniendiagramm mit Chart.js + Zoom-Plugin.
|
||
→ Erkennt Zoom/Pan und setzt `chartUpdatePaused`, bis 30 Sekunden Inaktivität vergangen sind.
|
||
|
||
- `DateRangePicker.tsx`
|
||
→ Zeigt zwei Felder für Von-/Bis-Datum. Nutzt Redux, um globale Zeitfenster zu setzen.
|
||
|
||
- `CustomTooltip.tsx`
|
||
→ Zeigt beim Hover über die Kurve kontextbezogene Werte wie Messwert, Min, Max und Durchschnitt (DIA0/1/2).
|
||
|
||
---
|
||
|
||
### 🟢 UML-Aktivitätsdiagramm (Zoom → Pause → Timer → Auto-Update)
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
Start([Start])
|
||
ZoomEvent[[Zoom oder Pan erkannt]]
|
||
SetPause[Setze chartUpdatePaused = true]
|
||
StartTimer[Starte 30s Timer]
|
||
Check[Timer abgelaufen?]
|
||
SetResume[Setze chartUpdatePaused = false]
|
||
FetchData[[Datenabruf wieder erlaubt]]
|
||
End([Ende])
|
||
|
||
Start --> ZoomEvent --> SetPause --> StartTimer --> Check
|
||
Check -- Nein --> StartTimer
|
||
Check -- Ja --> SetResume --> FetchData --> End
|
||
```
|
||
|
||
stateDiagram-v2
|
||
[*] --> AktualisierungAktiv
|
||
|
||
AktualisierungAktiv --> ZoomPause : Zoom/Pan erkannt
|
||
ZoomPause --> AktualisierungAktiv : 30 Sekunden Inaktivität
|
||
|
||
state AktualisierungAktiv {
|
||
[*] --> Normalbetrieb
|
||
}
|
||
|
||
state ZoomPause {
|
||
[*] --> CountdownLäuft
|
||
}
|