101 lines
3.8 KiB
Markdown
101 lines
3.8 KiB
Markdown
# Laufzeit-Analyse- und Visualisierungs-Tool
|
||
|
||
## Ziel der Anwendung
|
||
Dieses Web-Tool dient der **Analyse und Visualisierung von Laufzeitdaten** unterschiedlicher Runs. Es ermöglicht eine präzisere Bewertung von Timing-Entscheidungen durch interaktive Diagramme, eine klare 2×2‑Matrix-Darstellung sowie flexible Filtermöglichkeiten.
|
||
|
||
---
|
||
|
||
## Hauptfunktionen
|
||
- **Visualisierung von Δt‑Verteilungen:** Darstellung der zeitlichen Differenzen zwischen Runs als Histogramm oder Scatterplot.
|
||
- **Analyse-Matrix (2×2):** Übersichtliche Zuordnung von Fällen nach *pinned / unpinned* und *Δt ≥ 0 / Δt < 0*.
|
||
- **Filter:** Auswahl bestimmter Runs per `policy_hash` oder `Run‑Nummer`.
|
||
- **Interaktive Charts:** Darstellung von Trends und Metriken (z. B. Warn‑ und Unknown‑Rate) mit Live‑Updates.
|
||
- **API‑gestützte Datenerfassung:** Automatischer Abruf aggregierter Laufdaten über `/api/data`.
|
||
- **Responsives Dashboard:** Anpassungsfähiges Layout für Desktop und Mobile.
|
||
- **Analyse‑Zusammenfassung:** Kompakte Darstellung der wichtigsten Erkenntnisse aus dem aktuellen Datensatz.
|
||
|
||
---
|
||
|
||
## Architektur & Aufbau
|
||
|
||
Die Anwendung besteht aus drei zentralen Bestandteilen:
|
||
|
||
### 1. **HTML (Basisgerüst)**
|
||
Strukturiert das Dashboard mit Komponenten wie Filter‑Bereich, Matrix‑Viewer, Chart‑Container und Analyse‑Summary.
|
||
|
||
### 2. **CSS (Layout & Design)**
|
||
Verwaltet das responsive Erscheinungsbild auf Basis eines flexiblen Grid‑Layouts.
|
||
CSS‑Variablen steuern Farben, Abstände und Schrifthöhen, um Einheitlichkeit über das gesamte Dashboard sicherzustellen.
|
||
|
||
### 3. **JavaScript (Logik & Interaktivität)**
|
||
Modularisiert in folgende Dateien:
|
||
|
||
- `js/api.js` – Fetch‑Logik für die REST‑Route `/api/data`.
|
||
- `js/dataLoader.js` – Berechnung und Aufbereitung der Metriken aus den API‑Daten.
|
||
- `js/chartRenderer.js` – Visualisierung der vorbereiteten Daten in interaktiven Diagrammen.
|
||
- `js/app.js` – Einstiegspunkt; regelt Datenfluss, Initialisierung und Benutzerinteraktion.
|
||
|
||
---
|
||
|
||
## Datenfluss & API‑Nutzung
|
||
|
||
Die Datenpipeline folgt einem klaren Ablauf:
|
||
|
||
1. **Abruf:** `app.js` ruft mit `fetch` die Daten von `/api/data` ab.
|
||
2. **Verarbeitung:** `dataLoader` bereitet die Daten auf, berechnet Kennzahlen und verteilt sie an die Visualisierungs‑Module.
|
||
3. **Darstellung:** `chartRenderer` aktualisiert dynamisch die Diagramme und Matrices im Dashboard.
|
||
|
||
### API‑Route `/api/data`
|
||
**Methode:** `GET`
|
||
|
||
**Parameter (optional):**
|
||
- `run`
|
||
- `policy_hash`
|
||
- `filter_pinned`
|
||
|
||
**Antwortstruktur:** JSON‑Array von Objekten mit:
|
||
```json
|
||
{
|
||
"run_id": 42,
|
||
"policy_hash": "abc123",
|
||
"pinned_status": true,
|
||
"delta_t": -0.12,
|
||
"warn_rate": 0.04,
|
||
"unknown_rate": 0.01
|
||
}
|
||
```
|
||
|
||
Diese Daten dienen der Erzeugung der Δt‑Verteilung und der statistischen Auswertung in der 2×2‑Matrix.
|
||
|
||
---
|
||
|
||
## Nutzung & Bedienung
|
||
|
||
1. **Start:** Öffnen der Hauptseite im Browser.
|
||
2. **Filter setzen:** Auswahl nach gewünschtem Run oder Policy‑Hash.
|
||
3. **Analyse starten:** Die Charts und die Matrix aktualisieren sich automatisch.
|
||
4. **Ergebnisse interpretieren:** Dashboard‑Summary zeigt zentral aggregierte Kennzahlen.
|
||
|
||
Das Tool arbeitet vollständig client‑seitig und ruft Daten ausschließlich über die definierte API ab.
|
||
|
||
---
|
||
|
||
## Responsives Verhalten
|
||
|
||
Das Dashboard verwendet ein flexibles Layout, das sich an Bildschirmbreiten anpasst:
|
||
- **Mobile:** vertikal gestapelte Module.
|
||
- **Desktop:** nebeneinanderliegende Analysebereiche mit skalierenden Diagrammen.
|
||
|
||
---
|
||
|
||
## Erweiterungshinweise
|
||
|
||
- Neue Metriken können in `dataLoader.js` berechnet und direkt an `chartRenderer` übergeben werden.
|
||
- Zusätzliche Filteroptionen können im HTML‑Filterbereich ergänzt werden; die Event‑Verarbeitung erfolgt zentral über `app.js`.
|
||
- Weitere API‑Routen lassen sich analog zu `/api/data` integrieren, solange sie JSON liefern.
|
||
|
||
---
|
||
|
||
## Lizenz & Copyright
|
||
|
||
© 2026 Donau2Space.de
|