@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/financial/BollingerBands.js

@@ -0,0 +1,123 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BollingerPane, MovingAverageKind, PriceMark } from "./financeEnums.js";
+import { FinanceInk } from "./FinanceInk.js";
+import { FinanceMath } from "./FinanceMath.js";
+import { PriceChart } from "./PriceChart.js";
+import { PriceMarks } from "./PriceMarks.js";
+import { quantile, scaleLinear } from "d3";
+// src/charts/financial/BollingerBands.ts
+/** Volatility envelope around a moving average: use it to judge stretch from the mean and spot squeezes. */
+var BollingerBands = class extends PriceChart {
+	static meta = {
+		id: "bollinger-bands",
+		name: "Bollinger Bands",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Wraps price in bands set by rolling volatility, showing when a market is stretched or coiled.",
+		tags: [
+			"volatility",
+			"envelope",
+			"percent-b",
+			"bandwidth",
+			"squeeze"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 110),
+		variants: {
+			average: [
+				MovingAverageKind.Simple,
+				MovingAverageKind.Exponential,
+				MovingAverageKind.Weighted
+			],
+			deviations: [2, 1],
+			mark: [
+				PriceMark.Line,
+				PriceMark.Candles,
+				PriceMark.Bars
+			],
+			pane: [
+				BollingerPane.None,
+				BollingerPane.PercentB,
+				BollingerPane.Bandwidth
+			],
+			squeeze: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			average: MovingAverageKind.Simple,
+			deviations: 2,
+			mark: PriceMark.Line,
+			pane: BollingerPane.None,
+			squeeze: false
+		};
+	}
+	bands(bars) {
+		const { period, average, deviations } = this.options;
+		const closes = bars.map((bar) => bar.close);
+		const mid = FinanceMath.average(average, closes, period), spread = FinanceMath.stdev(closes, period);
+		const shift = (sign) => mid.map((value, i) => value === null || spread[i] === null ? null : value + sign * deviations * spread[i]);
+		return {
+			mid,
+			upper: shift(1),
+			lower: shift(-1)
+		};
+	}
+	studies(bars) {
+		return [{
+			name: `Bands ${this.options.period}`,
+			...this.bands(bars)
+		}];
+	}
+	subShare() {
+		return this.options.pane === BollingerPane.None ? 0 : .26;
+	}
+	twoTone() {
+		return this.options.mark !== PriceMark.Line;
+	}
+	priceMarks(ctx, view, tones) {
+		this.drawPrice(ctx, view, tones, this.options.mark);
+		this.drawSqueeze(ctx, view);
+		this.drawPane(ctx, view);
+	}
+	bandwidth(bars) {
+		const { mid, upper, lower } = this.bands(bars);
+		return mid.map((value, i) => value && upper[i] !== null ? 100 * (upper[i] - lower[i]) / Math.abs(value) : null);
+	}
+	drawSqueeze(ctx, view) {
+		const widths = this.bandwidth(view.bars);
+		const known = widths.filter((value) => value !== null);
+		const limit = quantile(known, .2) ?? 0;
+		const coiled = this.options.squeeze ? view.bars.filter((bar) => widths[bar.index] !== null && widths[bar.index] <= limit) : [];
+		const strip = ctx.marks("squeeze", "rect", coiled, (bar) => bar.index).attr("fill", ctx.theme.grid).attr("fill-opacity", .7);
+		ctx.set(strip, {
+			x: (bar) => view.x(bar.index) - view.step / 2,
+			width: view.step,
+			y: view.main.top,
+			height: view.main.bottom - view.main.top
+		});
+		ctx.group("squeeze").lower();
+		ctx.group("grid").lower();
+	}
+	drawPane(ctx, view) {
+		const { pane } = this.options;
+		const { sub, bars } = view;
+		const { upper, lower } = this.bands(bars);
+		const percent = pane === BollingerPane.PercentB;
+		const values = !sub ? [] : percent ? upper.map((high, i) => high === null || high === lower[i] ? null : 100 * (bars[i].close - lower[i]) / (high - lower[i])) : this.bandwidth(bars);
+		const known = values.filter((value) => value !== null);
+		const top = Math.max(percent ? 100 : 1, ...known), bottom = Math.min(0, ...known);
+		const y = scaleLinear([bottom, top], sub ? [sub.bottom, sub.top] : [0, 0]).nice(3);
+		const ticks = !sub || !known.length ? [] : percent ? [0, 100] : y.ticks(2);
+		FinanceInk.paneAxis(ctx, "band-axis", ticks, y, (value) => `${value}%`, ctx.plot.width);
+		const paneView = {
+			...view,
+			y
+		};
+		PriceMarks.line(ctx, paneView, "band-pane", values, ctx.theme.inkSecondary, 1.5);
+		this.paneTitle(ctx, "band-title", percent ? "%B" : "Bandwidth", sub);
+	}
+};
+export { BollingerBands };

