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
314 lines
12 KiB
Markdown
314 lines
12 KiB
Markdown
% 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
|
|
```
|