3. 7 Enhance chart functionality with time range controls and stability improvements

- Updated `app_new.py` to run the application in debug mode for stability.
- Introduced a new time range control panel in `dashboard/components/chart_controls.py`, allowing users to select predefined time ranges and custom date ranges.
- Enhanced chart callbacks in `dashboard/callbacks/charts.py` to handle time range inputs, ensuring accurate market statistics and analysis based on user selections.
- Implemented logic to preserve chart state during updates, preventing resets of zoom/pan settings.
- Updated market statistics display to reflect the selected time range, improving user experience and data relevance.
- Added a clear button for custom date ranges to reset selections easily.
- Enhanced documentation to reflect the new time range features and usage guidelines.

dashboard/components/chart_controls.py

@@ -101,4 +101,84 @@ def create_auto_update_control():
             style={'margin-bottom': '10px'}
         ),
         html.Div(id='update-status', style={'font-size': '12px', 'color': '#7f8c8d'})
-    ]) 
+    ])
+
+
+def create_time_range_controls():
+    """Create the time range control panel."""
+    return html.Div([
+        html.H5("⏰ Time Range Controls", style={'color': '#2c3e50', 'margin-bottom': '15px'}),
+        
+        # Quick Select Dropdown
+        html.Div([
+            html.Label("Quick Select:", style={'font-weight': 'bold', 'margin-bottom': '5px', 'display': 'block'}),
+            dcc.Dropdown(
+                id='time-range-quick-select',
+                options=[
+                    {'label': '🕐 Last 1 Hour', 'value': '1h'},
+                    {'label': '🕐 Last 4 Hours', 'value': '4h'},
+                    {'label': '🕐 Last 6 Hours', 'value': '6h'},
+                    {'label': '🕐 Last 12 Hours', 'value': '12h'},
+                    {'label': '📅 Last 1 Day', 'value': '1d'},
+                    {'label': '📅 Last 3 Days', 'value': '3d'},
+                    {'label': '📅 Last 7 Days', 'value': '7d'},
+                    {'label': '📅 Last 30 Days', 'value': '30d'},
+                    {'label': '📅 Custom Range', 'value': 'custom'},
+                    {'label': '🔴 Real-time', 'value': 'realtime'}
+                ],
+                value='7d',
+                placeholder="Select time range",
+                style={'margin-bottom': '15px'}
+            )
+        ]),
+        
+        # Custom Date Range Picker
+        html.Div([
+            html.Label("Custom Date Range:", style={'font-weight': 'bold', 'margin-bottom': '5px', 'display': 'block'}),
+            html.Div([
+                dcc.DatePickerRange(
+                    id='custom-date-range',
+                    display_format='YYYY-MM-DD',
+                    style={'display': 'inline-block', 'margin-right': '10px'}
+                ),
+                html.Button(
+                    "Clear",
+                    id="clear-date-range-btn",
+                    className="btn btn-sm btn-outline-secondary",
+                    style={
+                        'display': 'inline-block',
+                        'vertical-align': 'top',
+                        'margin-top': '7px',
+                        'padding': '5px 10px',
+                        'font-size': '12px'
+                    }
+                )
+            ], style={'margin-bottom': '15px'})
+        ]),
+        
+        # Analysis Mode Toggle
+        html.Div([
+            html.Label("Analysis Mode:", style={'font-weight': 'bold', 'margin-bottom': '5px', 'display': 'block'}),
+            dcc.RadioItems(
+                id='analysis-mode-toggle',
+                options=[
+                    {'label': '🔴 Real-time Updates', 'value': 'realtime'},
+                    {'label': '🔒 Analysis Mode (Locked)', 'value': 'locked'}
+                ],
+                value='realtime',
+                inline=True,
+                style={'margin-bottom': '10px'}
+            )
+        ]),
+        
+        # Time Range Status
+        html.Div(id='time-range-status', 
+                style={'font-size': '12px', 'color': '#7f8c8d', 'font-style': 'italic'})
+        
+    ], style={
+        'border': '1px solid #bdc3c7',
+        'border-radius': '8px',
+        'padding': '15px',
+        'background-color': '#f0f8ff',
+        'margin-bottom': '20px'
+    })