Add results_visualization/README.md

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