diff --git a/data_visualization/js/chart.js b/data_visualization/js/chart.js new file mode 100644 index 0000000..dba2107 --- /dev/null +++ b/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} 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} 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 \ No newline at end of file