From e8801c3de7594713d1c98d7606841c7e50dcbb70 Mon Sep 17 00:00:00 2001
From: Mika <kontakt@donau2space.de>
Date: Mon, 12 Jan 2026 11:39:18 +0000
Subject: [PATCH] Add spike_visualizer/index.html

---
 spike_visualizer/index.html | 73 +++++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 spike_visualizer/index.html
diff --git a/spike_visualizer/index.html b/spike_visualizer/index.html
new file mode 100644
index 0000000..6c74d6a
--- /dev/null
+++ b/spike_visualizer/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CPU Spike Visualizer</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <header class="app-header spike-visualizer-header" id="app-header">
+    <h1>CPU Spike Visualizer</h1>
+    <div class="global-filter">
+      <input type="text" id="global-search" placeholder="Filter eingeben..." aria-label="Globaler Filter">
+    </div>
+  </header>
+
+  <main>
+    <aside class="filter-panel" id="filter-panel">
+      <h2>Filter</h2>
+      <form id="filter-form">
+        <label for="cpu-id">CPU-ID:</label>
+        <input type="number" id="cpu-id" name="cpu_id" min="0">
+
+        <label for="reorder-range">Reorder Score (Min - Max):</label>
+        <input type="number" id="reorder-min" name="reorder_min" step="0.1" placeholder="Min">
+        <input type="number" id="reorder-max" name="reorder_max" step="0.1" placeholder="Max">
+
+        <label for="time-range">Zeitbereich:</label>
+        <input type="datetime-local" id="start-time" name="start_time">
+        <input type="datetime-local" id="end-time" name="end_time">
+
+        <button type="submit">Anwenden</button>
+      </form>
+    </aside>
+
+    <section class="chart-container d3-chart" id="main-chart">
+      <h2>Interaktive CPU-Spike-Visualisierung</h2>
+      <div id="chart-area"></div>
+    </section>
+
+    <div class="metric-summary" id="metric-summary">
+      <h3>Metrik-Zusammenfassung</h3>
+      <ul>
+        <li>Anzahl Spikes: <span id="metric-total">–</span></li>
+        <li>Durchschnittlicher reorder_score: <span id="metric-avg-reorder">–</span></li>
+      </ul>
+    </div>
+
+    <table class="spike-table" id="spike-table">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>CPU-ID</th>
+          <th>Timestamp</th>
+          <th>Reorder Score</th>
+          <th>Publish Rate</th>
+          <th>Migration</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- Dynamische Datenzeilen -->
+      </tbody>
+    </table>
+  </main>
+
+  <footer class="app-footer" id="app-footer">
+    <p>© 2026 Donau2Space.de</p>
+  </footer>
+
+  <script src="js/api.js"></script>
+  <script src="js/app.js"></script>
+</body>
+</html>
\ No newline at end of file
