# Task 3.4: Modular Chart Layers System ## Overview Implementation of a flexible, strategy-driven chart system that supports technical indicator overlays, subplot management, and future bot signal integration. This system will replace the basic chart functionality with a modular architecture that can adapt to different trading strategies and their specific indicator requirements. ## Relevant Files - `components/charts/__init__.py` - Public API exports for the new modular chart system - `components/charts/builder.py` - Main ChartBuilder class orchestrating chart creation and layer management - `components/charts/utils.py` - Chart utilities and helper functions for data processing and validation - `components/charts/config/__init__.py` - Configuration package initialization - `components/charts/config/indicator_defs.py` - Base indicator definitions, schemas, and default parameters - `components/charts/config/strategy_charts.py` - Strategy-specific chart configurations and presets - `components/charts/config/defaults.py` - Default chart configurations and fallback settings - `components/charts/layers/__init__.py` - Chart layers package initialization - `components/charts/layers/base.py` - Base candlestick chart layer implementation - `components/charts/layers/indicators.py` - Indicator overlay rendering (SMA, EMA, Bollinger Bands) - `components/charts/layers/subplots.py` - Subplot management for indicators like RSI and MACD - `components/charts/layers/signals.py` - Strategy signal overlays and trade markers (future bot integration) - `app.py` - Updated dashboard integration with indicator selection controls - `components/dashboard.py` - Enhanced dashboard layout with chart configuration UI - `tests/test_chart_builder.py` - Unit tests for ChartBuilder class functionality - `tests/test_chart_layers.py` - Unit tests for individual chart layer components - `tests/test_chart_integration.py` - Integration tests for full chart creation workflow ### Notes - The modular design allows each chart layer to be tested independently - Strategy configurations are JSON-based for easy modification without code changes - Integration with existing `data/common/indicators.py` for technical indicator calculations - Backward compatibility maintained with existing `components/charts.py` API - Use `uv run pytest tests/test_chart_*.py` to run chart-specific tests - create documentation with importand components in ./docs/components/charts/ folder without redundancy ## Tasks - [x] 1.0 Foundation Infrastructure Setup - [x] 1.1 Create components/charts directory structure and package files - [x] 1.2 Implement ChartBuilder class with basic candlestick chart creation - [x] 1.3 Create chart utilities for data processing and validation - [x] 1.4 Integrate with existing data/common/indicators.py module - [x] 1.5 Setup backward compatibility with existing components/charts.py API - [x] 1.6 Create basic unit tests for ChartBuilder class - [ ] 2.0 Indicator Layer System Implementation - [ ] 2.1 Create base candlestick chart layer with volume subplot - [ ] 2.2 Implement overlay indicator rendering (SMA, EMA) - [ ] 2.3 Add Bollinger Bands overlay functionality - [ ] 2.4 Create subplot management system for secondary indicators - [ ] 2.5 Implement RSI subplot with proper scaling and styling - [ ] 2.6 Add MACD subplot with signal line and histogram - [ ] 2.7 Create indicator calculation integration with market data - [ ] 2.8 Add error handling for insufficient data scenarios - [ ] 2.9 Unit test all indicator layer components - [ ] 3.0 Strategy Configuration System - [ ] 3.1 Design indicator definition schema and validation - [ ] 3.2 Create default indicator configurations and parameters - [ ] 3.3 Implement strategy-specific chart configuration system - [ ] 3.4 Add configuration validation and error handling - [ ] 3.5 Create example strategy configurations (EMA crossover, momentum) - [ ] 3.6 Add configuration fallback mechanisms for missing strategies - [ ] 3.7 Unit test configuration system and validation - [ ] 4.0 Dashboard Integration and UI Controls - [ ] 4.1 Add indicator selection checkboxes to dashboard layout - [ ] 4.2 Create real-time chart updates with indicator toggling - [ ] 4.3 Implement parameter adjustment controls for indicators - [ ] 4.4 Add strategy selection dropdown for predefined configurations - [ ] 4.5 Update chart callback functions to handle new layer system - [ ] 4.6 Ensure backward compatibility with existing dashboard features - [ ] 4.7 Test dashboard integration with real market data - [ ] 5.0 Signal Layer Foundation for Future Bot Integration - [ ] 5.1 Create signal layer architecture for buy/sell markers - [ ] 5.2 Implement trade entry/exit point visualization - [ ] 5.3 Add support/resistance line drawing capabilities - [ ] 5.4 Create extensible interface for custom strategy signals - [ ] 5.5 Add signal color and style customization options - [ ] 5.6 Prepare integration points for bot management system - [ ] 5.7 Create foundation tests for signal layer functionality - [ ] 6.0 Documentation - [ ] 6.1 Create documentation for the chart layers system - [ ] 6.2 Add documentation to the README - [ ] 6.3 Create documentation for the ChartBuilder class - [ ] 6.4 Create documentation for the ChartUtils class - [ ] 6.5 Create documentation for the ChartConfig package - [ ] 6.6 Create documentation how to add new indicators - [ ] 6.7 Create documentation how to add new strategies