From c840ee59bcad5cdc64ef858c008f906bf14ace00 Mon Sep 17 00:00:00 2001
From: tinkle <tinkle@tinkle.community>
Date: Thu, 30 Oct 2025 22:12:09 +0800
Subject: [PATCH] UI: Fix duplicate colors in Performance Comparison chart
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Problem:
- Multiple traders using the same AI model had duplicate colors
- Only 2 colors were available (blue for deepseek, purple for qwen)
- Made it difficult to distinguish between traders

Solution:
- Expand color pool from 2 to 10 distinct colors
- Change color assignment from ai_model-based to index-based
- Each trader now gets a unique color based on their position
- Colors cycle if there are more than 10 traders

Color pool includes: blue, purple, emerald, orange, pink, amber,
sky, violet, green, rose

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/components/ComparisonChart.tsx | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/web/src/components/ComparisonChart.tsx b/web/src/components/ComparisonChart.tsx
index a21e8593..4cf2e007 100644
--- a/web/src/components/ComparisonChart.tsx
+++ b/web/src/components/ComparisonChart.tsx
@@ -177,14 +177,25 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
     ];
   };
 
-  // Trader颜色配置 - 使用更鲜艳对比度更高的颜色
+  // Trader颜色配置 - 为每个trader分配不同的颜色
+  // 使用更丰富的颜色池，确保多个trader时不重复
+  const TRADER_COLORS = [
+    '#60a5fa', // blue-400
+    '#c084fc', // purple-400
+    '#34d399', // emerald-400
+    '#fb923c', // orange-400
+    '#f472b6', // pink-400
+    '#fbbf24', // amber-400
+    '#38bdf8', // sky-400
+    '#a78bfa', // violet-400
+    '#4ade80', // green-400
+    '#fb7185', // rose-400
+  ];
+
   const getTraderColor = (traderId: string) => {
-    const trader = traders.find((t) => t.trader_id === traderId);
-    if (trader?.ai_model === 'qwen') {
-      return '#c084fc'; // purple-400 (更亮)
-    } else {
-      return '#60a5fa'; // blue-400 (更亮)
-    }
+    const traderIndex = traders.findIndex((t) => t.trader_id === traderId);
+    // 如果超出颜色池大小，循环使用
+    return TRADER_COLORS[traderIndex % TRADER_COLORS.length];
   };
 
   // 自定义Tooltip - Binance Style