Skip to content

mvpp/sparkline-dashboard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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 < 20sideways (yellow)
    • ADX ≥ 20, +DI > -DIuptrend (green)
    • ADX ≥ 20, -DI > +DIdowntrend (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. ManualPOST /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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors