75 lines
4.6 KiB
Markdown
75 lines
4.6 KiB
Markdown
|
# Tasks: Interactive Visualizer with Plotly + Dash
|
||
|
|
|
||
|
|
## Relevant Files
|
||
|
|
|
||
|
|
- `interactive_visualizer.py` - Main InteractiveVisualizer class implementing Plotly + Dash interface
|
||
|
|
- `tests/test_interactive_visualizer.py` - Unit tests for InteractiveVisualizer class
|
||
|
|
- `dash_app.py` - Dash application setup and layout configuration
|
||
|
|
- `tests/test_dash_app.py` - Unit tests for Dash application components
|
||
|
|
- `dash_callbacks.py` - Dash callback functions for interactivity and data updates
|
||
|
|
- `tests/test_dash_callbacks.py` - Unit tests for callback functions
|
||
|
|
- `dash_components.py` - Custom Dash components for side panel and controls
|
||
|
|
- `tests/test_dash_components.py` - Unit tests for custom components
|
||
|
|
- `data_adapters.py` - Data transformation utilities for Plotly format conversion
|
||
|
|
- `tests/test_data_adapters.py` - Unit tests for data adapter functions
|
||
|
|
- `pyproject.toml` - Updated dependencies including dash, plotly, dash-bootstrap-components
|
||
|
|
- `main.py` - Updated to support both static and interactive visualizer options
|
||
|
|
|
||
|
|
### Notes
|
||
|
|
|
||
|
|
- Unit tests should be placed in the `tests/` directory following existing project structure
|
||
|
|
- Use `uv run pytest [optional/path/to/test/file]` to run tests following project conventions
|
||
|
|
- Dash server will run locally for development, accessible via browser at http://127.0.0.1:8050
|
||
|
|
- Maintain backward compatibility with existing matplotlib visualizer
|
||
|
|
|
||
|
|
## Tasks
|
||
|
|
|
||
|
|
- [ ] 1.0 Setup Plotly + Dash Infrastructure and Dependencies
|
||
|
|
- [ ] 1.1 Add dash, plotly, and dash-bootstrap-components to pyproject.toml dependencies
|
||
|
|
- [ ] 1.2 Install and verify new dependencies with uv sync
|
||
|
|
- [ ] 1.3 Create basic dash_app.py with minimal Dash application setup
|
||
|
|
- [ ] 1.4 Verify Dash server can start and serve a basic "Hello World" page
|
||
|
|
- [ ] 1.5 Create project structure for interactive visualizer modules
|
||
|
|
|
||
|
|
- [ ] 2.0 Create Core Interactive Chart Layout with Synchronized Axes
|
||
|
|
- [ ] 2.1 Design 4-subplot layout using plotly.subplots.make_subplots with shared X-axis
|
||
|
|
- [ ] 2.2 Implement OHLC candlestick chart using plotly.graph_objects.Candlestick
|
||
|
|
- [ ] 2.3 Implement Volume bar chart using plotly.graph_objects.Bar
|
||
|
|
- [ ] 2.4 Implement OBI line chart using plotly.graph_objects.Scatter
|
||
|
|
- [ ] 2.5 Implement CVD line chart using plotly.graph_objects.Scatter
|
||
|
|
- [ ] 2.6 Configure synchronized zooming and panning across all subplots
|
||
|
|
- [ ] 2.7 Add vertical crosshair functionality spanning all charts
|
||
|
|
- [ ] 2.8 Apply professional dark theme and styling to charts
|
||
|
|
|
||
|
|
- [ ] 3.0 Implement Data Integration and Processing Pipeline
|
||
|
|
- [ ] 3.1 Create InteractiveVisualizer class maintaining set_db_path() and update_from_book() interface
|
||
|
|
- [ ] 3.2 Implement data_adapters.py for converting Book/Metric data to Plotly format
|
||
|
|
- [ ] 3.3 Create OHLC data transformation from existing bar calculation logic
|
||
|
|
- [ ] 3.4 Create metrics data transformation for OBI and CVD time series
|
||
|
|
- [ ] 3.5 Implement volume data aggregation and formatting
|
||
|
|
- [ ] 3.6 Add data caching mechanism for improved performance
|
||
|
|
- [ ] 3.7 Integrate with existing SQLiteOrderflowRepository for metrics loading
|
||
|
|
- [ ] 3.8 Handle multiple database file support seamlessly
|
||
|
|
|
||
|
|
- [ ] 4.0 Build Interactive Features and Navigation Controls
|
||
|
|
- [ ] 4.1 Implement zoom in/out functionality with mouse wheel and buttons
|
||
|
|
- [ ] 4.2 Implement pan functionality with click and drag
|
||
|
|
- [ ] 4.3 Add reset zoom and home view buttons
|
||
|
|
- [ ] 4.4 Create time range selector component for custom period selection
|
||
|
|
- [ ] 4.5 Implement time granularity controls (1min, 5min, 15min, 1hour, 6hour)
|
||
|
|
- [ ] 4.6 Add keyboard shortcuts for common navigation actions
|
||
|
|
- [ ] 4.7 Implement smooth interaction performance optimizations (<100ms response)
|
||
|
|
- [ ] 4.8 Add error handling for interaction edge cases
|
||
|
|
|
||
|
|
- [ ] 5.0 Develop Side Panel with Hover Information and CVD Reset Functionality
|
||
|
|
- [ ] 5.1 Create side panel layout using dash-bootstrap-components
|
||
|
|
- [ ] 5.2 Implement hover information display for OHLC data (timestamp, OHLC values, spread)
|
||
|
|
- [ ] 5.3 Implement hover information display for Volume data (timestamp, volume, buy/sell breakdown)
|
||
|
|
- [ ] 5.4 Implement hover information display for OBI data (timestamp, OBI value, bid/ask volumes)
|
||
|
|
- [ ] 5.5 Implement hover information display for CVD data (timestamp, CVD value, volume delta)
|
||
|
|
- [ ] 5.6 Add CVD reset functionality with click-to-reset on CVD chart
|
||
|
|
- [ ] 5.7 Implement visual markers for CVD reset points
|
||
|
|
- [ ] 5.8 Add CVD recalculation logic from reset point forward
|
||
|
|
- [ ] 5.9 Create control buttons in side panel (Reset CVD, Zoom Reset, etc.)
|
||
|
|
- [ ] 5.10 Optimize hover information update performance (<50ms latency)
|