liuyu/nofx
1
0
Fork 0
mirror of https://github.com/NoFxAiOS/nofx.git synced 2026-07-01 18:11:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

UI: Display position details in Trade History

Browse Source 
Frontend changes:
- Update TradeOutcome interface with new fields:
  - quantity: Position size
  - leverage: Leverage multiplier
  - position_value: Total position value
  - margin_used: Margin required

- Add position details display in trade cards:
  - Quantity (with 4 decimal precision)
  - Leverage (shown as "50x")
  - Position Value (shown as "$10000.00")
  - Margin Used (shown as "$200.00")

Visual design:
- 2x2 grid layout for position details
- Color coding: Leverage in gold, Margin in purple
- Conditional rendering with fallback "-" for missing data

🤖 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 18:11:15 +08:00
parent 0c0056f4e8
commit cbdb2b2e1c
1 changed files with 32 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
web/src/components/AILearning.tsx
View File

@@ -6,8 +6,12 @@ import { api } from '../lib/api';
interface TradeOutcome {
symbol: string;
side: string;
quantity: number;
leverage: number;
open_price: number;
close_price: number;
position_value: number;
margin_used: number;
pn_l: number;
pn_l_pct: number;
duration: string;
@@ -558,6 +562,34 @@ export default function AILearning({ traderId }: AILearningProps) {
</div>
</div>
{/* Position Details */}
<div className="grid grid-cols-2 gap-2 mb-3 text-xs">
<div>
<div style={{ color: '#94A3B8' }}>Quantity</div>
<div className="font-mono font-semibold" style={{ color: '#CBD5E1' }}>
{trade.quantity ? trade.quantity.toFixed(4) : '-'}
</div>
</div>
<div className="text-right">
<div style={{ color: '#94A3B8' }}>Leverage</div>
<div className="font-mono font-semibold" style={{ color: '#FCD34D' }}>
{trade.leverage ? `${trade.leverage}x` : '-'}
</div>
</div>
<div>
<div style={{ color: '#94A3B8' }}>Position Value</div>
<div className="font-mono font-semibold" style={{ color: '#CBD5E1' }}>
{trade.position_value ? `$${trade.position_value.toFixed(2)}` : '-'}
</div>
</div>
<div className="text-right">
<div style={{ color: '#94A3B8' }}>Margin Used</div>
<div className="font-mono font-semibold" style={{ color: '#A78BFA' }}>
{trade.margin_used ? `$${trade.margin_used.toFixed(2)}` : '-'}
</div>
</div>
</div>
<div className="rounded-lg p-2 mb-2" style={{
background: isProfitable ? 'rgba(16, 185, 129, 0.1)' : 'rgba(248, 113, 113, 0.1)'
}}>