feat(frontend): add realtime speed graphs

frontend/src/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import SpeedChart from './SpeedChart';
 
 interface TestRecord {
   id: number;
@@ -48,6 +49,8 @@ function App() {
   const [speedResult, setSpeedResult] = useState<{ down: number; up: number } | null>(
     null,
   );
+  const [downloadSpeeds, setDownloadSpeeds] = useState<number[]>([]);
+  const [uploadSpeeds, setUploadSpeeds] = useState<number[]>([]);
   const [speedRunning, setSpeedRunning] = useState(false);
   const [loading, setLoading] = useState(
     !sessionStorage.getItem('initialTestDone'),
@@ -145,29 +148,50 @@ function App() {
 
   async function downloadWithProgress(size: number) {
     setDownloadProgress({ transferred: 0, size });
+    setDownloadSpeeds([]);
     const res = await fetch(`/speedtest/download?size=${size}`);
     const reader = res.body?.getReader();
     if (!reader) return 0;
     let received = 0;
     const start = performance.now();
+    let lastTime = start;
     while (true) {
       const { done, value } = await reader.read();
+      const now = performance.now();
       if (done) break;
       received += value.length;
       setDownloadProgress({ transferred: received, size });
+      const diff = now - lastTime;
+      if (diff > 0 && value) {
+        const speed = (value.length * 8) / diff / 1000;
+        setDownloadSpeeds((s) => [...s.slice(-99), speed]);
+      }
+      lastTime = now;
     }
     const end = performance.now();
     return ((size * 8) / (end - start) / 1000);
   }
 
   function uploadWithProgress(size: number) {
     setUploadProgress({ transferred: 0, size });
+    setUploadSpeeds([]);
     return new Promise<number>((resolve) => {
       const xhr = new XMLHttpRequest();
       const start = performance.now();
+      let lastLoaded = 0;
+      let lastTime = start;
       xhr.open('POST', '/speedtest/upload');
       xhr.upload.onprogress = (e) => {
         setUploadProgress({ transferred: e.loaded, size });
+        const now = performance.now();
+        const diff = now - lastTime;
+        const loadedDiff = e.loaded - lastLoaded;
+        if (diff > 0 && loadedDiff > 0) {
+          const speed = (loadedDiff * 8) / diff / 1000;
+          setUploadSpeeds((s) => [...s.slice(-99), speed]);
+        }
+        lastTime = now;
+        lastLoaded = e.loaded;
       };
       xhr.onload = () => {
         const end = performance.now();
@@ -180,6 +204,8 @@ function App() {
   const runSpeedtest = async (downloadSize: number, uploadSize: number) => {
     setSpeedRunning(true);
     setSpeedResult(null);
+    setDownloadSpeeds([]);
+    setUploadSpeeds([]);
     const down = await downloadWithProgress(downloadSize);
     const up = await uploadWithProgress(uploadSize);
     setSpeedResult({ down, up });
@@ -333,6 +359,20 @@ function App() {
           </div>
           <div>Download Progress: {formatProgress(downloadProgress)}</div>
           <div>Upload Progress: {formatProgress(uploadProgress)}</div>
+          {downloadSpeeds.length > 0 && (
+            <SpeedChart
+              title="Download Speed (Mbps)"
+              speeds={downloadSpeeds}
+              color="#00ffff"
+            />
+          )}
+          {uploadSpeeds.length > 0 && (
+            <SpeedChart
+              title="Upload Speed (Mbps)"
+              speeds={uploadSpeeds}
+              color="#ff00ff"
+            />
+          )}
           {speedResult && (
             <pre className="whitespace-pre-wrap text-left bg-black bg-opacity-50 p-2 rounded">
               {`Download: ${speedResult.down.toFixed(2)} Mbps\nUpload: ${speedResult.up.toFixed(2)} Mbps`}

frontend/src/SpeedChart.tsx

@@ -0,0 +1,37 @@
+interface SpeedChartProps {
+  title: string;
+  speeds: number[];
+  color: string;
+}
+
+export default function SpeedChart({ title, speeds, color }: SpeedChartProps) {
+  const width = 300;
+  const height = 100;
+  const maxSpeed = Math.max(...speeds, 1);
+  const points = speeds
+    .map((s, i) => {
+      const x = (i / Math.max(speeds.length - 1, 1)) * width;
+      const y = height - (s / maxSpeed) * height;
+      return `${x},${y}`;
+    })
+    .join(' ');
+  return (
+    <div className="space-y-1">
+      <div>{title}</div>
+      <svg
+        width={width}
+        height={height}
+        className="bg-black bg-opacity-50 rounded"
+      >
+        <polyline
+          points={points}
+          fill="none"
+          stroke={color}
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
+  );
+}