{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "order-book-depth", "type": "registry:component", "title": "Order book depth", "description": "Buy and sell orders stacked away from the price. Sample data: an order book around a mid of 64,210.", "registryDependencies": [ "@chartory/core", "@chartory/plot-depth" ], "files": [ { "path": "registry/chartory/components/order-book-depth.tsx", "type": "registry:component", "target": "components/chartory/order-book-depth.tsx", "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// Order book depth (Chartory chart 053): sizes xs | s | m | l, laid out again from the data at each\n// size; collection \"hearth\" (default) or \"signal\" (with @chartory/signal, Code and Complete). Data in the type's shape (default: the sample). Docs:\n// https://usechartory.com/docs/charts/order-book-depth\nimport { ChartView, type ChartViewProps } from \"@/lib/chartory/charts/chart-view\"\nimport { registerChart } from \"@/lib/chartory/charts/defs\"\nimport { data as sample } from \"@/lib/chartory/charts/types/053-order-book-depth/data\"\nimport { def } from \"@/lib/chartory/charts/types/053-order-book-depth/layout\"\n\nregisterChart(def, sample)\n\nexport type OrderBookDepthData = typeof sample\nexport type OrderBookDepthProps = Omit & {\n /** the data to draw (default: the sample) */\n data?: OrderBookDepthData\n /** further data states: the chart morphs to them (update) or ticks through them (live, with interval) */\n states?: OrderBookDepthData[]\n}\n\nexport function OrderBookDepth(props: OrderBookDepthProps) {\n return \n}\n" }, { "path": "registry/chartory/charts/types/053-order-book-depth/data.ts", "type": "registry:lib", "target": "lib/chartory/charts/types/053-order-book-depth/data.ts", "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 053 Order book depth · sample data (Figma chart/053, from the Figma definition, seeded values expanded).\nimport type { DepthData } from \"../../plots/depth\";\n\nexport const data: DepthData = {\n bids: [\n [64170, 10],\n [64130, 21],\n [64090, 24],\n [64050, 27],\n [64010, 40],\n [63970, 43],\n [63930, 49],\n [63890, 56],\n [63850, 67],\n [63810, 82],\n [63770, 86],\n [63730, 90],\n [63690, 97],\n [63650, 100],\n [63610, 112]\n ],\n asks: [\n [64250, 3],\n [64290, 7],\n [64330, 14],\n [64370, 17],\n [64410, 21],\n [64450, 38],\n [64490, 41],\n [64530, 46],\n [64570, 52],\n [64610, 55],\n [64650, 64],\n [64690, 84],\n [64730, 88],\n [64770, 94],\n [64810, 98]\n ],\n mid: 64210,\n min: 63610,\n max: 64810,\n qmax: 120,\n ticks: [\"120\", \"80\", \"40\", \"0\"],\n midText: \"MID 64,210\",\n xt: [\n [63610, \"63.6K\"],\n [63910, \"63.9K\"],\n [64510, \"64.5K\"],\n [64810, \"64.8K\"]\n ]\n};\n" }, { "path": "registry/chartory/charts/types/053-order-book-depth/layout.ts", "type": "registry:lib", "target": "lib/chartory/charts/types/053-order-book-depth/layout.ts", "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 053 Order book depth (Figma chart/053, \"Order book depth\"): C.depth, cumulative BTC / USDT bids and asks around the mid.\nimport type { ChartDef, TooltipSpec } from \"../../core/shell\";\nimport { depth } from \"../../plots/depth\";\nimport { data } from \"./data\";\n\nconst usd = (v: number) => v.toLocaleString(\"en-US\");\nconst lastQ = (s: [number, number][]) => s[s.length - 1][1];\n\n/** Cumulative levels with every level's own size moved up to ±20 % (whole BTC, at least 1), kept under the axis. */\nconst restack = (lv: [number, number][], step: number, side: number, cap: number): [number, number][] => {\n let prev = 0, acc = 0;\n const q = lv.map(([, c], i) => { const inc = c - prev; prev = c; acc += Math.max(1, Math.round(inc * (1 + 0.2 * Math.sin(i * 1.1 + step * 1.9 + side * 2.4)))); return acc; });\n const k = q[q.length - 1] > cap ? cap / q[q.length - 1] : 1;\n return lv.map(([pr], i) => [pr, Math.max(i + 1, Math.round(q[i] * k))]);\n};\n\n// tooltip: one side of the book (group 0 bids, 1 asks): best level, the far edge and the cumulative depth\nconst tip = (o: typeof data, g: number): TooltipSpec | null => {\n const side = g === 0 ? \"bids\" : g === 1 ? \"asks\" : null;\n if (!side || !o[side].length) return null;\n const lv = o[side], tok = side === \"bids\" ? \"status/success\" : \"status/danger\";\n return {\n kind: \"range\",\n caps: side.toUpperCase() + \" · BTC / USDT\",\n rows: [\n { label: side === \"bids\" ? \"Best bid\" : \"Best ask\", value: usd(lv[0][0]), swatch: tok },\n { label: \"Deepest\", value: usd(lv[lv.length - 1][0]), swatch: tok },\n { label: \"Depth\", value: lastQ(lv) + \" BTC\", swatch: tok },\n ],\n };\n};\n\nexport const def: ChartDef = {\n no: 53,\n slug: \"order-book-depth\",\n legend: [[\"status/success\", \"Bids\"], [\"status/danger\", \"Asks\"]],\n plot: (K, p, w, d) => depth(K, p, w, (d as typeof data | undefined) ?? data),\n tip: (d, g) => tip(d as typeof data, g),\n // the book a moment later: the mid moves inside the spread (its chip follows), every level's size changes\n update: (d, step) => {\n const o = d as typeof data;\n const mid = o.mid + 10 * (((step * 3) % 5) - 2);\n return { ...o, mid, midText: \"MID \" + usd(mid), bids: restack(o.bids, step, 0, o.qmax - 2), asks: restack(o.asks, step, 1, o.qmax - 2) };\n },\n describe: {\n title: \"Market depth\",\n summary: `BTC / USDT order book within ±1% of the mid price ${usd(data.mid)}: cumulative bids reach ${lastQ(data.bids)} BTC at ${usd(data.min)}, cumulative asks ${lastQ(data.asks)} BTC at ${usd(data.max)}.`,\n table: {\n head: [\"Side\", \"Price\", \"Cumulative size (BTC)\"],\n rows: [...data.bids.map(([pr, q]) => [\"Bid\", usd(pr), q]), ...data.asks.map(([pr, q]) => [\"Ask\", usd(pr), q])],\n },\n },\n};\n" } ], "categories": [ "charts", "distribution" ], "meta": { "access": "free", "no": 53, "family": "Distribution" } }