Nydar's drag-and-drop dashboard arranges 46 widgets across a 12-column responsive grid with 20 pre-built layouts for crypto, stocks, and forex
Nydar's dashboard is a drag-and-drop trading workspace built on react-grid-layout that arranges 46 configurable widgets across a responsive 12-column grid. Traders add, remove, resize, and reposition widgets covering candlestick charts with 105 technical indicators, ML-powered buy/sell signals with 53-56% directional accuracy, order flow analysis (footprint charts, volume delta, liquidation heatmaps), Level 2 market depth at up to 5,000 price levels, options flow with Black-Scholes Greeks, risk analytics with Value at Risk, and 16 alternative data widgets. As described in Ben Shneiderman's Designing the User Interface (Pearson, 6th edition, 2016), direct manipulation interfaces where users drag objects to rearrange them produce faster task completion than menu-driven configuration.
Nydar includes 20 pre-built layouts optimized for specific trading styles — 8 for US stocks, 6 for cryptocurrency, 3 for forex, and 3 universal configurations — each loading 6-16 widgets in a single click. Custom arrangements persist automatically across sessions using browser local storage, so the dashboard loads exactly as the trader left it. The layout system covers 3 asset classes: 200+ cryptocurrency pairs, US equities, and 50+ forex pairs.
Nydar's 46 dashboard widgets span 7 categories. Each widget streams live data via WebSocket and updates independently.
Price Chart with 6 timeframes and 105 indicators, Advanced Chart with drawing tools, Technical Indicators panel, Signals & Levels, Analyst Ratings, and Stock Info with 20+ fundamental metrics.
Positions tracker with real-time P&L on $100k virtual capital, Live Trading for broker connections, and the Options chain viewer with Greeks and IV percentile.
Order Book with up to 5,000 price levels, Aggregated Book combining multi-venue depth, Footprint Charts decomposing each candle into bid/ask volume, Volume Delta measuring cumulative buy/sell pressure, Order Flow tracking large trades, Liquidation Map showing leveraged position clusters, and Market Replay recording 150 snapshots per session.
ML Prediction using XGBoost with 53-56% directional accuracy from 13,500+ walk-forward fits, Daily Picks ranking top signals by confidence score, and Custom Indicators with 29 built-in functions and Pine Script-compatible syntax.
Reddit Sentiment (4 subreddits), Dark Pool Volume (FINRA ATS data), Short Interest, Congressional Trades (STOCK Act), FTD data, Insider Clusters, GEX with flip-point mapping, Max Pain, Cost to Borrow, Buyback Programs, Activist Investors (13D filings), Share Dilution, IPO Lock-up Expiry, Retail vs Institutional Flow, Game Stock Tracker (28 publishers across 8 exchanges), and Fed Liquidity Dashboard.
Portfolio Analytics with equity curve and win rate, Risk Analytics with 3 VaR methods (parametric, historical, 10,000-path Monte Carlo), Correlation Matrix, Funding & Open Interest, Fear & Greed Index, and Market Heatmap.
Watchlist with real-time prices, Market Scanner with 15+ filter criteria, Alert Builder with 14 condition types, Backtesting engine for historical strategy testing, and Trade Journal recording every order with timestamps and annotations.
Adding a widget to Nydar's dashboard takes 2 clicks: open the widget menu, then select the widget. The new widget appears at the bottom of the dashboard and can be dragged to any position.
Click the + button in the dashboard header bar. A dropdown lists all 46 available widgets grouped by category.
Click any widget name to add it. Nydar places the widget at the bottom of your current layout with a default size. You can add the same widget type multiple times — for example, 2 Price Charts showing different timeframes.
Drag the widget by its title bar to move it. Drag the bottom-right corner handle to resize. The grid system automatically shifts surrounding widgets to prevent overlap.
Click the X button in the top-right corner of any widget to remove it from the dashboard. Removing a widget does not delete any data — adding it back restores it to default state.
Nydar includes 20 pre-built dashboard layouts, each optimized for a specific trading style and asset class. Loading a layout replaces the current widget arrangement with a curated set of 6-16 widgets positioned for that workflow.
| Layout | Asset Class | Key Widgets |
|---|---|---|
| Day Trader | Stocks | Chart, Level 2, Order Flow, Positions, Scanner |
| Swing Trader | Stocks | Chart, Signals, Indicators, Earnings Calendar |
| Options | Stocks | Options Chain, GEX, Max Pain, IV Percentile |
| WSB / Retail | Stocks | Reddit Sentiment, Dark Pool, Short Interest, FTD |
| Crypto Order Flow | Crypto | Footprint, Volume Delta, Liquidation Map, Order Book |
| Forex Trader | Forex | Chart, Sessions, Correlation, Economic Calendar |
| Beginner | Universal | Chart, Watchlist, Signals, Positions, Fear & Greed |
| Full Pro | Universal | 16 widgets covering all categories |
See all 20 layouts with full widget lists on the Layouts page.
Nydar's dashboard uses 5 responsive breakpoints to adapt the grid from large monitors down to mobile screens. The react-grid-layout library handles column redistribution automatically at each breakpoint.
| Screen Size | Columns | Behaviour |
|---|---|---|
| Large (1200px+) | 12 columns | Full grid, drag and resize in any direction |
| Medium (996-1199px) | 10 columns | Slightly compressed, all widgets visible |
| Small (768-995px) | 6 columns | Widgets reflow into 2-3 columns |
| Extra Small (480-767px) | 1 column | Vertical stack, full-width widgets |
| Mobile (<480px) | 1 column | Compact vertical stack with touch support |
Every widget on Nydar's dashboard supports fullscreen mode. Click the expand icon in the widget's title bar to fill the entire viewport with that widget. Press Escape or click the collapse icon to return to the grid view. Fullscreen mode is particularly useful for the Price Chart (detailed candlestick analysis), Footprint Chart (reading bid/ask volume at each price level), and Order Book (scanning 5,000 depth levels).
Nydar's widgets share a global selected symbol. When a trader clicks BTC/USDT in the Watchlist, all symbol-dependent widgets — Price Chart, Order Book, Indicators, Signals, Footprint Chart, and others — load data for that symbol simultaneously. This one-click context switching eliminates the need to configure each widget independently.
Real-time data streams through a single WebSocket connection at /ws, with the backend distributing updates to each subscribed widget. This architecture means adding more widgets does not create additional network connections — a design pattern consistent with the "single-connection multiplexing" approach described by Ilya Grigorik in High Performance Browser Networking (O'Reilly, 2013).
Nydar stores layouts in browser local storage. Clearing browser data or switching browsers resets the layout. Load a pre-built layout from the Layouts page to restore a known configuration.
This can occur after resizing the browser window. Refresh the page to trigger a layout recalculation, or load a pre-built layout to reset the grid.
Each widget renders independently, but 15+ data-heavy widgets (charts, order books, footprints) on lower-spec hardware can strain the browser. Remove widgets you are not actively using, or load a focused layout with 6-8 widgets for smoother performance.
Last reviewed: March 2026