TCPDashboard/docs/components/charts/indicators.md

Indicator System Documentation

Overview

The Crypto Trading Bot Dashboard features a comprehensive modular indicator system that allows users to create, customize, and manage technical indicators for chart analysis. The system supports both overlay indicators (displayed on the main price chart) and subplot indicators (displayed in separate panels below the main chart).

Table of Contents

1. System Architecture
2. Current Indicators
3. User Interface
4. File Structure
5. Adding New Indicators
6. Configuration Format
7. API Reference
8. Troubleshooting

System Architecture

Core Components

components/charts/
├── indicator_manager.py          # Core indicator CRUD operations
├── indicator_defaults.py         # Default indicator templates
├── layers/
│   ├── indicators.py            # Overlay indicator rendering
│   └── subplots.py             # Subplot indicator rendering
└── config/
    └── indicator_defs.py        # Indicator definitions and schemas

config/indicators/
└── user_indicators/             # User-created indicators (JSON files)
    ├── sma_abc123.json
    ├── ema_def456.json
    └── ...

Key Classes

• IndicatorManager: Handles CRUD operations for user indicators
• UserIndicator: Data structure for indicator configuration
• IndicatorStyling: Appearance and styling configuration
• Indicator Layers: Rendering classes for different indicator types

Current Indicators

Overlay Indicators

These indicators are displayed directly on the price chart:

Indicator	Type	Parameters	Description
Simple Moving Average (SMA)	sma	period (1-200)	Average price over N periods
Exponential Moving Average (EMA)	ema	period (1-200)	Weighted average giving more weight to recent prices
Bollinger Bands	bollinger_bands	period (5-100), std_dev (0.5-5.0)	Price channels based on standard deviation

Subplot Indicators

These indicators are displayed in separate panels:

Indicator	Type	Parameters	Description
Relative Strength Index (RSI)	rsi	period (2-50)	Momentum oscillator (0-100 scale)
MACD	macd	fast_period (2-50), slow_period (5-100), signal_period (2-30)	Moving average convergence divergence

User Interface

Adding Indicators

1. Click "➕ Add New Indicator" button
2. Configure Basic Settings:
   • Name: Custom name for the indicator
   • Type: Select from available indicator types
   • Description: Optional description
3. Set Parameters: Type-specific parameters appear dynamically
4. Customize Styling:
   • Color: Hex color code
   • Line Width: 1-5 pixels
5. Save: Creates a new JSON file and updates the UI

Managing Indicators

• ✅ Checkboxes: Toggle indicator visibility on chart
• ✏️ Edit Button: Modify existing indicator settings
• 🗑️ Delete Button: Remove indicator permanently

Real-time Updates

• Chart updates automatically when indicators are toggled
• Changes are saved immediately to JSON files
• No page refresh required

File Structure

Indicator JSON Format

{
  "id": "ema_ca5fd53d",
  "name": "EMA 10",
  "description": "10-period Exponential Moving Average for fast signals",
  "type": "ema",
  "display_type": "overlay",
  "parameters": {
    "period": 10
  },
  "styling": {
    "color": "#ff6b35",
    "line_width": 2,
    "opacity": 1.0,
    "line_style": "solid"
  },
  "visible": true,
  "created_date": "2025-06-04T04:16:35.455729+00:00",
  "modified_date": "2025-06-04T04:54:49.608549+00:00"
}

Directory Structure

config/indicators/
└── user_indicators/
    ├── sma_abc123.json          # Individual indicator files
    ├── ema_def456.json
    ├── rsi_ghi789.json
    └── macd_jkl012.json

Adding New Indicators

For developers who want to add new indicator types to the system, please refer to the comprehensive step-by-step guide:

📋 Quick Guide: Adding New Indicators

This guide covers:

• ✅ Complete 11-step implementation checklist
• ✅ Full code examples (Stochastic Oscillator implementation)
• ✅ File modification requirements
• ✅ Testing checklist and common patterns
• ✅ Tips and best practices

Configuration Format

