90 lines
No EOL
2.5 KiB
Markdown
90 lines
No EOL
2.5 KiB
Markdown
# 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 |