Full-stack UI framework for visualizing cryptocurrency trading signals, backtests, and real-time market data. React dashboard with candlestick charts, signal tracking, and risk analysis.
npm install @backtest-kit/ui
@backtest-kit/ui provides both backend API and frontend dashboard:
serve() | Start HTTP server with REST API endpoints |
getRouter() | Get expressjs-compatible router for custom middleware integration |
bash
npm install @backtest-kit/ui backtest-kit ccxt
`
š Usage
$3
`typescript
import { serve } from '@backtest-kit/ui';
// Start the UI server
serve('0.0.0.0', 60050);
// Dashboard available at http://localhost:60050
`
$3
`typescript
import { setLogger } from '@backtest-kit/ui';
setLogger({
log: (msg) => console.log([UI] ${msg}),
warn: (msg) => console.warn([UI] ${msg}),
error: (msg) => console.error([UI] ${msg}),
});
`
š„ļø Dashboard Views
The frontend provides specialized views for different trading events:
| View | Description |
|------|-------------|
| Signal Opened | Entry details with chart visualization |
| Signal Closed | Exit details with PnL analysis |
| Signal Scheduled | Pending orders awaiting activation |
| Signal Cancelled | Cancelled orders with reasons |
| Risk Rejection | Signals rejected by risk management |
| Partial Profit/Loss | Partial position closures |
| Trailing Stop/Take | Trailing adjustments visualization |
| Breakeven | Breakeven level adjustments |
Each view includes:
- š Detailed information form
- š 1m, 15m, 1h candlestick charts
- š„ JSON export for all data
š” Why Use @backtest-kit/ui?
Instead of building custom dashboards:
Without backtest-kit
`typescript
// ā Without @backtest-kit/ui
// Build your own React app
// Implement chart components
// Create signal visualization
// Handle notifications
// Write API endpoints
// ... weeks of development
`
With backtest-kit
`typescript
// ā
With @backtest-kit/ui
import { serve } from '@backtest-kit/ui';
serve(); // Full dashboard ready!
``