User Indicator Structure

@dataclass
class UserIndicator:
    id: str                    # Unique identifier
    name: str                  # Display name
    description: str           # User description
    type: str                  # Indicator type (sma, ema, etc.)
    display_type: str          # "overlay" or "subplot"
    parameters: Dict[str, Any] # Type-specific parameters
    styling: IndicatorStyling  # Appearance settings
    visible: bool = True       # Default visibility
    created_date: datetime     # Creation timestamp
    modified_date: datetime    # Last modification timestamp

Styling Options

@dataclass
class IndicatorStyling:
    color: str = "#007bff"        # Hex color code
    line_width: int = 2           # Line thickness (1-5)
    opacity: float = 1.0          # Transparency (0.0-1.0)
    line_style: str = "solid"     # Line style

Parameter Examples

# SMA/EMA Parameters
{"period": 20}

# RSI Parameters
{"period": 14}

# MACD Parameters
{
    "fast_period": 12,
    "slow_period": 26,
    "signal_period": 9
}

# Bollinger Bands Parameters
{
    "period": 20,
    "std_dev": 2.0
}

API Reference

IndicatorManager Class

class IndicatorManager:
    def create_indicator(self, name: str, indicator_type: str, 
                        parameters: Dict[str, Any], **kwargs) -> Optional[UserIndicator]
    
    def load_indicator(self, indicator_id: str) -> Optional[UserIndicator]
    
    def update_indicator(self, indicator_id: str, **kwargs) -> bool
    
    def delete_indicator(self, indicator_id: str) -> bool
    
    def list_indicators(self) -> List[UserIndicator]
    
    def get_indicators_by_type(self, display_type: str) -> List[UserIndicator]

Usage Examples

# Get indicator manager
manager = get_indicator_manager()

# Create new indicator
indicator = manager.create_indicator(
    name="My SMA 50",
    indicator_type="sma",
    parameters={"period": 50},
    description="50-period Simple Moving Average",
    color="#ff0000"
)

# Load indicator
loaded = manager.load_indicator("sma_abc123")

# Update indicator
success = manager.update_indicator(
    "sma_abc123",
    name="Updated SMA",
    parameters={"period": 30}
)

# Delete indicator
deleted = manager.delete_indicator("sma_abc123")

# List all indicators
all_indicators = manager.list_indicators()

# Get by type
overlay_indicators = manager.get_indicators_by_type("overlay")
subplot_indicators = manager.get_indicators_by_type("subplot")

Troubleshooting

Common Issues

1. Indicator not appearing in dropdown

   • Check if registered in INDICATOR_REGISTRY
   • Verify the indicator type matches the class name

2. Parameters not saving

   • Ensure parameter fields are added to save callback
   • Check parameter collection logic in save_new_indicator

3. Chart not updating

   • Verify the indicator layer implements calculate_values and create_traces
   • Check if indicator is registered in the correct registry

4. File permission errors

   • Ensure config/indicators/user_indicators/ directory is writable
   • Check file permissions on existing JSON files

Debug Information

• Check browser console for JavaScript errors
• Look at application logs for Python exceptions
• Verify JSON file structure with a validator
• Test indicator calculations with sample data

Performance Considerations

• Indicators with large periods may take longer to calculate
• Consider data availability when setting parameter limits
• Subplot indicators require additional chart space
• Real-time updates may impact performance with many indicators

Best Practices

1. Naming Conventions

   • Use descriptive names for indicators
   • Include parameter values in names (e.g., "SMA 20")
   • Use consistent naming patterns

2. Parameter Validation

   • Set appropriate min/max values for parameters
   • Provide helpful descriptions for parameters
   • Use sensible default values

3. Error Handling

   • Handle insufficient data gracefully
   • Provide meaningful error messages
   • Log errors for debugging

4. Performance

   • Cache calculated values when possible
   • Optimize calculation algorithms
   • Limit the number of active indicators

5. User Experience

   • Provide immediate visual feedback
   • Use intuitive color schemes
   • Group related indicators logically