Dashboard widgets
The 15 tile widgets that make up the Dashboard home page — Orderbook Heatmap, RSI Heatmap, Crypto / Forex Signals, Alerts Activity, Liquidations, Whales / Alt Screener, Autotrade, Trading API status, Quick Actions, and more. What each shows, how to read it, and which page they deep-link into.
The Dashboard page (the default landing screen after login) is a tile grid of 15 widgets — each one a compact view into a different live trading surface. Click any tile to deep-link into the full surface; hover for tooltips on individual data points. The widget set is curated (you can't add custom widgets to this grid yet) but the order is responsive — tiles reflow based on viewport width.
Layout
The grid is responsive:
- Desktop (≥ 1400 px): 4-column grid. Hero widgets (Orderbook Heatmap, RSI Heatmap) span 2 columns each at the top.
- Tablet (1024-1400 px): 3-column grid. Heroes span 2.
- Mobile (< 1024 px): Single column, stacked.
Above the grid:
- Header bar with
DASHBOARD · LIVEbadge and a UTC clock. - PWA install banner (one-time, dismissable) on browsers that support install.
The 15 widgets
Hero row (top of grid)
| Widget | What it shows | Deep-link |
|---|---|---|
| Orderbook Heatmap | Compact BTCUSDT depth heatmap with the same rendering as the chart. Live ladder updates at ~1 Hz. Click → chart terminal with heatmap full-screen. | Orderbook Heatmap indicator |
| RSI Heatmap | Mini RSI heatmap across the top 100 USDⓈ-M pairs on the 4h timeframe. Cell color = RSI value. Click a cell → that symbol in the chart terminal. | RSI Heatmap module |
These are larger (2-column span) because they're the most data-dense and most visited tiles.
Trading-data row
| Widget | What it shows | Deep-link |
|---|---|---|
| Crypto Signals | Latest 5-10 USDⓈ-M futures signals — symbol, side, entry, current ROE. Click → USDⓈ-M Signals hub. | USDⓈ-M Signals overview |
| Forex Signals | Latest 5-10 forex signals (if activeForex is enabled). Pair, side, pip P&L. Click → Forex Signals hub. | Forex Signals overview |
| Alerts Activity | Recent alert events — indicator alerts, screener alerts, trade alerts. Color-coded by type. Click → Trading Alerts page. | Trading Alerts overview |
| Trading API | Status of your connected exchange APIs. Green if connected and authenticated; red if disconnected. Click → API Connect page. | API Connect overview |
Trading-action row
| Widget | What it shows | Deep-link |
|---|---|---|
| Autotrade | Running autotrade positions — count, total P&L, last execution. Mini equity chart. Click → Auto Trade panel. | Auto Trade overview |
| Alt Screener | Currently-triggered alt-coin buy/sell signals. Color-banded by signal strength. Click → Alt Screener. | Altcoin Screener |
| Liquidations | Last 5-15 large liquidation events across the market. Notional, side, symbol, time. Click → Liquidations side-panel. | Liquidations indicator |
| Whales Screener | Large-order alerts from the orderbook. Click → Whales Screener panel. | Whales screener |
Utility row
| Widget | What it shows | Deep-link |
|---|---|---|
| Quick Actions | One-click shortcuts: Open chart · Create alert · Browse signals · Manage API · Open custom script. Each is a button tile. | Cross-section deep links. |
| Charting Library | Demo / promotion for the standalone kline-orderbook-chart npm package. Click → Charting Library docs. | Charting Library introduction |
| Chart Benchmark | Performance metrics for the chart engine — render fps, decode time, memory. Useful for diagnosing slowness; mostly developer-oriented. | — |
Additional (visible per-plan)
| Widget | What it shows | When visible |
|---|---|---|
| Portfolio Summary | Mini portfolio summary card with total equity and 24h P&L across accounts. | Always visible if any API is connected. |
| Recent Trades | Last 10 executed trades across all connected accounts. | Always visible if any API is connected. |
| Market Overview | Mini market-wide BTC/ETH/SOL price ticker with 24h % change. | Always visible. |
Live-data refresh
All widgets are live — they update without a page reload:
| Update mechanism | Used by |
|---|---|
| WebSocket push (sub-second) | Orderbook Heatmap, Crypto/Forex Signals, Liquidations, Whales Screener, Trading API status |
| Polling (5-10s) | RSI Heatmap, Alt Screener, Portfolio Summary, Recent Trades |
| Polling (60s) | Alerts Activity, Market Overview |
| Render-only (no fetch) | Quick Actions, Charting Library promo, Chart Benchmark |
When a tile is in the "loading" state for > 5 seconds, a subtle pulse shows; if it stays loading > 30 seconds, an error chip with retry button appears.
Widget chrome
Every widget tile follows the same chrome rules:
- Glass background — frosted, semi-translucent over the page bg.
- 1-px hairline border — no shadows.
- Header: widget title + optional small-icon button (refresh / settings).
- Footer: "Open full view →" link → deep-link into the relevant surface.
- Hover state: border brightens slightly.
Tiles don't animate, glow, or shadow on hover — pro-terminal aesthetic.
Customization
Currently:
- Tile order: fixed. We curate the most-useful layout based on user research.
- Tile visibility: Portfolio Summary, Recent Trades, and Forex Signals auto-hide if you have nothing connected / aren't on
activeForex. - Tile sizing: heroes span 2; rest span 1. Not user-tunable.
A future iteration will support full drag-and-drop reordering and resize. Not on the immediate roadmap.
Mobile dashboard
On mobile the grid stacks single-column. To reduce scroll fatigue:
- Hero widgets are stacked at top.
- "Big" widgets (with charts or tables) get a compact mobile variant.
- Quick Actions becomes a 2-column tile sub-grid at the bottom (always accessible after scrolling).
- Pull-to-refresh works on the whole dashboard.
PWA install banner
If your browser supports installing the app as a PWA (Chrome / Edge / Safari iOS / Brave / Firefox-some-platforms) and you've never installed:
- A banner appears at the top of the dashboard.
- Click "Install App" → browser-native install prompt.
- Once installed, the banner never reappears.
- On iOS, the banner triggers an in-app guide showing the Share-sheet path (iOS doesn't support
beforeinstallprompt).
See Add to home screen.
Difference from Chart Terminal widgets
The Dashboard widgets are a DIFFERENT system from the Chart Terminal Widget Picker:
| Aspect | Dashboard widgets | Chart Terminal widgets |
|---|---|---|
| Location | Home page (/dashboards/dashboard) | Inside the chart terminal (/trading) |
| Purpose | Multi-surface at-a-glance home | Dockable panels for in-chart workflow |
| Customisation | Curated, no add/remove | User picks 0-12 active |
| Layout | Responsive tile grid | Side-panel + bottom-panel + floating docks |
| Persistence | Same for all users | Per-device localStorage |
Don't confuse them — the names are similar but the function is opposite (Dashboard = "show me a summary of everywhere"; Chart widgets = "let me build my chart workspace").
What's next
- Dashboard & Portfolio — the dashboard's Portfolio view (deep analytics).
- Chart Terminal widgets — the other widget system.
- Web App introduction — the four product surfaces.