Clyune Component GalleryCandlestick Chart · How it works & code
Log-normal random walk market, real-time jumps + moving average + volume.
Runtime logic
Visiting `/dataviz/candle`, DemoHost lazy-loads `demos/kits/kit-dataviz.js` (registry `mod: 'kit-dataviz'`) and calls `mount(host, { variant: 'candle' })`. mount resolves the variant to family `candle`; `withControls` builds the control panel (6 presets + sliders). `createCanvasStage` creates the `<canvas>` (HiDPI ≤ 2×, ResizeObserver) and the info panel. The family’s `build(S)` initialises state and returns the per-frame callback. Every `requestAnimationFrame`: read controls, advance a speed-scaled clock (dt ≤ 50 ms), run the frame callback; returned readouts go to the info panel. Changing parameters: colour/speed/size apply live; structural ones remount; leaving the page cancels rAF, removes listeners and frees resources.
Environment
Canvas 2D: 2D canvas drawing; requestAnimationFrame: Display-synced animation loop; ResizeObserver: Canvas follows container size; Pointer Events: Unified mouse/touch/pen events; devicePixelRatio: Crisp HiDPI rendering (capped at 2×) · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21
Dependencies
react 18.3.1
Imported APIs
withControls — Wraps the demo in the shared control panel (presets, sliders, reset); hot-updates or remounts on change; paramsFromSpec — Turns the spec (colour/speed/size/count/extras) into control-panel parameter definitions; createCanvasStage — Shared Canvas 2D stage: canvas + info panel, HiDPI, one rAF loop, pointer state, idle auto-pointer; rng — Seeded deterministic PRNG (same seed, same result); hueOf — Hue of a colour (0–360°); clamp — Clamps a value to a range; TAU — Constant 2π; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.clear — Clears with the background colour (translucent = trails); S.get — Reads current control values; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.beginPath() — Starts a new path; ctx.moveTo() — Moves the pen without drawing; ctx.lineTo() — Adds a straight line to a point; ctx.stroke() — Strokes the current path; ctx.fillRect() — Fills a rectangle; ctx.arcTo() — Adds an arc using tangent lines; ctx.closePath() — Closes the current sub-path; ctx.fillText() — Draws filled text; ctx.measureText() — Measures text width; ctx.fill() — Fills the current path; ctx.setLineDash() — Sets the dash pattern for strokes
Source code
frontend/src/demos/kits/kit-dataviz.js: FAM.candle (L652-L690)
Code walkthrough
L654-654: Control definitions (colour/speed/size/count/extras): Up Color, Stick Width Ratio, Number of Candles Displayed, Volatility σ, Moving Average Period MA, Volume Bars. L655-655: Preset buttons: name → parameter overrides (6). L656-664: Info-panel content: live rows(v), formula, notes, params, steps. L665-689: Init function: sets up state and returns the per-frame callback: draws with Canvas 2D `beginPath`, `moveTo`, `lineTo`, `stroke`, `fillRect`; math via `Math.exp`, `Math.max`, `Math.min`, `Math.abs`, `Math.round`, `Math.floor`; returns readouts `o`, `c`, `h`, `l`, `v`, `n`, `vol` … to the info panel.
Principles
Each K-line = Disk O over a period of time, Highest H, Minimum L, Disclose C = (C-O) / O, amplitude = (H - L) / O Moving average MEN = average of n most recent closing prices Price model: Cₜ = Cₜ₋₁ × e^(σ·z), z ~ Standard normal K Line （烛台）是股票行情里最常见的图：每根代表一段时间。中间粗的 Entity From opening to closing, up and down Shadow wire Extension to maximum and lowest prices. Collection is higher (up) than opening"Up Color", Down with the gray purple. Moving average Let's go n 根的收盘价取平均，可以过滤掉短期波动、看出趋势。底部的柱子是 Exchange 。 The one on the right is beating in real time, closing the disk and opening a new one at the time. The pointer hangs on to any one of them and looks at its high and low harvests.