@mstone6969/graph 0.0.0-stage → 0.2.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/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 };

package/dist/charts/financial/DrawdownChart.js

@@ -0,0 +1,148 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { DrawdownMark, DrawdownUnit } from "./financeEnums.js";
+import { DrawdownMath } from "./DrawdownMath.js";
+import { EquityBase } from "./EquityBase.js";
+import { FinanceInk } from "./FinanceInk.js";
+import { Quotes } from "./Quotes.js";
+import { area, curveLinear, curveStepAfter, line, min, scaleLinear } from "d3";
+// src/charts/financial/DrawdownChart.ts
+/** Underwater plot: use it to judge how deep and how long losses ran, which an equity curve hides. */
+var DrawdownChart = class extends EquityBase {
+	static meta = {
+		id: "drawdown",
+		name: "Drawdown chart",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Hangs losses from the running peak, so the depth and duration of every decline can be read directly.",
+		tags: [
+			"underwater",
+			"risk",
+			"max drawdown",
+			"portfolio"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 150, 2),
+		variants: {
+			mark: [
+				DrawdownMark.Area,
+				DrawdownMark.Line,
+				DrawdownMark.Step
+			],
+			unit: [DrawdownUnit.Percent, DrawdownUnit.Absolute],
+			peakWindow: [
+				0,
+				30,
+				60
+			],
+			episodes: [false, true],
+			equityPane: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			mark: DrawdownMark.Area,
+			unit: DrawdownUnit.Percent,
+			peakWindow: 0,
+			episodes: false,
+			equityPane: false
+		};
+	}
+	get percent() {
+		return this.options.unit === DrawdownUnit.Percent;
+	}
+	subShare() {
+		return this.options.equityPane ? .42 : 0;
+	}
+	subOnTop() {
+		return true;
+	}
+	under(item) {
+		return DrawdownMath.series(item.points, this.percent, this.options.peakWindow);
+	}
+	axisValues(lines) {
+		return lines.flatMap((item) => this.under(item).map((point) => point.value));
+	}
+	axisScale(lines, main) {
+		const bottom = min(this.axisValues(lines)) ?? 0;
+		return scaleLinear([bottom < 0 ? bottom : -1, 0], [main.bottom, main.top]).nice(this.yTicks());
+	}
+	tickFormat(scale) {
+		const base = super.tickFormat(scale);
+		return base && this.percent ? (value) => `${base(value)}%` : base;
+	}
+	tipRows(date, lines) {
+		return lines.flatMap((item) => this.under(item).filter((point) => +point.date === +date).map((point) => [item.name, `${point.value.toFixed(2)}${this.percent ? "%" : ""}`]));
+	}
+	plotMarks(ctx, axes) {
+		const { x, y, lines } = axes;
+		const { mark, episodes } = this.options;
+		const curve = mark === DrawdownMark.Step ? curveStepAfter : curveLinear;
+		this.drawEpisodes(ctx, axes, episodes && lines[0] ? this.under(lines[0]) : []);
+		FinanceInk.rules(ctx, "zero", lines.length ? [y(0)] : [], ctx.plot.width, ctx.theme.axis, null);
+		const shade = area().curve(curve).x((point) => x(point.date)).y0(y(0)).y1((point) => y(point.value));
+		const trace = line().curve(curve).x((point) => x(point.date)).y((point) => y(point.value));
+		const ends = [];
+		lines.slice(0, 8).forEach((item, slot) => {
+			const color = ctx.palette.color(item.name), under = this.under(item);
+			FinanceInk.fill(ctx, `under-fill-${slot}`, mark === DrawdownMark.Line ? null : shade(under), color, lines.length > 1 ? .14 : .24);
+			FinanceInk.stroke(ctx, `under-line-${slot}`, trace(under), color, mark === DrawdownMark.Line ? 2 : 1.5);
+			const last = under.at(-1);
+			if (last) ends.push({
+				name: item.name,
+				y: y(last.value)
+			});
+		});
+		this.endLabels(ctx, ends);
+		this.drawEquity(ctx, axes);
+		this.columns(ctx, axes);
+	}
+	drawEpisodes(ctx, { x, y, main }, underwater) {
+		const worst = DrawdownMath.episodes(underwater, 3);
+		const strip = ctx.marks("episodes", "rect", worst, (episode) => +episode.start).attr("fill", ctx.theme.grid).attr("fill-opacity", .7);
+		ctx.set(strip, {
+			x: (episode) => x(episode.start),
+			width: (episode) => Math.max(1, x(episode.end) - x(episode.start)),
+			y: main.top,
+			height: main.bottom - main.top
+		});
+		const wide = worst.filter((episode) => x(episode.end) - x(episode.start) >= 42);
+		FinanceInk.note(ctx, "episode-labels", wide, (episode) => {
+			const text = this.percent ? `${episode.depth.toFixed(1)}%` : Quotes.compact(episode.depth);
+			return {
+				x: (x(episode.start) + x(episode.end)) / 2,
+				y: Math.min(main.bottom - 3, y(episode.depth) + 13),
+				text,
+				anchor: "middle"
+			};
+		}, 10, "ink");
+	}
+	drawEquity(ctx, { x, lines, sub }) {
+		const shown = sub ? lines.slice(0, 8) : [];
+		const values = shown.flatMap((item) => item.points.map((point) => point.value));
+		const scale = scaleLinear(values.length ? [Math.min(...values), Math.max(...values)] : [0, 1], sub ? [sub.bottom, sub.top] : [0, 0]).nice(3);
+		FinanceInk.paneAxis(ctx, "equity-axis", values.length ? scale.ticks(3) : [], scale, Quotes.compact, ctx.plot.width);
+		const trace = line().x((point) => x(point.date)).y((point) => scale(point.value));
+		for (const slot of [
+			0,
+			1,
+			2,
+			3,
+			4,
+			5,
+			6,
+			7
+		]) {
+			const item = shown[slot];
+			const color = item ? ctx.palette.color(item.name) : ctx.theme.axis;
+			FinanceInk.stroke(ctx, `equity-${slot}`, item ? trace(item.points) : null, color, 1.5);
+			const peaks = item ? DrawdownMath.peaks(item.points, this.options.peakWindow) : [];
+			FinanceInk.stroke(ctx, `peak-${slot}`, item ? trace(item.points.map((point, i) => ({
+				date: point.date,
+				value: peaks[i]
+			}))) : null, color, 1, "3 3");
+		}
+	}
+};
+export { DrawdownChart };

