Implement modular architecture for Crypto Trading Bot Dashboard

- Introduced a new modular structure for the dashboard, enhancing maintainability and scalability.
- Created main application entry point in `app_new.py`, integrating all components and callbacks.
- Developed layout modules for market data, bot management, performance analytics, and system health in the `layouts` directory.
- Implemented callback modules for navigation, charts, indicators, and system health in the `callbacks` directory.
- Established reusable UI components in the `components` directory, including chart controls and indicator modals.
- Enhanced documentation to reflect the new modular structure and provide clear usage guidelines.
- Ensured all components are under 300-400 lines for better readability and maintainability.

dashboard/layouts/__init__.py

@@ -0,0 +1,15 @@
+"""
+Layout modules for the dashboard.
+"""
+
+from .market_data import get_market_data_layout
+from .bot_management import get_bot_management_layout
+from .performance import get_performance_layout
+from .system_health import get_system_health_layout
+
+__all__ = [
+    'get_market_data_layout',
+    'get_bot_management_layout', 
+    'get_performance_layout',
+    'get_system_health_layout'
+] 

dashboard/layouts/bot_management.py

@@ -0,0 +1,21 @@
+"""
+Bot management layout for the dashboard.
+"""
+
+from dash import html
+
+
+def get_bot_management_layout():
+    """Create the bot management layout."""
+    return html.Div([
+        html.H2("🤖 Bot Management", style={'color': '#2c3e50'}),
+        html.P("Bot management interface will be implemented in Phase 4.0"),
+        
+        # Placeholder for bot list
+        html.Div([
+            html.H3("Active Bots"),
+            html.Div(id='bot-list', children=[
+                html.P("No bots currently running", style={'color': '#7f8c8d'})
+            ])
+        ], style={'margin': '20px 0'})
+    ]) 

dashboard/layouts/market_data.py

