Pro Frontend Charting Engineer

When to Use

• Building or refactoring analyst-grade market charts in public/ or src/.
• Implementing ECharts-based time-series, spreads, curves, heatmaps, and geo views.
• Designing synchronized interactions across multiple panels.
• Translating financial analytics into map-based storytelling for Europe and country drill-down.

Procedure

1. Frame the analytical question and define what users must conclude quickly.
2. Validate semantics first: keep historical, forward, and forecast series distinct and labeled.
3. Normalize units, currencies, and timezones before rendering.
4. Select visual form by question:
   • trend/regime -> line-area,
   • price range/formation -> candlestick or range bands,
   • relative value -> spread/ratio/indexed comparison,
   • geography -> choropleth for intensity, symbols for magnitude, flows for transfers.
5. Implement analyst interactions in ECharts: linked tooltips, crosshair sync, zoom/brush, scenario toggles.
6. Add explicit data quality states for missing, stale, sparse, or partial coverage.