A dense, 2-column market dashboard for WordPress displaying 70+ instruments and ratio metrics with trend-colored sparklines powered by TradingView Lightweight Charts v5.
- 2-column dense layout — all data visible without scrolling on a typical 1080p screen
- ADX/DMI trend detection (period=14, threshold=20):
- Green sparkline → uptrend (ADX ≥ 20, +DI > -DI)
- Red sparkline → downtrend (ADX ≥ 20, -DI > +DI)
- Yellow sparkline → sideways (ADX < 20)
- 10 instrument groups: Rates & Macro, Broad Indices, Commodities, Volatility & Risk, FX, Ratios, Sectors, Thematic, Factor ETFs, Crypto
- Ratio metrics: Oil/Gold, Copper/Gold, HY/IG Credit, Transport/SPX, Banks/SPX, High Yield/SPX, High Div/SPX
- 3-month OHLC data fetched server-side from Yahoo Finance (~30 trading days trendline window)
- Admin settings page — add/remove instruments via WordPress dashboard with Yahoo Finance validation
- Dark/Light theme toggle
- Daily WP-Cron auto-refresh + 4-hour cache TTL
- REST API endpoint for async data access
- Upload the
sparkline-dashboard/folder towp-content/plugins/ - Activate the plugin in WordPress Admin → Plugins
- Add the shortcode
[sparkline_dashboard]to any page or post (Elementor HTML widget, block editor, etc.)
[sparkline_dashboard] ← defaults: dark theme
[sparkline_dashboard theme="light"] ← light theme
In Elementor on duodecimal.capital/dashboard/:
- Add an HTML widget (or Shortcode widget)
- Paste:
[sparkline_dashboard theme="dark"] - Save and preview
Instruments can be managed in two ways:
Navigate to Settings → Sparkline Dashboard in the WordPress admin:
- Add: Select a group, enter a Yahoo Finance symbol and display label, click Validate to verify against Yahoo Finance, then Add Instrument
- Remove: Click Remove on any instrument row. Default instruments are soft-deleted and can be restored. Custom instruments are permanently removed.
- Restore: Click Restore on a previously removed default instrument
- New Groups: Select "+ New Group…" from the group dropdown to create a custom group
All additions are validated against Yahoo Finance before saving — invalid symbols are rejected.
Data is stored in two WordPress options:
| Option | Purpose |
|---|---|
sd_custom_instruments |
User-added instruments |
sd_removed_instruments |
Soft-deleted default instruments |
Effective instruments = defaults + custom − removed. Code updates to defaults still flow through.
Edit includes/class-data-fetcher.php:
get_default_instrument_map()— default instruments (ticker → label)get_ratio_map()— ratio metrics (numerator, denominator, label)
// Add a new instrument to an existing group
'Sectors' => array(
'XLK' => 'Technology',
'XBI' => 'Biotech', // ← add here
),
// Add a new ratio
'Ratios' => array(
array( 'XLK', 'SPY', 'Tech / SPX' ), // ← add here
),Yahoo Finance symbols: ^VIX for indices, GC=F for futures, BTC-USD for crypto, EURUSD=X for FX.
The 2-column grid is interleaved for a balanced layout:
| Left Column | Right Column |
|---|---|
| Rates & Macro | Ratios |
| Broad Indices | Sectors |
| Commodities | Thematic |
| Volatility & Risk | Factor ETFs |
| FX | Crypto |
Custom groups not in this predefined order are appended at the end.
The trend state for each sparkline is determined by the Average Directional Index with Wilder's smoothing:
- Compute +DM, -DM, True Range from OHLC data
- Apply Wilder's smoothing (period=14) to get +DI, -DI
- Compute DX, then smooth again to get ADX
- Classification:
ADX < 20→ sideways (yellow)ADX ≥ 20, +DI > -DI→ uptrend (green)ADX ≥ 20, -DI > +DI→ downtrend (red)
For ratio metrics, the ADX is computed on the ratio's synthetic OHLC (numerator_high/denominator_low for ratio_high, etc.).
- Daily WP-Cron — Scheduled at 6:00 AM server time on plugin activation. Clears cache and pre-warms.
- Cache TTL — 4 hours (configurable via
SD_CACHE_TTLinsparkline-dashboard.php). - Manual —
POST /wp-json/sparkline-dashboard/v1/refresh(admin only). - Admin changes — Adding/removing instruments automatically clears the cache.
For more reliable scheduling on low-traffic sites:
# In wp-config.php: define('DISABLE_WP_CRON', true);
# In crontab:
*/15 * * * * curl -s https://www.duodecimal.capital/wp-cron.php > /dev/null 2>&1The TradingView logo is removed from sparklines (attributionLogo: false). Per the Apache 2.0 license, a text attribution link is in the dashboard footer. Do not remove it.
- WordPress 5.8+
- PHP 7.4+ (typed return declarations)
- Outbound HTTP access to
query1.finance.yahoo.com
# SSH
scp -r sparkline-dashboard/ user@server:/var/www/html/wp-content/plugins/
chown -R www-data:www-data /var/www/html/wp-content/plugins/sparkline-dashboard/
chmod -R 755 /var/www/html/wp-content/plugins/sparkline-dashboard/
wp plugin activate sparkline-dashboard- Zip the
sparkline-dashboard/folder - WordPress Admin → Plugins → Add New → Upload Plugin
- Install → Activate
- Uses v8 chart API — no API key required
- Requests include realistic browser headers to avoid rate limiting
- Fetches 3-month OHLC (sufficient for 14-period ADX with lookback)
- ~70 symbols × 100ms delay = ~7-10 seconds for a full refresh
- Instrument validation (for admin adds) performs a live fetch — no stale symbols allowed
- If blocked: reduce instruments, increase cache TTL, or switch to Alpha Vantage / Twelve Data
- Lightweight Charts: 35kB gzipped from unpkg CDN
- Data pre-rendered into page HTML (no AJAX on first load)
- ~73 tiny
<canvas>elements — negligible GPU/memory impact - CSS: ~3kB, JS: ~4kB (excluding library)
| Issue | Fix |
|---|---|
| "Loading…" stuck | Server can't reach Yahoo Finance. Test with WP-CLI or check error_log |
| Wrong trend colours | ADX needs 28+ bars (2×period). Ensure range=3mo in fetch |
| Sparklines too small | Adjust .sd-spark-container (CSS) and createChart width/height (JS) |
| Cache stale | wp transient delete sd_dashboard_data or POST to refresh endpoint |
| Admin validation fails | Yahoo Finance may be rate-limiting. Wait and retry. |
sparkline-dashboard/
├── sparkline-dashboard.php # Main plugin (shortcode, cron, REST, assets)
├── includes/
│ ├── class-data-fetcher.php # Yahoo Finance OHLC + ADX/DMI + ratios
│ └── class-admin-settings.php # Admin settings page + AJAX instrument CRUD
├── assets/
│ ├── js/
│ │ ├── dashboard.js # Frontend renderer (reads server-computed trends)
│ │ └── admin.js # Admin page: validation, add/remove/restore
│ └── css/
│ ├── dashboard.css # 2-column dense layout, dark/light themes
│ └── admin.css # Admin settings page styles
├── .gitignore
└── README.md