Add metrics_visualization/README.md

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=<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