85 lines
No EOL
3 KiB
Markdown
85 lines
No EOL
3 KiB
Markdown
# Resonanzband Analyse – Data Visualization
|
||
|
||
## Überblick
|
||
Dieses Webinterface dient der interaktiven Visualisierung von Resonanzband-Analyseergebnissen und den Auswirkungen verschiedener Scheduling-Mechanismen. Nutzer können Metriken und Ausreißer grafisch untersuchen, Filter anwenden und dynamisch neue Ergebnisse laden.
|
||
|
||
## Hauptfunktionen
|
||
- **Diagrammgestützte Darstellung** von Resonanzband-Metriken, einschließlich Ausreißern und Streuungen.
|
||
- **Dynamische Nachladung der Analyseergebnisse** über die API-Route `/results`.
|
||
- **Filterung** nach Laufnummern (`run_id`) und Parametern.
|
||
- **Interaktive Diagramme** mit Tooltip-Details zu Messpunkten.
|
||
- **Responsives Layout** mit getrennter Ansicht für Filter und Visualisierungen.
|
||
|
||
## Datenfluss
|
||
1. Beim Laden der Seite wird die Anwendung initialisiert.
|
||
2. Über einen GET-Request an `/results` werden Analyseergebnisse abgerufen.
|
||
3. Die Datenstruktur enthält Felder:
|
||
```json
|
||
{
|
||
"run_id": string,
|
||
"band_center": number,
|
||
"band_width_p10_p90": [number, number],
|
||
"max_outlier": number,
|
||
"overhead_ms": number
|
||
}
|
||
```
|
||
4. Die Daten werden clientseitig verarbeitet und in Diagrammkomponenten gerendert.
|
||
5. Filteränderungen führen zu neuen API-Aufrufen und aktualisieren die Visualisierung.
|
||
|
||
## API-Nutzung
|
||
**Route:** `/results`
|
||
|
||
**Methode:** `GET`
|
||
|
||
**Optionale Parameter:**
|
||
- `run_id`: Filtert nach einer konkreten Laufnummer.
|
||
- `parameter_filter`: Filtert nach spezifischen Parametern der Analyse.
|
||
|
||
**Antwort:**
|
||
Array von Objekten gemäß obigem Datenschema.
|
||
|
||
Beispiel:
|
||
```json
|
||
[
|
||
{
|
||
"run_id": "r0037",
|
||
"band_center": 102.4,
|
||
"band_width_p10_p90": [98.0, 106.8],
|
||
"max_outlier": 110.3,
|
||
"overhead_ms": 4.8
|
||
}
|
||
]
|
||
```
|
||
|
||
## Architektur & Struktur
|
||
```
|
||
root/
|
||
├── index.html # Haupteinstiegspunkt der Anwendung
|
||
├── css/
|
||
│ ├── layout.css # Styles für Layout, Responsiveness
|
||
│ └── components.css # Komponenten-spezifische Styles
|
||
├── js/
|
||
│ ├── api.js # Kommunikation mit /results-Endpoint
|
||
│ ├── charts.js # Diagramm-Rendering & Interaktivität
|
||
│ └── app.js # Anwendungseintrittspunkt & Datenflusssteuerung
|
||
└── README.md # Projektbeschreibung, Nutzung und Hinweise
|
||
```
|
||
|
||
## Installation & Nutzung
|
||
1. Projektdateien in einen Webserver-Ordner legen (z. B. lokal via `http-server`).
|
||
2. Öffnen Sie `index.html` im Browser.
|
||
3. Daten werden automatisch über `/results` geladen.
|
||
4. Filter können über die Benutzeroberfläche eingestellt werden.
|
||
|
||
## Entwicklungsumgebung
|
||
- **Frontend:** HTML5, CSS3 (BEM-Style, mobile-first), JavaScript (ES6+)
|
||
- **API:** JSON-basierte REST-Route `/results`
|
||
- **Kompatibilität:** Aktuelle Versionen von Chrome, Firefox, Edge
|
||
|
||
## Barrierefreiheit
|
||
- ARIA-Labels für alle interaktiven Elemente
|
||
- Fokussteuerung über Tastatur möglich
|
||
- Farbkontraste geprüft nach WCAG-Standard
|
||
|
||
## Lizenz & Copyright
|
||
© 2026 Donau2Space.de – Alle Rechte vorbehalten. |