mirror of
https://github.com/NoFxAiOS/nofx.git
synced 2026-07-02 18:41:01 +08:00
9e64b1303f
- add logo - Replaced emoji placeholders with Lucide icons in AITradersPage, CompetitionPage, EquityChart, Header, LoginPage, and RegisterPage for improved visual consistency. - Updated button styles to include icons for actions like adding models and exchanges. - Enhanced error and empty state displays with relevant icons to provide better user feedback.
416 lines
14 KiB
TypeScript
416 lines
14 KiB
TypeScript
import { useState } from 'react';
|
||
import {
|
||
LineChart,
|
||
Line,
|
||
XAxis,
|
||
YAxis,
|
||
CartesianGrid,
|
||
Tooltip,
|
||
ResponsiveContainer,
|
||
ReferenceLine,
|
||
} from 'recharts';
|
||
import useSWR from 'swr';
|
||
import { api } from '../lib/api';
|
||
import { useLanguage } from '../contexts/LanguageContext';
|
||
import { t } from '../i18n/translations';
|
||
import { AlertTriangle, BarChart3, DollarSign, Percent, TrendingUp as ArrowUp, TrendingDown as ArrowDown } from 'lucide-react'
|
||
|
||
interface EquityPoint {
|
||
timestamp: string;
|
||
total_equity: number;
|
||
pnl: number;
|
||
pnl_pct: number;
|
||
cycle_number: number;
|
||
}
|
||
|
||
interface EquityChartProps {
|
||
traderId?: string;
|
||
}
|
||
|
||
export function EquityChart({ traderId }: EquityChartProps) {
|
||
const { language } = useLanguage();
|
||
const [displayMode, setDisplayMode] = useState<'dollar' | 'percent'>('dollar');
|
||
|
||
const { data: history, error } = useSWR<EquityPoint[]>(
|
||
traderId ? `equity-history-${traderId}` : 'equity-history',
|
||
() => api.getEquityHistory(traderId),
|
||
{
|
||
refreshInterval: 30000, // 30秒刷新（历史数据更新频率较低）
|
||
revalidateOnFocus: false,
|
||
dedupingInterval: 20000,
|
||
}
|
||
);
|
||
|
||
const { data: account } = useSWR(
|
||
traderId ? `account-${traderId}` : 'account',
|
||
() => api.getAccount(traderId),
|
||
{
|
||
refreshInterval: 15000, // 15秒刷新（配合后端缓存）
|
||
revalidateOnFocus: false,
|
||
dedupingInterval: 10000,
|
||
}
|
||
);
|
||
|
||
if (error) {
|
||
return (
|
||
<div className='binance-card p-6'>
|
||
<div
|
||
className='flex items-center gap-3 p-4 rounded'
|
||
style={{
|
||
background: 'rgba(246, 70, 93, 0.1)',
|
||
border: '1px solid rgba(246, 70, 93, 0.2)',
|
||
}}
|
||
>
|
||
<AlertTriangle className='w-6 h-6' style={{ color: '#F6465D' }} />
|
||
<div>
|
||
<div className='font-semibold' style={{ color: '#F6465D' }}>
|
||
{t('loadingError', language)}
|
||
</div>
|
||
<div className='text-sm' style={{ color: '#848E9C' }}>
|
||
{error.message}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// 过滤掉无效数据：total_equity为0或小于1的数据点（API失败导致）
|
||
const validHistory = history?.filter(point => point.total_equity > 1) || [];
|
||
|
||
if (!validHistory || validHistory.length === 0) {
|
||
return (
|
||
<div className='binance-card p-6'>
|
||
<h3 className='text-lg font-semibold mb-6' style={{ color: '#EAECEF' }}>
|
||
{t('accountEquityCurve', language)}
|
||
</h3>
|
||
<div className='text-center py-16' style={{ color: '#848E9C' }}>
|
||
<div className='mb-4 flex justify-center opacity-50'>
|
||
<BarChart3 className='w-16 h-16' />
|
||
</div>
|
||
<div className='text-lg font-semibold mb-2'>
|
||
{t('noHistoricalData', language)}
|
||
</div>
|
||
<div className='text-sm'>{t('dataWillAppear', language)}</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// 限制显示最近的数据点（性能优化）
|
||
// 如果数据超过2000个点，只显示最近2000个
|
||
const MAX_DISPLAY_POINTS = 2000;
|
||
const displayHistory = validHistory.length > MAX_DISPLAY_POINTS
|
||
? validHistory.slice(-MAX_DISPLAY_POINTS)
|
||
: validHistory;
|
||
|
||
// 计算初始余额（使用第一个有效数据点，如果无数据则从account获取，最后才用默认值）
|
||
const initialBalance = validHistory[0]?.total_equity
|
||
|| account?.total_equity
|
||
|| 100; // 默认值改为100，与常见配置一致
|
||
|
||
// 转换数据格式
|
||
const chartData = displayHistory.map((point) => {
|
||
const pnl = point.total_equity - initialBalance;
|
||
const pnlPct = ((pnl / initialBalance) * 100).toFixed(2);
|
||
return {
|
||
time: new Date(point.timestamp).toLocaleTimeString('zh-CN', {
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
}),
|
||
value: displayMode === 'dollar' ? point.total_equity : parseFloat(pnlPct),
|
||
cycle: point.cycle_number,
|
||
raw_equity: point.total_equity,
|
||
raw_pnl: pnl,
|
||
raw_pnl_pct: parseFloat(pnlPct),
|
||
};
|
||
});
|
||
|
||
const currentValue = chartData[chartData.length - 1];
|
||
const isProfit = currentValue.raw_pnl >= 0;
|
||
|
||
// 计算Y轴范围
|
||
const calculateYDomain = () => {
|
||
if (displayMode === 'percent') {
|
||
// 百分比模式：找到最大最小值，留20%余量
|
||
const values = chartData.map(d => d.value);
|
||
const minVal = Math.min(...values);
|
||
const maxVal = Math.max(...values);
|
||
const range = Math.max(Math.abs(maxVal), Math.abs(minVal));
|
||
const padding = Math.max(range * 0.2, 1); // 至少留1%余量
|
||
return [Math.floor(minVal - padding), Math.ceil(maxVal + padding)];
|
||
} else {
|
||
// 美元模式：以初始余额为基准，上下留10%余量
|
||
const values = chartData.map(d => d.value);
|
||
const minVal = Math.min(...values, initialBalance);
|
||
const maxVal = Math.max(...values, initialBalance);
|
||
const range = maxVal - minVal;
|
||
const padding = Math.max(range * 0.15, initialBalance * 0.01); // 至少留1%余量
|
||
return [
|
||
Math.floor(minVal - padding),
|
||
Math.ceil(maxVal + padding)
|
||
];
|
||
}
|
||
};
|
||
|
||
// 自定义Tooltip - Binance Style
|
||
const CustomTooltip = ({ active, payload }: any) => {
|
||
if (active && payload && payload.length) {
|
||
const data = payload[0].payload;
|
||
return (
|
||
<div className="rounded p-3 shadow-xl" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
|
||
<div className="text-xs mb-1" style={{ color: '#848E9C' }}>Cycle #{data.cycle}</div>
|
||
<div className="font-bold mono" style={{ color: '#EAECEF' }}>
|
||
{data.raw_equity.toFixed(2)} USDT
|
||
</div>
|
||
<div
|
||
className="text-sm mono font-bold"
|
||
style={{ color: data.raw_pnl >= 0 ? '#0ECB81' : '#F6465D' }}
|
||
>
|
||
{data.raw_pnl >= 0 ? '+' : ''}
|
||
{data.raw_pnl.toFixed(2)} USDT ({data.raw_pnl_pct >= 0 ? '+' : ''}
|
||
{data.raw_pnl_pct}%)
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
return null;
|
||
};
|
||
|
||
return (
|
||
<div className='binance-card p-3 sm:p-5 animate-fade-in'>
|
||
{/* Header */}
|
||
<div className='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4'>
|
||
<div className='flex-1'>
|
||
<h3
|
||
className='text-base sm:text-lg font-bold mb-2'
|
||
style={{ color: '#EAECEF' }}
|
||
>
|
||
{t('accountEquityCurve', language)}
|
||
</h3>
|
||
<div className='flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-4'>
|
||
<span
|
||
className='text-2xl sm:text-3xl font-bold mono'
|
||
style={{ color: '#EAECEF' }}
|
||
>
|
||
{account?.total_equity.toFixed(2) || '0.00'}
|
||
<span
|
||
className='text-base sm:text-lg ml-1'
|
||
style={{ color: '#848E9C' }}
|
||
>
|
||
USDT
|
||
</span>
|
||
</span>
|
||
<div className='flex items-center gap-2 flex-wrap'>
|
||
<span
|
||
className='text-sm sm:text-lg font-bold mono px-2 sm:px-3 py-1 rounded flex items-center gap-1'
|
||
style={{
|
||
color: isProfit ? '#0ECB81' : '#F6465D',
|
||
background: isProfit
|
||
? 'rgba(14, 203, 129, 0.1)'
|
||
: 'rgba(246, 70, 93, 0.1)',
|
||
border: `1px solid ${
|
||
isProfit
|
||
? 'rgba(14, 203, 129, 0.2)'
|
||
: 'rgba(246, 70, 93, 0.2)'
|
||
}`,
|
||
}}
|
||
>
|
||
{isProfit ? <ArrowUp className="w-4 h-4" /> : <ArrowDown className="w-4 h-4" />}
|
||
{isProfit ? '+' : ''}
|
||
{currentValue.raw_pnl_pct}%
|
||
</span>
|
||
<span
|
||
className='text-xs sm:text-sm mono'
|
||
style={{ color: '#848E9C' }}
|
||
>
|
||
({isProfit ? '+' : ''}
|
||
{currentValue.raw_pnl.toFixed(2)} USDT)
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Display Mode Toggle */}
|
||
<div
|
||
className='flex gap-0.5 sm:gap-1 rounded p-0.5 sm:p-1 self-start sm:self-auto'
|
||
style={{ background: '#0B0E11', border: '1px solid #2B3139' }}
|
||
>
|
||
<button
|
||
onClick={() => setDisplayMode('dollar')}
|
||
className='px-3 sm:px-4 py-1.5 sm:py-2 rounded text-xs sm:text-sm font-bold transition-all flex items-center gap-1'
|
||
style={
|
||
displayMode === 'dollar'
|
||
? {
|
||
background: '#F0B90B',
|
||
color: '#000',
|
||
boxShadow: '0 2px 8px rgba(240, 185, 11, 0.4)',
|
||
}
|
||
: { background: 'transparent', color: '#848E9C' }
|
||
}
|
||
>
|
||
<DollarSign className='w-4 h-4' /> USDT
|
||
</button>
|
||
<button
|
||
onClick={() => setDisplayMode('percent')}
|
||
className='px-3 sm:px-4 py-1.5 sm:py-2 rounded text-xs sm:text-sm font-bold transition-all flex items-center gap-1'
|
||
style={
|
||
displayMode === 'percent'
|
||
? {
|
||
background: '#F0B90B',
|
||
color: '#000',
|
||
boxShadow: '0 2px 8px rgba(240, 185, 11, 0.4)',
|
||
}
|
||
: { background: 'transparent', color: '#848E9C' }
|
||
}
|
||
>
|
||
<Percent className='w-4 h-4' />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Chart */}
|
||
<div className='my-2' style={{ borderRadius: '8px', overflow: 'hidden' }}>
|
||
<ResponsiveContainer width='100%' height={280}>
|
||
<LineChart
|
||
data={chartData}
|
||
margin={{ top: 10, right: 20, left: 5, bottom: 30 }}
|
||
>
|
||
<defs>
|
||
<linearGradient id='colorGradient' x1='0' y1='0' x2='0' y2='1'>
|
||
<stop offset='5%' stopColor='#F0B90B' stopOpacity={0.8} />
|
||
<stop offset='95%' stopColor='#FCD535' stopOpacity={0.2} />
|
||
</linearGradient>
|
||
</defs>
|
||
<CartesianGrid strokeDasharray='3 3' stroke='#2B3139' />
|
||
<XAxis
|
||
dataKey='time'
|
||
stroke='#5E6673'
|
||
tick={{ fill: '#848E9C', fontSize: 11 }}
|
||
tickLine={{ stroke: '#2B3139' }}
|
||
interval={Math.floor(chartData.length / 10)}
|
||
angle={-15}
|
||
textAnchor='end'
|
||
height={60}
|
||
/>
|
||
<YAxis
|
||
stroke='#5E6673'
|
||
tick={{ fill: '#848E9C', fontSize: 12 }}
|
||
tickLine={{ stroke: '#2B3139' }}
|
||
domain={calculateYDomain()}
|
||
tickFormatter={(value) =>
|
||
displayMode === 'dollar' ? `$${value.toFixed(0)}` : `${value}%`
|
||
}
|
||
/>
|
||
<Tooltip content={<CustomTooltip />} />
|
||
<ReferenceLine
|
||
y={displayMode === 'dollar' ? initialBalance : 0}
|
||
stroke='#474D57'
|
||
strokeDasharray='3 3'
|
||
label={{
|
||
value:
|
||
displayMode === 'dollar'
|
||
? t('initialBalance', language).split(' ')[0]
|
||
: '0%',
|
||
fill: '#848E9C',
|
||
fontSize: 12,
|
||
}}
|
||
/>
|
||
<Line
|
||
type='natural'
|
||
dataKey='value'
|
||
stroke='url(#colorGradient)'
|
||
strokeWidth={3}
|
||
dot={chartData.length > 50 ? false : { fill: '#F0B90B', r: 3 }}
|
||
activeDot={{
|
||
r: 6,
|
||
fill: '#FCD535',
|
||
stroke: '#F0B90B',
|
||
strokeWidth: 2,
|
||
}}
|
||
connectNulls={true}
|
||
/>
|
||
</LineChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
|
||
{/* Footer Stats */}
|
||
<div
|
||
className='mt-3 grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3 pt-3'
|
||
style={{ borderTop: '1px solid #2B3139' }}
|
||
>
|
||
<div
|
||
className='p-2 rounded transition-all hover:bg-opacity-50'
|
||
style={{ background: 'rgba(240, 185, 11, 0.05)' }}
|
||
>
|
||
<div
|
||
className='text-xs mb-1 uppercase tracking-wider'
|
||
style={{ color: '#848E9C' }}
|
||
>
|
||
{t('initialBalance', language)}
|
||
</div>
|
||
<div
|
||
className='text-xs sm:text-sm font-bold mono'
|
||
style={{ color: '#EAECEF' }}
|
||
>
|
||
{initialBalance.toFixed(2)} USDT
|
||
</div>
|
||
</div>
|
||
<div
|
||
className='p-2 rounded transition-all hover:bg-opacity-50'
|
||
style={{ background: 'rgba(240, 185, 11, 0.05)' }}
|
||
>
|
||
<div
|
||
className='text-xs mb-1 uppercase tracking-wider'
|
||
style={{ color: '#848E9C' }}
|
||
>
|
||
{t('currentEquity', language)}
|
||
</div>
|
||
<div
|
||
className='text-xs sm:text-sm font-bold mono'
|
||
style={{ color: '#EAECEF' }}
|
||
>
|
||
{currentValue.raw_equity.toFixed(2)} USDT
|
||
</div>
|
||
</div>
|
||
<div
|
||
className='p-2 rounded transition-all hover:bg-opacity-50'
|
||
style={{ background: 'rgba(240, 185, 11, 0.05)' }}
|
||
>
|
||
<div
|
||
className='text-xs mb-1 uppercase tracking-wider'
|
||
style={{ color: '#848E9C' }}
|
||
>
|
||
{t('historicalCycles', language)}
|
||
</div>
|
||
<div
|
||
className='text-xs sm:text-sm font-bold mono'
|
||
style={{ color: '#EAECEF' }}
|
||
>
|
||
{validHistory.length} {t('cycles', language)}
|
||
</div>
|
||
</div>
|
||
<div
|
||
className='p-2 rounded transition-all hover:bg-opacity-50'
|
||
style={{ background: 'rgba(240, 185, 11, 0.05)' }}
|
||
>
|
||
<div
|
||
className='text-xs mb-1 uppercase tracking-wider'
|
||
style={{ color: '#848E9C' }}
|
||
>
|
||
{t('displayRange', language)}
|
||
</div>
|
||
<div
|
||
className='text-xs sm:text-sm font-bold mono'
|
||
style={{ color: '#EAECEF' }}
|
||
>
|
||
{validHistory.length > MAX_DISPLAY_POINTS
|
||
? `${t('recent', language)} ${MAX_DISPLAY_POINTS}`
|
||
: t('allData', language)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|