65 lines
2.3 KiB
Markdown
65 lines
2.3 KiB
Markdown
# Data Visualization für Replikationsanalyse – Experiment 31b
|
||
|
||
## Übersicht
|
||
Diese Webanwendung visualisiert und analysiert die Replikationsdaten des Experiments **31b**. Hauptziel ist es, Performance-Trends und Engpässe zu erkennen, indem **Bandbreite** und **retry_tailp99** interaktiv gegenüberstellt werden.
|
||
|
||
## Hauptfunktionen
|
||
- **Interaktive Darstellung** der Replikationsläufe in dynamischen Diagrammen.
|
||
- **Vergleich** zwischen Runs, um Änderungen in Bandbreite und retry_tailp99 zu erkennen.
|
||
- **Filter** nach Segmenttypen: `pinned`, `unpinned`, `near-expiry`.
|
||
- **Zeitbasierte Analyse** der Metriken und Verlaufstrends.
|
||
- **Erkennung von Ausreißern** oder Anomalien mittels visueller Hervorhebung.
|
||
- **Responsives Dashboard**, optimiert für Desktop und Mobile.
|
||
|
||
## Datenfluss
|
||
1. Die Anwendung ruft Replikationsdaten über den API-Endpunkt `/run-data` ab.
|
||
2. Modul **api.js**: Verarbeitet den Request (`GET /run-data?run_id=<id>`) und gibt die JSON-Daten zurück.
|
||
3. Modul **visualization.js**: Stellt Metriken grafisch dar und synchronisiert die Visualisierung mit Filtereingaben.
|
||
4. UI-Komponenten aktualisieren den DOM in Echtzeit, sobald neue Daten geladen werden.
|
||
|
||
## API-Referenz
|
||
**Endpunkt:** `/run-data`
|
||
|
||
- **Methode:** GET
|
||
- **Parameter:** `run_id`
|
||
- **Antwort:**
|
||
```json
|
||
{
|
||
"run_id": "string",
|
||
"metrics": {
|
||
"bandwidth": [ ... ],
|
||
"retry_tailp99": [ ... ]
|
||
},
|
||
"segments": [ ... ]
|
||
}
|
||
```
|
||
- **Verwendung:** Wird im Modul `js/api.js` aufgerufen, um Daten an `js/visualization.js` weiterzugeben.
|
||
|
||
## Ordnerstruktur
|
||
```
|
||
project_root/
|
||
├── index.html
|
||
├── css/
|
||
│ └── styles.css
|
||
├── js/
|
||
│ ├── api.js
|
||
│ ├── visualization.js
|
||
│ └── ui.js
|
||
└── README.md
|
||
```
|
||
|
||
## Verwendung
|
||
1. **Setup:** Projektdateien auf einen Webserver oder lokalen Entwicklungsserver legen.
|
||
2. **Start:** `index.html` im Browser öffnen.
|
||
3. **Interaktion:**
|
||
- Run-ID im Interface auswählen.
|
||
- Daten werden automatisch über `/run-data` abgerufen.
|
||
- Diagramme, Tabellen und Filter reagieren dynamisch.
|
||
|
||
## Technische Hinweise
|
||
- **Keine externen Ressourcen** (Bilder, Icons, Fonts) werden genutzt.
|
||
- **Moderne JS-Features (ES6+)** werden in allen Modulen eingesetzt.
|
||
- Das Dashboard ist **barrierearm** und **responsiv** aufgebaut.
|
||
|
||
## Copyright
|
||
© 2026 Donau2Space.de
|