68 lines
No EOL
2.5 KiB
Markdown
68 lines
No EOL
2.5 KiB
Markdown
# Experiment Results Visualization
|
|
|
|
## Zweck
|
|
|
|
Dieses Modul stellt ein webbasiertes Dashboard bereit, mit dem die Ergebnisse von Experiment-Runs analysiert und verglichen werden können. Besonderes Augenmerk liegt auf der Gegenüberstellung sogenannter **'pinned'** und **'unpinned'** Runs, um Performance- und Stabilitätsunterschiede sichtbar zu machen.
|
|
|
|
## Hauptfunktionen
|
|
|
|
- Visualisierung der *pinned* vs *unpinned* Resultate in interaktiven Diagrammen
|
|
- Dynamische Filterung und Auswahl einzelner Runs
|
|
- Anzeige statistischer Kennzahlen (p95, p99, Korrelationen)
|
|
- Vergleichsansicht mit wählbarem kompakten oder breitem Layout
|
|
- Automatische Aktualisierung durch regelmäßige API-Abfragen
|
|
- Responsive Darstellung für Desktop und Tablet
|
|
|
|
## Datenfluss & Architektur
|
|
|
|
1. **API-Aufruf:** Das Frontend lädt die Datensätze über den Endpunkt `/results` (GET-Anfrage).
|
|
2. **Verarbeitung:** Die empfangenen JSON-Daten enthalten Arrays für `pinned` und `unpinned` Runs.
|
|
3. **Darstellung:** JavaScript-Module analysieren die Werte, berechnen Statistiken und visualisieren diese in Diagrammen.
|
|
4. **Interaktion:** Nutzer können einzelne Runs filtern, wodurch das Dashboard und die Visualisierungen dynamisch aktualisiert werden.
|
|
|
|
## API-Integration
|
|
|
|
**Endpunkt:** `/results`
|
|
**Methode:** `GET`
|
|
**Erwartete Antwort:**
|
|
|
|
```json
|
|
{
|
|
"pinned": [ ... ],
|
|
"unpinned": [ ... ]
|
|
}
|
|
```
|
|
|
|
**Verwendung in:** `js/api.js`
|
|
**Zweck:** Lädt alle Resultate der Experiment-Runs zur Darstellung.
|
|
|
|
## Ordnerstruktur
|
|
|
|
```
|
|
experiment_results_visualization/
|
|
│
|
|
├── index.html # Einstiegspunkt des Dashboards
|
|
├── css/
|
|
│ ├── base.css # Grundlayout und Variablen
|
|
│ ├── components.css # Diagramm- und Tabellenstile
|
|
│ └── responsive.css # Anpassungen für verschiedene Viewports
|
|
│
|
|
├── js/
|
|
│ ├── api.js # Lädt Ergebnisse von der API /results
|
|
│ ├── charts.js # Darstellung von Diagrammen für pinned/unpinned Daten
|
|
│ ├── filters.js # UI-Logik für Filter und Run-Auswahl
|
|
│ └── stats.js # Berechnung von Kennzahlen (p95/p99, Korrelationen)
|
|
│
|
|
└── README.md # Projektdokumentation
|
|
```
|
|
|
|
## Technische Hinweise
|
|
|
|
- Die Anwendung ist vollständig clientseitig aufgebaut und nutzt native ES6-Module.
|
|
- Alle Requests an die API erfolgen asynchron (async/await, fetch).
|
|
- Keine externen Bibliotheken oder Assets erforderlich.
|
|
- Anpassung an unterschiedliche Bildschirmgrößen ist Teil des Kernlayouts.
|
|
|
|
## Copyright
|
|
|
|
© 2026 Donau2Space.de |