# Quant Dashboard

> Single-file HTML quantitative trading dashboards — real-time A-share data from Eastmoney public APIs, ECharts financial charts, multi-factor strategy backtesting engine, all in one browser-native file with zero dependencies.

- Skill: `geraltvitas/quant-dashboard` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add geraltvitas/quant-dashboard`
- Raw SKILL.md: https://api.skillmd.com/api/skills/geraltvitas/quant-dashboard/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: GeraltVitas (https://skillmd.com/u/geraltvitas)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/geraltvitas/quant-dashboard

---


# Quant Dashboard — Single-File HTML Quantitative Dashboard

Build self-contained HTML dashboards for A-share quantitative analysis. Zero build step, zero server, zero API keys — open in any browser.

## Trigger Conditions

Load this skill when the user asks for:
- A quantitative/quant trading dashboard or 仪表盘
- Stock backtesting / K-line chart tool as HTML
- Single-file financial data visualization
- Strategy engine with Chinese A-share data

## Architecture Pattern

```
Single HTML file
├── CSS: Dark theme, CSS Grid 3-row full-viewport layout
├── Data Layer: fetch() to Eastmoney public APIs (CORS-friendly)
├── Charts: ECharts 5.x from CDN (no npm)
├── Strategy Engine: Pure JS multi-factor signal generator
└── Backtest: In-browser portfolio simulation with metrics
```

## Data Sources — Eastmoney Public APIs

All APIs are free, no auth, CORS-enabled from browsers. Always set `Referer: https://quote.eastmoney.com/` header.

### K-line (Daily)
```
GET https://push2his.eastmoney.com/api/qt/stock/kline/get
Params: secid={market}.{code}, klt=101 (daily), fqt=1 (前复权),
        beg={YYYYMMDD}, end={YYYYMMDD},
        fields1=f1,f2,f3,f4,f5,f6,
        fields2=f51,f52,f53,f54,f55,f56,f57,
        lmt={count}
Returns: data.klines[] — each is "date,open,close,high,low,volume,amount"
```

### Real-time Quote
```
GET https://push2.eastmoney.com/api/qt/stock/get
Params: secid={market}.{code},
        fields=f43,f44,f45,f46,f47,f48,f49,f50,f51,f52,f55,f57,f58,f60,f116,f117,f162,f167,f168,f169,f170,f171
Key fields: f43=price(×100), f58=name, f169=change(×100), f170=change%(×100)
```

### Minute Intraday
```
GET https://push2his.eastmoney.com/api/qt/stock/trends2/get
Params: secid={market}.{code},
        fields1=f1,f2,f3,f4,f5,f6,f7,f8,f9,f10,f11,f12,f13,
        fields2=f51,f52,f53,f54,f55,f56,f57,f58,
        ndays=1
Returns: data.trends[], data.prevClose
```

### Market Code Convention
- Shanghai (6xxxxx): market=1, secid="1.600519"
- Shenzhen (0xxxxx/3xxxxx/2xxxxx): market=0, secid="0.000001"

## ECharts Financial Chart Recipes

### Candlestick (K-line)
```js
series: [{
  type: 'candlestick',
  data: klineData.map(d => [d.open, d.close, d.low, d.high]),
  itemStyle: { color: '#7fd962', color0: '#f26d78' }
}]
```
Always pair with `dataZoom: [{type:'inside'}, {type:'slider', height:18}]` for navigation.

### Multi-panel Layout (Price + RSI + MACD)
Use `grid` array with percentage heights:
```js
grid: [
  { left:55, right:15, top:5, height:'42%' },   // Price + MA + BB
  { left:55, right:15, top:'52%', height:'14%' }, // RSI
  { left:55, right:15, top:'71%', height:'14%' }, // MACD
]
```
Each series references `xAxisIndex` and `yAxisIndex` matching its grid panel.

### Buy/Sell Markers
Use `markPoint` on a line series (not candlestick) for cleaner placement:
```js
markPoint: { data: [
  { coord: [date, low], value: 'B', symbol: 'pin', symbolSize: 18,
    itemStyle: { color: '#7fd962' }, label: { color: '#fff', fontSize: 10 } }
]}
```

## Strategy Engine Design

Implement as pure JS functions — no external libraries needed:

1. **calcSMA(data, period)** — Simple Moving Average
2. **calcEMA(data, period)** — Exponential Moving Average
3. **calcRSI(data, period)** — Wilder's RSI
4. **calcMACD(data, fast, slow, signal)** — MACD + DIF + DEA + histogram
5. **calcBollinger(data, period, width)** — Bollinger Bands (mid, upper, lower)
6. **calcKDJ(data, period)** — KDJ indicator
7. **calcATR(data, period)** — Average True Range

### Multi-Factor Signal Generation
Score-based approach: each indicator contributes weighted points.
- Buy triggers: positive score crosses threshold
- Sell triggers: negative score crosses threshold
- Hold: score in neutral zone

### Backtest Engine
```js
runBacktestOnSignals(data, signals, initialCapital)
// Returns: { totalReturn, winRate, maxDrawdown, sharpe, calmar, trades[], equityCurve[] }
```
Key: use 0.1% transaction cost (bid-ask + commission) — multiply by 1.001 on buy, 0.999 on sell.

## Backtest Playback Animation

Use `setInterval` to incrementally reveal signals on the K-line chart:
- Redraw chart each tick with only signals up to current index
- Update progress bar and date label
- Allow speed control (ms per frame)
- Provide stop/reset controls

## Dark Theme Design System

```css
:root {
  --bg0: #0a0e14;   /* Deepest background */
  --bg1: #12171f;   /* Panel background */
  --bg2: #1a1f2b;   /* Card/header background */
  --border: #2a3040;
  --text: #b0b8c0;
  --accent: #39bae6;
  --green: #7fd962;
  --red: #f26d78;
}
```

## Pitfalls

1. **Windows + non-ASCII paths in git-bash / MSYS2**: `cp`/`ls` can fail on directories whose names contain Chinese characters. Write the file with your agent's file tools instead of shell redirection, or pass a native Windows path (backslashes, quoted) to a native binary.

2. **Eastmoney f43/f169/f170 fields**: These are ×100 integers. Divide by 100 to get actual price/change values.

3. **CORS with Referer**: While the APIs generally allow CORS, set `Referer` header in fetch to avoid 403 errors from stricter endpoints.

4. **Minute data availability**: The trends2 endpoint only returns data for the most recent trading day. Outside market hours, it may return empty — fall back to K-line data.

5. **K-line `fqt=1`**: Use 前复权 (forward-adjusted) for backtesting to avoid gaps from dividends/splits.

6. **ECharts dark theme**: Initialize with `echarts.init(dom, 'dark')` for automatic dark styling of axes, tooltips, and dataZoom.

## Layout Template

```
CSS Grid, full viewport, 3 rows:
  Row 1 (38vh): Minute chart (flex:3) + Signal cards (flex:1, max 340px)
  Row 2 (28vh): Strategy params (200px) + Multi-panel chart (flex:1) + Log (flex:1.2) + Direction gauge (flex:0.8)
  Row 3 (34vh): K-line chart (full width) + Backtest controls
```