DSTA Dashboard Architecture Design¶

Version: 1.0
Last Updated: 2026-01-26
Status: Design Phase

Table of Contents¶

Overview
Technology Stack
Architecture
Component Structure
API Requirements
Wireframes
Implementation Roadmap

Overview¶

The DSTA dashboard provides a web-based interface for monitoring trading strategies, analyzing performance, and managing trading operations. It serves as the primary user interface for traders and analysts.

Design Goals¶

Real-time Updates: Display live trading data with minimal latency
Responsive Design: Support desktop, tablet, and mobile devices
Modularity: Component-based architecture for maintainability
Performance: Optimize for large datasets and frequent updates
Extensibility: Easy to add new visualizations and features

Key Features¶

Portfolio Overview: Current positions, P&L, and account balances
Performance Analytics: Charts, metrics, and historical analysis
Strategy Management: Monitor and control trading strategies
Trade Journal: Detailed trade logs with filtering and search
Risk Monitoring: Real-time risk metrics and alerts
Market Data: Price charts with technical indicators

Technology Stack¶

Option 1: Django Templates + HTMX (Recommended)¶

Advantages: - Minimal JavaScript complexity - Server-side rendering for better SEO and initial load - Leverages existing Django infrastructure - Easy authentication and session management - HTMX provides modern interactivity without heavy JavaScript

Stack: - Backend: Django 5.0+ - Frontend: Django Templates + HTMX + Alpine.js - Charts: Chart.js or Plotly.js - Styling: Tailwind CSS - Real-time: Django Channels (WebSockets)

When to choose: Fast development, small team, simpler requirements

Option 2: React SPA¶

Advantages: - Rich interactive experience - Large ecosystem of components - Better for complex UIs - Strong typing with TypeScript

Stack: - Backend: Django REST Framework - Frontend: React 18+ with TypeScript - State Management: Redux Toolkit or Zustand - Charts: Recharts or Plotly.js - Styling: Tailwind CSS - Real-time: WebSocket client

When to choose: Complex UI requirements, larger team, long-term scalability

Option 3: Vue.js¶

Advantages: - Simpler learning curve than React - Good balance of features and simplicity - Excellent documentation

Stack: - Backend: Django REST Framework - Frontend: Vue 3 + TypeScript - State Management: Pinia - Charts: Vue-chartjs or Plotly.js - Styling: Tailwind CSS

When to choose: Team prefers Vue, moderate complexity

Selected Stack: Django Templates + HTMX¶

For this project, we'll use Django Templates + HTMX for the following reasons:

Faster initial development
Leverages existing Django expertise
Easier deployment (no separate build step)
Good enough performance for trading dashboard
Can migrate to SPA later if needed

Architecture¶

High-Level Architecture¶

┌─────────────────────────────────────────────────────────┐
│                     Browser (Client)                    │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
│  │  HTML/HTMX   │  │  Alpine.js   │  │  Chart.js    │  │
│  └──────────────┘  └──────────────┘  └──────────────┘  │
└────────────────┬────────────────────────────────────────┘
                 │ HTTP/WebSocket
                 │
┌────────────────▼────────────────────────────────────────┐
│                    Django Application                   │
│  ┌──────────────────────────────────────────────────┐  │
│  │                 URL Routing                       │  │
│  └────────┬─────────────────────────────────────────┘  │
│           │                                              │
│  ┌────────▼─────────┐  ┌─────────────┐                 │
│  │  View Layer      │  │   Django    │                 │
│  │  - Dashboard     │  │  Channels   │                 │
│  │  - Portfolio     │  │ (WebSocket) │                 │
│  │  - Charts        │  └─────────────┘                 │
│  │  - Trade Journal │                                   │
│  └────────┬─────────┘                                   │
│           │                                              │
│  ┌────────▼─────────────────────────────┐              │
│  │        Service Layer                 │              │
│  │  - PortfolioService                  │              │
│  │  - PerformanceAnalyzer               │              │
│  │  - TradeJournalService               │              │
│  │  - MarketDataService                 │              │
│  └────────┬─────────────────────────────┘              │
│           │                                              │
│  ┌────────▼─────────────────────────────┐              │
│  │        Data Layer                    │              │
│  │  - Django ORM Models                 │              │
│  │  - Redis Cache                       │              │
│  └──────────────────────────────────────┘              │
└─────────────────────────────────────────────────────────┘
                 │
                 │
┌────────────────▼────────────────────────────────────────┐
│                External Services                        │
│  - PostgreSQL Database                                  │
│  - Redis (Cache + WebSocket)                            │
│  - Celery Workers                                       │
└─────────────────────────────────────────────────────────┘

Component Interaction Flow¶

User Action → HTMX Request → Django View → Service Layer → Database
                                              ↓
                                          Response
                                              ↓
                                        HTML Fragment
                                              ↓
                                      HTMX Updates DOM

Real-Time Updates Flow¶

