speed-logger/templates/index.html

{% extends 'layout.html' %}

{% block content %}
    <h2>Graph: Download vs. Upload Speeds</h2>
    <canvas id="speedChart"></canvas>

    <h2>Test Results</h2>

    <table border="1">
        <thead>
            <tr>
                <th>Timestamp</th>
                <th>ISP</th>
                <th>Latency</th>
                <th>Jitter</th>
                <th>Download (90th Percentile)</th>
                <th>Upload (90th Percentile)</th>
            </tr>
        </thead>
        <tbody>
            {% for row in data %}
            <tr>
                <td>{{ row.timestamp }}</td>
                <td>{{ row.isp }}</td>
                <td>{{ row.latency }}</td>
                <td>{{ row.jitter }}</td>
                <td>{{ row.down_90th }}</td>
                <td>{{ row.up_90th }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    
    <script>
  Chart.register(window['chartjs-plugin-annotation']);

  var chartData = {{ chart_data | tojson }};

  const acceptableDownloadRange = {
    min: 600,
    max: 1000
  };

  const acceptableUploadRange = {
    min: 15,
    max: 50
  };

  const times = chartData.times;

  const downloadMinBand = times.map(() => acceptableDownloadRange.min);
  const downloadMaxBand = times.map(() => acceptableDownloadRange.max);
  const uploadMinBand = times.map(() => acceptableUploadRange.min);
  const uploadMaxBand = times.map(() => acceptableUploadRange.max);

  // --- Build annotation boxes for NaN spans ---
  const annotations = [];
  let inGap = false;
  let gapStart = null;

  for (let i = 0; i < times.length; i++) {
    const down = chartData.down_90th[i];
    const up = chartData.up_90th[i];

    const isNan = isNaN(down) || isNaN(up);

    if (!inGap && isNan) {
      inGap = true;
      gapStart = times[i];
    }

    if (inGap && !isNan) {
      const gapEnd = times[i];
      annotations.push({
        type: 'box',
        xMin: gapStart,
        xMax: gapEnd,
        backgroundColor: 'rgba(255, 0, 0, 0.15)',
        borderWidth: 0
      });
      inGap = false;
    }
  }

  // Close trailing gap if it reaches the end
  if (inGap) {
    annotations.push({
      type: 'box',
      xMin: gapStart,
      xMax: times[times.length - 1],
      backgroundColor: 'rgba(255, 0, 0, 0.15)',
      borderWidth: 0
    });
  }

  var ctx = document.getElementById('speedChart').getContext('2d');
  var speedChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: times,
      datasets: [
        {
          label: 'Download Speed',
          data: chartData.down_90th,
          borderColor: 'rgba(75, 192, 192, 1)',
          fill: false
        },
        {
          label: 'Upload Speed',
          data: chartData.up_90th,
          borderColor: 'rgba(153, 102, 255, 1)',
          fill: false
        },
        {
          label: 'Acceptable Download Range',
          data: downloadMinBand,
          borderColor: 'rgba(0, 200, 0, 0.1)',
          backgroundColor: 'rgba(0, 200, 0, 0.1)',
          fill: '+1',
          pointRadius: 0,
          borderWidth: 0
        },
        {
          data: downloadMaxBand,
          borderColor: 'rgba(0, 200, 0, 0.1)',
          backgroundColor: 'rgba(0, 200, 0, 0.1)',
          fill: false,
          pointRadius: 0,
          borderWidth: 0
        },
        {
          label: 'Acceptable Upload Range',
          data: uploadMinBand,
          borderColor: 'rgba(255, 165, 0, 0.1)',
          backgroundColor: 'rgba(255, 165, 0, 0.1)',
          fill: '+1',
          pointRadius: 0,
          borderWidth: 0
        },
        {
          data: uploadMaxBand,
          borderColor: 'rgba(255, 165, 0, 0.1)',
          backgroundColor: 'rgba(255, 165, 0, 0.1)',
          fill: false,
          pointRadius: 0,
          borderWidth: 0
        }
      ]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          labels: {
            filter: function(item) {
              return item.text !== undefined;
            }
          }
        },
        annotation: {
          annotations: annotations
        }
      },
      scales: {
        x: {
          type: 'category',
          title: {
            display: true,
            text: 'Time'
          }
        },
        y: {
          title: {
            display: true,
            text: 'Speed (Mbps)'
          },
          min: 0
        }
      }
    }
  });
  </script>
{% endblock %}