package/dist/charts/financial/BrickChart.js

@@ -0,0 +1,56 @@
+import { BoxMethod, PriceSource } from "./financeEnums.js";
+import { PriceTransforms } from "./PriceTransforms.js";
+import { Quotes } from "./Quotes.js";
+import { SessionChart } from "./SessionChart.js";
+import { extent } from "d3";
+// src/charts/financial/BrickChart.ts
+/**
+* Time-independent charts. Each column of a construction becomes a `FinanceBar` (`close` above
+* `open` when rising), so the shared session axis, hit columns and date ticks apply unchanged.
+*/
+var BrickChart = class extends SessionChart {
+	defaults() {
+		return {
+			...super.defaults(),
+			source: PriceSource.Close,
+			method: BoxMethod.ATR,
+			multiple: 1
+		};
+	}
+	boxSize(bars) {
+		const { method, multiple, box } = this.options;
+		return bars.length ? PriceTransforms.boxSize(bars, method, multiple, box) : 0;
+	}
+	bars() {
+		const raw = super.bars();
+		return this.construct(raw, this.boxSize(raw));
+	}
+	valueDomain(bars) {
+		const [low, high] = extent(bars.flatMap((bar) => [bar.low, bar.high]));
+		const pad = (high - low || 1) * .04;
+		return [low - pad, high + pad];
+	}
+	plotMarks(ctx, view) {
+		this.columnMarks(ctx, view, this.tones(ctx));
+		this.sessions(ctx, view, (bar) => this.columnTip(bar));
+	}
+	columnTip(bar) {
+		return {
+			title: bar.label,
+			color: this.palette.diverging(bar.close >= bar.open ? -1 : 1),
+			rows: [[bar.close >= bar.open ? "Rising to" : "Falling to", Quotes.money(bar.close)], ["From", Quotes.money(bar.open)]]
+		};
+	}
+	/** A column as a bar, keeping the date of the session that completed it. */
+	column(index, from, to, bar, extreme = to) {
+		return {
+			...bar,
+			index,
+			open: from,
+			close: to,
+			high: Math.max(from, to, extreme),
+			low: Math.min(from, to, extreme)
+		};
+	}
+};
+export { BrickChart };

package/dist/charts/financial/Candlestick3D.js