WebSocket Connection → Django Channels → Consumer
                                            ↓
                                    Subscribe to Events
                                            ↓
                                    Trading Event Occurs
                                            ↓
                                    Broadcast to Clients
                                            ↓
                                    Update UI Automatically

Component Structure¶

Directory Layout¶

src/
├── api/
│   ├── dashboard/               # Dashboard app
│   │   ├── __init__.py
│   │   ├── views.py            # View controllers
│   │   ├── urls.py             # URL routing
│   │   ├── services.py         # Business logic
│   │   ├── consumers.py        # WebSocket consumers
│   │   └── utils.py            # Helper functions
│   └── templates/
│       └── dashboard/
│           ├── base.html       # Base template
│           ├── index.html      # Main dashboard
│           ├── portfolio.html  # Portfolio page
│           ├── performance.html # Performance page
│           ├── trades.html     # Trade journal
│           ├── charts.html     # Chart page
│           └── partials/       # HTMX fragments
│               ├── positions.html
│               ├── orders.html
│               ├── metrics.html
│               └── alerts.html
├── static/
│   ├── css/
│   │   └── dashboard.css       # Custom styles
│   └── js/
│       ├── dashboard.js        # Main JS
│       ├── charts.js           # Chart configurations
│       └── websocket.js        # WebSocket handling
└── tests/
    └── dashboard/
        ├── test_views.py
        ├── test_services.py
        └── test_consumers.py

Core Components¶

1. Dashboard View¶

Purpose: Main landing page with overview
Features:
Portfolio summary card
Recent trades table
Performance metrics
Active alerts
Quick actions

2. Portfolio View¶

Purpose: Detailed portfolio information
Features:
All positions with P&L
Pending orders
Account balances
Position allocation chart
Real-time updates via WebSocket

3. Performance View¶

Purpose: Historical performance analysis
Features:
Equity curve chart
Drawdown chart
Return distribution
Monthly returns heatmap
Strategy comparison

4. Trade Journal View¶

Purpose: Detailed trade history
Features:
Filterable trade table
Search functionality
Trade details modal
Export to CSV
Manual notes and tags

5. Charts View¶

Purpose: Market data visualization
Features:
Candlestick charts
Technical indicators overlay
Entry/exit markers
Multiple timeframes
Drawing tools

API Requirements¶

REST Endpoints¶

Portfolio¶

GET  /api/dashboard/portfolio/
GET  /api/dashboard/portfolio/positions/
GET  /api/dashboard/portfolio/orders/
GET  /api/dashboard/portfolio/balance/

Performance¶

GET  /api/dashboard/performance/equity-curve/?start=&end=
GET  /api/dashboard/performance/metrics/
GET  /api/dashboard/performance/drawdown/
GET  /api/dashboard/performance/returns/

Trades¶

GET  /api/dashboard/trades/?symbol=&status=&start=&end=&limit=
GET  /api/dashboard/trades/<id>/
POST /api/dashboard/trades/<id>/note/

Charts¶

GET  /api/dashboard/charts/ohlcv/?symbol=&interval=&start=&end=
GET  /api/dashboard/charts/indicators/?symbol=&indicators=[]

Strategies¶

GET  /api/dashboard/strategies/
GET  /api/dashboard/strategies/<id>/
POST /api/dashboard/strategies/<id>/pause/
POST /api/dashboard/strategies/<id>/resume/

WebSocket Channels¶

Portfolio Updates¶

# Channel: portfolio
{
    "type": "portfolio_update",
    "data": {
        "total_value": 50000.00,
        "unrealized_pnl": 1234.56,
        "timestamp": "2026-01-26T12:00:00Z"
    }
}

Position Updates¶

# Channel: positions
{
    "type": "position_update",
    "data": {
        "symbol": "BTCUSDT",
        "quantity": 0.5,
        "avg_price": 45000.00,
        "current_price": 46000.00,
        "unrealized_pnl": 500.00
    }
}

Order Updates¶

# Channel: orders
{
    "type": "order_filled",
    "data": {
        "order_id": "12345",
        "symbol": "ETHUSDT",
        "side": "BUY",
        "quantity": 2.0,
        "price": 3000.00,
        "status": "FILLED"
    }
}

Alert Notifications¶

# Channel: alerts
{
    "type": "alert",
    "data": {
        "severity": "WARNING",
        "title": "High Drawdown",
        "message": "Current drawdown exceeded 5%",
        "timestamp": "2026-01-26T12:00:00Z"
    }
}

Wireframes¶

Main Dashboard¶

