diff --git a/web/src/components/ComparisonChart.tsx b/web/src/components/ComparisonChart.tsx
index 4cf2e007..b49ff4b1 100644
--- a/web/src/components/ComparisonChart.tsx
+++ b/web/src/components/ComparisonChart.tsx
@@ -13,6 +13,7 @@ import {
import useSWR from 'swr';
import { api } from '../lib/api';
import type { CompetitionTraderData } from '../types';
+import { getTraderColor } from '../utils/traderColors';
interface ComparisonChartProps {
traders: CompetitionTraderData[];
@@ -177,26 +178,8 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
];
};
- // 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 traderIndex = traders.findIndex((t) => t.trader_id === traderId);
- // 如果超出颜色池大小,循环使用
- return TRADER_COLORS[traderIndex % TRADER_COLORS.length];
- };
+ // 使用统一的颜色分配逻辑(与Leaderboard保持一致)
+ const traderColor = (traderId: string) => getTraderColor(traders, traderId);
// 自定义Tooltip - Binance Style
const CustomTooltip = ({ active, payload }: any) => {
@@ -216,7 +199,7 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
{trader.trader_name}
@@ -257,8 +240,8 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
x2="0"
y2="1"
>
-
-
+
+
))}
@@ -305,10 +288,10 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
key={trader.trader_id}
type="monotone"
dataKey={`${trader.trader_id}_pnl_pct`}
- stroke={getTraderColor(trader.trader_id)}
+ stroke={traderColor(trader.trader_id)}
strokeWidth={3}
- dot={displayData.length < 50 ? { fill: getTraderColor(trader.trader_id), r: 3 } : false}
- activeDot={{ r: 6, fill: getTraderColor(trader.trader_id), stroke: '#fff', strokeWidth: 2 }}
+ dot={displayData.length < 50 ? { fill: traderColor(trader.trader_id), r: 3 } : false}
+ activeDot={{ r: 6, fill: traderColor(trader.trader_id), stroke: '#fff', strokeWidth: 2 }}
name={trader.trader_name}
connectNulls
/>
diff --git a/web/src/components/CompetitionPage.tsx b/web/src/components/CompetitionPage.tsx
index ca67447c..a6746f20 100644
--- a/web/src/components/CompetitionPage.tsx
+++ b/web/src/components/CompetitionPage.tsx
@@ -4,6 +4,7 @@ import type { CompetitionData } from '../types';
import { ComparisonChart } from './ComparisonChart';
import { useLanguage } from '../contexts/LanguageContext';
import { t } from '../i18n/translations';
+import { getTraderColor } from '../utils/traderColors';
export function CompetitionPage() {
const { language } = useLanguage();
@@ -108,7 +109,7 @@ export function CompetitionPage() {
{sortedTraders.map((trader, index) => {
const isLeader = index === 0;
- const aiModelColor = trader.ai_model === 'qwen' ? '#c084fc' : '#60a5fa';
+ const traderColor = getTraderColor(sortedTraders, trader.trader_id);
return (
{trader.trader_name}
-
+
{trader.ai_model.toUpperCase()}
@@ -223,7 +224,7 @@ export function CompetitionPage() {
{trader.trader_name}
diff --git a/web/src/utils/traderColors.ts b/web/src/utils/traderColors.ts
new file mode 100644
index 00000000..fb884ded
--- /dev/null
+++ b/web/src/utils/traderColors.ts
@@ -0,0 +1,31 @@
+// Trader颜色配置 - 统一的颜色分配逻辑
+// 用于 ComparisonChart 和 Leaderboard,确保颜色一致性
+
+export 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
+];
+
+/**
+ * 根据trader的索引位置获取颜色
+ * @param traders - trader列表
+ * @param traderId - 当前trader的ID
+ * @returns 对应的颜色值
+ */
+export function getTraderColor(
+ traders: Array<{ trader_id: string }>,
+ traderId: string
+): string {
+ const traderIndex = traders.findIndex((t) => t.trader_id === traderId);
+ if (traderIndex === -1) return TRADER_COLORS[0]; // 默认返回第一个颜色
+ // 如果超出颜色池大小,循环使用
+ return TRADER_COLORS[traderIndex % TRADER_COLORS.length];
+}