Add data_visualization/js/chart.js

data_visualization/js/chart.js

@@ -0,0 +1,154 @@
+/* js/chart.js - Visualization Logic for Experiment 31 */
+
+/**
+ * @fileoverview Modul zur Darstellung interaktiver Diagramme für Bandbreite und Reaktionszeit.
+ * @module chart
+ * @requires Chart.js (muss im HTML global eingebunden werden)
+ */
+
+/**
+ * Rendert das Diagramm für Bandbreite.
+ * @param {Array<Object>} data - Ergebnisdaten aus /results.
+ * @returns {Chart | null} - Das erzeugte Chart.js-Objekt oder null bei Fehler.
+ */
+export function renderBandwidthChart(data) {
+  try {
+    const canvas = document.getElementById('bandwidthChart');
+    if (!canvas) return null;
+
+    const ctx = canvas.getContext('2d');
+
+    const labels = data.map(item => new Date(item.timestamp).toLocaleTimeString());
+    const values = data.map(item => item.band_width);
+
+    if (canvas._chartInstance) {
+      canvas._chartInstance.destroy();
+    }
+
+    const chart = new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels,
+        datasets: [
+          {
+            label: 'Bandbreite (MB/s)',
+            data: values,
+            backgroundColor: 'rgba(54, 162, 235, 0.2)',
+            borderColor: 'rgba(54, 162, 235, 1)',
+            borderWidth: 2,
+            tension: 0.25,
+            fill: true
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          x: {
+            title: {
+              display: true,
+              text: 'Zeitstempel'
+            }
+          },
+          y: {
+            title: {
+              display: true,
+              text: 'Bandbreite (MB/s)'
+            },
+            beginAtZero: true
+          }
+        },
+        plugins: {
+          legend: {
+            display: true,
+            labels: {
+              boxWidth: 20
+            }
+          }
+        }
+      }
+    });
+
+    canvas._chartInstance = chart;
+    return chart;
+  } catch (error) {
+    console.error('Fehler beim Rendern des Bandbreiten-Diagramms:', error);
+    return null;
+  }
+}
+
+/**
+ * Rendert das Diagramm für Reaktionszeit (retry_tail_p99).
+ * @param {Array<Object>} data - Ergebnisdaten aus /results.
+ * @returns {Chart | null} - Das erzeugte Chart.js-Objekt oder null bei Fehler.
+ */
+export function renderLatencyChart(data) {
+  try {
+    const canvas = document.getElementById('latencyChart');
+    if (!canvas) return null;
+
+    const ctx = canvas.getContext('2d');
+
+    const labels = data.map(item => item.parallelism);
+    const values = data.map(item => item.retry_tail_p99);
+
+    if (canvas._chartInstance) {
+      canvas._chartInstance.destroy();
+    }
+
+    const chart = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels,
+        datasets: [
+          {
+            label: 'retry_tail_p99 (ms)',
+            data: values,
+            backgroundColor: 'rgba(255, 99, 132, 0.2)',
+            borderColor: 'rgba(255, 99, 132, 1)',
+            borderWidth: 1
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          x: {
+            title: {
+              display: true,
+              text: 'Parallelisierung'
+            }
+          },
+          y: {
+            title: {
+              display: true,
+              text: 'retry_tail_p99 (ms)'
+            },
+            beginAtZero: true
+          }
+        },
+        plugins: {
+          legend: {
+            display: true
+          },
+          tooltip: {
+            enabled: true,
+            callbacks: {
+              label: context => `${context.parsed.y} ms`
+            }
+          }
+        }
+      }
+    });
+
+    canvas._chartInstance = chart;
+    return chart;
+  } catch (error) {
+    console.error('Fehler beim Rendern des Latenz-Diagramms:', error);
+    return null;
+  }
+}
+
+// Ende Datei js/chart.js