# Results Visualization – Zeitmessungs-Dashboard

## Überblick
Diese Webanwendung dient zur Visualisierung aggregierter Zeitmessungsdaten, die über die API-Route `/results` bereitgestellt werden. Ziel ist es, Stabilität und Vergleichbarkeit zwischen verschiedenen Messläufen (Runs) übersichtlich darzustellen.

Das Interface ermöglicht:
- Vergleich von **pinned** und **unpinned** Runs
- Filterung nach **Run-Typ**, **Metrik** oder **Zeitabschnitt**
- Anzeige von Kennzahlen wie Latenzmittelwert, Varianz und Stabilitätsindex
- Interaktive Aktualisierung der Diagramme bei Nutzerinteraktion
- Responsive Darstellung auf Desktop- und Tablet-Geräten

---

## Architektur

### Datenfluss
1. **`api.js`** ruft beim Laden die Route `/results` auf und empfängt aggregierte JSON-Daten.
2. Diese Daten werden an **`visualization.js`** übergeben.
3. **`visualization.js`** rendert interaktive Diagramme und Kennzahlen in der Hauptansicht.
4. Nutzerinteraktionen (Filter, Vergleich) führen zu einer erneuten Datenabfrage oder Filterung im Client.

### API-Nutzung
**Route:** `/results`

**Methode:** `GET`

**Parameter:**
- `runType` – Pflichtparameter (z. B. "pinned", "unpinned")
- `metric` – Optional (z. B. "latency_mean", "variance")

**Antwortstruktur (Beispiel):**
```json
[
  {
    "run_id": "abc123",
    "run_type": "pinned",
    "metrics": {
      "latency_mean": 10.5,
      "variance": 0.3,
      "stability_index": 0.98
    }
  }
]
```

---

## Installation & Nutzung

### Voraussetzungen
- Moderner Browser (Chrome, Firefox, Safari, Edge)
- Lokaler oder entfernter Webserver mit Zugriff auf `/results`-Endpoint

### Lokale Entwicklung
1. Repository klonen:
   ```bash
   git clone <repository-url>
   cd results_visualization
   ```
2. Webserver starten (z. B. via VS Code Live Server oder Node.js/Express).
3. Hauptseite im Browser öffnen: `index.html`

### Produktion
- Das Projekt kann als statische Webanwendung bereitgestellt werden.
- Die API muss unter `/results` erreichbar sein.

---

## Benutzeroberfläche

### Komponentenübersicht
- **Summary Cards:** Zeigen aggregierte Kennzahlen an.
- **Filtersektion:** Auswahl von Run-Typ und Metrik.
- **Diagramme:** Interaktive Visualisierung mittels `visualization.js`.

### Responsives Verhalten
- Mobile-first Design.
- Zwei-Spalten-Layout ab mittleren Bildschirmgrößen.

---

## Sicherheit & Datenschutz
- Es werden keine personenbezogenen Daten verarbeitet.
- Die Anwendung kommuniziert ausschließlich mit `/results` zur Messdatenabfrage.

---

## Lizenz & Copyright
© 2026 Donau2Space.de