diff --git a/metrics_visualization/README.md b/metrics_visualization/README.md new file mode 100644 index 0000000..69dfb9e --- /dev/null +++ b/metrics_visualization/README.md @@ -0,0 +1,97 @@ +# 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=` + +**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 \ No newline at end of file