@@ -0,0 +1,157 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Candle3DDepth } from "./financeEnums.js";
+import { FinanceMath } from "./FinanceMath.js";
+import { Quotes } from "./Quotes.js";
+import { extent, scaleBand, scaleLinear, scaleSqrt } from "d3";
+import { BoxGeometry, CatmullRomCurve3, InstancedMesh, Mesh, MeshStandardMaterial, Object3D, PlaneGeometry, TubeGeometry, Vector3 } from "three";
+// src/charts/financial/Candlestick3D.ts
+var BASE = -.7;
+/** Candlesticks as solid objects: use it for presentation views where volume adds a physical third dimension. */
+var Candlestick3D = class extends Chart3D {
+	static meta = {
+		id: "candlestick-3d",
+		name: "3D candlestick chart",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Stands each session as a solid candle on a floor, with depth or a rear wall carrying traded volume.",
+		tags: [
+			"ohlc",
+			"stock",
+			"volume",
+			"solid"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 36),
+		variants: {
+			depth: [Candle3DDepth.Uniform, Candle3DDepth.Volume],
+			volumeWall: [true, false],
+			ribbon: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			date: "date",
+			open: "open",
+			high: "high",
+			low: "low",
+			close: "close",
+			volume: "volume",
+			depth: Candle3DDepth.Uniform,
+			volumeWall: true,
+			ribbon: false
+		};
+	}
+	build(ctx) {
+		const { depth, volumeWall, ribbon } = this.options;
+		const bars = Quotes.read(this.options.data, this.options);
+		const floor = new Mesh(new PlaneGeometry(2.4, 1.4), new MeshStandardMaterial({ color: ctx.theme.grid }));
+		floor.rotation.x = -Math.PI / 2;
+		floor.position.y = BASE;
+		floor.receiveShadow = true;
+		ctx.root.add(floor);
+		if (!bars.length) return;
+		const band = scaleBand(bars.map((bar) => String(bar.index)), [-1.05, 1.05]).padding(.22);
+		const [low, high] = [Math.min(...bars.map((bar) => bar.low)), Math.max(...bars.map((bar) => bar.high))];
+		const price = scaleLinear([low, high === low ? low + 1 : high], [-.62, .7]);
+		const heaviest = Math.max(1, ...bars.map((bar) => bar.volume));
+		const width = band.bandwidth();
+		const deep = scaleSqrt([0, heaviest], [width * .5, width * 5]);
+		const center = (i) => band(String(i)) + width / 2;
+		const dummy = new Object3D();
+		const bodies = new InstancedMesh(new BoxGeometry(width, 1, 1), new MeshStandardMaterial({ roughness: .45 }), bars.length);
+		const wicks = new InstancedMesh(new BoxGeometry(width * .16, 1, width * .16), new MeshStandardMaterial({ roughness: .6 }), bars.length);
+		bodies.castShadow = wicks.castShadow = true;
+		const tone = (rising) => ctx.color(ctx.palette.diverging(rising ? -1 : 1));
+		bars.forEach((bar, i) => {
+			bodies.setColorAt(i, tone(bar.close >= bar.open));
+			wicks.setColorAt(i, tone(bar.close >= bar.open));
+		});
+		const place = (progress) => {
+			bars.forEach((bar, i) => {
+				const mid = (price(bar.open) + price(bar.close)) / 2;
+				const tall = Math.max(.012, Math.abs(price(bar.close) - price(bar.open))) * progress + 5e-4;
+				dummy.position.set(center(i), BASE + (mid - BASE) * progress, 0);
+				dummy.scale.set(1, tall, depth === Candle3DDepth.Volume ? deep(bar.volume) : width * 1.4);
+				dummy.updateMatrix();
+				bodies.setMatrixAt(i, dummy.matrix);
+				dummy.position.set(center(i), BASE + ((price(bar.high) + price(bar.low)) / 2 - BASE) * progress, 0);
+				dummy.scale.set(1, Math.max(.001, (price(bar.high) - price(bar.low)) * progress), 1);
+				dummy.updateMatrix();
+				wicks.setMatrixAt(i, dummy.matrix);
+			});
+			bodies.instanceMatrix.needsUpdate = wicks.instanceMatrix.needsUpdate = true;
+		};
+		ctx.reveal(place);
+		ctx.root.add(bodies, wicks);
+		const tip = (i) => {
+			const bar = bars[i];
+			return {
+				title: bar.label,
+				rows: [
+					["Open", Quotes.money(bar.open)],
+					["High", Quotes.money(bar.high)],
+					["Low", Quotes.money(bar.low)],
+					["Close", Quotes.money(bar.close)],
+					["Volume", Quotes.compact(bar.volume)]
+				]
+			};
+		};
+		ctx.pick(bodies, tip);
+		if (volumeWall) {
+			const height = scaleLinear([0, heaviest], [.005, .5]);
+			const wall = new InstancedMesh(new BoxGeometry(width, 1, .04), new MeshStandardMaterial({
+				roughness: .8,
+				color: ctx.theme.inkMuted
+			}), bars.length);
+			wall.castShadow = true;
+			const raise = (progress) => {
+				bars.forEach((bar, i) => {
+					const tall = Math.max(.002, height(bar.volume) * progress);
+					dummy.position.set(center(i), BASE + tall / 2, -.62);
+					dummy.scale.set(1, tall, 1);
+					dummy.updateMatrix();
+					wall.setMatrixAt(i, dummy.matrix);
+				});
+				wall.instanceMatrix.needsUpdate = true;
+			};
+			ctx.reveal(raise, .9, .2);
+			ctx.root.add(wall);
+			ctx.pick(wall, tip);
+		}
+		if (ribbon) {
+			const knots = FinanceMath.ema(bars.map((bar) => bar.close), Math.min(10, Math.max(2, Math.floor(bars.length / 3)))).flatMap((value, i) => value === null ? [] : [new Vector3(center(i), price(value), .34)]);
+			if (knots.length > 1) {
+				const tube = new Mesh(new TubeGeometry(new CatmullRomCurve3(knots), knots.length * 3, .012, 8), new MeshStandardMaterial({
+					color: ctx.theme.categorical[1],
+					roughness: .4
+				}));
+				tube.castShadow = true;
+				ctx.root.add(tube);
+			}
+		}
+		const [first, last] = extent(bars, (bar) => bar.index);
+		ctx.label(bars[first].label, [
+			center(first),
+			-.7999999999999999,
+			.82
+		], "secondary", 10);
+		ctx.label(bars[last].label, [
+			center(last),
+			-.7999999999999999,
+			.82
+		], "secondary", 10);
+		ctx.label(Quotes.money(high), [
+			-1.2,
+			.7,
+			0
+		], "muted", 10);
+		ctx.label(Quotes.money(low), [
+			-1.2,
+			-.62,
+			0
+		], "muted", 10);
+	}
+};
+export { Candlestick3D };

