simple network logging app

templates/index.html

@@ -0,0 +1,141 @@
+{% 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>
+      var chartData = {{ chart_data | tojson }};
+
+      const acceptableDownloadRange = {
+          min: 600,  // Replace with your desired range
+          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);
+
+      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
+                  },
+                  // Acceptable download range band
+                  {
+                      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
+                  },
+                  // Acceptable upload range band
+                  {
+                      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, chart) {
+                              // Hide max band labels
+                              return item.text !== undefined;
+                          }
+                      }
+                  }
+              },
+              scales: {
+                  x: {
+                      type: 'category',
+                      title: {
+                          display: true,
+                          text: 'Time'
+                      }
+                  },
+                  y: {
+                      title: {
+                          display: true,
+                          text: 'Speed (Mbps)'
+                      }
+                  }
+              }
+          }
+      });
+    </script>
+{% endblock %}
+

templates/layout.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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>
+</head>
+<body>
+    <header>
+        <h1>Network Speed Test Results</h1>
+    </header>
+
+    <main>
+        {% block content %}
+        {% endblock %}
+    </main>
+</body>
+</html>
+