Skip to content

tomymaritano/trading-dashboard

Repository files navigation

CriterionX Trading Dashboard

Real-time trading dashboard for the CriterionX algorithmic trading engine. Built with Next.js, TradingView Lightweight Charts, and a Kraken-inspired design system.

Part of the CriterionX ecosystem: Trading Engine · Dashboard · Wallet

Screenshot

CriterionX Dashboard

Features

Charts & Indicators

  • Candlestick chart (TradingView Lightweight Charts) with 5 timeframes (5s, 15s, 1m, 5m, 15m)
  • Technical indicators: RSI(14), MACD(12,26,9), Bollinger Bands(20,2) — toggleable
  • Moving averages: MA(7), MA(25)
  • Signal markers on chart (long/short arrows with confidence %)
  • Depth chart (cumulative bid/ask curve)

Trading Interface

  • Symbol selector dropdown with live % change per pair
  • Real L2 order book from engine (with simulated fallback)
  • Recent trades feed
  • Positions table with trailing stop tracking

Intelligence

  • Signal feed with confidence bars and risk decisions
  • AI panel (LLM sentiment scores, debate stats)
  • Whale alerts (iceberg, sweep, absorption detection)
  • Microstructure panel (imbalance, flow, regime, vol per symbol)

Controls

  • Trading settings (size, leverage, mode, exchange)
  • Engine control (presets, profiles, strategy toggles)
  • Risk panel (equity, drawdown, circuit breaker status)
  • Account panel (margin, balance, PnL)
  • Kill switch (emergency halt)

Trade History

  • Equity curve chart
  • Round-trip trade table with PnL per trade
  • Stats: win rate, profit factor, avg hold time
  • Raw orders tab

UX

  • Mobile responsive — sidebar slides over on small screens
  • Signal notifications — toast popups for high-confidence signals (>70%)
  • State persistence — survives page reload
  • Ticker marquee with crypto icons

Design System

Kraken-inspired dark theme:

  • Background: #131325
  • Accent: #7b61ff
  • Profit: #00c076 / Loss: #ff5353
  • Fonts: Geist Sans + Geist Mono
  • Min font size: 11px (Apple HIG)

Tech Stack

Next.js 16 · React 19 · TypeScript · Tailwind CSS · TradingView Lightweight Charts · shadcn/ui · Recharts

Quick Start

npm install && npm run dev   # http://localhost:3000

Connects to the trading engine WebSocket at ws://localhost:3003 (configurable via NEXT_PUBLIC_ENGINE_WS_URL).

Docker

cd .. && make up   # Starts as part of the full CriterionX stack

Related

License

MIT

About

Real-time trading cockpit — Next.js dashboard for the trading engine

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages