66 lines
No EOL
2.9 KiB
Markdown
66 lines
No EOL
2.9 KiB
Markdown
# Interferenz-Visualisierung – Web-Frontend
|
||
|
||
## Ziel der Anwendung
|
||
Dieses Web-Frontend dient der dynamischen Visualisierung und Analyse von Interferenzmessdaten, um die Optimierung von Pool-Isolationen nachvollziehbar zu machen. Es unterstützt die Untersuchung der Zusammenhänge zwischen Messläufen und Leistungsmetriken (z. B. Tail-Latenz, Bandbreite) und stellt Veränderungen visuell dar.
|
||
|
||
## Hauptfunktionen
|
||
- **Dynamische Interferenzkurve:** Darstellung der Metrikverläufe in Echtzeit.
|
||
- **API-Datenanbindung:** Abruf von Messdaten über den Endpunkt `/visualization` (GET).
|
||
- **Filterfunktionen:** Auswahl spezifischer Runs (z. B. 31b, 32, 33, 34) und zugehöriger Metriken.
|
||
- **Visualisierung von Differenzen:** Gegenüberstellung von Tail-Latenz und Bandbreitenabweichungen.
|
||
- **Tooltip-Interaktion:** Anzeige von Detailwerten bei Maus- oder Touch-Hover.
|
||
- **Responsive Darstellung:** Automatische Anpassung der Diagrammgrößen an Desktop und Mobilgeräte.
|
||
|
||
## Datenfluss und Architektur
|
||
1. Beim Start wird die Anwendung initialisiert und ruft über die API `/visualization` die verfügbaren Messdaten ab.
|
||
2. Die Antwort enthält strukturierte JSON-Daten in der Form:
|
||
```json
|
||
{
|
||
"runs": ["31b", "32", "33", "34"],
|
||
"metrics": ["tail", "band_width"],
|
||
"data": [
|
||
{"run": "31b", "tail": 17, "band_width": -3},
|
||
{"run": "32", "tail": 19, "band_width": 2}
|
||
]
|
||
}
|
||
```
|
||
3. Das JS-Modul verarbeitet diese Rohdaten und aktualisiert die Chart-Komponente.
|
||
4. Benutzerinteraktionen (Filterauswahl oder Hover) führen zu einer dynamischen Aktualisierung der Grafik.
|
||
|
||
## Technische Struktur
|
||
```
|
||
/project-root
|
||
├─ index.html # Basisaufbau der Anwendung
|
||
├─ css/
|
||
│ ├─ style.css # Layout, Farben und responsive Design-Regeln
|
||
├─ js/
|
||
│ ├─ api.js # Anbindung an /visualization API, Fetch-Handler
|
||
│ ├─ chart.js # Rendering und Update der Diagramme
|
||
│ ├─ app.js # Einstiegspunkt, orchestriert Datenfluss und UI
|
||
├─ README.md # Dokumentation der Anwendung
|
||
```
|
||
|
||
## API-Verwendung
|
||
**Endpunkt:** `/visualization`
|
||
|
||
**Methode:** `GET`
|
||
|
||
**Parameter:**
|
||
- `run`: Filtert die Messdaten nach spezifischem Run.
|
||
- `metric`: Gibt an, welche Metrik dargestellt werden soll (z. B. `tail`, `band_width`).
|
||
|
||
**Zweck:** Liefert strukturierte Interferenz- und Leistungsdaten für die grafische Darstellung.
|
||
|
||
## Nutzung
|
||
1. Projekt im lokalen Webserver-Kontext starten.
|
||
2. Browser öffnen und `index.html` aufrufen.
|
||
3. Messlauf und Metrik auswählen.
|
||
4. Diagramm aktualisiert sich automatisch entsprechend der API-Daten.
|
||
|
||
## Responsiveness und Accessibility
|
||
- Darstellung ist **mobile-first** gestaltet.
|
||
- Farbkontraste und ARIA-Attribute sind beachtet.
|
||
- Die interaktive Chart-Komponente unterstützt Eingaben per Maus und Touch.
|
||
|
||
## Lizenz und Copyright
|
||
© 2026 Donau2Space.de |