97 lines
No EOL
3 KiB
Markdown
97 lines
No EOL
3 KiB
Markdown
# Metrics Visualization App
|
||
|
||
## Überblick
|
||
|
||
Die **Metrics Visualization App** ist ein webbasiertes Dashboard zur Analyse und Visualisierung von Exit-Metriken über verschiedene Runs hinweg. Sie unterstützt technische Nutzer und Analysten bei der Identifikation von Trends, Anomalien und Qualitätsabweichungen in den Messdaten.
|
||
|
||
---
|
||
|
||
## Ziel der Anwendung
|
||
|
||
Das Frontend dient der **vergleichenden Betrachtung von Laufmetriken**, um Fragestellungen wie folgende zu beantworten:
|
||
|
||
- Wie entwickeln sich Warn- und Fehlerraten über Runs hinweg?
|
||
- Gibt es auffällige Veränderungen in der Delta‑t‑Verteilung (Δt < 0)?
|
||
- Weichen Runs mit gleichem `setup_fingerprint` signifikant voneinander ab?
|
||
|
||
---
|
||
|
||
## Hauptfunktionen
|
||
|
||
- 🔹 **Visualisierung von Exit‑Metriken:** Darstellung von `warn_rate`, `unknown_rate` und `Δt < 0` pro Run
|
||
- 🔹 **Run‑Vergleich:** Gegenüberstellung von Runs mit identischem `setup_fingerprint`
|
||
- 🔹 **Filterfunktion:** Eingrenzung auf *pinned* oder *unpinned* Runs
|
||
- 🔹 **Interaktive UI:** Dynamische Tabellen und Diagramme, aktualisiert über Benutzerfilter
|
||
- 🔹 **API‑Integration:** Live‑Abruf der Metrikdaten über `/metrics`
|
||
- 🔹 **Responsive Layout:** Optimiert für Desktop und Tablet
|
||
|
||
---
|
||
|
||
## Datenfluss
|
||
|
||
1. **Fetch:** Die Anwendung ruft über die Route `/metrics` (GET) aktuelle Metrikdaten ab.
|
||
2. **Processing:** Die Daten werden im Browser aufbereitet und zwischengespeichert.
|
||
3. **Rendering:** Diagramme und Tabellen werden auf Grundlage der Metrikdaten gerendert.
|
||
4. **Interaction:** Änderungen des Filters führen zu neuem API‑Abruf und aktualisierter Anzeige.
|
||
|
||
---
|
||
|
||
## API-Nutzung
|
||
|
||
**Route:** `/metrics`
|
||
|
||
**Methode:** `GET`
|
||
|
||
**Optionale Parameter:**
|
||
- `filter=pinned|unpinned`
|
||
- `setup_fingerprint=<id>`
|
||
|
||
**Beispielhafte Response:**
|
||
```json
|
||
[
|
||
{
|
||
"run_id": "run_001",
|
||
"setup_fingerprint": "fp_a1b2c3",
|
||
"warn_rate": 0.12,
|
||
"unknown_rate": 0.03,
|
||
"delta_t_stats": { "lt_zero": 5 },
|
||
"timestamp": "2026-02-12T09:21:00Z"
|
||
}
|
||
]
|
||
```
|
||
|
||
**Verwendung in JS‑Dateien:**
|
||
- `js/api.js`: Schnittstelle zum Abruf der Metrikdaten
|
||
- `js/app.js`: Initialisierung, State‑Management und Logik
|
||
- `js/ui.js`: DOM‑Update und Interaktionen
|
||
|
||
---
|
||
|
||
## Struktur
|
||
|
||
```
|
||
metrics_visualization/
|
||
├─ index.html # Einstiegspunkt des Dashboards
|
||
├─ css/
|
||
│ └─ style.css # Basislayout und Komponentenstile
|
||
├─ js/
|
||
│ ├─ app.js # App-Initialisierung und State-Verwaltung
|
||
│ ├─ api.js # API-Aufrufe (GET /metrics)
|
||
│ └─ ui.js # UI-Komponenten und DOM-Manipulationen
|
||
└─ README.md # Dokumentation
|
||
```
|
||
|
||
---
|
||
|
||
## Deployment-Hinweise
|
||
|
||
1. **Build & Serve:** Einfaches statisches Hosting reicht (z.B. Nginx oder Node.js Static Server).
|
||
2. **API‑Endpunkt:** Der Server muss die Route `/metrics` bereitstellen; CORS muss für das Frontend erlaubt sein.
|
||
3. **Caching:** Optionale Nutzung clientseitigen Caches für wiederholte Abfragen.
|
||
4. **Responsiveness:** Test auf 768 px und 1024 px Viewports empfohlen.
|
||
|
||
---
|
||
|
||
## Lizenz & Copyright
|
||
|
||
© 2026 Donau2Space.de |