VolumeProfileGL
GPU-accelerated price-at-volume histogram. Two color modes: 'heat' (5-stop vol intensity ramp from dataviz tokens) and 'delta' (buy/sell stacked bars). POC label. Real-time updates via DYNAMIC_DRAW.
import { VolumeProfileGL } from "@danagraph/design-system/finance"Props
| Prop | Type | Default | Description |
|---|---|---|---|
datareq | VolumeBar[] | — | Price/volume data — sorted or unsorted |
height | number | — | Chart height in px (default 320) |
colorMode | 'heat' | 'delta' | — | Color encoding: 'heat' for intensity ramp, 'delta' for buy/sell split |
priceDecimals | number | — | Decimal places for price labels (default 2) |
datarequiredVolumeBar[]Default —Price/volume data — sorted or unsorted
heightnumberDefault —Chart height in px (default 320)
colorMode'heat' | 'delta'Default —Color encoding: 'heat' for intensity ramp, 'delta' for buy/sell split
priceDecimalsnumberDefault —Decimal places for price labels (default 2)
Volume profile is typically shown as a vertical sidebar (min 120px wide). On narrow mobile, render in a bottom drawer.
This component was designed to express:
Explore Related
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.
Token-native grouped/stacked bar chart (Recharts) reading DS dataviz tokens at runtime — FX volume by currency, payment counts by status, budget vs. actual, funding source stacks
Token-native SVG cell-matrix heatmap with sequential (red/blue/neutral) and diverging color scales from DS dataviz tokens — correlation matrices, factor exposure grids, settlement timing, risk concentration