Results Visualization – Zeitmessungs-Dashboard

Überblick

Diese Webanwendung dient zur Visualisierung aggregierter Zeitmessungsdaten, die über die API-Route /results bereitgestellt werden. Ziel ist es, Stabilität und Vergleichbarkeit zwischen verschiedenen Messläufen (Runs) übersichtlich darzustellen.

Das Interface ermöglicht:

Vergleich von pinned und unpinned Runs
Filterung nach Run-Typ, Metrik oder Zeitabschnitt
Anzeige von Kennzahlen wie Latenzmittelwert, Varianz und Stabilitätsindex
Interaktive Aktualisierung der Diagramme bei Nutzerinteraktion
Responsive Darstellung auf Desktop- und Tablet-Geräten

Architektur

Datenfluss

api.js ruft beim Laden die Route /results auf und empfängt aggregierte JSON-Daten.
Diese Daten werden an visualization.js übergeben.
visualization.js rendert interaktive Diagramme und Kennzahlen in der Hauptansicht.
Nutzerinteraktionen (Filter, Vergleich) führen zu einer erneuten Datenabfrage oder Filterung im Client.

API-Nutzung

Route: /results

Methode: GET

Parameter:

runType – Pflichtparameter (z. B. "pinned", "unpinned")
metric – Optional (z. B. "latency_mean", "variance")

Antwortstruktur (Beispiel):

[
  {
    "run_id": "abc123",
    "run_type": "pinned",
    "metrics": {
      "latency_mean": 10.5,
      "variance": 0.3,
      "stability_index": 0.98
    }
  }
]

Installation & Nutzung

Voraussetzungen

Moderner Browser (Chrome, Firefox, Safari, Edge)
Lokaler oder entfernter Webserver mit Zugriff auf /results-Endpoint

Lokale Entwicklung

Repository klonen:

git clone <repository-url>
cd results_visualization

Webserver starten (z. B. via VS Code Live Server oder Node.js/Express).
Hauptseite im Browser öffnen: index.html

Produktion

Das Projekt kann als statische Webanwendung bereitgestellt werden.
Die API muss unter /results erreichbar sein.

Benutzeroberfläche

Komponentenübersicht

Summary Cards: Zeigen aggregierte Kennzahlen an.
Filtersektion: Auswahl von Run-Typ und Metrik.
Diagramme: Interaktive Visualisierung mittels visualization.js.

Responsives Verhalten

Mobile-first Design.
Zwei-Spalten-Layout ab mittleren Bildschirmgrößen.

Sicherheit & Datenschutz

Es werden keine personenbezogenen Daten verarbeitet.
Die Anwendung kommuniziert ausschließlich mit /results zur Messdatenabfrage.

2.5 KiB Raw Blame History Unescape Escape