liuyu/nofx
1
0
Fork 0
mirror of https://github.com/NoFxAiOS/nofx.git synced 2026-07-19 02:14:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: filter Area entries from chart legend to show only trader names

Browse Source 
Use custom Legend content to filter out entries with raw dataKey (_pnl_pct)
and only display Line entries with proper trader names.
This commit is contained in:
tinkle-community
2025-12-08 19:38:36 +08:00
parent 1e7c756dd7
commit 4291b80273
1 changed files with 32 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
web/src/components/ComparisonChart.tsx
View File

@@ -408,22 +408,39 @@ export function ComparisonChart({ traders }: ComparisonChartProps) {
<Legend <Legend
wrapperStyle={{ paddingTop: '16px' }} wrapperStyle={{ paddingTop: '16px' }}
iconType="circle" content={({ payload }) => {
iconSize={8} // Filter out Area entries (they use raw dataKey containing _pnl_pct)
formatter={(value) => { const filteredPayload = payload?.filter(
const trader = traders.find((t) => t.trader_name === value) (entry: any) => entry.value && !entry.value.includes('_pnl_pct')
const pnl = trader ? lastPoint?.[`${trader.trader_id}_pnl_pct`] || 0 : 0 ) || []
return ( return (
<span style={{ color: '#EAECEF', fontSize: '12px', fontWeight: 500 }}> <div style={{ display: 'flex', justifyContent: 'center', gap: '20px', flexWrap: 'wrap' }}>
{value} {filteredPayload.map((entry: any, index: number) => {
<span style={{ const trader = traders.find((t) => t.trader_name === entry.value)
color: pnl >= 0 ? '#0ECB81' : '#F6465D', const pnl = trader ? lastPoint?.[`${trader.trader_id}_pnl_pct`] || 0 : 0
marginLeft: '6px', return (
fontFamily: 'monospace' <div key={`legend-${index}`} style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
}}> <div style={{
({pnl >= 0 ? '+' : ''}{pnl.toFixed(2)}%) width: '8px',
</span> height: '8px',
</span> borderRadius: '50%',
backgroundColor: entry.color
}} />
<span style={{ color: '#EAECEF', fontSize: '12px', fontWeight: 500 }}>
{entry.value}
<span style={{
color: pnl >= 0 ? '#0ECB81' : '#F6465D',
marginLeft: '6px',
fontFamily: 'monospace'
}}>
({pnl >= 0 ? '+' : ''}{pnl.toFixed(2)}%)
</span>
</span>
</div>
)
})}
</div>
) )
}} }}
/> />