Web Dashboard Development for AI Trading Bot

Разработка веб-дашборда для AI-трейдинг-бота

Трейдинг-бот без дашборда — чёрный ящик. Веб-дашборд предоставляет полную видимость работы бота, управление и аналитику в реальном времени.

Ключевые компоненты дашборда

Real-time P&L панель

• Текущий equity curve (интерактивный Plotly/Chart.js)
• Daily / Weekly / Monthly / Total P&L
• Текущие открытые позиции с unrealized P&L
• Drawdown gauge

Торговая активность

• Live feed сделок (WebSocket push)
• Таблица исторических сделок с фильтрацией
• Win Rate, Profit Factor, Average R:R
• Trade distribution по символам, стратегиям

Bot Status и управление

• Статус бота: Running / Paused / Error
• Кнопки управления: Pause / Resume / Emergency Stop
• Per-strategy toggle
• Risk parameters overrides (временное снижение position size)

Market Data визуализация

• TradingView Lightweight Charts встроенный график с маркерами сигналов
• Order book визуализация
• Current signals from ML models

Технологический стек

Backend

# FastAPI + WebSocket для real-time updates
from fastapi import FastAPI, WebSocket
from fastapi.staticfiles import StaticFiles
import asyncio, json

app = FastAPI()

connected_clients = set()

@app.websocket("/ws/live")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    connected_clients.add(websocket)
    try:
        while True:
            # Получение данных от бота
            data = await get_bot_metrics()
            await websocket.send_text(json.dumps(data))
            await asyncio.sleep(1)
    except:
        connected_clients.discard(websocket)

@app.get("/api/trades")
async def get_trades(symbol: str = None, from_date: str = None, limit: int = 100):
    return fetch_trades_from_db(symbol, from_date, limit)

@app.post("/api/bot/pause")
async def pause_bot():
    bot.set_state('paused')
    return {"status": "paused"}

Frontend (React + TypeScript)

// Real-time equity chart
import { Chart } from 'react-chartjs-2';
import { useWebSocket } from './hooks/useWebSocket';

const TradingDashboard = () => {
  const { data, isConnected } = useWebSocket('/ws/live');

  return (
    <div className="dashboard">
      <StatusBar connected={isConnected} botState={data?.bot_status} />
      <EquityChart data={data?.equity_history} />
      <PositionsTable positions={data?.open_positions} />
      <TradesFeed trades={data?.recent_trades} />
      <BotControls onPause={pauseBot} onResume={resumeBot} />
    </div>
  );
};

Аутентификация и безопасность

Дашборд управляет реальными деньгами — безопасность критична:

• JWT authentication с refresh tokens
• HTTPS-only (Let's Encrypt)
• IP whitelist для production
• 2FA для критичных действий (Emergency Stop, parameter changes)
• Rate limiting на API endpoints

Алерты и уведомления

Интеграция с уведомлениями:

• Email при drawdown > N%
• Telegram при ошибках бота
• Push-уведомления через PWA (Progressive Web App)

Деплой

# docker-compose.yml
services:
  dashboard:
    build: ./dashboard
    ports: ["3000:3000"]
  api:
    build: ./api
    ports: ["8000:8000"]
    environment:
      - DATABASE_URL=postgresql://...
  bot:
    build: ./bot
    depends_on: [api]
  db:
    image: postgres:14
    volumes: [pgdata:/var/lib/postgresql/data]

Nginx reverse proxy → dashboard (port 443) → api (internal). Срок разработки: 4–6 недель для full-featured dashboard.