robinhood/docs/CUSTOMIZATION_VISUAL_GUIDE.md

Dashboard Customization - Quick Visual Guide

🎯 What You Can Now Do

1️⃣ Choose Your Layout Mode

┌─────────────────────────────────────────────────┐
│  GRID MODE (Default)                            │
├─────────────────┬───────────┬───────────────────┤
│                 │           │                   │
│   Chart         │  Trade    │   News Feed       │
│   (Large)       │  Controls │   (Medium)        │
│                 │ (Medium)  │                   │
├─────────────────┼───────────┼───────────────────┤
│   AI Analysis   │ Portfolio │   Alerts          │
│   (Large)       │ (Medium)  │   (Medium)        │
└─────────────────┴───────────┴───────────────────┘

┌─────────────────────────────────────────────────┐
│  TABS MODE                                      │
├─────────────────────────────────────────────────┤
│  [Chart] [Trading] [Portfolio] [AI] [News] ... │
├─────────────────────────────────────────────────┤
│                                                 │
│     ← Active Panel Displays Here →             │
│             (Full Width)                        │
│                                                 │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────┐
│  SPLIT MODE                                     │
├─────────────────────────┬───────────────────────┤
│    LEFT SECTION         │   RIGHT SECTION       │
│                         │                       │
│  • Chart                │  • News Feed          │
│  • AI Analysis          │  • Alerts             │
│  • Trade Controls       │                       │
│                         │                       │
└─────────────────────────┴───────────────────────┘

2️⃣ Customize Each Tab

Panel Header Controls

┌──────────────────────────────────────────────────┐
│ 📊 Price Chart               [⚙️] [📌] [⛶] [✕] │
│ ─────────────────────────────────────────────────│
│                                                  │
│  ⚙️  Settings  - Configure component options    │
│  📌  Pin       - Prevent accidental closing      │
│  ⛶  Expand    - Full-screen view                │
│  ✕  Close     - Hide this panel                 │
│                                                  │
└──────────────────────────────────────────────────┘

Component Settings Example (News Feed)

┌──────────────────────────────────────────┐
│  Component Settings              [✕]     │
├──────────────────────────────────────────┤
│                                          │
│  Auto Refresh           [✓] Enabled      │
│  Refresh Rate (sec)     [300____]        │
│                                          │
│  Display Mode          [Default ▼]       │
│                        • Default         │
│                        • Compact         │
│                        • Detailed        │
│                                          │
│  ─── Filters ───                         │
│  Sentiment            [ALL ▼]            │
│  Impact               [HIGH ▼]           │
│                                          │
│              [Cancel]  [Save]            │
└──────────────────────────────────────────┘

3️⃣ Tab Management

Drag & Drop Reordering

┌──────────────────────────────────────────────────┐
│  Manage Tabs                                     │
├──────────────────────────────────────────────────┤
│  ≡  Price Chart        [Medium ▼]  📌  👁       │
│  ≡  Trade Controls     [Medium ▼]  📌  👁       │
│  ≡  Portfolio          [Medium ▼]      👁       │
│  ≡  AI Analysis        [Large ▼]       👁       │
│  ≡  News Feed          [Medium ▼]      👁       │
│  ≡  Alerts             [Small ▼]       👁‍🗨      │
│  ≡  Analytics          [Full ▼]        👁‍🗨      │
│                                                  │
│  ≡ = Drag handle    👁 = Visible   👁‍🗨 = Hidden  │
│  📌 = Pinned        [Size ▼] = Resize            │
└──────────────────────────────────────────────────┘

4️⃣ Quick Presets

┌────────────────────────────────────────────────┐
│  Quick Presets                                 │
├────────────────────────────────────────────────┤
│                                                │
│  ┌──────────────────┐  ┌──────────────────┐   │
│  │ Trading Focus    │  │ Analysis Focus   │   │
│  │ ────────────     │  │ ────────────     │   │
│  │ Chart & controls │  │ Deep dive into   │   │
│  │ emphasized       │  │ market data      │   │
│  └──────────────────┘  └──────────────────┘   │
│                                                │
│  ┌──────────────────┐  ┌──────────────────┐   │
│  │ News Focus       │  │ Balanced View    │   │
│  │ ────────────     │  │ ────────────     │   │
│  │ Split screen     │  │ All components   │   │
│  │ with news        │  │ visible          │   │
│  └──────────────────┘  └──────────────────┘   │
│                                                │
│  ─── Save Current Layout ───                   │
│  Name: [My Trading Setup_________]             │
│  Description: [For morning session___]         │
│                                                │
│  [Save as New Preset]                          │
└────────────────────────────────────────────────┘

🎨 Customization Options by Component

📈 Chart

• ✅ Display mode: Candlestick / Line / Area
• ✅ Theme: Default / Compact / Detailed

💼 Portfolio

• ✅ Theme selection
• ✅ Display preferences

🎯 Trade Controls

• ✅ Theme customization
• ✅ Quick access settings

🛡️ Risk Management

• ✅ Theme options
• ✅ Calculation preferences

🤖 AI Analysis

• ✅ Theme selection
• ✅ Display format

📰 News Feed

• ✅ Auto-refresh (10-3600s)
• ✅ Sentiment filter (ALL/POSITIVE/NEGATIVE/NEUTRAL)
• ✅ Impact filter (ALL/HIGH/MEDIUM/LOW)
• ✅ Theme: Default / Compact / Detailed

🔔 Alerts

• ✅ Auto-refresh toggle
• ✅ Refresh rate config
• ✅ Severity filter (ALL/CRITICAL/HIGH/MEDIUM/LOW)
• ✅ Type filter (PRICE_SPIKE/NEWS_BREAKING/etc.)

📊 Analytics

• ✅ Display mode: Detailed / Compact / Charts-only
• ✅ Theme selection

💾 Persistence

All your customizations are automatically saved:

Browser localStorage
    ↓
┌────────────────────────────────┐
│ gold-trading-dashboard-config  │
├────────────────────────────────┤
│ • Layout mode                  │
│ • Tab visibility & order       │
│ • Panel sizes                  │
│ • Pin status                   │
│ • Component settings           │
│ • Custom presets               │
└────────────────────────────────┘
    ↓
Persists across sessions!

🚀 Getting Started

1. Click "Customize" button in top-right header
2. Choose a layout mode or try a preset
3. Arrange tabs by dragging and dropping
4. Toggle visibility with eye icons
5. Pin important panels to protect them
6. Configure components via settings icons
7. Save your layout as a custom preset

📱 Responsive Design

The dashboard adapts to your screen size:

Mobile (< 768px)
└─ Single column stack

Tablet (768px - 1024px)
└─ 2-3 column grid

Desktop (> 1024px)
└─ Full 6-column grid

⚡ Pro Tips

1. Pin your most-used panels to prevent accidental closure
2. Use Trading Focus preset for active trading sessions
3. Enable auto-refresh on News to stay informed (300s recommended)
4. Create custom presets for different times of day
5. Use Tabs mode when focusing on deep analysis
6. Try Split mode for news-based trading strategies
7. Expand panels temporarily for detailed views
8. Reset to default if configuration gets messy

🎉 Result

You now have a fully customizable trading dashboard that adapts to your needs:

✅ Multiple layout modes ✅ Complete tab control (show/hide/resize/reorder/pin) ✅ Per-component settings ✅ Quick-switch presets ✅ Custom preset creation ✅ Automatic persistence ✅ Responsive design ✅ Professional defaults

Every aspect of the dashboard is now under your control!