Sparkline Market Dashboard — WordPress Plugin

A dense, 2-column market dashboard for WordPress displaying 70+ instruments and ratio metrics with trend-colored sparklines powered by TradingView Lightweight Charts v5.

Features

• 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

---

User Guide

Installation

1. Upload the sparkline-dashboard/ folder to wp-content/plugins/
2. Activate the plugin in WordPress Admin → Plugins
3. Add the shortcode [sparkline_dashboard] to any page or post (Elementor HTML widget, block editor, etc.)

Shortcode Options

[sparkline_dashboard]                ← defaults: dark theme
[sparkline_dashboard theme="light"]  ← light theme

For Your Dashboard Page

In Elementor on duodecimal.capital/dashboard/:

1. Add an HTML widget (or Shortcode widget)
2. Paste: [sparkline_dashboard theme="dark"]
3. Save and preview

Managing Instruments

Instruments can be managed in two ways:

Via Admin Settings (recommended)

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.

Via Code

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.

Dashboard Layout

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.

ADX/DMI Trend Logic

The trend state for each sparkline is determined by the Average Directional Index with Wilder's smoothing:

1. Compute +DM, -DM, True Range from OHLC data
2. Apply Wilder's smoothing (period=14) to get +DI, -DI
3. Compute DX, then smooth again to get ADX
4. 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.).

Data Refresh

1. Daily WP-Cron — Scheduled at 6:00 AM server time on plugin activation. Clears cache and pre-warms.
2. Cache TTL — 4 hours (configurable via SD_CACHE_TTL in sparkline-dashboard.php).
3. Manual — POST /wp-json/sparkline-dashboard/v1/refresh (admin only).
4. 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>&1

TradingView Attribution

The 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.

---

Deployment Guide

Requirements

• WordPress 5.8+
• PHP 7.4+ (typed return declarations)
• Outbound HTTP access to query1.finance.yahoo.com

Step-by-Step

# 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

Managed Hosting (WP Engine, Kinsta, SiteGround)

1. Zip the sparkline-dashboard/ folder
2. WordPress Admin → Plugins → Add New → Upload Plugin
3. Install → Activate

Yahoo Finance API Notes

• 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

Performance

• 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)

Troubleshooting

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.

File Structure

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