01. The Challenge & Core Requirement
PhysicalStack tracks daily buy/sell quotes from 57+ precious metals dealers across 13 countries (USA, UK, Canada, Australia, Germany, Switzerland, Singapore, UAE, Turkey, India, Sweden, Norway, Denmark). Data is scraped into multiple Google Sheets tabs—one per product (Silver Eagle, Gold Coin, 10oz Bar, etc.)—with 17 product configurations spanning global and country-specific markets.
The publication needed interactive charts embedded directly inside Ghost CMS member pages. Previously, static chart screenshots were uploaded manually, making them unreadable on mobile and stale the moment data updated.
02. My Core Role & Dashboard Implementation
My responsibility was designing the client-side Plotly dashboards, structuring the data pipeline from Sheets to frontend, and building the Ghost CMS embed injection code. The modular JS architecture (config.js, data.js, utils.js, app.js) is hosted on Cloudflare Pages and loaded into Ghost via an HTML injection block.
- Ghost CMS Embed with MutationObserver Guard: Injected a custom
MutationObserverwrapper that prevents Ghost's content engine from rewriting the dashboard DOM—ensuring Plotly renders survive Ghost's internal page lifecycle. - Cloudflare Pages Functions Proxy: Built a Cloudflare Worker (
_worker.js) that proxies Google Sheets API requests via/api/sheetsand FX rate lookups via/api/fx, keeping API keys server-side. - Multi-Market Product Tabs: Configured 17 chart products across silver, gold, and country-specific markets (Turkey Gram Altın, India Gram Gold Bar) with tab navigation, per-dealer color assignment, and country-based filtering.
03. Interactive Data Pipeline & Embedded Dashboard
Below is an interactive demonstration of the 2-stage data flow—from raw multi-dealer quote scraping to the live Plotly.js price comparison dashboard embedded in Ghost CMS:
01. Raw Spreadsheet Scraping Multi-Dealer Feed
Backend scrapers pull raw quote rows daily from 57+ global dealers, capturing bid/ask spreads, stock status, and inconsistent formats before database ingestion:
| # | Scrape Date | Time (UTC) | Dealer | Country | Product Name | Spot Benchmark | Dealer Ask | Dealer Bid | Premium Spread |
|---|---|---|---|---|---|---|---|---|---|
| 1 | 2026-05-14 | 08:00:14 | JM Bullion | USA | 1 oz Silver Eagle | $31.50 | $34.80 | $31.60 | +10.5% |
| 2 | 2026-05-14 | 08:00:22 | APMEX | USA | 1 oz Silver Eagle | $31.50 | $35.10 | $31.80 | +11.4% |
| 3 | 2026-05-14 | 08:01:05 | BullionStar | Singapore | 1 oz Silver Eagle | $31.50 | $34.60 | $31.40 | +9.8% |
| 4 | 2026-05-14 | 08:01:40 | SD Bullion | USA | 1 oz Silver Eagle | $31.50 | $33.95 | null | +7.8% |
02. PhysicalStack Interactive Dashboard (Live Web Embed)
Live Plotly.js dashboard embedded directly from the PhysicalStack production deployment featuring multi-currency FX conversion, date-range filtering, spot overlay, and full browser fullscreen:
04. Key Deliverables & Outcomes
The embedded Plotly.js dashboards empower PhysicalStack to deliver live, interactive dealer-comparison charts directly within Ghost CMS member pages. All embedded charts across the publication update automatically at US spot open via Cloudflare Pages Functions proxying Google Sheets—completely eliminating manual chart screenshot uploads.
Members benefit from a seamless analytical suite including crosshair tooltips, live multi-currency FX conversion (USD, GBP, AUD, CHF, EUR), pinch-to-zoom, per-dealer filtering, and spot benchmark overlays with premium spread calculations across 57+ dealers in 13 countries.