refactor(dashboard): allow speedtest history server filtering (#109)

Author: Audionut

web/src/components/Main.tsx

@@ -538,7 +538,7 @@ export default function Main({ isPublic = false }: MainProps) {
                 }}
               />
             </motion.div>
-          )}
+            )}
 
           {!isPublic && activeTab === "speedtest" && (
             <motion.div

web/src/components/speedtest/DashboardTab.tsx

@@ -5,7 +5,7 @@
 
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { motion } from "motion/react";
 import { SpeedTestResult, TimeRange } from "@/types/types";
 import { SpeedHistoryChart } from "./SpeedHistoryChart";
@@ -119,6 +119,16 @@ interface DraggableSpeedHistoryChartProps {
   dragHandleRef?: (node: HTMLElement | null) => void;
   dragHandleListeners?: Record<string, (...args: unknown[]) => unknown>;
   dragHandleClassName?: string;
+  // Server filtering props
+  serverFilterMode: "all" | "single" | "multiple";
+  selectedSingleServer: string;
+  selectedMultipleServers: Set<string>;
+  onServerFilterModeChange: (mode: "all" | "single" | "multiple") => void;
+  onSelectedSingleServerChange: (server: string) => void;
+  onSelectedMultipleServersChange: (servers: Set<string>) => void;
+  // Multiple server display mode props
+  multipleServerDisplayMode: "overlay" | "separate";
+  onMultipleServerDisplayModeChange: (mode: "overlay" | "separate") => void;
 }
 
 const DraggableSpeedHistoryChart: React.FC<DraggableSpeedHistoryChartProps> = ({
@@ -171,6 +181,12 @@ export const DashboardTab: React.FC<DashboardTabProps> = ({
   // State for share button hover
   const [isShareHovered, setIsShareHovered] = useState(false);
 
+  // Server filtering state
+  const [serverFilterMode, setServerFilterMode] = useState<"all" | "single" | "multiple">("all");
+  const [selectedSingleServer, setSelectedSingleServer] = useState<string>("all");
+  const [selectedMultipleServers, setSelectedMultipleServers] = useState<Set<string>>(new Set());
+  const [multipleServerDisplayMode, setMultipleServerDisplayMode] = useState<"overlay" | "separate">("overlay");
+
   // Initialize drag sensors
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -194,10 +210,26 @@ export const DashboardTab: React.FC<DashboardTabProps> = ({
 
   const displayedTests = tests.slice(0, displayCount);
 
+  // Apply server filtering to tests (same logic as in SpeedHistoryChart)
+  const filteredDisplayTests = useMemo(() => {
+    if (serverFilterMode === "single" && selectedSingleServer !== "all") {
+      return tests.filter(test => test.serverName === selectedSingleServer);
+    } else if (serverFilterMode === "multiple" && selectedMultipleServers.size > 0) {
+      return tests.filter(test => selectedMultipleServers.has(test.serverName));
+    }
+    return tests;
+  }, [tests, serverFilterMode, selectedSingleServer, selectedMultipleServers]);
+
+  // Get the latest test from filtered results
+  const filteredLatestTestComputed = useMemo(() => {
+    return filteredDisplayTests.length > 0 ? filteredDisplayTests[filteredDisplayTests.length - 1] : null;
+  }, [filteredDisplayTests]);
+
   const calculateAverage = (field: keyof SpeedTestResult): string => {
-    if (tests.length === 0) return "N/A";
+    const dataToUse = filteredDisplayTests.length > 0 ? filteredDisplayTests : tests;
+    if (dataToUse.length === 0) return "N/A";
 
-    const validValues = tests
+    const validValues = dataToUse
       .map((test) => {
         const value = test[field];
         if (typeof value === "string") {
@@ -306,31 +338,31 @@ export const DashboardTab: React.FC<DashboardTabProps> = ({
             <MetricCard
               icon={<IoIosPulse className="w-5 h-5 text-amber-500" />}
               title="Latency"
-              value={parseFloat(latestTest.latency).toFixed(2)}
+              value={parseFloat((filteredLatestTestComputed || latestTest)!.latency).toFixed(2)}
               unit="ms"
               average={calculateAverage("latency")}
             />
             <MetricCard
               icon={<FaArrowDown className="w-5 h-5 text-blue-500" />}
               title="Download"
-              value={latestTest.downloadSpeed.toFixed(2)}
+              value={(filteredLatestTestComputed || latestTest)!.downloadSpeed.toFixed(2)}
               unit="Mbps"
               average={calculateAverage("downloadSpeed")}
             />
             <MetricCard
               icon={<FaArrowUp className="w-5 h-5 text-emerald-500" />}
               title="Upload"
-              value={latestTest.uploadSpeed.toFixed(2)}
+              value={(filteredLatestTestComputed || latestTest)!.uploadSpeed.toFixed(2)}
               unit="Mbps"
               average={calculateAverage("uploadSpeed")}
             />
             <MetricCard
               icon={<FaWaveSquare className="w-5 h-5 text-purple-400" />}
               title="Jitter"
-              value={latestTest.jitter?.toFixed(2) ?? "N/A"}
+              value={(filteredLatestTestComputed || latestTest)!.jitter?.toFixed(2) ?? "N/A"}
               unit="ms"
               average={
-                latestTest.jitter ? calculateAverage("jitter") : undefined
+                (filteredLatestTestComputed || latestTest)!.jitter ? calculateAverage("jitter") : undefined
               }
             />
 
@@ -387,6 +419,14 @@ export const DashboardTab: React.FC<DashboardTabProps> = ({
                         isPublic={isPublic}
                         hasAnyTests={hasAnyTests}
                         hasCurrentRangeTests={tests.length > 0}
+                        serverFilterMode={serverFilterMode}
+                        selectedSingleServer={selectedSingleServer}
+                        selectedMultipleServers={selectedMultipleServers}
+                        onServerFilterModeChange={setServerFilterMode}
+                        onSelectedSingleServerChange={setSelectedSingleServer}
+                        onSelectedMultipleServersChange={setSelectedMultipleServers}
+                        multipleServerDisplayMode={multipleServerDisplayMode}
+                        onMultipleServerDisplayModeChange={setMultipleServerDisplayMode}
                       />
                     </SortableItem>
                   );