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

Beim Laden der Seite wird die Anwendung initialisiert.
Über einen GET-Request an /results werden Analyseergebnisse abgerufen.

Die Datenstruktur enthält Felder:

{
  "run_id": string,
  "band_center": number,
  "band_width_p10_p90": [number, number],
  "max_outlier": number,
  "overhead_ms": number
}

Die Daten werden clientseitig verarbeitet und in Diagrammkomponenten gerendert.
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:

[
  {
    "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

Projektdateien in einen Webserver-Ordner legen (z. B. lokal via http-server).
Öffnen Sie index.html im Browser.
Daten werden automatisch über /results geladen.
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

3 KiB Raw Permalink Blame History Unescape Escape