Add metric_visualization/README.md
This commit is contained in:
parent
7b558891ed
commit
5b1eb5ece6
1 changed files with 67 additions and 0 deletions
67
metric_visualization/README.md
Normal file
67
metric_visualization/README.md
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
# Metric Visualization – Δt Analysis Frontend
|
||||||
|
|
||||||
|
## Zweck
|
||||||
|
Dieses Web-Frontend dient der Darstellung und Auswertung von Zeitreihenanalysen mit Fokus auf **Δt<0-Fälle**. Es unterstützt Forschende und Analysten darin, Trends, Warnraten und Anomalien interaktiv zu untersuchen.
|
||||||
|
|
||||||
|
## Hauptziele
|
||||||
|
- Visualisierung von Analyseergebnissen aus dem Backend (`/api/analysis`)
|
||||||
|
- Interaktive Diagramme für Δt-Zeitverläufe
|
||||||
|
- Hervorhebung und Filterung von Δt<0-Datenpunkten
|
||||||
|
- Anzeige von aggregierten Statistikwerten (Warn- und Unknown-Rates)
|
||||||
|
- Responsives und zugängliches UI-Design für Desktop, Tablet und Mobilgeräte
|
||||||
|
|
||||||
|
## API-Nutzung
|
||||||
|
**Endpunkt:** `/api/analysis`
|
||||||
|
**Methode:** `GET`
|
||||||
|
**Erwarteter Rückgabewert:** Array von Objekten im Format:
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"run_id": "string",
|
||||||
|
"t_index_visible": "number",
|
||||||
|
"t_gate_read": "number",
|
||||||
|
"delta_t": "number",
|
||||||
|
"warn_rate": "number",
|
||||||
|
"unknown_rate": "number"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
**Verwendung:**
|
||||||
|
Die API wird von den Modulen `js/api.js` (Abruf der Daten) und `js/app.js` (Darstellung im UI) genutzt.
|
||||||
|
|
||||||
|
## Verzeichnisstruktur
|
||||||
|
```
|
||||||
|
project-root/
|
||||||
|
├── index.html
|
||||||
|
├── css/
|
||||||
|
│ ├── base.css
|
||||||
|
│ └── layout.css
|
||||||
|
├── js/
|
||||||
|
│ ├── api.js
|
||||||
|
│ ├── app.js
|
||||||
|
│ └── charts/
|
||||||
|
│ └── deltaTChart.js
|
||||||
|
├── README.md
|
||||||
|
└── LICENSE
|
||||||
|
```
|
||||||
|
|
||||||
|
## Funktionaler Ablauf
|
||||||
|
1. **Initialisierung** – Beim Laden der Anwendung werden Basis-Layouts und UI-Komponenten aufgebaut.
|
||||||
|
2. **API-Abruf** – Die Anwendung ruft Analyseergebnisse von `/api/analysis` ab.
|
||||||
|
3. **Verarbeitung** – Clientseitig werden die Daten für Diagramme und Statistiken umgewandelt.
|
||||||
|
4. **Visualisierung** – Zeitverläufe und Ausreißer (Δt<0) werden hervorgehoben.
|
||||||
|
5. **Interaktion** – Nutzer können Datenpunkte selektieren, Tooltips einsehen und Filter anwenden.
|
||||||
|
|
||||||
|
## Responsives Design
|
||||||
|
- **Mobile-first Ansatz**
|
||||||
|
Layouts passen sich an Viewportgrößen ab 640px, 1024px an.
|
||||||
|
- **Barrierefreiheit**
|
||||||
|
Nutzung semantischer HTML-Strukturen, ARIA-Attribute und ausreichender Farbkontraste.
|
||||||
|
|
||||||
|
## Weiterentwicklung
|
||||||
|
- Erweiterung auf zusätzliche Metriken (bspw. Δt>0-Trends)
|
||||||
|
- Exportfunktionen für Daten und Diagramme
|
||||||
|
- Vergleichsansichten zwischen Laufserien
|
||||||
|
|
||||||
|
## Lizenz und Rechte
|
||||||
|
© 2026 Donau2Space.de – Alle Rechte vorbehalten.
|
||||||
Loading…
Reference in a new issue