SPB Git
spboucher.ai

spb/hfmarketdata

Public

Open high-frequency market data platform — FirstRate full-history downloader, DuckDB/Parquet lake, open REST API and React docs platform (www.hfmarketdata.io)

charts: cœur du moteur (panneaux, rendu bougies/volume/axes, crosshair, interactions, dessins, harnais, captures)

Simon-Pierre Boucher committed (Sep 7, 2026) parent 068b577 Browse files

17 changed files +2,965 −5

17 changed files
Load all 17 files Unified Split
added hfmarketdata/web/dev/charts-harness.html +41 −0
@@ -0,0 +1,41 @@
1 +<!doctype html>
2 +<html lang="en">
3 +<head>
4 + <meta charset="utf-8" />
5 + <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
6 + <title>hfmarketdata · chart engine harness</title>
7 + <style>
8 + :root { --bg: #0a0c10; --bg-1: #10131a; --line: #232833; --fg: #e8ebf1; --fg-2: #8f98a8; --accent: #34d399; }
9 + [data-theme="light"] { --bg: #ffffff; --bg-1: #ffffff; --line: #e2e5eb; --fg: #12161d; --fg-2: #4f5a6b; --accent: #0f766e; }
10 + * { box-sizing: border-box; }
11 + html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
12 + body { display: flex; flex-direction: column; overflow: hidden; }
13 + header { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--bg); }
14 + header .group { display: flex; gap: 4px; align-items: center; padding-right: 8px; border-right: 1px solid var(--line); }
15 + header .group:last-child { border-right: 0; }
16 + button, select { font: inherit; color: var(--fg); background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; cursor: pointer; min-height: 28px; }
17 + button:hover, select:hover { border-color: var(--fg-2); }
18 + button.active { border-color: var(--accent); color: var(--accent); }
19 + button.tool { min-width: 28px; }
20 + #legend { position: absolute; left: 10px; top: 8px; z-index: 5; pointer-events: none; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 12px; color: var(--fg); background: color-mix(in srgb, var(--bg) 70%, transparent); padding: 4px 8px; border-radius: 6px; display: flex; flex-direction: column; gap: 2px; }
21 + #legend .row { display: flex; gap: 10px; align-items: baseline; }
22 + #legend .sym { font-weight: 700; }
23 + #legend .muted { color: var(--fg-2); }
24 + #legend .up { color: #2fbf71; } #legend .down { color: #e5484d; }
25 + #legend .k { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
26 + main { position: relative; flex: 1; min-height: 0; }
27 + #chart { position: absolute; inset: 0; }
28 + #status { position: absolute; right: 8px; bottom: 32px; z-index: 5; font-size: 11px; color: var(--fg-2); background: color-mix(in srgb, var(--bg) 75%, transparent); padding: 2px 6px; border-radius: 4px; pointer-events: none; }
29 + @media (max-width: 640px) { header { gap: 4px; padding: 4px; } header .group { padding-right: 4px; } button, select { padding: 4px 6px; } .desktop-only { display: none; } }
30 + </style>
31 +</head>
32 +<body>
33 + <header id="toolbar"></header>
34 + <main>
35 + <div id="legend"></div>
36 + <div id="chart"></div>
37 + <div id="status"></div>
38 + </main>
39 + <script type="module" src="./charts-harness.js"></script>
40 +</body>
41 +</html>
added hfmarketdata/web/dev/charts-harness.js +258 −0
@@ -0,0 +1,258 @@
1 +// Visual harness for the chart engine: synthetic but realistic data (sessions, gaps), every series type,
2 +// indicator, drawing tool and theme, plus a programmatic pan/zoom benchmark used by scripts/charts-shots.mjs.
3 +//
4 +// URL params: ?tf=1min|1day&n=50000&theme=dark|light&type=candles&ind=rsi,macd&mode=log|percent&compare=1
5 +// &drawings=1&volume=0&watermark=…&reduced=1
6 +
7 +import { createChart, darkTheme, lightTheme, SERIES_TYPES, INDICATOR_TYPES, DRAWING_TOOLS } from '../src/charts/engine/index.js'
8 +
9 +/* ───────────── synthetic data ───────────── */
10 +
11 +function mulberry32(seed) {
12 + let a = seed >>> 0
13 + return () => { a = (a + 0x6D2B79F5) >>> 0; let t = a; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296 }
14 +}
15 +function gauss(rnd) { let u = 0, v = 0; while (u === 0) u = rnd(); while (v === 0) v = rnd(); return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v) }
16 +
17 +/**
18 + * Random-walk bars. 1min: sessions 09:30–16:00 ET (390 bars/day), weekdays only, overnight / weekend gaps with a
19 + * jump at the open. 1day: weekdays only. Timestamps are wall-clock encoded with Date.UTC (contract).
20 + */
21 +export function makeBars({ tf = '1min', count = 50_000, seed = 42, start = Date.UTC(2023, 0, 2), price = 187.5, vol = 0.00035 } = {}) {
22 + const rnd = mulberry32(seed)
23 + const bars = []
24 + let p = price
25 + let sigma = vol
26 + let t = start
27 + const dayMs = 86_400_000
28 + const isWeekend = ts => { const d = new Date(ts).getUTCDay(); return d === 0 || d === 6 }
29 + if (tf === '1day') {
30 + let d = Math.floor(t / dayMs) * dayMs
31 + while (bars.length < count) {
32 + if (!isWeekend(d)) {
33 + sigma = Math.max(0.006, Math.min(0.05, sigma * 0.97 + 0.015 * 0.03 + Math.abs(gauss(rnd)) * 0.002))
34 + const o = p * (1 + gauss(rnd) * sigma * 0.4)
35 + let hi = o, lo = o, c = o
36 + for (let k = 0; k < 8; k++) { c = c * (1 + gauss(rnd) * sigma * 0.35); hi = Math.max(hi, c); lo = Math.min(lo, c) }
37 + const v = Math.round((4e6 + 3e6 * Math.abs(gauss(rnd))) * (1 + 6 * Math.abs(c - o) / o))
38 + bars.push({ t: d, o: r2(o), h: r2(hi), l: r2(lo), c: r2(c), v })
39 + p = c
40 + }
41 + d += dayMs
42 + }
43 + return bars
44 + }
45 + const stepMs = { '1min': 60_000, '5min': 300_000, '30min': 1_800_000, '1hour': 3_600_000 }[tf] || 60_000
46 + const perDay = Math.floor((6.5 * 3_600_000) / stepMs)
47 + let day = Math.floor(t / dayMs) * dayMs
48 + while (bars.length < count) {
49 + if (isWeekend(day)) { day += dayMs; continue }
50 + // Overnight gap.
51 + p = p * (1 + gauss(rnd) * 0.006)
52 + sigma = Math.max(0.00015, Math.min(0.002, sigma * 0.9 + vol * 0.1 + Math.abs(gauss(rnd)) * 0.00005))
53 + for (let k = 0; k < perDay && bars.length < count; k++) {
54 + const ts = day + 9.5 * 3_600_000 + k * stepMs
55 + // U-shaped intraday activity.
56 + const u = k / perDay
57 + const act = 0.6 + 1.6 * (Math.pow(u - 0.5, 2) * 4)
58 + const s = sigma * act
59 + const o = p
60 + let hi = o, lo = o, c = o
61 + for (let m = 0; m < 4; m++) { c = c * (1 + gauss(rnd) * s * 0.5); hi = Math.max(hi, c); lo = Math.min(lo, c) }
62 + const v = Math.round((12_000 + 20_000 * act) * (0.5 + Math.abs(gauss(rnd))))
63 + bars.push({ t: ts, o: r2(o), h: r2(hi), l: r2(lo), c: r2(c), v })
64 + p = c
65 + }
66 + day += dayMs
67 + }
68 + return bars
69 +}
70 +const r2 = v => Math.round(v * 100) / 100
71 +
72 +/* ───────────── page ───────────── */
73 +
74 +const q = new URLSearchParams(location.search)
75 +const state = {
76 + tf: q.get('tf') || '1min',
77 + n: Number(q.get('n')) || 50_000,
78 + theme: q.get('theme') || 'dark',
79 + type: q.get('type') || 'candles',
80 + mode: q.get('mode') || 'linear',
81 + volume: q.get('volume') !== '0',
82 + crosshair: q.get('crosshair') || 'normal',
83 + symbol: q.get('symbol') || 'AAPL',
84 +}
85 +document.documentElement.dataset.theme = state.theme
86 +
87 +const container = document.getElementById('chart')
88 +const chart = createChart(container, {
89 + theme: state.theme === 'light' ? lightTheme : darkTheme,
90 + timeframe: state.tf,
91 + sessionLabel: 'ET',
92 + watermark: q.get('watermark') ?? `${state.symbol} · ${state.tf === '1day' ? '1D' : state.tf} · HF Market Data`,
93 + reducedMotion: q.get('reduced') === '1',
94 +})
95 +window.__chart = chart
96 +
97 +let bars = makeBars({ tf: state.tf, count: state.n, seed: 42 })
98 +// Keep a hidden older history so "needMoreLeft" can be served (prepend without jump).
99 +const OLDER = 20_000
100 +let historyCursor = 0
101 +let all = bars
102 +if (bars.length > OLDER + 500) { all = bars; bars = all.slice(OLDER); historyCursor = OLDER }
103 +chart.setData(bars)
104 +chart.setSeriesType(state.type)
105 +chart.setVolume(state.volume)
106 +chart.setPriceScale({ mode: state.mode })
107 +chart.setCrosshair({ mode: state.crosshair })
108 +
109 +chart.on('visibleRangeChange', r => {
110 + if (r.needMoreLeft && historyCursor > 0) {
111 + const chunk = all.slice(Math.max(0, historyCursor - 5000), historyCursor)
112 + historyCursor -= chunk.length
113 + chart.prependData(chunk)
114 + status(`prepended ${chunk.length} bars · ${chart.getData().length} loaded`)
115 + }
116 +})
117 +
118 +/* ───────────── toolbar ───────────── */
119 +
120 +const bar = document.getElementById('toolbar')
121 +const group = () => { const g = document.createElement('div'); g.className = 'group'; bar.appendChild(g); return g }
122 +const btn = (parent, label, onClick, cls = '') => { const b = document.createElement('button'); b.textContent = label; b.className = cls; b.addEventListener('click', onClick); parent.appendChild(b); return b }
123 +const sel = (parent, options, value, onChange) => { const s = document.createElement('select'); for (const o of options) { const op = document.createElement('option'); op.value = o; op.textContent = o; s.appendChild(op) } s.value = value; s.addEventListener('change', () => onChange(s.value)); parent.appendChild(s); return s }
124 +
125 +let g = group()
126 +sel(g, ['1min:50000', '1min:200000', '1day:10000', '5min:30000'], `${state.tf}:${state.n}`, v => { const [tf, n] = v.split(':'); location.search = `?tf=${tf}&n=${n}&theme=${state.theme}&type=${state.type}` })
127 +btn(g, state.theme === 'dark' ? 'Light' : 'Dark', () => { state.theme = state.theme === 'dark' ? 'light' : 'dark'; document.documentElement.dataset.theme = state.theme; chart.setTheme(state.theme === 'light' ? lightTheme : darkTheme); refreshActive() })
128 +
129 +g = group()
130 +sel(g, SERIES_TYPES, state.type, v => { state.type = v; chart.setSeriesType(v) })
131 +const volBtn = btn(g, 'Vol', () => { state.volume = !state.volume; chart.setVolume(state.volume); refreshActive() })
132 +sel(g, ['linear', 'log', 'percent'], state.mode, v => { state.mode = v; chart.setPriceScale({ mode: v }) })
133 +btn(g, 'Invert', () => chart.setPriceScale({ invert: !chart.getPriceScale().invert }))
134 +sel(g, ['normal', 'magnet', 'hidden'], state.crosshair, v => chart.setCrosshair({ mode: v }))
135 +
136 +g = group()
137 +const indSel = sel(g, ['+ indicator', ...INDICATOR_TYPES], '+ indicator', v => { if (v !== '+ indicator') { chart.addIndicator({ type: v }); indSel.value = '+ indicator'; updateIndicatorList() } })
138 +btn(g, 'Clear ind.', () => { for (const i of chart.getIndicators()) chart.removeIndicator(i.id); updateIndicatorList() })
139 +const cmpBtn = btn(g, 'Compare', () => {
140 + if (chart._cmp) { chart.removeCompare('MSFT'); chart.removeCompare('SPY'); chart._cmp = false }
141 + else { chart.addCompare('MSFT', 'MSFT', makeBars({ tf: state.tf, count: all.length, seed: 7, price: 402, vol: 0.0003 })); chart.addCompare('SPY', 'SPY', makeBars({ tf: state.tf, count: all.length, seed: 99, price: 512, vol: 0.00025 })); chart._cmp = true }
142 + refreshActive()
143 +})
144 +
145 +g = group()
146 +const toolButtons = {}
147 +const glyph = { trendline: '╱', ray: '→', extended: '↔', hline: '─', vline: '│', rect: '▭', fib: 'Fib', measure: '📏', text: 'T', arrow: '➚', channel: '∥', brush: '✎' }
148 +for (const t of DRAWING_TOOLS) toolButtons[t] = btn(g, glyph[t] || t, () => chart.setDrawingTool(chart.drawings.tool === t ? null : t), 'tool')
149 +btn(g, 'Undo', () => chart.undo(), 'desktop-only'); btn(g, 'Redo', () => chart.redo(), 'desktop-only')
150 +btn(g, 'Clear', () => chart.clearDrawings(), 'desktop-only')
151 +chart.on('toolChange', t => { for (const k of Object.keys(toolButtons)) toolButtons[k].classList.toggle('active', k === t) })
152 +
153 +g = group()
154 +btn(g, 'Fit', () => chart.fitContent(true)); btn(g, 'Latest', () => chart.scrollToLatest(true)); btn(g, 'Reset', () => chart.resetView())
155 +btn(g, '+', () => chart.zoom(1.3)); btn(g, '−', () => chart.zoom(1 / 1.3))
156 +let live = 0
157 +const liveBtn = btn(g, 'Live', () => { if (live) { clearInterval(live); live = 0 } else live = setInterval(tick, 400); refreshActive() }, 'desktop-only')
158 +btn(g, 'PNG', async () => { const blob = await chart.toPNG({ scale: 2, watermark: `${state.symbol} · ${state.tf}` }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'chart.png'; a.click() }, 'desktop-only')
159 +btn(g, 'Bench', async () => status(`bench: ${JSON.stringify(await bench(100))}`), 'desktop-only')
160 +
161 +function refreshActive() { volBtn.classList.toggle('active', state.volume); cmpBtn.classList.toggle('active', !!chart._cmp); liveBtn.classList.toggle('active', !!live) }
162 +refreshActive()
163 +
164 +let indicatorIds = []
165 +function updateIndicatorList() { indicatorIds = chart.getIndicators().map(i => i.id) }
166 +
167 +/* ───────────── live simulation ───────────── */
168 +
169 +const rndLive = mulberry32(1234)
170 +function tick() {
171 + const data = chart.getData()
172 + const last = data[data.length - 1]
173 + const step = state.tf === '1day' ? 86_400_000 : 60_000
174 + const rollover = rndLive() < 0.15
175 + if (rollover) {
176 + const o = last.c
177 + const c = r2(o * (1 + gauss(rndLive) * 0.0006))
178 + chart.updateLast({ t: last.t + step, o, h: Math.max(o, c), l: Math.min(o, c), c, v: 8000 })
179 + } else {
180 + const c = r2(last.c * (1 + gauss(rndLive) * 0.0005))
181 + chart.updateLast({ ...last, c, h: Math.max(last.h, c), l: Math.min(last.l, c), v: last.v + 2000 })
182 + }
183 +}
184 +
185 +/* ───────────── legend (HTML, from crosshairMove) ───────────── */
186 +
187 +const legend = document.getElementById('legend')
188 +const fmt = v => (v == null ? '—' : Number(v).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }))
189 +function renderLegend(info) {
190 + const data = chart.getData()
191 + const b = info?.bar || data[data.length - 1]
192 + if (!b) { legend.innerHTML = ''; return }
193 + const up = b.c >= b.o
194 + const chg = ((b.c - b.o) / b.o) * 100
195 + const cls = up ? 'up' : 'down'
196 + const d = new Date(b.t)
197 + const when = state.tf === '1day' ? d.toISOString().slice(0, 10) : d.toISOString().slice(0, 16).replace('T', ' ') + ' ET'
198 + let html = `<div class="row"><span class="sym">${state.symbol}</span><span class="muted">${state.tf}</span><span class="muted">${when}</span></div>`
199 + html += `<div class="row"><span>O <b class="${cls}">${fmt(b.o)}</b></span><span>H <b class="${cls}">${fmt(b.h)}</b></span><span>L <b class="${cls}">${fmt(b.l)}</b></span><span>C <b class="${cls}">${fmt(b.c)}</b></span><span class="${cls}">${chg >= 0 ? '+' : ''}${chg.toFixed(2)}%</span><span class="muted">Vol ${b.v?.toLocaleString('en-US') ?? '—'}</span></div>`
200 + for (const ind of chart.getIndicators()) {
201 + const vals = info?.indicators?.[ind.id] || Object.fromEntries(Object.entries(ind.values).map(([k, arr]) => [k, arr[data.length - 1]]))
202 + const parts = Object.entries(vals).filter(([k]) => k !== 'direction').map(([k, v], i) => `<span><i class="k" style="background:${ind.colors[i % ind.colors.length] || '#888'}"></i>${k} ${fmt(v)}</span>`)
203 + html += `<div class="row"><span class="muted">${ind.title}</span>${parts.join('')}</div>`
204 + }
205 + if (info?.compares) for (const [id, v] of Object.entries(info.compares)) html += `<div class="row"><span class="muted">${id}</span><span>${v == null ? '—' : (v >= 0 ? '+' : '') + v.toFixed(2) + '%'}</span></div>`
206 + legend.innerHTML = html
207 +}
208 +chart.on('crosshairMove', renderLegend)
209 +renderLegend(null)
210 +
211 +const statusEl = document.getElementById('status')
212 +function status(msg) { statusEl.textContent = msg }
213 +status(`${bars.length.toLocaleString()} bars · ${state.tf}`)
214 +
215 +/* ───────────── URL-driven setup for screenshots ───────────── */
216 +
217 +for (const t of (q.get('ind') || '').split(',').filter(Boolean)) chart.addIndicator({ type: t })
218 +if (q.get('compare') === '1') cmpBtn.click()
219 +if (q.get('drawings') === '1') {
220 + const data = chart.getData()
221 + const n = data.length
222 + const at = i => data[Math.max(0, Math.min(n - 1, i))]
223 + const a = at(n - 120), b = at(n - 30), c = at(n - 80), d = at(n - 55)
224 + chart.setDrawings([
225 + { id: 'tl', type: 'trendline', points: [{ t: a.t, price: a.l * 0.998 }, { t: b.t, price: b.l * 0.998 }] },
226 + { id: 'hl', type: 'hline', points: [{ t: b.t, price: b.h * 1.004 }], style: { dash: [4, 4] } },
227 + { id: 'rc', type: 'rect', points: [{ t: c.t, price: c.h * 1.002 }, { t: d.t, price: d.l * 0.998 }] },
228 + { id: 'fb', type: 'fib', points: [{ t: at(n - 100).t, price: at(n - 100).l }, { t: at(n - 60).t, price: at(n - 60).h }] },
229 + { id: 'ms', type: 'measure', points: [{ t: at(n - 50).t, price: at(n - 50).c }, { t: at(n - 15).t, price: at(n - 15).c }] },
230 + { id: 'tx', type: 'text', points: [{ t: at(n - 20).t, price: at(n - 20).h * 1.006 }], text: 'Breakout zone' },
231 + { id: 'ar', type: 'arrow', points: [{ t: at(n - 140).t, price: at(n - 140).h * 1.006 }, { t: at(n - 125).t, price: at(n - 125).h * 1.001 }] },
232 + ])
233 + chart.drawings.selectedId = 'tl'
234 + chart.invalidate('overlay')
235 +}
236 +if (q.get('live') === '1') liveBtn.click()
237 +
238 +/* ───────────── benchmark ───────────── */
239 +
240 +/** Runs `n` programmatic pan/zoom steps, forcing a synchronous frame each time. Returns timings in ms. */
241 +export async function bench(n = 100) {
242 + const c = chart
243 + const times = []
244 + await new Promise(r => requestAnimationFrame(r))
245 + for (let i = 0; i < n; i++) {
246 + const t0 = performance.now()
247 + if (i % 4 === 0) c.ts.zoomAt(i % 8 === 0 ? 0.85 : 1.18, c.plotWidth * 0.6)
248 + else c.ts.scrollPx(i % 2 ? 37 : -23)
249 + c.dirty.data = true
250 + c._frame(performance.now())
251 + times.push(performance.now() - t0)
252 + }
253 + times.sort((a, b) => a - b)
254 + const sum = times.reduce((a, b) => a + b, 0)
255 + const res = { frames: n, bars: c.getData().length, visible: c.ts.visibleRange().to - c.ts.visibleRange().from + 1, avgMs: +(sum / n).toFixed(2), p50Ms: +times[Math.floor(n / 2)].toFixed(2), p95Ms: +times[Math.floor(n * 0.95)].toFixed(2), maxMs: +times[n - 1].toFixed(2) }
256 + return res
257 +}
258 +window.__harness = { bench, makeBars, chart, state }
modified hfmarketdata/web/package.json +3 −1
@@ -14,7 +14,9 @@
14 14 "sample:aapl-pe": "node scripts/make-aapl-pe-sample.mjs",
15 15 "bench:formats": "node scripts/bench-formats.mjs",
16 16 "test:e2e": "playwright test",
17 − "test:e2e:ui": "playwright test --ui"
17 + "test:e2e:ui": "playwright test --ui",
18 + "test:charts": "node --test src/charts",
19 + "charts:shots": "node scripts/charts-shots.mjs"
18 20 },
19 21 "dependencies": {
20 22 "@mdx-js/react": "^3.1.1",
added hfmarketdata/web/scripts/charts-shots.mjs +106 −0
@@ -0,0 +1,106 @@
1 +#!/usr/bin/env node
2 +// Visual QA for the chart engine: starts Vite on the harness, captures desktop (1440×900) and mobile (390×844)
3 +// screenshots into /tmp/hfmd-charts/, and reports the render time of 100 programmatic pan/zoom frames.
4 +//
5 +// Usage: node scripts/charts-shots.mjs [--only=name,name] [--out=/tmp/hfmd-charts] [--port=4180]
6 +
7 +import { spawn } from 'node:child_process'
8 +import { mkdirSync } from 'node:fs'
9 +import { resolve, dirname } from 'node:path'
10 +import { fileURLToPath } from 'node:url'
11 +import { chromium } from '@playwright/test'
12 +
13 +const here = dirname(fileURLToPath(import.meta.url))
14 +const webDir = resolve(here, '..')
15 +const args = Object.fromEntries(process.argv.slice(2).filter(a => a.startsWith('--')).map(a => { const [k, v] = a.slice(2).split('='); return [k, v ?? '1'] }))
16 +const PORT = Number(args.port || 4180)
17 +const OUT = args.out || '/tmp/hfmd-charts'
18 +const ONLY = args.only ? new Set(args.only.split(',')) : null
19 +mkdirSync(OUT, { recursive: true })
20 +
21 +const HARNESS = `http://localhost:${PORT}/dev/charts-harness.html`
22 +
23 +const SHOTS = [
24 + { name: 'desktop-1min-candles', q: 'tf=1min&n=50000' },
25 + { name: 'desktop-1min-light', q: 'tf=1min&n=50000&theme=light' },
26 + { name: 'desktop-1day-indicators', q: 'tf=1day&n=10000&ind=bollinger,rsi,macd' },
27 + { name: 'desktop-1day-ichimoku-volume', q: 'tf=1day&n=10000&ind=ichimoku,volume-ma,adx' },
28 + { name: 'desktop-line-log', q: 'tf=1day&n=10000&type=area&mode=log' },
29 + { name: 'desktop-compare-percent', q: 'tf=1day&n=10000&type=line&compare=1' },
30 + { name: 'desktop-hollow-drawings', q: 'tf=1min&n=50000&type=hollow&drawings=1&crosshair=magnet' },
31 + { name: 'desktop-ohlc-supertrend-light', q: 'tf=1min&n=50000&type=ohlc&ind=supertrend,vwap,stoch&theme=light' },
32 + { name: 'desktop-baseline-heikin', q: 'tf=1day&n=10000&type=heikin&ind=ema,sma' },
33 + { name: 'desktop-200k-zoomed-out', q: 'tf=1min&n=200000', zoomOut: 40 },
34 + { name: 'mobile-1min-candles', q: 'tf=1min&n=50000&ind=rsi', mobile: true },
35 + { name: 'mobile-1day-light', q: 'tf=1day&n=10000&theme=light&type=area', mobile: true },
36 +]
37 +
38 +function startVite() {
39 + const child = spawn('npx', ['vite', '--port', String(PORT), '--strictPort', '--clearScreen', 'false'], { cwd: webDir, stdio: ['ignore', 'pipe', 'pipe'] })
40 + child.stdout.on('data', d => { if (process.env.DEBUG) process.stdout.write(d) })
41 + child.stderr.on('data', d => process.stderr.write(d))
42 + return child
43 +}
44 +
45 +async function waitFor(url, ms = 30_000) {
46 + const t0 = Date.now()
47 + while (Date.now() - t0 < ms) {
48 + try { const r = await fetch(url); if (r.ok) return } catch { /* not yet */ }
49 + await new Promise(r => setTimeout(r, 250))
50 + }
51 + throw new Error(`Vite did not start on ${url}`)
52 +}
53 +
54 +async function main() {
55 + const vite = startVite()
56 + const stop = () => { try { vite.kill('SIGTERM') } catch { /* ignore */ } }
57 + process.on('exit', stop); process.on('SIGINT', () => { stop(); process.exit(130) })
58 + try {
59 + await waitFor(HARNESS)
60 + const browser = await chromium.launch()
61 + const results = []
62 + for (const s of SHOTS) {
63 + if (ONLY && !ONLY.has(s.name)) continue
64 + const ctx = await browser.newContext(s.mobile
65 + ? { viewport: { width: 390, height: 844 }, deviceScaleFactor: 3, isMobile: true, hasTouch: true }
66 + : { viewport: { width: 1440, height: 900 }, deviceScaleFactor: 2 })
67 + const page = await ctx.newPage()
68 + const errors = []
69 + page.on('pageerror', e => errors.push(String(e)))
70 + page.on('console', m => { if (m.type() === 'error') errors.push(m.text()) })
71 + await page.goto(`${HARNESS}?${s.q}&reduced=1`, { waitUntil: 'networkidle' })
72 + await page.waitForFunction(() => window.__chart && window.__chart.getData().length > 0)
73 + if (s.zoomOut) {
74 + await page.evaluate(k => { const c = window.__chart; for (let i = 0; i < k; i++) c.ts.zoomAt(0.8, c.plotWidth / 2); c.invalidate('data') }, s.zoomOut)
75 + }
76 + // Hover to show the crosshair on desktop shots.
77 + if (!s.mobile) await page.mouse.move(s.hoverX || 900, s.hoverY || 380)
78 + await page.waitForTimeout(350)
79 + const file = `${OUT}/${s.name}.png`
80 + await page.screenshot({ path: file })
81 + console.log(`shot ${s.name.padEnd(36)} → ${file}${errors.length ? ` ⚠ ${errors.length} console error(s): ${errors[0]}` : ''}`)
82 + results.push({ name: s.name, errors })
83 + await ctx.close()
84 + }
85 + // Benchmark: 100 programmatic pan/zoom frames on 200 000 bars and on 50 000 bars.
86 + for (const [label, qs] of [['200k 1min', 'tf=1min&n=200000'], ['50k 1min + 3 indicators', 'tf=1min&n=50000&ind=bollinger,rsi,macd']]) {
87 + const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 }, deviceScaleFactor: 2 })
88 + const page = await ctx.newPage()
89 + await page.goto(`${HARNESS}?${qs}&reduced=1`, { waitUntil: 'networkidle' })
90 + await page.waitForFunction(() => window.__harness && window.__chart.getData().length > 0)
91 + const r = await page.evaluate(() => window.__harness.bench(100))
92 + console.log(`bench ${label.padEnd(30)} ${JSON.stringify(r)}`)
93 + // Zoomed-out (everything visible) worst case.
94 + const r2 = await page.evaluate(async () => { const c = window.__chart; for (let i = 0; i < 40; i++) c.ts.zoomAt(0.8, c.plotWidth / 2); return window.__harness.bench(100) })
95 + console.log(`bench ${(label + ' (zoomed out)').padEnd(30)} ${JSON.stringify(r2)}`)
96 + await ctx.close()
97 + }
98 + await browser.close()
99 + const failed = results.filter(r => r.errors.length)
100 + if (failed.length) { console.error(`\n${failed.length} page(s) with console errors`); process.exitCode = 1 }
101 + } finally {
102 + stop()
103 + }
104 +}
105 +
106 +main().catch(e => { console.error(e); process.exit(1) })
added hfmarketdata/web/src/charts/engine/core/chart.js +957 −0
@@ -0,0 +1,957 @@
1 +// Chart core: DOM/layout, frame scheduling, data + scales orchestration, rendering of every layer, public API.
2 +
3 +import { Emitter } from './emitter.js'
4 +import { Animator } from './animation.js'
5 +import { BarStore } from '../data/store.js'
6 +import { TimeScale } from '../scales/time-scale.js'
7 +import { timeTicks as buildTimeTicks } from '../scales/ticks.js'
8 +import { Pane, COLLAPSED_H, MIN_PANE_H } from '../panes/pane.js'
9 +import { createLayer, crisp, withAlpha } from '../render/canvas.js'
10 +import { font, measure, FONT_SIZE } from '../render/text.js'
11 +import { drawSeries, drawVolume } from '../render/series.js'
12 +import { drawGrid, drawSessionBreaks, drawPriceAxis, drawTimeAxis, measureAxisWidth, TIME_AXIS_H, MIN_AXIS_W } from '../render/axes.js'
13 +import { drawPlots, valuePath, plotColor } from '../render/plots.js'
14 +import { drawCrosshair, drawAxisLabel, drawTimeLabel, drawLastPrice, drawHiLoMarkers, drawWatermark, drawPaneHeader } from '../render/overlay.js'
15 +import { normalizeTheme, darkTheme } from '../theme.js'
16 +import { autoDecimals, formatPrice, formatCompact, formatPercent, clamp } from '../format/number.js'
17 +import { fmtFull, isIntraday, isDayChange } from '../format/time.js'
18 +import { indicatorSpec, indicatorParams, computeIndicator } from '../../indicators/index.js'
19 +import { heikinAshi } from '../../indicators/heikin-ashi.js'
20 +import { DrawingManager } from '../drawings/manager.js'
21 +import { attachInteractions } from '../interactions/pointer.js'
22 +import { exportPNG } from '../export/png.js'
23 +import { pill } from '../render/text.js'
24 +
25 +const DEFAULTS = {
26 + theme: darkTheme,
27 + timeframe: '1day',
28 + priceFormat: { decimals: 'auto', minMove: undefined },
29 + locale: 'en-US',
30 + sessionLabel: '',
31 + watermark: '',
32 + rightOffsetBars: 8,
33 + barSpacing: 8,
34 + minBarSpacing: 0.5,
35 + maxBars: 500_000,
36 + reducedMotion: false,
37 + baselineValue: null, // baseline series: reference price (null = first visible open)
38 + volumeFraction: 0.2,
39 + fitBars: 150, // bars shown by fitContent()
40 + onPaneClose: null, // (paneInfo) => void — when set, the close button delegates to the caller
41 +}
42 +
43 +const PULSE_MS = 650
44 +const SERIES_TYPES = new Set(['candles', 'hollow', 'ohlc', 'line', 'area', 'baseline', 'heikin', 'columns', 'hlc'])
45 +let idSeq = 0
46 +
47 +export class Chart {
48 + constructor(container, options = {}) {
49 + this.container = container
50 + this.opts = { ...DEFAULTS, ...options, priceFormat: { ...DEFAULTS.priceFormat, ...(options.priceFormat || {}) } }
51 + this.theme = normalizeTheme(this.opts.theme)
52 + this.emitter = new Emitter()
53 + this.animator = new Animator()
54 + this.store = new BarStore(this.opts.maxBars)
55 + this.renderStore = this.store
56 + this._haVersion = -1
57 + this.ts = new TimeScale({ barSpacing: this.opts.barSpacing, minBarSpacing: this.opts.minBarSpacing, rightOffsetBars: this.opts.rightOffsetBars })
58 + this.seriesType = 'candles'
59 + this.volumeVisible = true
60 + this.crosshairOpts = { mode: 'normal', showLabels: true }
61 + this.pointer = null // { x, y, pane, region } in chart-local px, null when outside
62 + this.indicators = new Map()
63 + this.compares = new Map()
64 + this._modeBeforeCompare = null
65 + this.decimals = 2
66 + this.axisWidth = MIN_AXIS_W
67 + this.width = 0; this.height = 0; this.dpr = 1
68 + this.dirty = { layout: true, data: true, overlay: true }
69 + this._raf = 0
70 + this._last = 0
71 + this._pulseAt = -Infinity
72 + this._lastClose = NaN
73 + this._emittedRange = null
74 + this._indicatorVersion = -1
75 + this._destroyed = false
76 + this.kinetic = null // { vx } px/ms while inertia is running
77 + this.dragging = false
78 +
79 + this._buildDom()
80 + this.mainPane = new Pane(this.el, { kind: 'main', weight: 1 })
81 + this.panes = [this.mainPane]
82 + this.drawings = new DrawingManager(this)
83 + this.interactions = attachInteractions(this)
84 + if (typeof ResizeObserver !== 'undefined') {
85 + this._ro = new ResizeObserver(() => this.resize())
86 + this._ro.observe(container)
87 + }
88 + this.resize()
89 + }
90 +
91 + /* ───────────────────────── DOM & layout ───────────────────────── */
92 +
93 + _buildDom() {
94 + const el = document.createElement('div')
95 + el.className = 'hfmd-chart'
96 + el.tabIndex = 0
97 + el.setAttribute('role', 'img')
98 + el.setAttribute('aria-label', 'Financial chart')
99 + el.style.cssText = `position:relative;width:100%;height:100%;overflow:hidden;outline:none;user-select:none;-webkit-user-select:none;touch-action:none;background:${this.theme.bg};cursor:crosshair;`
100 + this.container.appendChild(el)
101 + this.el = el
102 + const ta = document.createElement('div')
103 + ta.className = 'hfmd-time-axis'
104 + ta.style.cssText = 'position:absolute;left:0;overflow:hidden;'
105 + el.appendChild(ta)
106 + this.timeAxis = { el: ta, main: createLayer(ta, { zIndex: 1 }), overlay: createLayer(ta, { zIndex: 2 }), top: 0, height: TIME_AXIS_H }
107 + }
108 +
109 + resize() {
110 + if (this._destroyed) return
111 + const w = this.container.clientWidth || 600
112 + const h = this.container.clientHeight || 400
113 + this.width = w; this.height = h
114 + this.dpr = Math.max(1, Math.min(3, (typeof window !== 'undefined' && window.devicePixelRatio) || 1))
115 + this.dirty.layout = true
116 + this.invalidate('data')
117 + }
118 +
119 + _layout() {
120 + const total = this.height - TIME_AXIS_H
121 + let free = total
122 + let weight = 0
123 + for (const p of this.panes) { if (p.collapsed) free -= COLLAPSED_H; else weight += p.weight }
124 + let y = 0
125 + for (const p of this.panes) {
126 + const h = p.collapsed ? COLLAPSED_H : Math.max(MIN_PANE_H, Math.round((free * p.weight) / (weight || 1)))
127 + p.layout(y, h, this.width, this.dpr)
128 + p.scale.height = h
129 + y += h
130 + }
131 + // Rounding slack goes to the main pane so the time axis always sits at the bottom.
132 + const slack = total - y
133 + if (slack !== 0) {
134 + const p = this.mainPane
135 + p.layout(p.top, p.height + slack, this.width, this.dpr)
136 + p.scale.height = p.height
137 + let yy = p.top + p.height
138 + for (const q of this.panes) { if (q.top > p.top) { q.layout(yy, q.height, this.width, this.dpr); yy += q.height } }
139 + }
140 + this.timeAxis.top = total
141 + this.timeAxis.el.style.top = total + 'px'
142 + this.timeAxis.el.style.width = this.width + 'px'
143 + this.timeAxis.el.style.height = TIME_AXIS_H + 'px'
144 + this.timeAxis.main.resize(this.width, TIME_AXIS_H, this.dpr)
145 + this.timeAxis.overlay.resize(this.width, TIME_AXIS_H, this.dpr)
146 + this.dirty.layout = false
147 + }
148 +
149 + get plotWidth() { return Math.max(10, this.width - this.axisWidth) }
150 +
151 + /** Which part of the chart is under (x, y) in chart-local pixels. */
152 + hitRegion(x, y) {
153 + if (x < 0 || y < 0 || x > this.width || y > this.height) return { region: 'outside' }
154 + if (y >= this.timeAxis.top) return { region: x >= this.plotWidth ? 'corner' : 'timeAxis', x, y: y - this.timeAxis.top }
155 + for (let i = 0; i < this.panes.length; i++) {
156 + const p = this.panes[i]
157 + if (y >= p.top && y < p.top + p.height) {
158 + const ly = y - p.top
159 + if (i > 0 && ly <= 4) return { region: 'separator', pane: p, index: i, x, y: ly }
160 + if (i < this.panes.length - 1 && ly >= p.height - 4) return { region: 'separator', pane: this.panes[i + 1], index: i + 1, x, y: ly }
161 + if (p.kind !== 'main' && p.headerBoxes.length) {
162 + for (const b of p.headerBoxes) if (x >= b.x && x <= b.x + b.w && ly >= b.y && ly <= b.y + b.h) return { region: 'paneButton', pane: p, button: b.id, x, y: ly }
163 + }
164 + if (x >= this.plotWidth) return { region: 'priceAxis', pane: p, x, y: ly }
165 + return { region: 'plot', pane: p, x, y: ly }
166 + }
167 + }
168 + return { region: 'outside' }
169 + }
170 +
171 + /* ───────────────────────── scheduling ───────────────────────── */
172 +
173 + invalidate(kind = 'all') {
174 + if (this._destroyed) return
175 + if (kind === 'all' || kind === 'data') { this.dirty.data = true; this.dirty.overlay = true }
176 + if (kind === 'overlay') this.dirty.overlay = true
177 + if (kind === 'layout') { this.dirty.layout = true; this.dirty.data = true; this.dirty.overlay = true }
178 + if (!this._raf) this._raf = requestAnimationFrame(this._frame)
179 + }
180 +
181 + _frame = (now) => {
182 + this._raf = 0
183 + if (this._destroyed) return
184 + const dt = Math.min(50, Math.max(1, now - (this._last || now - 16)))
185 + this._last = now
186 + let animating = this.animator.tick(now)
187 + if (this.kinetic) animating = this._stepKinetic(dt) || animating
188 + if (this.dirty.layout) this._layout()
189 + this._syncData()
190 + this.ts.width = this.plotWidth
191 + this.ts.count = this.store.length
192 + const vr = this.ts.visibleRange()
193 + this._updateBases(vr)
194 + // Scales: auto ranges (snap while dragging so the chart never lags the hand).
195 + for (const p of this.panes) {
196 + if (p.collapsed) continue
197 + if (p.scale.auto) this._autoRange(p, vr)
198 + const moving = p.scale.step(this.dragging ? 1e9 : dt, this.opts.reducedMotion || this.dragging)
199 + if (moving) animating = true
200 + }
201 + const needData = this.dirty.data || animating
202 + if (needData) this._timeTicks = this._computeTimeTicks(vr)
203 + if (needData) this._updateAxisWidth()
204 + if (needData) {
205 + for (const p of this.panes) this._drawPane(p, vr)
206 + this._drawTimeAxis()
207 + this.dirty.data = false
208 + this.dirty.overlay = true
209 + }
210 + const pulse = now - this._pulseAt < PULSE_MS
211 + if (this.dirty.overlay || pulse) {
212 + for (const p of this.panes) this._drawOverlay(p, vr, now)
213 + this._drawTimeOverlay()
214 + this.dirty.overlay = false
215 + }
216 + this._emitRange(vr)
217 + if (animating || pulse) this._raf = requestAnimationFrame(this._frame)
218 + }
219 +
220 + _stepKinetic(dt) {
221 + const k = this.kinetic
222 + if (!k) return false
223 + const dx = k.vx * dt
224 + this.ts.scrollPx(dx)
225 + k.vx *= Math.exp(-dt / 325)
226 + this.dirty.data = true
227 + if (Math.abs(k.vx) < 0.02) { this.kinetic = null; return false }
228 + return true
229 + }
230 +
231 + /* ───────────────────────── data sync ───────────────────────── */
232 +
233 + _syncData() {
234 + if (this.seriesType === 'heikin') {
235 + if (this._haVersion !== this.store.version) {
236 + const ha = new BarStore(this.opts.maxBars)
237 + ha.set(heikinAshi(this.store.bars))
238 + this.renderStore = ha
239 + this._haVersion = this.store.version
240 + }
241 + } else this.renderStore = this.store
242 + if (this._indicatorVersion !== this.store.version) {
243 + for (const ind of this.indicators.values()) this._computeIndicator(ind)
244 + for (const c of this.compares.values()) this._alignCompare(c)
245 + this._indicatorVersion = this.store.version
246 + }
247 + }
248 +
249 + _updateBases(vr) {
250 + const ps = this.mainPane.scale
251 + if (ps.mode !== 'percent') return
252 + const n = this.store.length
253 + if (!n) return
254 + const i = clamp(vr.from, 0, n - 1)
255 + ps.base = this.store.c[i] || this.store.o[i] || 1
256 + for (const c of this.compares.values()) {
257 + const v = c.aligned[i]
258 + c.base = v > 0 ? v : NaN
259 + }
260 + }
261 +
262 + _autoRange(p, vr) {
263 + if (vr.to < vr.from) return
264 + let lo = Infinity, hi = -Infinity
265 + const ps = p.scale
266 + if (p.kind === 'main') {
267 + const rs = this.renderStore
268 + const closeOnly = this.seriesType === 'line' || this.seriesType === 'area' || this.seriesType === 'baseline' || this.seriesType === 'columns'
269 + if (closeOnly) {
270 + const C = rs.c
271 + for (let i = vr.from; i <= vr.to; i++) { const c = C[i]; if (c < lo) lo = c; if (c > hi) hi = c }
272 + } else { const mm = rs.minMax(vr.from, vr.to); lo = mm[0]; hi = mm[1] }
273 + if (this.seriesType === 'baseline') { const b = this._baselineValue(vr); if (b < lo) lo = b; if (b > hi) hi = b }
274 + lo = ps.toInternal(lo); hi = ps.toInternal(hi)
275 + for (const c of this.compares.values()) {
276 + if (!(c.base > 0)) continue
277 + const A = c.aligned
278 + for (let i = vr.from; i <= vr.to; i++) { const v = A[i]; if (!(v > 0)) continue; const pct = (v / c.base - 1) * 100; if (pct < lo) lo = pct; if (pct > hi) hi = pct }
279 + }
280 + }
281 + for (const id of p.indicators) {
282 + const ind = this.indicators.get(id)
283 + if (!ind || !ind.values) continue
284 + for (const plot of ind.spec.plots) {
285 + const keys = plot.kind === 'band' ? [plot.upper, plot.lower] : plot.kind === 'cloud' ? [plot.a, plot.b] : [plot.key]
286 + for (const key of keys) {
287 + const arr = ind.values[key]
288 + if (!arr) continue
289 + const end = Math.min(vr.to, arr.length - 1)
290 + for (let i = vr.from; i <= end; i++) {
291 + const v = arr[i]
292 + if (v == null || Number.isNaN(v)) continue
293 + const iv = p.kind === 'main' ? ps.toInternal(v) : v
294 + if (iv < lo) lo = iv; if (iv > hi) hi = iv
295 + }
296 + }
297 + }
298 + if (p.kind !== 'main' && ind.spec.levels) for (const l of ind.spec.levels) { if (l < lo) lo = l; if (l > hi) hi = l }
299 + }
300 + if (!Number.isFinite(lo) || !Number.isFinite(hi)) return
301 + if (p.kind === 'main') ps.setAutoRangeInternal(lo, hi)
302 + else ps.setAutoRange(lo, hi)
303 + }
304 +
305 + _baselineValue(vr) {
306 + if (this.opts.baselineValue != null) return this.opts.baselineValue
307 + const rs = this.renderStore
308 + if (!rs.length) return 0
309 + const i = clamp(vr.from, 0, rs.length - 1)
310 + return rs.o[i]
311 + }
312 +
313 + _computeTimeTicks(vr) {
314 + if (vr.to < vr.from) return []
315 + const ctx = this.timeAxis.main.ctx
316 + const regular = font(this.theme, { mono: true, size: FONT_SIZE })
317 + const strong = font(this.theme, { mono: true, size: FONT_SIZE, weight: 700 })
318 + return buildTimeTicks({
319 + times: this.store.t, from: vr.from, to: vr.to, tf: this.opts.timeframe, xOf: i => this.ts.x(i), width: this.plotWidth,
320 + measure: (text, isStrong) => measure(ctx, text, isStrong ? strong : regular),
321 + })
322 + }
323 +
324 + _updateAxisWidth() {
325 + const ctx = this.mainPane.main.ctx
326 + let w = MIN_AXIS_W
327 + for (const p of this.panes) {
328 + if (p.collapsed) continue
329 + const r = this._paneTicks(p)
330 + p._ticks = r.ticks
331 + p.decimals = r.decimals
332 + const need = measureAxisWidth(ctx, r.ticks, this.theme)
333 + if (need > w) w = need
334 + }
335 + // Also make room for the last-price label (bold) and the crosshair label.
336 + if (this.store.length) {
337 + const text = this._formatMain(this.store.c[this.store.length - 1])
338 + const need = Math.ceil(measure(ctx, text, font(this.theme, { mono: true, size: FONT_SIZE, weight: 600 }))) + 16
339 + if (need > w) w = need
340 + }
341 + w = Math.ceil(w / 4) * 4
342 + if (w > this.axisWidth || w < this.axisWidth - 12) {
343 + this.axisWidth = w
344 + this.ts.width = this.plotWidth
345 + }
346 + }
347 +
348 + _paneTicks(p) {
349 + const fmt = this._paneFormatter(p)
350 + return p.scale.ticks(p.height, p.kind === 'main' ? this.decimals : 0, this.opts.locale, 44, fmt)
351 + }
352 +
353 + _paneFormatter(p) {
354 + if (p.kind === 'main') return null
355 + const ind = this.indicators.get(p.indicators[0])
356 + if (ind && ind.spec.format === 'compact') return v => formatCompact(v, this.opts.locale)
357 + return null
358 + }
359 +
360 + _formatMain(price) { return this.mainPane.scale.format(price, this.decimals, this.opts.locale) }
361 +
362 + _formatPane(p, value) {
363 + if (p.kind === 'main') return this._formatMain(value)
364 + const fmt = this._paneFormatter(p)
365 + if (fmt) return fmt(value)
366 + return formatPrice(value, Math.max(p.decimals || 0, 2), this.opts.locale)
367 + }
368 +
369 + /* ───────────────────────── drawing: data layer ───────────────────────── */
370 +
371 + _drawPane(p, vr) {
372 + const layer = p.main
373 + const ctx = layer.ctx
374 + layer.clear()
375 + const W = this.plotWidth, H = p.height, theme = this.theme
376 + ctx.fillStyle = theme.bg
377 + ctx.fillRect(0, 0, this.width, H)
378 + if (p.collapsed) {
379 + this._drawPriceAxisFor(p, [])
380 + this._drawPaneBorder(p)
381 + return
382 + }
383 + const ticks = p._ticks || []
384 + ctx.save()
385 + ctx.beginPath(); ctx.rect(0, 0, W, H); ctx.clip()
386 + drawGrid(ctx, { width: W, height: H, priceTicks: ticks, timeTicks: this._timeTicks || [], theme })
387 + if (p.kind === 'main') {
388 + if (isIntraday(this.opts.timeframe)) this._drawSessionBreaks(ctx, vr, H)
389 + drawWatermark(ctx, { text: this.opts.watermark, width: W, height: H, theme })
390 + const g = { ctx, store: this.renderStore, from: vr.from, to: vr.to, ts: this.ts, ps: p.scale, theme, width: W, height: H, type: this.seriesType, baseline: this._baselineValue(vr) }
391 + if (this.volumeVisible) drawVolume(g, this.opts.volumeFraction)
392 + drawSeries(g)
393 + this._drawIndicators(ctx, p, vr, W, H)
394 + this._drawCompares(ctx, p, vr, W, H)
395 + if (vr.to >= vr.from && !this.ts.isCompressed) this._drawHiLo(ctx, vr, W)
396 + } else {
397 + this._drawLevels(ctx, p, W)
398 + this._drawIndicators(ctx, p, vr, W, H)
399 + }
400 + ctx.restore()
401 + this._drawPriceAxisFor(p, ticks)
402 + this._drawPaneBorder(p)
403 + }
404 +
405 + _drawPaneBorder(p) {
406 + const ctx = p.main.ctx
407 + if (p !== this.panes[0]) {
408 + ctx.strokeStyle = this.theme.paneBorder
409 + ctx.lineWidth = 1
410 + ctx.beginPath(); ctx.moveTo(0, 0.5); ctx.lineTo(this.width, 0.5); ctx.stroke()
411 + }
412 + }
413 +
414 + _drawPriceAxisFor(p, ticks) {
415 + drawPriceAxis(p.main.ctx, { x0: this.plotWidth, width: this.axisWidth, height: p.height, ticks, theme: this.theme })
416 + }
417 +
418 + _drawSessionBreaks(ctx, vr, H) {
419 + if (vr.to < vr.from) return
420 + const T = this.store.t
421 + const xs = []
422 + for (let i = Math.max(1, vr.from); i <= vr.to; i++) {
423 + if (isDayChange(T[i], T[i - 1])) { xs.push(this.ts.x(i) - this.ts.barSpacing / 2); if (xs.length > 80) return }
424 + }
425 + drawSessionBreaks(ctx, { xs, height: H, theme: this.theme })
426 + }
427 +
428 + _drawLevels(ctx, p, W) {
429 + const ind = this.indicators.get(p.indicators[0])
430 + if (!ind || !ind.spec.levels) return
431 + ctx.strokeStyle = this.theme.gridStrong
432 + ctx.lineWidth = 1
433 + ctx.setLineDash([4, 4])
434 + ctx.beginPath()
435 + for (const l of ind.spec.levels) { const y = crisp(p.scale.y(l)); ctx.moveTo(0, y); ctx.lineTo(W, y) }
436 + ctx.stroke()
437 + ctx.setLineDash([])
438 + }
439 +
440 + _drawIndicators(ctx, p, vr, W, H) {
441 + const ps = p.scale
442 + // Indicator arrays may extend past the data (Ichimoku forward cloud): draw up to the right edge.
443 + const to = Math.max(vr.to, Math.ceil(this.ts.indexAt(W)))
444 + for (const id of p.indicators) {
445 + const ind = this.indicators.get(id)
446 + if (!ind || !ind.values) continue
447 + drawPlots({ ctx, plots: ind.spec.plots, values: ind.values, colors: ind.colors, from: vr.from, to, ts: this.ts, yOf: v => ps.y(v), theme: this.theme, height: H, store: this.store })
448 + }
449 + }
450 +
451 + _drawCompares(ctx, p, vr, W, H) {
452 + if (!this.compares.size || vr.to < vr.from) return
453 + const ps = p.scale
454 + let k = 0
455 + for (const c of this.compares.values()) {
456 + const color = c.color || this.theme.series[(k + 1) % this.theme.series.length]
457 + k++
458 + if (!(c.base > 0)) continue
459 + const A = c.aligned
460 + const pct = new Array(vr.to + 1)
461 + for (let i = vr.from; i <= vr.to; i++) pct[i] = A[i] > 0 ? (A[i] / c.base - 1) * 100 : null
462 + ctx.strokeStyle = color; ctx.lineWidth = 1.5; ctx.lineJoin = 'round'
463 + ctx.stroke(valuePath(pct, vr.from, vr.to, this.ts, v => ps.yInternal(v)))
464 + // Label at the last visible point.
465 + let last = vr.to
466 + while (last >= vr.from && pct[last] == null) last--
467 + if (last >= vr.from) {
468 + const y = ps.yInternal(pct[last])
469 + const x = Math.min(this.ts.x(last) + 6, W - 4)
470 + pill(ctx, `${c.label} ${formatPercent(pct[last], 2, this.opts.locale)}`, x, y, { bg: color, fontStr: font(this.theme, { mono: true, size: 10, weight: 600 }), h: 16, padX: 4, align: x > W - 120 ? 'right' : 'left', clampTo: { x0: 0, x1: W, y0: 0, y1: H } })
471 + }
472 + }
473 + }
474 +
475 + _drawHiLo(ctx, vr, W) {
476 + const ex = this.renderStore.extremes(vr.from, vr.to)
477 + if (ex.iHi < 0) return
478 + const ps = this.mainPane.scale
479 + drawHiLoMarkers(ctx, {
480 + hi: { x: this.ts.x(ex.iHi), y: ps.y(ex.hi), text: `H ${this._formatMain(ex.hi)}` },
481 + lo: { x: this.ts.x(ex.iLo), y: ps.y(ex.lo), text: `L ${this._formatMain(ex.lo)}` },
482 + plotWidth: W, theme: this.theme,
483 + })
484 + }
485 +
486 + _drawTimeAxis() {
487 + const layer = this.timeAxis.main
488 + layer.clear()
489 + drawTimeAxis(layer.ctx, { width: this.width, plotWidth: this.plotWidth, height: TIME_AXIS_H, ticks: this._timeTicks || [], theme: this.theme })
490 + }
491 +
492 + /* ───────────────────────── drawing: overlay layer ───────────────────────── */
493 +
494 + _drawOverlay(p, vr, now) {
495 + const layer = p.overlay
496 + const ctx = layer.ctx
497 + layer.clear()
498 + const W = this.plotWidth, H = p.height, theme = this.theme
499 + if (p.collapsed) {
500 + if (p.kind !== 'main') p.headerBoxes = drawPaneHeader(ctx, { title: p.title, plotWidth: W, theme, hover: this._headerHover(p), collapsed: true })
501 + return
502 + }
503 + const ptr = this.pointer
504 + const hovered = ptr && ptr.pane === p
505 + // Main pane: last price, drawings.
506 + if (p.kind === 'main' && this.store.length) {
507 + const n = this.store.length
508 + const c = this.store.c[n - 1], o = this.store.o[n - 1]
509 + const y = p.scale.y(c)
510 + const age = now - this._pulseAt
511 + const pulse = age < PULSE_MS ? 1 - age / PULSE_MS : 0
512 + ctx.save(); ctx.beginPath(); ctx.rect(0, 0, this.width, H); ctx.clip()
513 + drawLastPrice(ctx, { y, text: this._formatMain(c), plotWidth: W, axisWidth: this.axisWidth, height: H, up: c >= o, theme, pulse })
514 + ctx.restore()
515 + ctx.save(); ctx.beginPath(); ctx.rect(0, 0, W, H); ctx.clip()
516 + this.drawings.draw(ctx, { width: W, height: H, ts: this.ts, ps: p.scale, store: this.store, theme, pointer: hovered ? ptr : null })
517 + ctx.restore()
518 + }
519 + // Crosshair.
520 + if (ptr && this.crosshairOpts.mode !== 'hidden' && ptr.region === 'plot') {
521 + const x = this._crosshairX()
522 + const y = hovered ? this._crosshairY(p) : null
523 + ctx.save(); ctx.beginPath(); ctx.rect(0, 0, W, H); ctx.clip()
524 + drawCrosshair(ctx, { x, y, width: W, height: H, theme })
525 + ctx.restore()
526 + if (hovered && this.crosshairOpts.showLabels && y != null) {
527 + const price = p.scale.priceAt(y)
528 + drawAxisLabel(ctx, { text: this._formatPane(p, price), x0: W, y, width: this.axisWidth, height: H, bg: theme.crosshairLabelBg, color: theme.crosshairLabelText, theme })
529 + }
530 + }
531 + // Indicator values on the axis (last value pills) for indicator panes.
532 + if (p.kind !== 'main') {
533 + this._drawIndicatorLastValues(ctx, p, W, H)
534 + p.headerBoxes = drawPaneHeader(ctx, { title: p.title, plotWidth: W, theme, hover: this._headerHover(p), collapsed: false })
535 + }
536 + }
537 +
538 + _headerHover(p) {
539 + const ptr = this.pointer
540 + if (!ptr || ptr.pane !== p) return null
541 + return { x: ptr.x, y: ptr.y }
542 + }
543 +
544 + _drawIndicatorLastValues(ctx, p, W, H) {
545 + const n = this.store.length
546 + if (!n) return
547 + for (const id of p.indicators) {
548 + const ind = this.indicators.get(id)
549 + if (!ind || !ind.values) continue
550 + for (const plot of ind.spec.plots) {
551 + if (plot.kind !== 'line') continue
552 + const arr = ind.values[plot.key]
553 + if (!arr) continue
554 + let i = Math.min(n - 1, arr.length - 1)
555 + while (i >= 0 && (arr[i] == null || Number.isNaN(arr[i]))) i--
556 + if (i < 0) continue
557 + const y = p.scale.y(arr[i])
558 + if (y < 0 || y > H) continue
559 + const color = plotColor(plot.color, this.theme, ind.colors)
560 + drawAxisLabel(ctx, { text: this._formatPane(p, arr[i]), x0: W, y, width: this.axisWidth, height: H, bg: color, theme: this.theme })
561 + }
562 + }
563 + }
564 +
565 + _drawTimeOverlay() {
566 + const layer = this.timeAxis.overlay
567 + layer.clear()
568 + const ptr = this.pointer
569 + if (!ptr || this.crosshairOpts.mode === 'hidden' || ptr.region !== 'plot' || !this.crosshairOpts.showLabels) return
570 + const idx = this._pointerIndex()
571 + const t = this.store.timeAtIndex(idx)
572 + if (t == null) return
573 + drawTimeLabel(layer.ctx, { text: fmtFull(t, this.opts.timeframe, this.opts.sessionLabel), x: this._crosshairX(), plotWidth: this.plotWidth, height: TIME_AXIS_H, theme: this.theme })
574 + }
575 +
576 + /** Bar index under the pointer (rounded, may exceed the data in the right offset area). */
577 + _pointerIndex() {
578 + const ptr = this.pointer
579 + return Math.round(this.ts.indexAt(ptr.x))
580 + }
581 +
582 + _crosshairX() {
583 + const i = this._pointerIndex()
584 + return Math.floor(this.ts.x(i)) + 0.5
585 + }
586 +
587 + _crosshairY(p) {
588 + const ptr = this.pointer
589 + if (this.crosshairOpts.mode !== 'magnet' || p.kind !== 'main') return ptr.y
590 + const i = this._pointerIndex()
591 + if (i < 0 || i >= this.store.length) return ptr.y
592 + const rs = this.renderStore
593 + const ps = p.scale
594 + const cands = [rs.o[i], rs.h[i], rs.l[i], rs.c[i]]
595 + let best = ptr.y, bestD = Infinity
596 + for (const v of cands) { const y = ps.y(v); const d = Math.abs(y - ptr.y); if (d < bestD) { bestD = d; best = y } }
597 + return best
598 + }
599 +
600 + /** Magnet-snapped price for a pointer position in the main pane. */
601 + snapPrice(x, y) {
602 + const ps = this.mainPane.scale
603 + if (this.crosshairOpts.mode !== 'magnet') return ps.priceAt(y)
604 + const i = Math.round(this.ts.indexAt(x))
605 + if (i < 0 || i >= this.store.length) return ps.priceAt(y)
606 + const rs = this.renderStore
607 + let best = ps.priceAt(y), bestD = 12
608 + for (const v of [rs.o[i], rs.h[i], rs.l[i], rs.c[i]]) { const d = Math.abs(ps.y(v) - y); if (d < bestD) { bestD = d; best = v } }
609 + return best
610 + }
611 +
612 + /* ───────────────────────── pointer / crosshair state ───────────────────────── */
613 +
614 + setPointer(pos) {
615 + const prev = this.pointer
616 + this.pointer = pos
617 + this.invalidate('overlay')
618 + if (this.emitter.has('crosshairMove')) {
619 + if (!pos || pos.region !== 'plot') { if (prev) this.emitter.emit('crosshairMove', null); return }
620 + this.emitter.emit('crosshairMove', this._crosshairInfo(pos))
621 + }
622 + }
623 +
624 + _crosshairInfo(pos) {
625 + const n = this.store.length
626 + const raw = Math.round(this.ts.indexAt(pos.x))
627 + const index = n ? clamp(raw, 0, n - 1) : -1
628 + const bar = index >= 0 ? this.store.bars[index] : null
629 + const p = pos.pane
630 + const y = this._crosshairY(p)
631 + const price = p.scale.priceAt(y)
632 + const indicators = {}
633 + for (const ind of this.indicators.values()) {
634 + const vals = {}
635 + if (ind.values) for (const key of Object.keys(ind.values)) { const arr = ind.values[key]; vals[key] = index >= 0 && index < arr.length && arr[index] != null && !Number.isNaN(arr[index]) ? arr[index] : null }
636 + indicators[ind.id] = vals
637 + }
638 + const compares = {}
639 + for (const c of this.compares.values()) {
640 + const v = index >= 0 ? c.aligned[index] : NaN
641 + compares[c.id] = v > 0 && c.base > 0 ? (v / c.base - 1) * 100 : null
642 + }
643 + return { index, bar, x: pos.x, y: pos.y, price, pane: p.kind === 'main' ? 'main' : p.id, paneId: p.id, indicators, compares }
644 + }
645 +
646 + /* ───────────────────────── range events ───────────────────────── */
647 +
648 + _emitRange(vr) {
649 + const key = `${vr.from}|${vr.to}|${this.store.length}|${this.ts.barSpacing.toFixed(3)}|${this.ts.leftIndex.toFixed(3)}`
650 + if (key === this._emittedRange) return
651 + this._emittedRange = key
652 + if (!this.emitter.has('visibleRangeChange')) return
653 + this.emitter.emit('visibleRangeChange', { fromIndex: vr.from, toIndex: vr.to, barsLeftOfViewport: vr.from, needMoreLeft: this.store.length > 0 && vr.from < 200 })
654 + }
655 +
656 + /* ═══════════════════════════ PUBLIC API ═══════════════════════════ */
657 +
658 + setData(bars) {
659 + this.store.set(bars || [])
660 + this.ts.count = this.store.length
661 + this.ts.width = this.plotWidth
662 + this._refreshDecimals()
663 + for (const p of this.panes) { p.scale.hasRange = false; p.scale.auto = true }
664 + this._pulseAt = -Infinity
665 + this._lastClose = this.store.length ? this.store.c[this.store.length - 1] : NaN
666 + this.ts.apply(this.ts.fitView(this.opts.fitBars))
667 + this.ts.stickToRight = true
668 + this.drawings.onDataChange()
669 + this.invalidate('data')
670 + }
671 +
672 + prependData(older) {
673 + const n = this.store.prepend(older || [])
674 + if (n) { this.ts.onPrepend(n); this._refreshDecimals(); this.drawings.onDataChange(); this.invalidate('data') }
675 + }
676 +
677 + appendData(newer) {
678 + const n = this.store.append(newer || [])
679 + if (!n) return
680 + this.ts.count = this.store.length
681 + if (this.ts.stickToRight) this.ts.scrollToLatest()
682 + this._lastClose = this.store.c[this.store.length - 1]
683 + this.invalidate('data')
684 + }
685 +
686 + updateLast(bar) {
687 + const r = this.store.updateLast(bar)
688 + if (r === 'ignored') return
689 + this.ts.count = this.store.length
690 + if (r === 'append' && this.ts.stickToRight) this.ts.scrollToLatest()
691 + if (bar.c !== this._lastClose) { this._pulseAt = performance.now(); this._lastClose = bar.c }
692 + this.invalidate('data')
693 + }
694 +
695 + getData() { return this.store.bars.slice() }
696 +
697 + setTimeframe(tf) { this.opts.timeframe = tf; this.invalidate('data') }
698 +
699 + _refreshDecimals() {
700 + const pf = this.opts.priceFormat
701 + this.decimals = pf.decimals === 'auto' || pf.decimals == null ? autoDecimals(this.store.bars, pf.minMove) : pf.decimals
702 + }
703 +
704 + setSeriesType(type) {
705 + if (!SERIES_TYPES.has(type)) throw new Error(`Unknown series type: ${type}`)
706 + this.seriesType = type
707 + this.invalidate('data')
708 + }
709 +
710 + setPriceScale({ mode, auto, invert } = {}) {
711 + const ps = this.mainPane.scale
712 + if (mode && ps.mode !== mode) {
713 + if (this.compares.size && mode !== 'percent') this._modeBeforeCompare = mode
714 + else ps.setMode(mode)
715 + }
716 + if (auto != null) { ps.auto = !!auto; if (ps.auto) ps._forceAnim = true }
717 + if (invert != null) ps.invert = !!invert
718 + this.emitter.emit('priceScaleChange', this.getPriceScale())
719 + this.invalidate('data')
720 + }
721 +
722 + getPriceScale() { const ps = this.mainPane.scale; return { mode: ps.mode, auto: ps.auto, invert: ps.invert } }
723 +
724 + setVolume(visible) {
725 + this.volumeVisible = !!visible
726 + this.mainPane.scale.marginBottom = this.volumeVisible ? 0.08 + this.opts.volumeFraction * 0.7 : 0.08
727 + this.invalidate('data')
728 + }
729 +
730 + setTheme(theme) {
731 + this.theme = normalizeTheme(theme)
732 + this.opts.theme = theme
733 + this.el.style.background = this.theme.bg
734 + this.invalidate('data')
735 + }
736 +
737 + setCrosshair({ mode, showLabels } = {}) {
738 + if (mode) this.crosshairOpts.mode = mode
739 + if (showLabels != null) this.crosshairOpts.showLabels = !!showLabels
740 + this.invalidate('overlay')
741 + }
742 +
743 + setOptions(partial = {}) {
744 + const prev = this.opts
745 + this.opts = { ...prev, ...partial, priceFormat: { ...prev.priceFormat, ...(partial.priceFormat || {}) } }
746 + if (partial.theme) this.setTheme(partial.theme)
747 + if (partial.rightOffsetBars != null) this.ts.rightOffsetBars = partial.rightOffsetBars
748 + if (partial.minBarSpacing != null) this.ts.minBarSpacing = partial.minBarSpacing
749 + if (partial.barSpacing != null) this.ts.defaultBarSpacing = partial.barSpacing
750 + if (partial.maxBars != null) this.store.maxBars = partial.maxBars
751 + if (partial.priceFormat) this._refreshDecimals()
752 + this.invalidate('data')
753 + }
754 +
755 + /* ─── indicators ─── */
756 +
757 + addIndicator({ type, params, pane, colors, id } = {}) {
758 + const spec = indicatorSpec(type)
759 + const finalId = id || `${type}-${++idSeq}`
760 + if (this.indicators.has(finalId)) this.removeIndicator(finalId)
761 + const where = pane || spec.pane
762 + const ind = { id: finalId, type, params: indicatorParams(type, params), spec, colors: colors || null, values: null, paneId: null }
763 + let target
764 + if (where === 'main') target = this.mainPane
765 + else {
766 + target = new Pane(this.el, { kind: 'indicator', weight: 0.28 })
767 + this.panes.push(target)
768 + this.dirty.layout = true
769 + }
770 + target.indicators.push(finalId)
771 + ind.paneId = target.id
772 + if (target.kind !== 'main') { target.title = spec.title(ind.params); if (spec.range) target.scale.fixedRange = { ...spec.range } }
773 + this.indicators.set(finalId, ind)
774 + this._computeIndicator(ind)
775 + this.invalidate('layout')
776 + return finalId
777 + }
778 +
779 + _computeIndicator(ind) {
780 + ind.values = this.store.length ? computeIndicator(ind.type, this.store.bars, ind.params) : null
781 + }
782 +
783 + updateIndicator(id, params) {
784 + const ind = this.indicators.get(id)
785 + if (!ind) return
786 + ind.params = indicatorParams(ind.type, { ...ind.params, ...(params || {}) })
787 + const p = this.panes.find(p => p.id === ind.paneId)
788 + if (p && p.kind !== 'main') p.title = ind.spec.title(ind.params)
789 + this._computeIndicator(ind)
790 + this.invalidate('data')
791 + }
792 +
793 + removeIndicator(id) {
794 + const ind = this.indicators.get(id)
795 + if (!ind) return
796 + this.indicators.delete(id)
797 + const p = this.panes.find(p => p.id === ind.paneId)
798 + if (p) {
799 + p.indicators = p.indicators.filter(x => x !== id)
800 + if (p.kind !== 'main' && p.indicators.length === 0) this._removePane(p)
801 + }
802 + this.invalidate('layout')
803 + }
804 +
805 + _removePane(p) {
806 + this.panes = this.panes.filter(x => x !== p)
807 + p.destroy()
808 + if (this.pointer && this.pointer.pane === p) this.pointer = null
809 + this.dirty.layout = true
810 + }
811 +
812 + /** Close button of an indicator pane. */
813 + closePane(p) {
814 + if (this.opts.onPaneClose) { this.opts.onPaneClose({ id: p.id, indicators: p.indicators.slice() }); return }
815 + for (const id of p.indicators.slice()) this.removeIndicator(id)
816 + }
817 +
818 + togglePane(p) { p.collapsed = !p.collapsed; this.invalidate('layout') }
819 +
820 + getIndicators() {
821 + return Array.from(this.indicators.values()).map(ind => ({
822 + id: ind.id, type: ind.type, params: { ...ind.params }, pane: ind.paneId === this.mainPane.id ? 'main' : ind.paneId,
823 + colors: ind.colors || ind.spec.plots.filter(p => p.key).map(p => plotColor(p.color, this.theme, null)),
824 + title: ind.spec.title(ind.params), values: ind.values || {},
825 + }))
826 + }
827 +
828 + /* ─── compares ─── */
829 +
830 + addCompare(id, label, bars, color) {
831 + const c = { id, label, bars: bars || [], color: color || null, aligned: new Float64Array(0), base: NaN }
832 + this._alignCompare(c)
833 + this.compares.set(id, c)
834 + const ps = this.mainPane.scale
835 + if (ps.mode !== 'percent') { this._modeBeforeCompare = ps.mode; ps.setMode('percent') }
836 + this.invalidate('data')
837 + }
838 +
839 + removeCompare(id) {
840 + if (!this.compares.delete(id)) return
841 + if (this.compares.size === 0 && this._modeBeforeCompare) {
842 + this.mainPane.scale.setMode(this._modeBeforeCompare)
843 + this._modeBeforeCompare = null
844 + this.emitter.emit('priceScaleChange', this.getPriceScale())
845 + }
846 + this.invalidate('data')
847 + }
848 +
849 + /** aligned[i] = close of the compare series at (or just before) the main bar i's time; NaN when none. */
850 + _alignCompare(c) {
851 + const n = this.store.length
852 + const out = new Float64Array(n).fill(NaN)
853 + const src = c.bars
854 + let j = 0
855 + for (let i = 0; i < n; i++) {
856 + const t = this.store.t[i]
857 + while (j + 1 < src.length && src[j + 1].t <= t) j++
858 + if (src.length && src[j].t <= t) out[i] = src[j].c
859 + }
860 + c.aligned = out
861 + }
862 +
863 + /* ─── drawings (delegated) ─── */
864 +
865 + setDrawingTool(tool) { this.drawings.setTool(tool) }
866 + getDrawings() { return this.drawings.toJSON() }
867 + setDrawings(list) { this.drawings.fromJSON(list) }
868 + clearDrawings() { this.drawings.clear() }
869 + deleteSelectedDrawing() { this.drawings.deleteSelected() }
870 + undo() { this.drawings.undo() }
871 + redo() { this.drawings.redo() }
872 +
873 + /* ─── navigation ─── */
874 +
875 + _animateView(target, animate) {
876 + const from = { barSpacing: this.ts.barSpacing, leftIndex: this.ts.leftIndex }
877 + this.kinetic = null
878 + if (!animate || this.opts.reducedMotion) { this.ts.apply(target); this.ts.stickToRight = this.ts.isAtLatest(); this.invalidate('data'); return }
879 + this.animator.tween({
880 + from, to: target, duration: 200, tag: 'view',
881 + apply: v => { this.ts.barSpacing = v.barSpacing; this.ts.leftIndex = v.leftIndex; this.dirty.data = true },
882 + done: () => { this.ts.apply(target); this.ts.stickToRight = this.ts.isAtLatest(); this.dirty.data = true },
883 + })
884 + this.invalidate('data')
885 + }
886 +
887 + setVisibleRange(r, animate = true) {
888 + if (!r) return
889 + let from, to
890 + if (r.fromIndex != null) { from = r.fromIndex; to = r.toIndex }
891 + else { from = this.store.indexOfTime(r.fromT); to = this.store.indexOfTime(r.toT) }
892 + if (!(to > from)) return
893 + this._animateView(this.ts.rangeToView(from, to, { withOffset: false }), animate)
894 + }
895 +
896 + getVisibleRange() {
897 + const vr = this.ts.visibleRange()
898 + return { fromIndex: vr.from, toIndex: vr.to, fromT: vr.to >= vr.from ? this.store.t[vr.from] : null, toT: vr.to >= vr.from ? this.store.t[vr.to] : null }
899 + }
900 +
901 + fitContent(animate = true) {
902 + this._animateView(this.ts.fitView(this.opts.fitBars), animate)
903 + }
904 +
905 + scrollToLatest(animate = true) {
906 + const right = this.ts.latestRightIndex()
907 + const bs = this.ts.barSpacing
908 + const leftIndex = right - (this.ts.width - bs / 2) / bs
909 + this._animateView({ barSpacing: bs, leftIndex }, animate)
910 + }
911 +
912 + zoom(factor, anchorX) {
913 + const ts = this.ts
914 + const ax = anchorX == null ? ts.width : anchorX
915 + const before = { barSpacing: ts.barSpacing, leftIndex: ts.leftIndex }
916 + if (!ts.zoomAt(factor, ax)) return
917 + const target = { barSpacing: ts.barSpacing, leftIndex: ts.leftIndex }
918 + ts.barSpacing = before.barSpacing; ts.leftIndex = before.leftIndex
919 + this._animateView(target, true)
920 + }
921 +
922 + resetView() {
923 + const ps = this.mainPane.scale
924 + ps.auto = true; ps.invert = false; ps._forceAnim = true
925 + for (const p of this.panes) { p.scale.auto = true; p.scale._forceAnim = true }
926 + this.fitContent(true)
927 + this.emitter.emit('priceScaleChange', this.getPriceScale())
928 + }
929 +
930 + toPNG(o) {
931 + // Make sure the layers reflect the latest state before composing.
932 + if (this._raf) { cancelAnimationFrame(this._raf); this._raf = 0 }
933 + this.dirty.data = true
934 + this._frame(performance.now())
935 + return exportPNG(this, o || {})
936 + }
937 +
938 + on(event, fn) { return this.emitter.on(event, fn) }
939 +
940 + destroy() {
941 + if (this._destroyed) return
942 + this._destroyed = true
943 + if (this._raf) cancelAnimationFrame(this._raf)
944 + this._raf = 0
945 + if (this._ro) this._ro.disconnect()
946 + this.interactions.destroy()
947 + this.drawings.destroy()
948 + this.animator.clear()
949 + for (const p of this.panes) p.destroy()
950 + this.timeAxis.main.destroy(); this.timeAxis.overlay.destroy(); this.timeAxis.el.remove()
951 + this.el.remove()
952 + this.emitter.clear()
953 + this.panes = []
954 + }
955 +}
956 +
957 +export { withAlpha }
added hfmarketdata/web/src/charts/engine/drawings/geometry.js +115 −0
@@ -0,0 +1,115 @@
1 +// Pixel-space geometry for drawings: distances and hit-testing. Pure functions (unit-tested).
2 +
3 +export const HANDLE_R = 6
4 +export const HIT_TOLERANCE = 6
5 +
6 +export function distToSegment(px, py, x1, y1, x2, y2) {
7 + const dx = x2 - x1, dy = y2 - y1
8 + const len2 = dx * dx + dy * dy
9 + let t = len2 === 0 ? 0 : ((px - x1) * dx + (py - y1) * dy) / len2
10 + t = Math.max(0, Math.min(1, t))
11 + return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy))
12 +}
13 +
14 +/** Distance to the infinite line through (x1,y1)-(x2,y2). */
15 +export function distToLine(px, py, x1, y1, x2, y2) {
16 + const dx = x2 - x1, dy = y2 - y1
17 + const len = Math.hypot(dx, dy)
18 + if (len === 0) return Math.hypot(px - x1, py - y1)
19 + return Math.abs(dy * px - dx * py + x2 * y1 - y2 * x1) / len
20 +}
21 +
22 +/** Distance to the ray starting at (x1,y1) towards (x2,y2). */
23 +export function distToRay(px, py, x1, y1, x2, y2) {
24 + const dx = x2 - x1, dy = y2 - y1
25 + const len2 = dx * dx + dy * dy
26 + if (len2 === 0) return Math.hypot(px - x1, py - y1)
27 + const t = ((px - x1) * dx + (py - y1) * dy) / len2
28 + if (t < 0) return Math.hypot(px - x1, py - y1)
29 + return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy))
30 +}
31 +
32 +/** Extend a line through two points to the borders of a [0,w]×[0,h] box. `mode`: 'ray' | 'extended' | 'segment'. */
33 +export function extendLine(x1, y1, x2, y2, w, h, mode) {
34 + if (mode === 'segment') return [x1, y1, x2, y2]
35 + const dx = x2 - x1, dy = y2 - y1
36 + if (dx === 0 && dy === 0) return [x1, y1, x2, y2]
37 + const far = (w + h) * 4
38 + const len = Math.hypot(dx, dy)
39 + const ux = dx / len, uy = dy / len
40 + const ex = x1 + ux * far, ey = y1 + uy * far
41 + if (mode === 'ray') return [x1, y1, ex, ey]
42 + return [x1 - ux * far, y1 - uy * far, ex, ey]
43 +}
44 +
45 +export function pointInRect(px, py, x1, y1, x2, y2, pad = 0) {
46 + const l = Math.min(x1, x2) - pad, r = Math.max(x1, x2) + pad
47 + const t = Math.min(y1, y2) - pad, b = Math.max(y1, y2) + pad
48 + return px >= l && px <= r && py >= t && py <= b
49 +}
50 +
51 +/** Distance to the border of a rectangle. */
52 +export function distToRectBorder(px, py, x1, y1, x2, y2) {
53 + return Math.min(
54 + distToSegment(px, py, x1, y1, x2, y1), distToSegment(px, py, x2, y1, x2, y2),
55 + distToSegment(px, py, x2, y2, x1, y2), distToSegment(px, py, x1, y2, x1, y1),
56 + )
57 +}
58 +
59 +/**
60 + * Hit-test a drawing given its pixel anchor points. Returns { part: 'handle', index } when a handle is hit,
61 + * { part: 'body' } for the shape itself, or null. `box` = { w, h } of the plot.
62 + */
63 +export function hitDrawing(type, pts, px, py, box, tol = HIT_TOLERANCE) {
64 + for (let i = 0; i < pts.length; i++) {
65 + if (type === 'brush') break
66 + if (Math.hypot(px - pts[i].x, py - pts[i].y) <= HANDLE_R + 2) return { part: 'handle', index: i }
67 + }
68 + const [a, b, c] = pts
69 + switch (type) {
70 + case 'trendline': case 'arrow': case 'measure':
71 + return distToSegment(px, py, a.x, a.y, b.x, b.y) <= tol ? { part: 'body' } : null
72 + case 'ray':
73 + return distToRay(px, py, a.x, a.y, b.x, b.y) <= tol ? { part: 'body' } : null
74 + case 'extended':
75 + return distToLine(px, py, a.x, a.y, b.x, b.y) <= tol ? { part: 'body' } : null
76 + case 'hline':
77 + return Math.abs(py - a.y) <= tol ? { part: 'body' } : null
78 + case 'vline':
79 + return Math.abs(px - a.x) <= tol ? { part: 'body' } : null
80 + case 'rect': case 'fib':
81 + if (type === 'fib') {
82 + const l = Math.min(a.x, b.x), r = Math.max(a.x, b.x)
83 + if (px < l - tol || px > r + tol) return null
84 + const lo = Math.min(a.y, b.y), hi = Math.max(a.y, b.y)
85 + return py >= lo - tol && py <= hi + tol ? { part: 'body' } : null
86 + }
87 + return distToRectBorder(px, py, a.x, a.y, b.x, b.y) <= tol || pointInRect(px, py, a.x, a.y, b.x, b.y) ? { part: 'body' } : null
88 + case 'text':
89 + return pointInRect(px, py, a.x - 4, a.y - 10, a.x + Math.max(40, (box.textW || 40)), a.y + 10) ? { part: 'body' } : null
90 + case 'channel': {
91 + if (distToSegment(px, py, a.x, a.y, b.x, b.y) <= tol) return { part: 'body' }
92 + if (!c) return null
93 + const ox = c.x - a.x, oy = c.y - a.y
94 + if (distToSegment(px, py, a.x + ox, a.y + oy, b.x + ox, b.y + oy) <= tol) return { part: 'body' }
95 + // Inside the parallelogram.
96 + const inside = pointInPoly(px, py, [[a.x, a.y], [b.x, b.y], [b.x + ox, b.y + oy], [a.x + ox, a.y + oy]])
97 + return inside ? { part: 'body' } : null
98 + }
99 + case 'brush': {
100 + for (let i = 1; i < pts.length; i++) if (distToSegment(px, py, pts[i - 1].x, pts[i - 1].y, pts[i].x, pts[i].y) <= tol) return { part: 'body' }
101 + return null
102 + }
103 + default:
104 + return null
105 + }
106 +}
107 +
108 +export function pointInPoly(px, py, poly) {
109 + let inside = false
110 + for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
111 + const [xi, yi] = poly[i], [xj, yj] = poly[j]
112 + if ((yi > py) !== (yj > py) && px < ((xj - xi) * (py - yi)) / (yj - yi) + xi) inside = !inside
113 + }
114 + return inside
115 +}
added hfmarketdata/web/src/charts/engine/drawings/manager.js +444 −0
@@ -0,0 +1,444 @@
1 +// Drawing manager: tool state machine (click-click or drag to create), selection, handles, move/resize,
2 +// undo/redo (JSON snapshots), rendering on the main pane overlay.
3 +
4 +import { TOOLS, POINT_COUNT, FIB_LEVELS, newDrawing, serialize, deserialize } from './model.js'
5 +import { hitDrawing, extendLine, HANDLE_R } from './geometry.js'
6 +import { crisp, withAlpha, roundRect } from '../render/canvas.js'
7 +import { font, pill, measure, inkFor } from '../render/text.js'
8 +import { formatPercent } from '../format/number.js'
9 +import { fmtDuration, fmtFull } from '../format/time.js'
10 +
11 +const MAX_HISTORY = 100
12 +
13 +export class DrawingManager {
14 + constructor(chart) {
15 + this.chart = chart
16 + this.list = []
17 + this.tool = null
18 + this.creating = null // { type, points: [{t, price}], preview: {t, price} | null }
19 + this.selectedId = null
20 + this.hoverId = null
21 + this.drag = null // { id, part, index, startX, startY, orig }
22 + this.undoStack = []
23 + this.redoStack = []
24 + this._textW = 40
25 + }
26 +
27 + /* ─── coordinates ─── */
28 +
29 + toPixel(p) {
30 + const c = this.chart
31 + const i = c.store.indexOfTime(p.t)
32 + return { x: c.ts.x(i), y: c.mainPane.scale.y(p.price) }
33 + }
34 +
35 + fromPixel(x, y, snap = true) {
36 + const c = this.chart
37 + const idx = c.ts.indexAt(x)
38 + const t = c.store.timeAtIndex(idx)
39 + const price = snap ? c.snapPrice(x, y) : c.mainPane.scale.priceAt(y)
40 + return { t: t == null ? 0 : t, price }
41 + }
42 +
43 + /* ─── public API ─── */
44 +
45 + setTool(tool) {
46 + if (tool != null && !TOOLS.includes(tool)) throw new Error(`Unknown drawing tool: ${tool}`)
47 + this.tool = tool
48 + this.creating = null
49 + if (tool) this.selectedId = null
50 + this.chart.emitter.emit('toolChange', tool)
51 + this.chart.invalidate('overlay')
52 + }
53 +
54 + toJSON() { return serialize(this.list) }
55 +
56 + fromJSON(list) {
57 + this._push()
58 + this.list = deserialize(list)
59 + this.selectedId = null
60 + this._changed()
61 + }
62 +
63 + clear() {
64 + if (!this.list.length) return
65 + this._push()
66 + this.list = []
67 + this.selectedId = null
68 + this._changed()
69 + }
70 +
71 + deleteSelected() {
72 + if (!this.selectedId) return
73 + const d = this.list.find(x => x.id === this.selectedId)
74 + if (!d || d.locked) return
75 + this._push()
76 + this.list = this.list.filter(x => x.id !== this.selectedId)
77 + this.selectedId = null
78 + this._changed()
79 + }
80 +
81 + undo() {
82 + if (!this.undoStack.length) return
83 + this.redoStack.push(JSON.stringify(serialize(this.list)))
84 + this.list = deserialize(JSON.parse(this.undoStack.pop()))
85 + this.selectedId = null
86 + this._changed()
87 + }
88 +
89 + redo() {
90 + if (!this.redoStack.length) return
91 + this.undoStack.push(JSON.stringify(serialize(this.list)))
92 + this.list = deserialize(JSON.parse(this.redoStack.pop()))
93 + this.selectedId = null
94 + this._changed()
95 + }
96 +
97 + escape() {
98 + if (this.creating) { this.creating = null; this.chart.invalidate('overlay'); return }
99 + if (this.tool) { this.setTool(null); return }
100 + if (this.selectedId) { this.selectedId = null; this.chart.invalidate('overlay') }
101 + }
102 +
103 + onDataChange() { this.chart.invalidate('overlay') }
104 + destroy() { this.list = []; this.undoStack = []; this.redoStack = [] }
105 +
106 + _push() {
107 + this.undoStack.push(JSON.stringify(serialize(this.list)))
108 + if (this.undoStack.length > MAX_HISTORY) this.undoStack.shift()
109 + this.redoStack = []
110 + }
111 +
112 + _changed() {
113 + this.chart.emitter.emit('drawingsChange', this.toJSON())
114 + this.chart.invalidate('overlay')
115 + }
116 +
117 + /* ─── hit testing ─── */
118 +
119 + _pixels(d) { return d.points.map(p => this.toPixel(p)) }
120 +
121 + hitTest(x, y) {
122 + const box = { w: this.chart.plotWidth, h: this.chart.mainPane.height, textW: this._textW }
123 + // Selected drawing first (its handles take priority), then top-most.
124 + const order = this.list.slice().sort((a, b) => (a.id === this.selectedId ? -1 : b.id === this.selectedId ? 1 : 0))
125 + for (const d of order) {
126 + const hit = hitDrawing(d.type, this._pixels(d), x, y, box)
127 + if (hit) { if (hit.part === 'handle' && d.id !== this.selectedId) return { id: d.id, part: 'body' }; return { id: d.id, ...hit } }
128 + }
129 + return null
130 + }
131 +
132 + cursorAt(x, y) {
133 + if (this.drag) return this.drag.part === 'handle' ? 'grabbing' : 'move'
134 + if (this.tool) return 'crosshair'
135 + const h = this.hitTest(x, y)
136 + if (!h) return null
137 + return h.part === 'handle' ? 'grab' : 'pointer'
138 + }
139 +
140 + /* ─── pointer state machine (coordinates relative to the main pane plot) ─── */
141 +
142 + pointerDown(x, y, ev) {
143 + if (this.tool) {
144 + const p = this.fromPixel(x, y)
145 + if (!this.creating) {
146 + this.creating = { type: this.tool, points: [p], preview: null, downX: x, downY: y, dragging: true }
147 + if (POINT_COUNT[this.tool] === 1) { this._commitCreating(); return true }
148 + return true
149 + }
150 + // Second / third click.
151 + this.creating.points.push(p)
152 + this.creating.dragging = true
153 + this.creating.downX = x; this.creating.downY = y
154 + if (this.creating.points.length >= POINT_COUNT[this.creating.type]) this._commitCreating()
155 + return true
156 + }
157 + const hit = this.hitTest(x, y)
158 + if (!hit) {
159 + if (this.selectedId) { this.selectedId = null; this.chart.invalidate('overlay') }
160 + return false
161 + }
162 + const d = this.list.find(z => z.id === hit.id)
163 + this.selectedId = hit.id
164 + if (!d.locked) this.drag = { id: hit.id, part: hit.part, index: hit.index, startX: x, startY: y, orig: d.points.map(p => ({ ...p })), moved: false, snapshot: JSON.stringify(serialize(this.list)) }
165 + this.chart.invalidate('overlay')
166 + void ev
167 + return true
168 + }
169 +
170 + pointerMove(x, y, ev) {
171 + if (this.creating) {
172 + const p = this.fromPixel(x, y)
173 + const cr = this.creating
174 + if (cr.type === 'brush') { if (cr.dragging) cr.points.push(p) }
175 + else cr.preview = p
176 + this.chart.invalidate('overlay')
177 + return true
178 + }
179 + if (this.drag) {
180 + const dg = this.drag
181 + const d = this.list.find(z => z.id === dg.id)
182 + if (!d) { this.drag = null; return false }
183 + if (!dg.moved && Math.hypot(x - dg.startX, y - dg.startY) < 2) return true
184 + dg.moved = true
185 + if (dg.part === 'handle') {
186 + const p = this.fromPixel(x, y)
187 + d.points[dg.index] = p
188 + } else {
189 + // Move: translate every point by the pixel delta (in index/price space).
190 + const c = this.chart
191 + const di = (x - dg.startX) / c.ts.barSpacing
192 + const ps = c.mainPane.scale
193 + const dPix = y - dg.startY
194 + d.points = dg.orig.map(o => {
195 + const i0 = c.store.indexOfTime(o.t)
196 + const t = c.store.timeAtIndex(i0 + di)
197 + const yy = ps.y(o.price) + dPix
198 + return { t: t == null ? o.t : t, price: ps.priceAt(yy) }
199 + })
200 + }
201 + this.chart.invalidate('overlay')
202 + return true
203 + }
204 + const h = this.hitTest(x, y)
205 + const id = h ? h.id : null
206 + if (id !== this.hoverId) { this.hoverId = id; this.chart.invalidate('overlay') }
207 + void ev
208 + return false
209 + }
210 +
211 + pointerUp(x, y) {
212 + if (this.creating) {
213 + const cr = this.creating
214 + if (cr.type === 'brush') { cr.dragging = false; if (cr.points.length >= 2) this._commitCreating(); else this.creating = null; return true }
215 + const moved = Math.hypot(x - cr.downX, y - cr.downY) > 4
216 + if (moved && cr.dragging) {
217 + cr.points.push(this.fromPixel(x, y))
218 + if (cr.points.length >= POINT_COUNT[cr.type]) this._commitCreating()
219 + else cr.preview = null
220 + }
221 + cr.dragging = false
222 + return true
223 + }
224 + if (this.drag) {
225 + const dg = this.drag
226 + this.drag = null
227 + if (dg.moved) {
228 + this.undoStack.push(dg.snapshot)
229 + if (this.undoStack.length > MAX_HISTORY) this.undoStack.shift()
230 + this.redoStack = []
231 + this._changed()
232 + }
233 + return true
234 + }
235 + return false
236 + }
237 +
238 + _commitCreating() {
239 + const cr = this.creating
240 + this.creating = null
241 + if (!cr) return
242 + const d = newDrawing(cr.type, cr.points, { text: cr.type === 'text' ? 'Text' : undefined })
243 + this._push()
244 + this.list.push(d)
245 + this.selectedId = cr.type === 'measure' ? null : d.id
246 + // Measure is transient: it is removed as soon as the tool is used again or deselected — keep it as a
247 + // normal drawing here (callers may filter type === 'measure' before persisting).
248 + this.setToolAfterCreate()
249 + this._changed()
250 + }
251 +
252 + setToolAfterCreate() {
253 + // One shape per activation, like most terminals; brush stays active.
254 + if (this.tool !== 'brush') { this.tool = null; this.chart.emitter.emit('toolChange', null) }
255 + }
256 +
257 + /* ─── rendering ─── */
258 +
259 + draw(ctx, g) {
260 + const { theme } = g
261 + for (const d of this.list) this._drawOne(ctx, g, d, d.id === this.selectedId, d.id === this.hoverId)
262 + if (this.creating) {
263 + const cr = this.creating
264 + const pts = cr.points.slice()
265 + if (cr.preview && cr.type !== 'brush') pts.push(cr.preview)
266 + if (pts.length >= 1) {
267 + const need = POINT_COUNT[cr.type]
268 + const tmp = { type: cr.type, points: pts, style: { width: 1 }, text: cr.type === 'text' ? 'Text' : undefined }
269 + if (need === Infinity || pts.length >= Math.min(need, 2) || need === 1) this._drawOne(ctx, g, tmp, true, false, true)
270 + else this._drawHandles(ctx, pts.map(p => this.toPixel(p)), theme)
271 + }
272 + }
273 + }
274 +
275 + _drawOne(ctx, g, d, selected, hovered, preview = false) {
276 + const { theme, width: W, height: H } = g
277 + const pts = this._pixels(d)
278 + const color = (d.style && d.style.color) || theme.drawing
279 + const lw = (d.style && d.style.width) || 1
280 + ctx.save()
281 + ctx.strokeStyle = color
282 + ctx.fillStyle = color
283 + ctx.lineWidth = hovered && !selected ? lw + 1 : lw
284 + ctx.lineJoin = 'round'; ctx.lineCap = 'round'
285 + if (d.style && d.style.dash) ctx.setLineDash(d.style.dash)
286 + if (preview) ctx.globalAlpha = 0.85
287 + const [a, b, c] = pts
288 + switch (d.type) {
289 + case 'trendline': case 'ray': case 'extended': {
290 + const mode = d.type === 'trendline' ? 'segment' : d.type
291 + const [x1, y1, x2, y2] = extendLine(a.x, a.y, b.x, b.y, W, H, mode)
292 + line(ctx, x1, y1, x2, y2)
293 + break
294 + }
295 + case 'arrow': {
296 + line(ctx, a.x, a.y, b.x, b.y)
297 + arrowHead(ctx, a.x, a.y, b.x, b.y, 9 + lw * 2)
298 + break
299 + }
300 + case 'hline': {
301 + ctx.setLineDash(d.style && d.style.dash ? d.style.dash : [])
302 + line(ctx, 0, crisp(a.y), W, crisp(a.y))
303 + pill(ctx, this.chart._formatMain(d.points[0].price), W + 4, a.y, { bg: color, color: inkFor(color), fontStr: font(theme, { mono: true, size: 11 }), h: 18, padX: 4, clampTo: { x0: W + 2, x1: W + this.chart.axisWidth - 1, y0: 0, y1: H } })
304 + break
305 + }
306 + case 'vline': {
307 + line(ctx, crisp(a.x), 0, crisp(a.x), H)
308 + const t = d.points[0].t
309 + pill(ctx, fmtFull(t, this.chart.opts.timeframe, this.chart.opts.sessionLabel), a.x + 6, 12, { bg: withAlpha(color, 0.9), color: inkFor(color), fontStr: font(theme, { mono: true, size: 10 }), h: 16, padX: 4, clampTo: { x0: 0, x1: W, y0: 0, y1: H } })
310 + break
311 + }
312 + case 'rect': {
313 + const l = Math.min(a.x, b.x), t = Math.min(a.y, b.y), w = Math.abs(b.x - a.x), h = Math.abs(b.y - a.y)
314 + ctx.fillStyle = withAlpha(color, 0.12); ctx.fillRect(l, t, w, h)
315 + ctx.strokeRect(crisp(l), crisp(t), Math.round(w), Math.round(h))
316 + break
317 + }
318 + case 'channel': {
319 + line(ctx, a.x, a.y, b.x, b.y)
320 + if (c) {
321 + const ox = c.x - a.x, oy = c.y - a.y
322 + line(ctx, a.x + ox, a.y + oy, b.x + ox, b.y + oy)
323 + ctx.fillStyle = withAlpha(color, 0.10)
324 + ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.lineTo(b.x + ox, b.y + oy); ctx.lineTo(a.x + ox, a.y + oy); ctx.closePath(); ctx.fill()
325 + ctx.setLineDash([3, 3]); ctx.globalAlpha *= 0.6
326 + line(ctx, a.x + ox / 2, a.y + oy / 2, b.x + ox / 2, b.y + oy / 2)
327 + ctx.setLineDash([]); ctx.globalAlpha = preview ? 0.85 : 1
328 + }
329 + break
330 + }
331 + case 'brush': {
332 + ctx.lineWidth = Math.max(1.5, lw)
333 + ctx.beginPath()
334 + pts.forEach((p, i) => (i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y)))
335 + ctx.stroke()
336 + break
337 + }
338 + case 'fib': this._drawFib(ctx, g, d, pts, color); break
339 + case 'measure': this._drawMeasure(ctx, g, d, pts, theme); break
340 + case 'text': {
341 + const text = d.text || 'Text'
342 + const f = font(theme, { size: 12, weight: 500 })
343 + this._textW = measure(ctx, text, f) + 8
344 + ctx.font = f
345 + ctx.fillStyle = withAlpha(theme.bg, 0.75)
346 + roundRect(ctx, a.x - 4, a.y - 10, this._textW, 20, 3); ctx.fill()
347 + ctx.fillStyle = color
348 + ctx.textBaseline = 'middle'; ctx.textAlign = 'left'
349 + ctx.fillText(text, a.x, a.y + 0.5)
350 + break
351 + }
352 + default: break
353 + }
354 + ctx.restore()
355 + if (selected && d.type !== 'brush') this._drawHandles(ctx, pts, theme, d.locked)
356 + else if (selected && d.type === 'brush') { ctx.save(); ctx.strokeStyle = theme.selection; ctx.lineWidth = 6; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.beginPath(); pts.forEach((p, i) => (i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y))); ctx.stroke(); ctx.restore() }
357 + }
358 +
359 + _drawHandles(ctx, pts, theme, locked = false) {
360 + for (const p of pts) {
361 + ctx.beginPath(); ctx.arc(p.x, p.y, HANDLE_R + 4, 0, Math.PI * 2)
362 + ctx.fillStyle = theme.selection; ctx.fill()
363 + ctx.beginPath(); ctx.arc(p.x, p.y, HANDLE_R / 2 + 0.5, 0, Math.PI * 2)
364 + ctx.fillStyle = locked ? theme.textMuted : theme.drawingHandle; ctx.fill()
365 + ctx.lineWidth = 1.5; ctx.strokeStyle = theme.drawing; ctx.stroke()
366 + }
367 + }
368 +
369 + _drawFib(ctx, g, d, pts, color) {
370 + const { theme, width: W } = g
371 + const [a, b] = pts
372 + const p0 = d.points[0].price, p1 = d.points[1].price
373 + const l = Math.min(a.x, b.x), r = Math.max(a.x, b.x)
374 + const ps = this.chart.mainPane.scale
375 + const f = font(theme, { mono: true, size: 10 })
376 + ctx.font = f; ctx.textBaseline = 'middle'
377 + const levels = d.style && d.style.extended ? [...FIB_LEVELS, 1.618] : FIB_LEVELS
378 + let prevY = null
379 + levels.forEach((lv, i) => {
380 + const price = p0 + (p1 - p0) * lv
381 + const y = ps.y(price)
382 + const c = theme.series[i % theme.series.length]
383 + if (prevY != null) { ctx.fillStyle = withAlpha(c, 0.06); ctx.fillRect(l, Math.min(prevY, y), r - l, Math.abs(y - prevY)) }
384 + ctx.strokeStyle = withAlpha(c, 0.9); ctx.lineWidth = 1
385 + line(ctx, l, crisp(y), r, crisp(y))
386 + const label = `${lv.toFixed(3).replace(/0+$/, '').replace(/\.$/, '')} ${this.chart._formatMain(price)}`
387 + ctx.fillStyle = c
388 + ctx.textAlign = 'left'
389 + ctx.fillText(label, Math.min(r + 6, W - 120), y)
390 + prevY = y
391 + })
392 + ctx.strokeStyle = withAlpha(color, 0.5); ctx.setLineDash([3, 3])
393 + line(ctx, a.x, a.y, b.x, b.y)
394 + ctx.setLineDash([])
395 + }
396 +
397 + _drawMeasure(ctx, g, d, pts, theme) {
398 + const { width: W, height: H } = g
399 + const [a, b] = pts
400 + const up = d.points[1].price >= d.points[0].price
401 + const color = up ? theme.up : theme.down
402 + const l = Math.min(a.x, b.x), t = Math.min(a.y, b.y), w = Math.abs(b.x - a.x), h = Math.abs(b.y - a.y)
403 + ctx.fillStyle = withAlpha(color, 0.12); ctx.fillRect(l, t, w, h)
404 + ctx.strokeStyle = withAlpha(color, 0.8); ctx.lineWidth = 1; ctx.setLineDash([3, 3])
405 + ctx.strokeRect(crisp(l), crisp(t), Math.round(w), Math.round(h))
406 + ctx.setLineDash([])
407 + // Arrow along the vertical move.
408 + const mx = l + w / 2
409 + ctx.strokeStyle = color; ctx.lineWidth = 1.25
410 + line(ctx, mx, a.y, mx, b.y); arrowHead(ctx, mx, a.y, mx, b.y, 8)
411 + const c = this.chart
412 + const dp = d.points[1].price - d.points[0].price
413 + const pct = d.points[0].price ? (dp / d.points[0].price) * 100 : 0
414 + const i0 = c.store.indexOfTime(d.points[0].t), i1 = c.store.indexOfTime(d.points[1].t)
415 + const bars = Math.round(i1 - i0)
416 + const lines = [
417 + `${dp >= 0 ? '+' : '−'}${c._formatMain(Math.abs(dp))} (${formatPercent(pct, 2, c.opts.locale)})`,
418 + `${bars} bars · ${fmtDuration(d.points[1].t - d.points[0].t)}`,
419 + ]
420 + const f = font(theme, { mono: true, size: 11, weight: 500 })
421 + ctx.font = f
422 + const bw = Math.max(...lines.map(s => measure(ctx, s, f))) + 16
423 + const bh = 18 * lines.length + 6
424 + let bx = mx - bw / 2, by = up ? t - bh - 8 : t + h + 8
425 + bx = Math.max(2, Math.min(W - bw - 2, bx)); by = Math.max(2, Math.min(H - bh - 2, by))
426 + ctx.fillStyle = color
427 + roundRect(ctx, bx, by, bw, bh, 4); ctx.fill()
428 + ctx.fillStyle = inkFor(color); ctx.textBaseline = 'middle'; ctx.textAlign = 'center'
429 + lines.forEach((s, i) => ctx.fillText(s, bx + bw / 2, by + 3 + 9 + i * 18))
430 + ctx.textAlign = 'left'
431 + }
432 +}
433 +
434 +function line(ctx, x1, y1, x2, y2) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke() }
435 +
436 +function arrowHead(ctx, x1, y1, x2, y2, size) {
437 + const ang = Math.atan2(y2 - y1, x2 - x1)
438 + ctx.beginPath()
439 + ctx.moveTo(x2, y2)
440 + ctx.lineTo(x2 - size * Math.cos(ang - Math.PI / 7), y2 - size * Math.sin(ang - Math.PI / 7))
441 + ctx.lineTo(x2 - size * Math.cos(ang + Math.PI / 7), y2 - size * Math.sin(ang + Math.PI / 7))
442 + ctx.closePath()
443 + ctx.fill()
444 +}
added hfmarketdata/web/src/charts/engine/drawings/model.js +57 −0
Large diff (57 lines) is not loaded by default to keep the page fast.Load diff
added hfmarketdata/web/src/charts/engine/export/png.js +52 −0
Large diff (52 lines) is not loaded by default to keep the page fast.Load diff
added hfmarketdata/web/src/charts/engine/index.js +20 −0
Large diff (20 lines) is not loaded by default to keep the page fast.Load diff
added hfmarketdata/web/src/charts/engine/interactions/pointer.js +308 −0
Large diff (308 lines) is not loaded by default to keep the page fast.Load diff
added hfmarketdata/web/src/charts/engine/panes/pane.js +49 −0
Large diff (49 lines) is not loaded by default to keep the page fast.Load diff
added hfmarketdata/web/src/charts/engine/render/axes.js +100 −0
Large diff (100 lines) is not loaded by default to keep the page fast.Load diff
added hfmarketdata/web/src/charts/engine/render/overlay.js +123 −0
Large diff (123 lines) is not loaded by default to keep the page fast.Load diff
added hfmarketdata/web/src/charts/engine/render/plots.js +148 −0
Large diff (148 lines) is not loaded by default to keep the page fast.Load diff
added hfmarketdata/web/src/charts/engine/render/series.js +175 −0
Large diff (175 lines) is not loaded by default to keep the page fast.Load diff
modified hfmarketdata/web/src/charts/engine/scales/price-scale.js +9 −4
Large diff (37 lines) is not loaded by default to keep the page fast.Load diff
Menu

Theme
↑↓ navigate ↵ open esc close / or ⌘K anywhere