feat: Add Phase 4 advanced metrics and components
- Add advanced metrics dashboard with trade analytics - Add new trading components (EntryTypeAnalysis, MultiDayPositionTracker, NewsEventTracker, etc.) - Add strategy mode selector and trend confirmation - Add risk automation panel and slippage correlation analysis - Add daily trading plan enhancements with modal components - Add custom hooks (useApi, useLocalStorage, useAdvancedTradeMetrics) - Add broker service integration and trading API - Add test setup and vitest configuration - Include parquet data files for live market data - Add comprehensive documentation in docs/ folder
This commit is contained in:
Krikorios
@@ -0,0 +1,313 @@
|
||||
% Strategy Mode Selector - UI Components
|
||||
|
||||
## Component Hierarchy
|
||||
|
||||
```
|
||||
Daily Trading Plan (index.tsx)
|
||||
├── PlanHeader
|
||||
├── Strategy Info Banner ✨ NEW
|
||||
│ └── Shows: Mode, Emoji, Max Trades, R:R, Stop %
|
||||
├── Strategy Mode Selector ✨ NEW
|
||||
│ ├── Full Variant (Desktop/Tablet)
|
||||
│ │ ├── Header with Show/Hide Details
|
||||
│ │ ├── 3x Mode Buttons (SCALP/SWING/HYBRID)
|
||||
│ │ ├── Mode Description Box
|
||||
│ │ └── Optional Details Panel
|
||||
│ │ ├── Risk Management Section
|
||||
│ │ ├── Time & Frequency Section
|
||||
│ │ ├── Strategy Tips
|
||||
│ │ └── Action Buttons
|
||||
│ └── Compact Variant (Mobile)
|
||||
│ └── 3 Small Buttons in Row
|
||||
├── PlanBiasSelector
|
||||
├── PlanRiskParameters
|
||||
├── PlanKeyLevelsEditor
|
||||
└── Trading Notes
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Desktop Layout
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ 📅 DAILY TRADING PLAN │
|
||||
│ Edit | Generate AI | Reset │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ ⚡ SCALP Mode Active │
|
||||
│ Max 20 trades • R:R 1:1 • Stop: 0.5% │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
|
||||
┌────────────────────────────────────────────────────────────┐
|
||||
│ TRADING STRATEGY MODE [Show Details] │
|
||||
│ │
|
||||
│ ┌──────────────┬──────────────┬──────────────┐ │
|
||||
│ │ ⚡ │ 📈 │ 🎯 │ │
|
||||
│ │ SCALP │ SWING │ HYBRID │ │
|
||||
│ │ Quick Moves │ Trend Capture│ Balanced │ │
|
||||
│ └──────────────┴──────────────┴──────────────┘ │
|
||||
│ │
|
||||
│ Quick profits from micro price moves. High frequency, │
|
||||
│ tight stops. │
|
||||
│ │
|
||||
│ ┌──────────────────────────────────────────────────────┐ │
|
||||
│ │ RISK MANAGEMENT │ │
|
||||
│ │ │ │
|
||||
│ │ Risk per Trade: 0.25% │ │
|
||||
│ │ Stop Loss: 0.5% │ │
|
||||
│ │ Take Profit: 1% │ │
|
||||
│ │ R:R Ratio: 1:1 │ │
|
||||
│ │ │ │
|
||||
│ │ TIME & FREQUENCY │ │
|
||||
│ │ │ │
|
||||
│ │ Time Frame: 1m │ │
|
||||
│ │ Max Hold Time: 5m │ │
|
||||
│ │ Max Daily Trades: 20 trades │ │
|
||||
│ │ │ │
|
||||
│ │ 💡 STRATEGY TIPS │ │
|
||||
│ │ │ │
|
||||
│ │ • Use 1-5 min charts for entry signals │ │
|
||||
│ │ • Close 50% at 0.5% profit, let 50% run to 1% │ │
|
||||
│ │ • Avoid holding through market chop │ │
|
||||
│ │ • Speed is critical - execute fast │ │
|
||||
│ │ • Max 5-20 trades per day depending on volatility │ │
|
||||
│ └──────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌──────────┬──────────┬──────────┐ │
|
||||
│ │ ⚡ │ 📈 │ 🎯 │ │
|
||||
│ │ Scalping │ Swing │ Hybrid │ │
|
||||
│ └──────────┴──────────┴──────────┘ │
|
||||
└────────────────────────────────────────────────────────────┘
|
||||
|
||||
[Other Plan Components Below...]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Mobile Layout
|
||||
|
||||
```
|
||||
┌─────────────────────────┐
|
||||
│ 📅 DAILY TRADING PLAN │
|
||||
│ Edit | Generate AI|Reset│
|
||||
└─────────────────────────┘
|
||||
|
||||
┌─────────────────────────┐
|
||||
│ ⚡ SCALP Mode Active │
|
||||
│ Max 20 trades • R:R 1:1 │
|
||||
│ Stop: 0.5% │
|
||||
└─────────────────────────┘
|
||||
|
||||
┌─────────────────────────┐
|
||||
│ ⚡ 📈 🎯 │
|
||||
│ SCALP SWING HYBRID │
|
||||
└─────────────────────────┘
|
||||
|
||||
[Strategy Mode Selector - Compact]
|
||||
|
||||
[Other Plan Components Below...]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Component States
|
||||
|
||||
### Mode Selection - Before Click
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ 3 Strategy Buttons (Unselected) │
|
||||
│ ┌──────────┬──────────┬──────────┐ │
|
||||
│ │ ⚡ │ 📈 │ 🎯 │ │
|
||||
│ │ SCALP │ SWING │ HYBRID │ │
|
||||
│ │ │ │ │ │
|
||||
│ └──────────┴──────────┴──────────┘ │
|
||||
└──────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Mode Selection - After Click (SCALP Selected)
|
||||
```
|
||||
┌──────────────────────────────────────┐
|
||||
│ SCALP Mode Selected (Highlighted) │
|
||||
│ ┌──────────┬──────────┬──────────┐ │
|
||||
│ │ ⚡ │ 📈 │ 🎯 │ │
|
||||
│ │ SCALP │ SWING │ HYBRID │ │
|
||||
│ │ [ACTIVE] │ │ │ │
|
||||
│ └──────────┴──────────┴──────────┘ │
|
||||
│ │
|
||||
│ Info Box Updates: │
|
||||
│ ✅ Daily target = $50 │
|
||||
│ ✅ Max loss = $12.50 │
|
||||
│ ✅ Stop = 0.5% │
|
||||
│ ✅ Max trades = 20 │
|
||||
└──────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Data Flow Diagram
|
||||
|
||||
```
|
||||
┌─────────────────────────┐
|
||||
│ User Clicks SCALP │
|
||||
└────────────┬────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────┐
|
||||
│ handleStrategyModeChange() │
|
||||
│ - Receives: mode = 'SCALP' │
|
||||
│ - Creates: defaultPlan() │
|
||||
│ - Gets: STRATEGY_PRESETS['SCALP'] │
|
||||
└────────────┬────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────┐
|
||||
│ createDefaultPlan(price, 'SCALP') │
|
||||
│ - Risk: 0.25% │
|
||||
│ - Stop: $4 (0.5%) │
|
||||
│ - Target: $8 (1%) │
|
||||
│ - Daily Target: $50 │
|
||||
│ - Max Loss: $12.50 │
|
||||
│ - Max Trades: 20 │
|
||||
└────────────┬────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────┐
|
||||
│ setPlan() - Update Local Storage │
|
||||
└────────────┬────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────────────────────┐
|
||||
│ Component Re-renders: │
|
||||
│ ✅ Strategy Info Banner Updates │
|
||||
│ ✅ Plan Values Update │
|
||||
│ ✅ Risk Parameters Recalculate │
|
||||
│ ✅ Entry Zone Adjusts │
|
||||
│ ✅ Key Levels Update │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Interactive Flow Example
|
||||
|
||||
### Scenario: Trader Switches from SWING to SCALP
|
||||
|
||||
**Before:**
|
||||
```
|
||||
Daily Plan:
|
||||
├─ Mode: SWING
|
||||
├─ Daily Target: $500
|
||||
├─ Max Loss: $250
|
||||
├─ Max Trades: 3
|
||||
├─ Stop Loss: 2%
|
||||
└─ Take Profit: 8%
|
||||
```
|
||||
|
||||
**User Action:** Click SCALP Button
|
||||
|
||||
**After (Instant):**
|
||||
```
|
||||
Daily Plan:
|
||||
├─ Mode: SCALP ✨ CHANGED
|
||||
├─ Daily Target: $50 ✨ CHANGED
|
||||
├─ Max Loss: $12.50 ✨ CHANGED
|
||||
├─ Max Trades: 20 ✨ CHANGED
|
||||
├─ Stop Loss: 0.5% ✨ CHANGED
|
||||
└─ Take Profit: 1% ✨ CHANGED
|
||||
|
||||
Info Banner: "⚡ SCALP Mode Active"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Color Scheme
|
||||
|
||||
```
|
||||
SCALP Mode:
|
||||
├─ Primary: Yellow (#FCD34D)
|
||||
├─ Accent: Amber (#FBBF24)
|
||||
└─ Text: White on Dark
|
||||
|
||||
SWING Mode:
|
||||
├─ Primary: Blue (#3B82F6)
|
||||
├─ Accent: Cyan (#06B6D4)
|
||||
└─ Text: White on Dark
|
||||
|
||||
HYBRID Mode:
|
||||
├─ Primary: Purple (#A855F7)
|
||||
├─ Accent: Pink (#EC4899)
|
||||
└─ Text: White on Dark
|
||||
|
||||
Borders/Info:
|
||||
├─ Active Selected: Full Opacity
|
||||
├─ Inactive: Reduced Opacity (60%)
|
||||
└─ Hover: Increased Opacity
|
||||
|
||||
Strategy Info Banner:
|
||||
├─ Background: Blue/10 (blue-500/10)
|
||||
├─ Border: Blue/30 (blue-500/30)
|
||||
├─ Text: Blue/300 (blue-300)
|
||||
└─ Accent: Yellow (emoji)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Responsive Breakpoints
|
||||
|
||||
```
|
||||
Mobile (< 640px):
|
||||
├─ StrategyModeSelector: variant="compact"
|
||||
├─ Layout: Vertical Stack
|
||||
├─ Buttons: Full Width
|
||||
└─ Details: Hidden (tap to expand)
|
||||
|
||||
Tablet (640px - 1024px):
|
||||
├─ StrategyModeSelector: variant="compact"
|
||||
├─ Layout: Grid 2 columns
|
||||
├─ Details: Expandable
|
||||
└─ Responsive spacing
|
||||
|
||||
Desktop (> 1024px):
|
||||
├─ StrategyModeSelector: variant="full"
|
||||
├─ Layout: Card view
|
||||
├─ Details: Visible by default
|
||||
└─ All parameters displayed
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Accessibility Features
|
||||
|
||||
```
|
||||
✅ Semantic HTML buttons
|
||||
✅ ARIA labels on all interactive elements
|
||||
✅ Color not sole indicator (emoji + text)
|
||||
✅ High contrast text
|
||||
✅ Keyboard navigable
|
||||
✅ Focus states visible
|
||||
✅ Proper heading hierarchy
|
||||
✅ Type hints and descriptions
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Animation & Transitions
|
||||
|
||||
```
|
||||
Button Hover:
|
||||
├─ Transition: 150ms ease
|
||||
├─ Background: +10% opacity
|
||||
└─ Scale: 1.02x
|
||||
|
||||
Mode Switch:
|
||||
├─ Fade: 100ms
|
||||
├─ Parameters: Instant update
|
||||
├─ Info banner: Slide in
|
||||
|
||||
Details Panel:
|
||||
├─ Open: 200ms ease-out
|
||||
├─ Close: 100ms ease-in
|
||||
└─ Max height: auto
|
||||
```
|
||||
Reference in New Issue
Block a user