run_31_analysis/data_visualization/js/chart.js

/* 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