Fix: Support dynamic number of traders in ComparisonChart

Previously, ComparisonChart was hardcoded to only fetch equity history
data for the first 2 traders, causing the 3rd and subsequent traders'
data to not be displayed on the chart.
Changes:
- Replaced multiple individual useSWR calls with single consolidated call
- Use Promise.all() to fetch all traders' equity data concurrently
- Generate dynamic cache key based on all trader IDs
- Maintain backward compatibility with existing component structure
- Update useMemo dependencies to properly track data changes
This fix allows the comparison chart to properly display any number of
competing traders, not just 2.
Co-Authored-By: tinkle-community <tinklefund@gmail.com>

web/src/components/ComparisonChart.tsx

@@ -19,24 +19,32 @@ interface ComparisonChartProps {
 }
 
 export function ComparisonChart({ traders }: ComparisonChartProps) {
-  // 获取所有trader的历史数据 - 修复: 使用固定数量的Hook调用
+  // 获取所有trader的历史数据 - 使用单个useSWR并发请求所有trader数据
-  // 始终调用最多2个trader的useSWR，即使实际trader数量不同
+  // 生成唯一的key，当traders变化时会触发重新请求
-  const trader1 = traders[0];
+  const tradersKey = traders.map(t => t.trader_id).sort().join(',');
-  const trader2 = traders[1];
 
-  const history1 = useSWR(
+  const { data: allTraderHistories, isLoading } = useSWR(
-    trader1 ? `equity-history-${trader1.trader_id}` : null,
+    traders.length > 0 ? `all-equity-histories-${tradersKey}` : null,
-    trader1 ? () => api.getEquityHistory(trader1.trader_id) : null,
+    async () => {
-    { refreshInterval: 10000 }
+      // 并发请求所有trader的历史数据
+      const promises = traders.map(trader =>
+        api.getEquityHistory(trader.trader_id)
+      );
+      return Promise.all(promises);
+    },
+    {
+      refreshInterval: 10000,
+      revalidateOnFocus: false,
+    }
   );
 
-  const history2 = useSWR(
+  // 将数据转换为与原格式兼容的结构
-    trader2 ? `equity-history-${trader2.trader_id}` : null,
+  const traderHistories = useMemo(() => {
-    trader2 ? () => api.getEquityHistory(trader2.trader_id) : null,
+    if (!allTraderHistories) {
-    { refreshInterval: 10000 }
+      return traders.map(() => ({ data: undefined }));
-  );
+    }
-
+    return allTraderHistories.map(data => ({ data }));
-  const traderHistories = [history1, history2].slice(0, traders.length);
+  }, [allTraderHistories, traders.length]);
 
   // 使用useMemo自动处理数据合并，直接使用data对象作为依赖
   const combinedData = useMemo(() => {
@@ -115,12 +123,7 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
     }
 
     return combined;
-  }, [
+  }, [allTraderHistories, traders]);
-    traderHistories[0]?.data,
-    traderHistories[1]?.data,
-  ]);
-
-  const isLoading = traderHistories.some((h) => !h.data);
 
   if (isLoading) {
     return (