OrderFlowGL
GPU-accelerated order flow tape — trades as circular GL_POINTS on a price-over-time scatter. Dot radius scales with quantity. Buy = outcome-positive green, sell = agency red. Ring buffer for real-time streams (default 2000 trades).
import { OrderFlowGL } from "@danagraph/design-system/finance"Props
| Prop | Type | Default | Description |
|---|---|---|---|
tradesreq | Trade[] | — | Array of trades pushed in; new trades appended to ring buffer |
maxTrades | number | — | Ring buffer capacity (default 2000) |
height | number | — | Chart height in px (default 240) |
scaleDots | boolean | — | Scale dot radius by quantity (default true) |
onTradeHover | (trade: T | null) => void | — | Callback when hovering near a trade dot |
tradesrequiredTrade[]Default —Array of trades pushed in; new trades appended to ring buffer
maxTradesnumberDefault —Ring buffer capacity (default 2000)
heightnumberDefault —Chart height in px (default 240)
scaleDotsbooleanDefault —Scale dot radius by quantity (default true)
onTradeHover(trade: T | null) => voidDefault —Callback when hovering near a trade dot
Order flow scatter requires min 300px for legible dot distribution. Reduce maxTrades for lower-memory mobile devices.
This component was designed to express:
Explore Related
GPU-accelerated order book depth visualization. Bid (temporal blue) and ask (agency red) cumulative depth curves as filled triangle-strip areas with smooth line borders. Animates live via rAF.
GPU-accelerated OHLC candlestick chart via WebGL2 (fallback WebGL1). Renders 50k+ candles at 60fps. Hardware-accelerated zoom/pan, crosshair tooltip, bull/bear coloring from DS semantic tokens.
Shared infrastructure for GPU-accelerated charts — CSS token bridge (CSS custom property → WebGL RGBA uniform), animation frame scheduler, and WebGL context factory. Wrap once at dashboard level.
Depth-of-market order book with bid/ask columns and cumulative volume bars