# 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.