diff --git a/results_visualization/README.md b/results_visualization/README.md new file mode 100644 index 0000000..e3d68e3 --- /dev/null +++ b/results_visualization/README.md @@ -0,0 +1,69 @@ +# P99 Spike Analysis Visualization + +## Zielsetzung +Dieses Web-Dashboard dient der Visualisierung und Analyse von P99-Spikes innerhalb eines Systems. Es zeigt zeitliche Muster sowie mögliche Zusammenhänge mit Migration-Events, Clocksource-Wechseln und CPU-bezogenen Auffälligkeiten. Ziel ist es, Performance-Ausreißer schnell nachvollziehbar und interaktiv analysierbar zu machen. + +## Kernfunktionen +- **Zeitreihen- und Scatter-Plots** zur Visualisierung der Spikedaten +- **Filterfunktionen** nach Event-Typ (Migration, Clocksource-Wechsel, CPU-ID) und Zeitfenster +- **Interaktive Selektion** einzelner Spikes zur Anzeige detaillierter Werte +- **Statistische Kennzahlen** wie Median, P99 und Δ-Tail +- **Responsives Interface** für Desktop und mobile Geräte + +## Datenfluss +1. Die Anwendung ruft über den Endpoint `/api/spike_data` die analysierten P99-Spikedaten (JSON) ab. +2. Die Daten werden clientseitig aufbereitet und mithilfe einer Chart-Komponente dargestellt. +3. Benutzer wählen Filter, um die dargestellten Daten einzugrenzen oder neue Requests zu senden. +4. Änderungen werden dynamisch gerendert, ohne die Seite neu zu laden. + +## API-Integration +### Endpoint +`GET /api/spike_data` + +**Erwartete Parameter:** +- `time_range` – Zeitbereich für die Abfrage +- `event_type` – Typ des Performance-Events (z. B. Migration, Clocksource-Wechsel, CPU) +- `cpu_id` – CPU-Identifikator zur Filterung + +**Antwortstruktur:** +```json +[ + { + "timestamp": 1732830000, + "type": "migration", + "cpu": 3, + "value": 19.2 + } +] +``` + +Die JavaScript-Logik für den API-Aufruf ist im Modul `js/api.js` implementiert. + +## Ordnerstruktur +``` +/ (Projektwurzel) +│ +├── index.html # Einstiegspunkt der Anwendung +├── css/ +│ └── style.css # Zentrales Layout und Responsive-Design +├── js/ +│ ├── api.js # Kommunikation mit /api/spike_data +│ ├── charts.js # Darstellung der Spikedaten mittels Charts +│ └── app.js # Initialisierung, UI-Logik und Event-Handling +└── README.md # Projektdokumentation +``` + +## Nutzung +1. Projektdateien lokal oder auf einem Webserver bereitstellen. +2. Sicherstellen, dass der API-Endpunkt `/api/spike_data` erreichbar ist. +3. `index.html` im Browser öffnen. +4. Über die verfügbaren Filter Datenbereiche oder Eventtypen auswählen. +5. Diagramme und Kennzahlen werden automatisch aktualisiert. + +## Technische Hinweise +- Es werden keine Bild- oder Icon-Ressourcen geladen. +- Die Anwendung ist vollständig clientseitig, abgesehen vom API-Request. +- Defensives Error-Handling sorgt für Stabilität auch bei fehlerhaften API-Antworten. + +## Lizenz und Rechte +© 2026 Donau2Space.de