updated graph

2025-05-05 01:55:04 +02:00
parent dcb8d082f4
commit 0787efb76d
2 changed files with 144 additions and 99 deletions
--- a/templates/index.html
+++ b/templates/index.html
@@ -33,10 +33,12 @@

    
    <script>
+  Chart.register(window['chartjs-plugin-annotation']);
+
  var chartData = {{ chart_data | tojson }};

  const acceptableDownloadRange = {
-          min: 600,  // Replace with your desired range
+    min: 600,
    max: 1000
  };

@@ -46,11 +48,52 @@
  };

  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',
@@ -69,7 +112,6 @@
          borderColor: 'rgba(153, 102, 255, 1)',
          fill: false
        },
-                  // Acceptable download range band
        {
          label: 'Acceptable Download Range',
          data: downloadMinBand,
@@ -87,7 +129,6 @@
          pointRadius: 0,
          borderWidth: 0
        },
-                  // Acceptable upload range band
        {
          label: 'Acceptable Upload Range',
          data: uploadMinBand,
@@ -112,11 +153,13 @@
      plugins: {
        legend: {
          labels: {
-                          filter: function(item, chart) {
-                              // Hide max band labels
+            filter: function(item) {
              return item.text !== undefined;
            }
          }
+        },
+        annotation: {
+          annotations: annotations
        }
      },
      scales: {
@@ -131,7 +174,8 @@
          title: {
            display: true,
            text: 'Speed (Mbps)'
-                      }
+          },
+          min: 0
        }
      }
    }
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -6,6 +6,7 @@
    <title>Speed Test Results</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
 </head>
 <body>
    <header>