┌─────────────────────────────────────────────────────────────┐
│  DSTA Trading Dashboard                   [User] [Settings] │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐        │
│  │ Portfolio   │  │ Daily P&L   │  │ Win Rate    │        │
│  │ $50,000     │  │ +$1,234     │  │ 65%         │        │
│  │ +2.5%       │  │ +2.5%       │  │ ↑ 5%        │        │
│  └─────────────┘  └─────────────┘  └─────────────┘        │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  Equity Curve                                        │  │
│  │  [Chart showing portfolio value over time]          │  │
│  │                                                      │  │
│  └──────────────────────────────────────────────────────┘  │
│                                                              │
│  ┌────────────────────────┐  ┌──────────────────────────┐  │
│  │  Active Positions      │  │  Recent Trades           │  │
│  │  ┌──────────────────┐  │  │  ┌────────────────────┐  │  │
│  │  │ BTC  +$500       │  │  │  │ ETH BUY  +$120     │  │  │
│  │  │ ETH  +$234       │  │  │  │ BTC SELL +$340     │  │  │
│  │  │ SOL  -$45        │  │  │  │ SOL BUY  -$45      │  │  │
│  │  └──────────────────┘  │  │  └────────────────────┘  │  │
│  └────────────────────────┘  └──────────────────────────┘  │
│                                                              │
└─────────────────────────────────────────────────────────────┘

Portfolio Page¶

┌─────────────────────────────────────────────────────────────┐
│  Portfolio Overview                                          │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  Total Value: $50,000  |  Cash: $25,000  |  Positions: 10   │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  Positions                               [Export CSV] │  │
│  ├──────────┬─────────┬─────────┬──────────┬──────────┤  │
│  │ Symbol   │ Qty     │ Avg Price│ Current  │ P&L      │  │
│  ├──────────┼─────────┼─────────┼──────────┼──────────┤  │
│  │ BTCUSDT  │ 0.5     │ $45,000 │ $46,000  │ +$500    │  │
│  │ ETHUSDT  │ 2.0     │ $2,900  │ $3,000   │ +$234    │  │
│  │ SOLUSDT  │ 10      │ $100    │ $95      │ -$45     │  │
│  └──────────┴─────────┴─────────┴──────────┴──────────┘  │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  Pending Orders                       [Cancel All]   │  │
│  ├──────────┬─────────┬────────┬─────────┬──────────┤   │
│  │ Symbol   │ Side    │ Type   │ Price   │ Status   │   │
│  ├──────────┼─────────┼────────┼─────────┼──────────┤   │
│  │ BTCUSDT  │ SELL    │ LIMIT  │ $47,000 │ PENDING  │   │
│  │ ETHUSDT  │ BUY     │ LIMIT  │ $2,800  │ PENDING  │   │
│  └──────────┴─────────┴────────┴─────────┴──────────┘   │
│                                                              │
└─────────────────────────────────────────────────────────────┘

Performance Page¶

┌─────────────────────────────────────────────────────────────┐
│  Performance Analysis                  [Date Range: 30 days]│
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  Equity Curve                                        │  │
│  │  [Line chart showing portfolio growth]              │  │
│  └──────────────────────────────────────────────────────┘  │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  Drawdown                                            │  │
│  │  [Area chart showing drawdown periods]              │  │
│  └──────────────────────────────────────────────────────┘  │
│                                                              │
│  ┌─────────────────────┐  ┌────────────────────────────┐  │
│  │  Key Metrics        │  │  Return Distribution       │  │
│  │  Total Return: 25%  │  │  [Histogram of returns]    │  │
│  │  Sharpe: 1.8        │  │                            │  │
│  │  Max DD: -8%        │  │                            │  │
│  │  Win Rate: 65%      │  │                            │  │
│  └─────────────────────┘  └────────────────────────────┘  │
│                                                              │
└─────────────────────────────────────────────────────────────┘

Implementation Roadmap¶

Phase 1: Foundation (Week 1)¶

Phase 2: Portfolio & Trading (Week 2)¶

Phase 3: Performance Analytics (Week 3)¶

Phase 4: Trade Journal (Week 4)¶

Phase 5: Charts & Indicators (Week 5)¶

Phase 6: Polish & Optimization (Week 6)¶

Technical Considerations¶

Performance Optimization¶

Caching Strategy:
Redis cache for expensive queries
Browser caching for static assets
Partial template caching
Database Optimization:
Indexed queries
Query result pagination
Aggregation at database level
Frontend Optimization:
Lazy loading for charts
Debounced WebSocket updates
Virtual scrolling for large tables

Security¶

Authentication: Django's built-in auth system
CSRF Protection: CSRF tokens on all forms
WebSocket Auth: Token-based authentication for WS
Rate Limiting: Throttle API endpoints
Input Validation: Server-side validation for all inputs

Scalability¶

Horizontal Scaling: Stateless views for load balancing
Database Sharding: By symbol or time period
CDN: Static assets served from CDN
Caching Layer: Redis for session and data caching

Monitoring¶

Error Tracking: Sentry integration
Performance Monitoring: Django Debug Toolbar (dev only)
User Analytics: Track feature usage
Health Checks: Endpoint monitoring

Conclusion¶

This design provides a solid foundation for the DSTA dashboard. The Django + HTMX approach balances development speed with functionality, while remaining flexible enough to evolve with project requirements.

The modular architecture allows incremental development, with each phase building on previous work. The real-time WebSocket integration ensures traders have up-to-date information, while the caching strategy maintains performance.

Next steps: 1. Review and approve this design 2. Begin Phase 1 implementation 3. Iterate based on user feedback