package/dist/charts/financial/CandlestickChart.js

@@ -0,0 +1,60 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { CandleBody, PriceOverlay, PriceScale, VolumeLayout } from "./financeEnums.js";
+import { PriceChart } from "./PriceChart.js";
+import { PriceMarks } from "./PriceMarks.js";
+// src/charts/financial/CandlestickChart.ts
+/** The default read of a traded price: open, high, low and close per session, with optional overlays and volume. */
+var CandlestickChart = class extends PriceChart {
+	static meta = {
+		id: "candlestick",
+		name: "Candlestick chart",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows open, high, low and close for each session as a body with wicks, so direction and range read at a glance.",
+		tags: [
+			"ohlc",
+			"japanese",
+			"stock",
+			"price",
+			"hollow",
+			"candlevolume"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 72),
+		variants: {
+			body: [
+				CandleBody.Solid,
+				CandleBody.Hollow,
+				CandleBody.VolumeWidth
+			],
+			overlay: [
+				PriceOverlay.None,
+				PriceOverlay.SMA,
+				PriceOverlay.EMA,
+				PriceOverlay.VWAP,
+				PriceOverlay.Bollinger
+			],
+			volumeLayout: [
+				VolumeLayout.None,
+				VolumeLayout.Pane,
+				VolumeLayout.Overlay
+			],
+			scale: [
+				PriceScale.Linear,
+				PriceScale.Log,
+				PriceScale.Percent
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			body: CandleBody.Solid
+		};
+	}
+	priceMarks(ctx, view, tones) {
+		PriceMarks.candles(ctx, view, tones, view.bars, { body: this.options.body });
+	}
+};
+export { CandlestickChart };

package/dist/charts/financial/DepthChart.js

@@ -0,0 +1,255 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { DepthCurve, DepthLayout, DepthScale } from "./financeEnums.js";
+import { FinanceInk } from "./FinanceInk.js";
+import { Quotes } from "./Quotes.js";
+import { area, curveLinear, curveMonotoneX, curveMonotoneY, curveStepAfter, curveStepBefore, line, scaleLinear, scaleSqrt } from "d3";
+// src/charts/financial/DepthChart.ts
+var isBid = (value) => /^(bid|buy|b)/i.test(String(value));
+/** Order-book liquidity on each side of the mid: use it to see walls, imbalance and the cost of size. */
+var DepthChart = class extends CartesianChart {
+	static meta = {
+		id: "depth",
+		name: "Market depth chart",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Accumulates resting bids and asks outward from the mid price, showing where liquidity sits and how it is balanced.",
+		tags: [
+			"order book",
+			"bid ask",
+			"liquidity",
+			"ladder",
+			"dom"
+		],
+		sample: (seed) => {
+			const quotes = SampleData.ohlc(seed, 80);
+			const mid = +quotes.at(-1).close;
+			return quotes.map((quote, i) => {
+				const bid = i % 2 === 0, away = (Math.floor(i / 2) + 1) * .12;
+				return {
+					price: +(mid + (bid ? -away : away)).toFixed(2),
+					size: Math.round(+quote.volume * (.3 + Math.floor(i / 2) / 40)),
+					side: bid ? "bid" : "ask"
+				};
+			});
+		},
+		variants: {
+			layout: [
+				DepthLayout.Cumulative,
+				DepthLayout.Butterfly,
+				DepthLayout.Ladder
+			],
+			curve: [
+				DepthCurve.Step,
+				DepthCurve.Linear,
+				DepthCurve.Smooth
+			],
+			scale: [DepthScale.Linear, DepthScale.Sqrt],
+			normalized: [false, true],
+			focus: [1, .5]
+		},
+		valid: (values) => values.layout !== DepthLayout.Ladder || values.curve === DepthCurve.Step && values.normalized === false
+	};
+	defaults() {
+		return {
+			price: "price",
+			size: "size",
+			side: "side",
+			layout: DepthLayout.Cumulative,
+			curve: DepthCurve.Step,
+			scale: DepthScale.Linear,
+			normalized: false,
+			focus: 1
+		};
+	}
+	get upright() {
+		return this.options.layout === DepthLayout.Cumulative;
+	}
+	book() {
+		const { data, price, size, side, normalized, focus } = this.options;
+		const sides = /* @__PURE__ */ new Map([["bid", /* @__PURE__ */ new Map()], ["ask", /* @__PURE__ */ new Map()]]);
+		for (const row of data ?? []) {
+			const level = Quotes.number(row[price]), amount = Quotes.number(row[size]);
+			if (!Number.isFinite(level) || !Number.isFinite(amount) || amount <= 0) continue;
+			const book = sides.get(isBid(row[side]) ? "bid" : "ask");
+			book.set(level, (book.get(level) ?? 0) + amount);
+		}
+		const ladder = (name, bid) => {
+			const sorted = [...sides.get(name)].sort((a, b) => bid ? b[0] - a[0] : a[0] - b[0]);
+			const kept = sorted.slice(0, Math.max(1, Math.ceil(sorted.length * focus)));
+			const total = kept.reduce((sum, [, amount]) => sum + amount, 0) || 1;
+			let running = 0;
+			return kept.map(([level, amount]) => {
+				running += amount;
+				return {
+					price: level,
+					size: amount,
+					depth: normalized ? 100 * running / total : running,
+					bid
+				};
+			});
+		};
+		const bids = ladder("bid", true), asks = ladder("ask", false);
+		const bestBid = bids[0]?.price, bestAsk = asks[0]?.price;
+		return {
+			bids,
+			asks,
+			mid: bestBid !== void 0 && bestAsk !== void 0 ? (bestBid + bestAsk) / 2 : bestBid ?? bestAsk ?? 0
+		};
+	}
+	plotMargin() {
+		return {
+			...super.plotMargin(),
+			right: 24
+		};
+	}
+	scales(ctx) {
+		const { width, height } = ctx.plot;
+		const book = this.book();
+		const levels = [...book.bids, ...book.asks];
+		const low = Math.min(...levels.map((level) => level.price), book.mid), high = Math.max(...levels.map((level) => level.price), book.mid);
+		const prices = levels.length ? [low, high] : [0, 1];
+		const ladder = this.options.layout === DepthLayout.Ladder;
+		const peak = Math.max(1, ...levels.map((level) => ladder ? level.size : level.depth));
+		const amount = this.options.scale === DepthScale.Sqrt ? scaleSqrt() : scaleLinear();
+		if (this.upright) return {
+			...book,
+			x: scaleLinear(prices, [0, width]),
+			y: amount.domain([0, peak]).range([height, 0]).nice(this.yTicks())
+		};
+		const pad = ladder ? (high - low) / Math.max(4, levels.length) : 0;
+		return {
+			...book,
+			x: amount.domain([-peak, peak]).range([0, width]).nice(this.xTicks()),
+			y: scaleLinear([low - pad, high + pad], [height, 0])
+		};
+	}
+	tickFormat(scale) {
+		const base = super.tickFormat(scale);
+		const signedAxis = !this.upright && scale.domain()[0] < 0;
+		return base && signedAxis ? (value) => base(Math.abs(+value)) : base;
+	}
+	legendItems() {
+		return [{
+			key: "Bids",
+			color: this.palette.diverging(-1)
+		}, {
+			key: "Asks",
+			color: this.palette.diverging(1)
+		}];
+	}
+	levelTip(level) {
+		return {
+			title: `${level.bid ? "Bid" : "Ask"} ${Quotes.money(level.price)}`,
+			color: this.palette.diverging(level.bid ? -1 : 1),
+			rows: [["Size", Quotes.compact(level.size)], [this.options.normalized ? "Share of side" : "Cumulative", this.options.normalized ? `${level.depth.toFixed(1)}%` : Quotes.compact(level.depth)]]
+		};
+	}
+	plotMarks(ctx, axes) {
+		const { bids, asks } = axes;
+		const toneBid = ctx.palette.diverging(-1), toneAsk = ctx.palette.diverging(1);
+		if (this.options.layout === DepthLayout.Ladder) this.ladder(ctx, axes, toneBid, toneAsk);
+		else {
+			this.side(ctx, axes, "bids", bids, toneBid);
+			this.side(ctx, axes, "asks", asks, toneAsk);
+		}
+		const marks = this.options.layout === DepthLayout.Ladder ? [] : [...bids, ...asks];
+		this.hits(ctx, axes, marks);
+		this.midLine(ctx, axes);
+	}
+	curveFor(bid) {
+		const { curve } = this.options;
+		if (curve === DepthCurve.Linear) return curveLinear;
+		if (curve === DepthCurve.Smooth) return this.upright ? curveMonotoneX : curveMonotoneY;
+		return this.upright ? bid ? curveStepBefore : curveStepAfter : curveStepAfter;
+	}
+	side(ctx, { x, y, mid }, name, levels, color) {
+		const bid = levels[0]?.bid ?? name === "bids";
+		const curve = this.curveFor(bid);
+		const anchor = {
+			price: mid,
+			size: 0,
+			depth: 0,
+			bid
+		};
+		const run = levels.length ? [anchor, ...levels] : [];
+		const sign = bid ? -1 : 1;
+		const ordered = this.upright && bid ? [...run].reverse() : run;
+		const fillPath = this.upright ? area().curve(curve).x((level) => x(level.price)).y0(y(0)).y1((level) => y(level.depth)) : area().curve(curve).y((level) => y(level.price)).x0(x(0)).x1((level) => x(sign * level.depth));
+		const linePath = this.upright ? line().curve(curve).x((level) => x(level.price)).y((level) => y(level.depth)) : line().curve(curve).y((level) => y(level.price)).x((level) => x(sign * level.depth));
+		FinanceInk.fill(ctx, `${name}-fill`, run.length ? fillPath(ordered) : null, color, .18);
+		FinanceInk.stroke(ctx, `${name}-line`, run.length ? linePath(ordered) : null, color);
+	}
+	ladder(ctx, { x, y, bids, asks }, bid, ask) {
+		const levels = [...bids, ...asks];
+		const prices = levels.map((level) => level.price).sort((a, b) => a - b);
+		const least = prices.slice(1).reduce((gap, price, i) => {
+			const step = price - prices[i];
+			return step > 0 ? Math.min(gap, step) : gap;
+		}, Infinity);
+		const thick = Number.isFinite(least) ? Math.max(1, Math.abs(y(0) - y(least)) - 2) : 6;
+		const start = (level) => Math.min(x(0), x(level.bid ? -level.size : level.size));
+		const reach = (level) => Math.abs(x(level.bid ? -level.size : level.size) - x(0));
+		const bars = ctx.marks("ladder", "rect", levels, (level) => `${level.bid}/${level.price}`).attr("fill", (level) => level.bid ? bid : ask).attr("rx", Math.min(2, thick / 2));
+		ctx.set(bars, {
+			x: start,
+			width: reach,
+			y: (level) => y(level.price) - thick / 2,
+			height: thick
+		}, {
+			x: x(0),
+			width: 0,
+			y: (level) => y(level.price) - thick / 2,
+			height: thick
+		}, 4);
+		ctx.hover(bars, (level) => this.levelTip(level));
+	}
+	/** One hover strip per level, centred on it and bounded by its neighbours. */
+	hits(ctx, { x, y }, levels) {
+		const { width, height } = ctx.plot;
+		const along = (level) => this.upright ? x(level.price) : y(level.price);
+		const sorted = [...levels].sort((a, b) => along(a) - along(b));
+		const edge = (i) => i <= 0 ? 0 : i >= sorted.length ? this.upright ? width : height : (along(sorted[i - 1]) + along(sorted[i])) / 2;
+		const hit = ctx.marks("hits", "rect", sorted, (level) => `${level.bid}/${level.price}`).attr("fill", "transparent").attr("pointer-events", "all");
+		if (this.upright) hit.attr("x", (_, i) => edge(i)).attr("width", (_, i) => edge(i + 1) - edge(i)).attr("y", 0).attr("height", height);
+		else hit.attr("y", (_, i) => edge(i)).attr("height", (_, i) => edge(i + 1) - edge(i)).attr("x", 0).attr("width", width);
+		ctx.hover(hit, (level) => this.levelTip(level));
+	}
+	midLine(ctx, { x, y, bids, asks, mid }) {
+		const { width, height } = ctx.plot;
+		const has = bids.length && asks.length;
+		const spread = has ? asks[0].price - bids[0].price : 0;
+		const label = `Mid ${Quotes.money(mid)} · spread ${Quotes.money(spread)}`;
+		if (this.upright) {
+			const rule = ctx.marks("mid", "line", has ? [mid] : []).attr("stroke", ctx.theme.inkMuted).attr("stroke-dasharray", "3 3");
+			ctx.set(rule, {
+				x1: x,
+				x2: x,
+				y1: 0,
+				y2: height
+			}, {
+				x1: x,
+				x2: x,
+				y1: height,
+				y2: height
+			});
+			FinanceInk.note(ctx, "mid-label", has ? [mid] : [], (value) => ({
+				x: x(value),
+				y: 10,
+				text: label,
+				anchor: "middle"
+			}), 11, "secondary");
+		} else {
+			FinanceInk.rules(ctx, "mid-rule", has ? [y(mid)] : [], width, ctx.theme.inkMuted);
+			FinanceInk.note(ctx, "mid-label", has ? [mid] : [], (value) => ({
+				x: 2,
+				y: y(value) - 4,
+				text: label,
+				anchor: "start"
+			}), 11, "secondary");
+		}
+	}
+};
+export { DepthChart };