📊 @backtest-kit/ui

> Full-stack UI framework for visualizing cryptocurrency trading signals, backtests, and real-time market data. Combines a Node.js backend server with a React dashboard - all in one package.

!screenshot

![TypeScript]()

Interactive dashboard for backtest-kit with signal visualization, candle charts, risk analysis, and notification management. Built with React 18, Material-UI, and Lightweight Charts.

📚 Backtest Kit Docs | 🌟 GitHub

✨ Features

- 📈 Interactive Charts: Candlestick visualization with Lightweight Charts (1m, 15m, 1h timeframes)
- 🎯 Signal Tracking: View opened, closed, scheduled, and cancelled signals with full details
- 📊 Risk Analysis: Monitor risk rejections and position management
- 🔔 Notifications: Real-time notification system for all trading events
- 💹 Trailing & Breakeven: Visualize trailing stop/take and breakeven events
- 🌐 Multi-Exchange: Support for 100+ exchanges via CCXT integration
- 🎨 Material Design: Beautiful UI with MUI 5 and Mantine components
- 🌍 i18n Ready: Internationalization support built-in

📋 What It Does

@backtest-kit/ui provides both backend API and frontend dashboard:

| Component | Description |
|-----------|-------------|
| serve() | Start HTTP server with REST API endpoints |
| getRouter() | Get expressjs-compatible router for custom middleware integration |

🚀 Installation

``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!
``

Benefits:

- 📊 Production-ready trading dashboard out of the box
- 📈 Professional chart visualization with price lines and markers
- 🔔 Complete notification system for all trading events
- 🎨 Beautiful Material Design interface
- ⚡ Fast development - focus on strategy, not UI
- 🛡️ Full TypeScript support

🤝 Contribute

Fork/PR on GitHub.

📜 License

MIT © tripolskypetr