Krikorios
48e60d015f
- 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
12 KiB
12 KiB
% 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