robinhood/docs/DASHBOARD_CUSTOMIZATION_GUIDE.md

Dashboard Customization Guide

Overview

The Gold Trading Simulator now features a fully customizable dashboard that allows users to personalize their trading interface to match their workflow and preferences. Every aspect of the dashboard can be tailored, from tab visibility and positioning to individual component settings.

Key Features

1. Multiple Layout Modes

Choose from three distinct layout modes:

• Grid Mode (Default): Display multiple panels simultaneously in a responsive grid
• Tabs Mode: Focus on one panel at a time with a tabbed interface
• Split Mode: Two-column layout with customizable panel positioning

2. Tab Management

Each dashboard component can be:

• ✅ Shown or Hidden: Toggle visibility of any panel
• 📌 Pinned: Keep important panels always visible and prevent accidental closing
• 📊 Resized: Choose from Small, Medium, Large, or Full-width sizes
• 🔄 Reordered: Drag and drop to rearrange panel order
• ⚙️ Customized: Configure individual settings per component

3. Per-Component Customization

Each component supports specific customization options:

News Feed

• Auto-refresh toggle
• Refresh rate (10-3600 seconds)
• Filter by sentiment (ALL, POSITIVE, NEGATIVE, NEUTRAL)
• Filter by impact (ALL, HIGH, MEDIUM, LOW)
• Display theme (Default, Compact, Detailed)

Alerts Panel

• Auto-refresh toggle
• Refresh rate configuration
• Filter by severity (ALL, CRITICAL, HIGH, MEDIUM, LOW)
• Filter by alert type (PRICE_SPIKE, NEWS_BREAKING, etc.)

Price Chart

• Display mode (Candlestick, Line, Area)
• Theme selection

Advanced Analytics

• Display mode (Detailed, Compact, Charts-only)
• Theme selection

4. Layout Presets

Quick-switch between professionally designed layouts:

Trading Focus

• Full-width chart at top
• Trade controls, portfolio, and risk management readily accessible
• Minimized analytics
• Perfect for active trading sessions

Analysis Focus

• Tab-based navigation
• Chart, AI Analysis, and Analytics prioritized
• Ideal for deep market analysis

News Focus

• Split-screen layout
• Chart on left, news and alerts on right
• Stay informed while monitoring price action

Balanced View

• All components visible in grid layout
• Equal emphasis across all features
• Great for comprehensive market overview

5. Custom Presets

Create and save your own layout configurations:

1. Arrange the dashboard to your liking
2. Open Dashboard Customizer
3. Go to "Presets" tab
4. Name and save your custom layout
5. Switch between custom and default presets anytime

How to Use

Opening the Customizer

Click the "Customize" button in the top-right header, next to the Export menu.

Changing Layout Mode

1. Open Dashboard Customizer
2. Go to "Layout Mode" tab
3. Select Grid, Tabs, or Split mode
4. Changes apply immediately

Managing Tabs

1. Open Dashboard Customizer
2. Go to "Tabs & Order" tab
3. Drag and drop rows to reorder panels
4. Toggle eye icon to show/hide panels
5. Select size from dropdown (Small, Medium, Large, Full)
6. Click pin icon to pin/unpin panels

Customizing Individual Components

1. Hover over any panel header
2. Click the Settings icon (appears on hover)
3. Configure available options:
   • Auto-refresh settings
   • Display preferences
   • Filters
   • Theme
4. Click "Save" to apply changes

Expanding Panels

• Click the Maximize icon in any panel header
• Panel expands to full-screen overlay
• Click Minimize to return to normal view

Loading Presets

1. Open Dashboard Customizer
2. Go to "Presets" tab
3. Click any preset to apply it instantly

Saving Custom Presets

1. Arrange dashboard as desired
2. Open Dashboard Customizer → "Presets" tab
3. Enter preset name and description
4. Click "Save as New Preset"
5. Your preset is now available alongside default presets

Resetting to Default

1. Open Dashboard Customizer
2. Click "Reset to Default" button (bottom-left)
3. Confirm the reset

Persistence

All dashboard customizations are automatically saved to browser localStorage:

• Layout mode preference
• Tab visibility and order
• Panel sizes and pinning status
• Component-specific settings
• Custom presets

Your preferences persist across browser sessions and page refreshes.

Component Reference

Available Tabs

1. Price Chart (chart) - Real-time gold price visualization
2. Trade Controls (trade-controls) - Buy/sell interface and simulation controls
3. Portfolio (portfolio) - Position and performance tracking
4. Risk Management (risk-management) - Position sizing and risk calculations
5. AI Analysis (ai-analysis) - AI-powered market insights
6. News Feed (news) - Real-time market news and sentiment
7. Alerts (alerts) - Price and event notifications
8. Advanced Analytics (analytics) - Trading performance metrics

Tips for Best Results

For Active Trading

• Use Trading Focus preset
• Pin Trade Controls and Portfolio
• Enable auto-refresh on News (300s)
• Keep Chart expanded

For Analysis

• Use Analysis Focus preset in Tabs mode
• Configure chart for detailed view
• Set Analytics to detailed mode
• Review AI Analysis regularly

For News Trading

• Use News Focus preset
• Enable auto-refresh on News and Alerts
• Filter by HIGH impact only
• Keep Chart and News side-by-side

For Learning

• Use Balanced View preset
• Keep all panels visible
• Enable detailed themes
• Monitor Analytics tab for feedback

Keyboard Shortcuts

While there are no dedicated keyboard shortcuts yet, you can:

• Use Tab to navigate between controls
• Use Enter to confirm selections
• Use Esc (when implemented) to close modals

Technical Details

Storage Location

Configuration stored in: localStorage['gold-trading-dashboard-config']

Default Configuration

The system ships with sensible defaults that work well for most users.

Configuration Schema

{
  mode: 'grid' | 'tabs' | 'split',
  tabs: TabConfig[],
  activePreset: string,
  customPresets: LayoutPreset[]
}

Troubleshooting

Q: My changes aren't saving

• Check browser localStorage is enabled
• Try clearing browser cache and reconfiguring
• Check browser console for errors

Q: A panel disappeared

• Open Dashboard Customizer → "Tabs & Order"
• Find the panel and toggle visibility on
• Or use "Reset to Default" to restore all panels

Q: Preset not loading

• Ensure the preset exists in the list
• Try manually configuring instead
• Check for JavaScript errors in console

Q: Performance issues with many panels

• Hide unused panels to improve performance
• Use Tabs mode for better resource usage
• Disable auto-refresh on less critical components

Future Enhancements

Planned features for future releases:

• Keyboard shortcuts for common actions
• Export/import configuration
• Share preset configurations
• More granular component customization
• Resizable panels with drag handles
• Multi-monitor support

Support

For issues or feature requests related to dashboard customization, please check:

• Project README.md
• GitHub Issues
• Project documentation

---

Happy Trading! 🎯📈