104 lines
No EOL
2.8 KiB
Markdown
104 lines
No EOL
2.8 KiB
Markdown
# Max-Outlier Visualisierung
|
|
|
|
## Überblick
|
|
Die **Max-Outlier-Visualisierungsoberfläche** dient zur Darstellung und Analyse von Ergebnissen aus CI-Parallelitätstests. Sie zeigt statistische Extrema (p95, p99) und Outlier-Tendenzen grafisch und tabellarisch an, um Leistungsabweichungen zwischen Testläufen zu identifizieren.
|
|
|
|
---
|
|
|
|
## Zielsetzung
|
|
- Interaktive Ansicht von Max-Outlier-Ergebnissen
|
|
- Filterung nach **Lauf-ID**, **Parallelitätsstufe** oder **Stratum**
|
|
- Visualisierung der **p95/p99-Verteilungen** und Outlier-Tendenzen
|
|
- Export als **CSV** oder **JSON**
|
|
- Automatisches Datenladen über die API `/max-outlier-results`
|
|
- Responsives Layout für Desktop und mobile Nutzung
|
|
|
|
---
|
|
|
|
## Datenfluss
|
|
1. Beim Laden der Anwendung wird automatisiert die API `/max-outlier-results` aufgerufen.
|
|
2. Der Rückgabewert ist ein **Array von Analyseobjekten** mit folgenden Feldern:
|
|
```json
|
|
{
|
|
"run_id": "string",
|
|
"parallelism": "number",
|
|
"stratum": "string",
|
|
"delta_t": "number",
|
|
"p95": "number",
|
|
"p99": "number",
|
|
"retry_status": "string"
|
|
}
|
|
```
|
|
3. Diese Daten werden in einer **Tabelle** und einer **Chart-Komponente** dargestellt.
|
|
4. Filteroptionen und Exporte reagieren dynamisch auf Nutzerinteraktion.
|
|
|
|
---
|
|
|
|
## API-Integration
|
|
**Endpunkt:** `/max-outlier-results`
|
|
|
|
**Methode:** `GET`
|
|
|
|
**Optionale Parameter:**
|
|
- `run_id` — Filtert nach Lauf-ID
|
|
- `parallelism` — Filtert nach Parallelitätsstufe
|
|
- `stratum` — Filtert nach Stratum
|
|
|
|
**Beispiel-Antwort:**
|
|
```json
|
|
[
|
|
{
|
|
"run_id": "r123",
|
|
"parallelism": 8,
|
|
"stratum": "A",
|
|
"delta_t": 120,
|
|
"p95": 830,
|
|
"p99": 1120,
|
|
"retry_status": "stable"
|
|
}
|
|
]
|
|
```
|
|
|
|
**Verwendung im Frontend:**
|
|
- Der Abruf erfolgt über `js/api.js` mittels **fetch()** oder **async/await**.
|
|
- Die Darstellung und Filterung werden durch modulare Komponenten koordiniert.
|
|
|
|
---
|
|
|
|
## Ordnerstruktur
|
|
```
|
|
/
|
|
├── index.html
|
|
├── css/
|
|
│ ├── base.css
|
|
│ └── responsive.css
|
|
├── js/
|
|
│ ├── app.js
|
|
│ ├── api.js
|
|
│ ├── table.js
|
|
│ ├── chart.js
|
|
│ └── export.js
|
|
└── README.md
|
|
```
|
|
|
|
---
|
|
|
|
## Nutzungsanleitung
|
|
1. Öffne `index.html` im Browser oder lokalem Entwicklungsserver.
|
|
2. Die Anwendung lädt automatisch Daten mittels `/max-outlier-results`.
|
|
3. Verwende die Filterleisten zur Eingrenzung nach Lauf-ID, Parallelität und Stratum.
|
|
4. Navigiere zwischen **Tabelle** und **Diagrammansicht**.
|
|
5. Exportiere aktuelle Ansicht per Button als **CSV oder JSON**.
|
|
|
|
---
|
|
|
|
## Entwicklungshinweise
|
|
- Nutze **ES6+** Syntax und modulare JS-Struktur.
|
|
- Verwende defensive Programmierung beim Umgang mit API-Daten.
|
|
- Stelle sicher, dass Responsive Breakpoints richtig greifen.
|
|
- Keine externen Ressourcen oder Logos einbinden.
|
|
|
|
---
|
|
|
|
## Lizenz & Copyright
|
|
© 2026 Donau2Space.de |