Add 2_interference_visualization/js/chart.js

2_interference_visualization/js/chart.js

@@ -0,0 +1,117 @@
+/* global Chart */
+
+/**
+ * @file js/chart.js
+ * @description Rendert und aktualisiert das Interferenz-Diagramm basierend auf geladenen Metrikdaten.
+ * @module chart_rendering
+ */
+
+let interferenceChart = null;
+
+/**
+ * Erstellt oder rendert das Interferenz-Diagramm.
+ *
+ * @param {HTMLCanvasElement} canvasElement - Canvas-Element, in dem das Diagramm gerendert wird.
+ * @param {Array<Object>} data - Array von Messdatenobjekten, z. B. [{ run: '31b', tail: 17, band_width: -3 }, ...]
+ */
+export function renderInterferenceChart(canvasElement, data) {
+  if (!canvasElement || !Array.isArray(data)) return;
+
+  const runs = data.map(d => d.run);
+  const tailLatencies = data.map(d => d.tail);
+  const bandWidths = data.map(d => d.band_width);
+
+  const ctx = canvasElement.getContext('2d');
+
+  if (interferenceChart) {
+    interferenceChart.destroy();
+  }
+
+  interferenceChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: runs,
+      datasets: [
+        {
+          label: 'Tail Latency',
+          data: tailLatencies,
+          borderColor: 'rgba(75, 192, 192, 1)',
+          backgroundColor: 'rgba(75, 192, 192, 0.2)',
+          tension: 0.3,
+          pointHoverRadius: 6,
+          pointHoverBackgroundColor: 'rgba(75, 192, 192, 1)'
+        },
+        {
+          label: 'Bandwidth Δ',
+          data: bandWidths,
+          borderColor: 'rgba(255, 99, 132, 1)',
+          backgroundColor: 'rgba(255, 99, 132, 0.2)',
+          tension: 0.3,
+          pointHoverRadius: 6,
+          pointHoverBackgroundColor: 'rgba(255, 99, 132, 1)'
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: {
+        mode: 'index',
+        intersect: false
+      },
+      plugins: {
+        tooltip: {
+          enabled: true,
+          mode: 'nearest',
+          callbacks: {
+            label: function(context) {
+              return `${context.dataset.label}: ${context.parsed.y}`;
+            }
+          }
+        },
+        legend: {
+          position: 'top',
+          labels: {
+            usePointStyle: true,
+            boxWidth: 6
+          }
+        }
+      },
+      scales: {
+        x: {
+          title: {
+            display: true,
+            text: 'Run ID'
+          }
+        },
+        y: {
+          title: {
+            display: true,
+            text: 'Metrikwert'
+          }
+        }
+      }
+    }
+  });
+}
+
+/**
+ * Aktualisiert die Daten des bestehenden Diagramms.
+ *
+ * @param {Array<Object>} newData - Neue Messwerte, die gerendert werden sollen.
+ */
+export function updateChartData(newData) {
+  if (!interferenceChart || !Array.isArray(newData)) return;
+
+  const runs = newData.map(d => d.run);
+  const tailLatencies = newData.map(d => d.tail);
+  const bandWidths = newData.map(d => d.band_width);
+
+  interferenceChart.data.labels = runs;
+  if (interferenceChart.data.datasets.length >= 2) {
+    interferenceChart.data.datasets[0].data = tailLatencies;
+    interferenceChart.data.datasets[1].data = bandWidths;
+  }
+
+  interferenceChart.update();
+}