package/dist/charts/financial/DrawdownMath.js

@@ -0,0 +1,51 @@
+// src/charts/financial/DrawdownMath.ts
+/** Peak-to-trough maths shared by the portfolio charts. */
+var DrawdownMath = class {
+	/** Running peak; `window > 0` makes it a trailing peak over that many observations. */
+	static peaks(points, window = 0) {
+		let peak = -Infinity;
+		return points.map((point, i) => {
+			if (window > 0) return Math.max(...points.slice(Math.max(0, i - window + 1), i + 1).map((item) => item.value));
+			peak = Math.max(peak, point.value);
+			return peak;
+		});
+	}
+	static depth(value, peak, percent) {
+		if (!percent) return value - peak;
+		return peak > 0 ? (value - peak) / peak * 100 : 0;
+	}
+	static series(points, percent, window = 0) {
+		const peaks = this.peaks(points, window);
+		return points.map((point, i) => ({
+			date: point.date,
+			value: this.depth(point.value, peaks[i], percent)
+		}));
+	}
+	/** The deepest separate underwater episodes, deepest first. */
+	static episodes(underwater, count) {
+		const found = [];
+		let open = null;
+		underwater.forEach((point, i) => {
+			if (point.value < 0) {
+				open ??= {
+					start: underwater[i - 1]?.date ?? point.date,
+					trough: point.date,
+					end: point.date,
+					depth: point.value
+				};
+				open.end = point.date;
+				if (point.value < open.depth) {
+					open.depth = point.value;
+					open.trough = point.date;
+				}
+			} else if (open) {
+				open.end = point.date;
+				found.push(open);
+				open = null;
+			}
+		});
+		if (open) found.push(open);
+		return found.sort((a, b) => a.depth - b.depth).slice(0, count);
+	}
+};
+export { DrawdownMath };