fix(web): prevent NaN% display in competition gap calculation (#633)

[the-dev-z]

Summary

Fixes "NaN%" display in competition page's head-to-head comparison when trader P&L percentage data is null or undefined.

Problem

Competition page shows confusing "NaN%" for gap difference:

Example:

交易員 A: +5.23%
交易員 B: --% (data missing)
當前差距: 領先 NaN%  ❌

Root Cause

File: web/src/components/CompetitionPage.tsx:395

// ❌ Before: Missing null checks
const gap = trader.total_pnl_pct - opponent.total_pnl_pct
// If either value is null/undefined → NaN

When either trader has missing total_pnl_pct data:

• undefined - 5.23 = NaN
• 5.23 - null = NaN
• Display shows "領先 NaN%" or "落後 NaN%"

Solution

Add null coalescing operator to default missing values to 0:

// ✅ After: Graceful degradation
const gap = (trader.total_pnl_pct ?? 0) - (opponent.total_pnl_pct ?? 0)

Behavior:

• If data missing → gap defaults to 0.00%
• Prevents confusing "NaN%" display
• Maintains correct calculation when both values present

Changes

• File: web/src/components/CompetitionPage.tsx
• Line: 395
• Change: Add ?? 0 null coalescing to both operands

Impact

• ✅ Eliminates "NaN%" display in competition page
• ✅ Shows "0.00%" when data is incomplete (better UX)
• ✅ No breaking changes - pure defensive coding
• ✅ Aligns with existing pattern (line 253: total_pnl ?? 0)

Testing

• ✅ Verified null coalescing pattern consistent with codebase
• ✅ Manual inspection of competition page logic

Fixes #633

🤖 Generated with Claude Code

Co-Authored-By: Claude [email protected]

[github-actions]

🤖 Advisory Check Results

These are advisory checks to help improve code quality. They won't block your PR from being merged.

📋 PR Information

Title Format: ✅ Good - Follows Conventional Commits
PR Size: 🟢 Small (2 lines: +1 -1)

🔧 Backend Checks

Go Formatting: ⚠️ Needs formatting

Files needing formatting

api/server.go
decision/engine.go
logger/telegram_sender.go
mcp/client.go
trader/aster_trader.go
trader/auto_trader.go
trader/binance_futures.go
trader/hyperliquid_trader.go

Go Vet: ✅ Good
Tests: ✅ Passed

Fix locally:

go fmt ./...      # Format code
go vet ./...      # Check for issues
go test ./...     # Run tests

⚛️ Frontend Checks

Build & Type Check: ✅ Success

Fix locally:

cd web
npm run build  # Test build (includes type checking)

---

📖 Resources

• Contributing Guidelines
• Migration Guide

Questions? Feel free to ask in the comments! 🙏

---

These checks are advisory and won't block your PR from being merged. This comment is automatically generated from pr-checks-run.yml.

[xqliu]

如果没有值，应该显示 —— 而不是 0 吧，显示 0 会有误导用户