@@ -0,0 +1,124 @@
+"""
+Market data layout for the dashboard.
+"""
+
+from dash import html, dcc
+from utils.logger import get_logger
+from components.charts import get_supported_symbols, get_supported_timeframes
+from components.charts.config import get_available_strategy_names
+from components.charts.indicator_manager import get_indicator_manager
+from components.charts.indicator_defaults import ensure_default_indicators
+from dashboard.components.chart_controls import (
+    create_chart_config_panel, 
+    create_parameter_controls, 
+    create_auto_update_control
+)
+
+logger = get_logger("market_data_layout")
+
+
+def get_market_data_layout():
+    """Create the market data visualization layout with indicator controls."""
+    # Get available symbols and timeframes from database
+    symbols = get_supported_symbols()
+    timeframes = get_supported_timeframes()
+    
+    # Create dropdown options
+    symbol_options = [{'label': symbol, 'value': symbol} for symbol in symbols]
+    timeframe_options = [
+        {'label': '1 Minute', 'value': '1m'},
+        {'label': '5 Minutes', 'value': '5m'},
+        {'label': '15 Minutes', 'value': '15m'},
+        {'label': '1 Hour', 'value': '1h'},
+        {'label': '4 Hours', 'value': '4h'},
+        {'label': '1 Day', 'value': '1d'},
+    ]
+    
+    # Filter timeframe options to only show those available in database
+    available_timeframes = [tf for tf in ['1m', '5m', '15m', '1h', '4h', '1d'] if tf in timeframes]
+    if not available_timeframes:
+        available_timeframes = ['1h']  # Default fallback
+    
+    timeframe_options = [opt for opt in timeframe_options if opt['value'] in available_timeframes]
+    
+    # Get available strategies and indicators
+    try:
+        strategy_names = get_available_strategy_names()
+        strategy_options = [{'label': name.replace('_', ' ').title(), 'value': name} for name in strategy_names]
+        
+        # Get user indicators from the new indicator manager
+        indicator_manager = get_indicator_manager()
+        
+        # Ensure default indicators exist
+        ensure_default_indicators()
+        
+        # Get indicators by display type
+        overlay_indicators = indicator_manager.get_indicators_by_type('overlay')
+        subplot_indicators = indicator_manager.get_indicators_by_type('subplot')
+        
+        # Create checkbox options for overlay indicators
+        overlay_options = []
+        for indicator in overlay_indicators:
+            display_name = f"{indicator.name} ({indicator.type.upper()})"
+            overlay_options.append({'label': display_name, 'value': indicator.id})
+        
+        # Create checkbox options for subplot indicators  
+        subplot_options = []
+        for indicator in subplot_indicators:
+            display_name = f"{indicator.name} ({indicator.type.upper()})"
+            subplot_options.append({'label': display_name, 'value': indicator.id})
+            
+    except Exception as e:
+        logger.warning(f"Error loading indicator options: {e}")
+        strategy_options = [{'label': 'Basic Chart', 'value': 'basic'}]
+        overlay_options = []
+        subplot_options = []
+    
+    # Create components using the new modular functions
+    chart_config_panel = create_chart_config_panel(strategy_options, overlay_options, subplot_options)
+    parameter_controls = create_parameter_controls()
+    auto_update_control = create_auto_update_control()
+    
+    return html.Div([
+        # Title and basic controls
+        html.H3("💹 Market Data Visualization", style={'color': '#2c3e50', 'margin-bottom': '20px'}),
+        
+        # Main chart controls
+        html.Div([
+            html.Div([
+                html.Label("Symbol:", style={'font-weight': 'bold'}),
+                dcc.Dropdown(
+                    id='symbol-dropdown',
+                    options=symbol_options,
+                    value=symbols[0] if symbols else 'BTC-USDT',
+                    clearable=False,
+                    style={'margin-bottom': '10px'}
+                )
+            ], style={'width': '48%', 'display': 'inline-block'}),
+            html.Div([
+                html.Label("Timeframe:", style={'font-weight': 'bold'}),
+                dcc.Dropdown(
+                    id='timeframe-dropdown',
+                    options=timeframe_options,
+                    value='1h',
+                    clearable=False,
+                    style={'margin-bottom': '10px'}
+                )
+            ], style={'width': '48%', 'float': 'right', 'display': 'inline-block'})
+        ], style={'margin-bottom': '20px'}),
+        
+        # Chart Configuration Panel
+        chart_config_panel,
+        
+        # Parameter Controls Section
+        parameter_controls,
+        
+        # Auto-update control
+        auto_update_control,
+        
+        # Chart
+        dcc.Graph(id='price-chart'),
+        
+        # Market statistics
+        html.Div(id='market-stats', style={'margin-top': '20px'})
+    ]) 

dashboard/layouts/performance.py

@@ -0,0 +1,19 @@
+"""
+Performance analytics layout for the dashboard.
+"""
+
+from dash import html
+
+
+def get_performance_layout():
+    """Create the performance monitoring layout."""
+    return html.Div([
+        html.H2("📈 Performance Analytics", style={'color': '#2c3e50'}),
+        html.P("Performance analytics will be implemented in Phase 6.0"),
+        
+        # Placeholder for performance metrics
+        html.Div([
+            html.H3("Portfolio Performance"),
+            html.P("Portfolio tracking coming soon", style={'color': '#7f8c8d'})
+        ], style={'margin': '20px 0'})
+    ]) 

dashboard/layouts/system_health.py

@@ -0,0 +1,30 @@
+"""
+System health monitoring layout for the dashboard.
+"""
+
+from dash import html
+
+
+def get_system_health_layout():
+    """Create the system health monitoring layout."""
+    return html.Div([
+        html.H2("⚙️ System Health", style={'color': '#2c3e50'}),
+        
+        # Database status
+        html.Div([
+            html.H3("Database Status"),
+            html.Div(id='database-status')
+        ], style={'margin': '20px 0'}),
+        
+        # Data collection status  
+        html.Div([
+            html.H3("Data Collection Status"),
+            html.Div(id='collection-status')
+        ], style={'margin': '20px 0'}),
+        
+        # Redis status
+        html.Div([
+            html.H3("Redis Status"),
+            html.Div(id='redis-status')
+        ], style={'margin': '20px 0'})
+    ])