# 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