UI: Fix duplicate colors in Performance Comparison chart

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>
This commit is contained in:
tinkle
2025-10-30 22:12:09 +08:00
parent 1b19118332
commit c840ee59bc

View File

@@ -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