@mstone6969/graph 0.0.0-stage → 0.1.0

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 };

package/dist/charts/financial/EquityBase.js

@@ -0,0 +1,124 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { FinanceInk } from "./FinanceInk.js";
+import { Quotes } from "./Quotes.js";
+import { group, max, pointer, scaleUtc } from "d3";
+// src/charts/financial/EquityBase.ts
+var GAP = 18;
+var END_LABELS = 4;
+/** Value-through-time charts for whole portfolios: long-form rows, one line per series, optional companion pane. */
+var EquityBase = class extends CartesianChart {
+	mainHeight = 300;
+	defaults() {
+		return {
+			date: "date",
+			series: "series",
+			value: "value"
+		};
+	}
+	subShare() {
+		return 0;
+	}
+	subOnTop() {
+		return false;
+	}
+	rawLines() {
+		const { data, date, series, value } = this.options;
+		const rows = (data ?? []).flatMap((row) => {
+			const when = Quotes.date(row[date]), amount = Quotes.number(row[value]);
+			return when && Number.isFinite(amount) ? [{
+				name: String(row[series] ?? "Value"),
+				when,
+				amount
+			}] : [];
+		});
+		return [...group(rows, (row) => row.name)].map(([name, items]) => {
+			return {
+				name,
+				points: [...new Map(items.map((item) => [item.when.getTime(), item.amount]))].sort((a, b) => a[0] - b[0]).map(([time, amount]) => ({
+					date: new Date(time),
+					value: amount
+				}))
+			};
+		});
+	}
+	plotMargin() {
+		const count = this.rawLines().length;
+		return {
+			...super.plotMargin(),
+			right: count >= 2 && count <= END_LABELS ? 62 : 22
+		};
+	}
+	yTicks() {
+		return Math.max(2, Math.min(6, Math.floor(this.mainHeight / 34)));
+	}
+	scales(ctx) {
+		const { width, height } = ctx.plot;
+		const lines = this.rawLines();
+		const share = this.subShare();
+		const subHeight = share ? Math.max(0, height - GAP) * share : 0;
+		const sub = !share ? null : this.subOnTop() ? {
+			top: 0,
+			bottom: subHeight
+		} : {
+			top: height - subHeight,
+			bottom: height
+		};
+		const main = !share ? {
+			top: 0,
+			bottom: height
+		} : this.subOnTop() ? {
+			top: subHeight + GAP,
+			bottom: height
+		} : {
+			top: 0,
+			bottom: height - subHeight - GAP
+		};
+		this.mainHeight = main.bottom - main.top;
+		const dates = lines.flatMap((item) => item.points.map((point) => point.date));
+		const first = dates.reduce((a, b) => b < a ? b : a, dates[0] ?? /* @__PURE__ */ new Date(0));
+		const last = dates.reduce((a, b) => b > a ? b : a, dates[0] ?? /* @__PURE__ */ new Date(864e5));
+		return {
+			x: scaleUtc().domain(+first === +last ? [/* @__PURE__ */ new Date(+first - 864e5), /* @__PURE__ */ new Date(+last + 864e5)] : [first, last]).range([0, width]),
+			y: this.axisScale(lines, main),
+			lines,
+			main,
+			sub
+		};
+	}
+	/** Dated hover columns with a guide line; every series is read out at once. */
+	columns(ctx, { x, lines }) {
+		const times = [...new Set(lines.flatMap((item) => item.points.map((point) => point.date.getTime())))].sort((a, b) => a - b);
+		const { width, height } = ctx.plot;
+		const edge = (i) => i <= 0 ? 0 : i >= times.length ? width : (x(new Date(times[i - 1])) + x(new Date(times[i]))) / 2;
+		const guide = ctx.marks("guide", "line", [0]).attr("stroke", ctx.theme.inkMuted).attr("stroke-dasharray", "2 3").attr("opacity", 0).attr("pointer-events", "none");
+		const hit = ctx.marks("hits", "rect", times).attr("fill", "transparent").attr("pointer-events", "all").attr("x", (_, i) => edge(i)).attr("width", (_, i) => edge(i + 1) - edge(i)).attr("y", 0).attr("height", height);
+		ctx.hover(hit, (time) => ({
+			title: new Date(time).toISOString().slice(0, 10),
+			rows: this.tipRows(new Date(time), lines)
+		}));
+		const root = ctx.root.node();
+		hit.on("pointermove.guide", (event) => {
+			const [px] = pointer(event, root);
+			guide.attr("opacity", 1).attr("x1", px).attr("x2", px).attr("y1", 0).attr("y2", height);
+		}).on("pointerleave.guide", () => guide.attr("opacity", 0));
+	}
+	/** Direct labels past the line ends, pushed apart so they never collide. */
+	endLabels(ctx, ends) {
+		const shown = ends.length >= 2 && ends.length <= END_LABELS ? [...ends].sort((a, b) => a.y - b.y) : [];
+		let floor = -Infinity;
+		const placed = shown.map((end) => {
+			floor = Math.max(end.y, floor + 13);
+			return {
+				name: end.name.length > 9 ? `${end.name.slice(0, 8)}…` : end.name,
+				y: Math.min(floor, ctx.plot.height - 2)
+			};
+		});
+		const widest = max(placed, (label) => label.name.length) ?? 0;
+		FinanceInk.note(ctx, "end-labels", widest ? placed : [], (label) => ({
+			x: ctx.plot.width + 6,
+			y: label.y + 4,
+			text: label.name
+		}), 11, "secondary");
+	}
+};
+export { EquityBase };

package/dist/charts/financial/EquityCurve.js

@@ -0,0 +1,170 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { DrawdownMath } from "./DrawdownMath.js";
+import { EquityBase } from "./EquityBase.js";
+import { EquityBasis, EquityFill } from "./financeEnums.js";
+import { FinanceInk } from "./FinanceInk.js";
+import { area, curveLinear, curveMonotoneX, curveStepAfter, line, max, min, scaleLinear, scaleLog } from "d3";
+// src/charts/financial/EquityCurve.ts
+var CURVES = {
+	[CurveKind.Linear]: curveLinear,
+	[CurveKind.Monotone]: curveMonotoneX,
+	[CurveKind.StepAfter]: curveStepAfter
+};
+/** Growth of an account or strategy: use it to compare portfolios and a benchmark from a shared start. */
+var EquityCurve = class extends EquityBase {
+	static meta = {
+		id: "equity-curve",
+		name: "Equity curve",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Tracks account value through time against a benchmark, with high-water marks and an underwater pane.",
+		tags: [
+			"portfolio",
+			"performance",
+			"backtest",
+			"cumulative return",
+			"benchmark"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 150, 3),
+		variants: {
+			basis: [
+				EquityBasis.Rebased,
+				EquityBasis.Absolute,
+				EquityBasis.Percent,
+				EquityBasis.Log
+			],
+			curve: [
+				CurveKind.Linear,
+				CurveKind.StepAfter,
+				CurveKind.Monotone
+			],
+			fill: [
+				EquityFill.None,
+				EquityFill.Area,
+				EquityFill.Relative
+			],
+			highWater: [false, true],
+			drawdownPane: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			basis: EquityBasis.Rebased,
+			curve: CurveKind.Linear,
+			fill: EquityFill.None,
+			highWater: false,
+			drawdownPane: false
+		};
+	}
+	subShare() {
+		return this.options.drawdownPane ? .28 : 0;
+	}
+	drawn(item) {
+		const base = item.points[0]?.value;
+		const { basis } = this.options;
+		if (!base || basis === EquityBasis.Absolute || basis === EquityBasis.Log) return item.points;
+		const rescale = basis === EquityBasis.Percent ? (value) => (value - base) / Math.abs(base) * 100 : (value) => value / base * 100;
+		return item.points.map((point) => ({
+			date: point.date,
+			value: rescale(point.value)
+		}));
+	}
+	axisValues(lines) {
+		return lines.flatMap((item) => this.drawn(item).map((point) => point.value));
+	}
+	axisScale(lines, main) {
+		const values = this.axisValues(lines);
+		const low = min(values) ?? 0, high = max(values) ?? 1;
+		const pad = (high - low || 1) * .05;
+		if (this.options.basis === EquityBasis.Log && low > 0) {
+			const log = scaleLog([low * .97, high * 1.03], [main.bottom, main.top]);
+			const all = log.ticks.bind(log);
+			log.ticks = (count) => {
+				const kept = [];
+				for (const tick of all(count)) if (kept.length === 0 || Math.abs(log(tick) - log(kept.at(-1))) >= 22) kept.push(tick);
+				return kept;
+			};
+			return log;
+		}
+		return scaleLinear([low - pad, high + pad], [main.bottom, main.top]).nice(this.yTicks());
+	}
+	tickFormat(scale) {
+		const base = super.tickFormat(scale);
+		if (!base || this.options.basis !== EquityBasis.Percent || typeof scale.domain()[0] !== "number") return base;
+		return (value) => `${base(value)}%`;
+	}
+	tipRows(date, lines) {
+		return lines.flatMap((item) => this.drawn(item).filter((point) => +point.date === +date).map((point) => [item.name, point.value.toFixed(2)]));
+	}
+	plotMarks(ctx, axes) {
+		const { x, y, lines, main } = axes;
+		const { fill, highWater, basis } = this.options;
+		const curve = CURVES[this.options.curve] ?? curveLinear;
+		const trace = line().curve(curve).x((point) => x(point.date)).y((point) => y(point.value));
+		const floor = basis === EquityBasis.Percent ? y(0) : main.bottom;
+		const shade = area().curve(curve).x((point) => x(point.date)).y0(Math.min(main.bottom, floor)).y1((point) => y(point.value));
+		this.drawRelative(ctx, axes, fill === EquityFill.Relative ? lines : []);
+		FinanceInk.rules(ctx, "base", lines.length && basis === EquityBasis.Percent ? [y(0)] : basis === EquityBasis.Rebased && lines.length ? [y(100)] : [], ctx.plot.width, ctx.theme.axis, null);
+		const ends = [];
+		lines.slice(0, 8).forEach((item, slot) => {
+			const color = ctx.palette.color(item.name), points = this.drawn(item);
+			FinanceInk.fill(ctx, `equity-fill-${slot}`, fill === EquityFill.Area ? shade(points) : null, color, lines.length > 1 ? .1 : .18);
+			const peaks = DrawdownMath.peaks(points);
+			FinanceInk.stroke(ctx, `equity-peak-${slot}`, highWater ? trace(points.map((point, i) => ({
+				date: point.date,
+				value: peaks[i]
+			}))) : null, color, 1, "3 3");
+			FinanceInk.stroke(ctx, `equity-line-${slot}`, trace(points), color, slot ? 1.5 : 2);
+			const last = points.at(-1);
+			if (last) ends.push({
+				name: item.name,
+				y: y(last.value)
+			});
+		});
+		this.endLabels(ctx, ends);
+		this.drawUnderwater(ctx, axes);
+		this.columns(ctx, axes);
+	}
+	drawRelative(ctx, { x, y }, lines) {
+		const [a, b] = lines;
+		const other = b ? new Map(this.drawn(b).map((point) => [+point.date, point.value])) : /* @__PURE__ */ new Map();
+		const points = a ? this.drawn(a).flatMap((point) => other.has(+point.date) ? [[
+			x(point.date),
+			y(point.value),
+			y(other.get(+point.date))
+		]] : []) : [];
+		const band = FinanceInk.splitBand(points);
+		FinanceInk.fill(ctx, "ahead", band.above || null, ctx.palette.diverging(-1), .2);
+		FinanceInk.fill(ctx, "behind", band.below || null, ctx.palette.diverging(1), .2);
+	}
+	drawUnderwater(ctx, { x, lines, sub }) {
+		const shown = sub ? lines.slice(0, 8) : [];
+		const series = shown.map((item) => DrawdownMath.series(item.points, true));
+		const deepest = min(series.flat(), (point) => point.value) ?? 0;
+		const scale = scaleLinear([Math.min(-1, deepest), 0], sub ? [sub.bottom, sub.top] : [0, 0]).nice(2);
+		FinanceInk.paneAxis(ctx, "underwater-axis", series.length ? scale.ticks(2) : [], scale, (value) => `${value}%`, 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 points = series[slot];
+			FinanceInk.stroke(ctx, `underwater-${slot}`, points ? trace(points) : null, shown[slot] ? ctx.palette.color(shown[slot].name) : ctx.theme.axis, 1.5);
+		}
+		FinanceInk.note(ctx, "underwater-title", sub ? ["Drawdown"] : [], (text) => ({
+			x: 4,
+			y: sub.bottom - 4,
+			text
+		}), 10, "muted");
+	}
+};
+export { EquityCurve };

package/dist/charts/financial/FinanceInk.js

@@ -0,0 +1,87 @@
+// src/charts/financial/FinanceInk.ts
+/** Shared drawing moves for the financial module, so every chart animates and labels the same way. */
+var FinanceInk = class {
+	/** One animated line: draws on the first time, then morphs. `d = null` removes it. */
+	static stroke(ctx, name, d, color, width = 2, dash = null) {
+		const path = ctx.marks(name, "path", d ? [d] : []).attr("fill", "none").attr("stroke", color).attr("stroke-width", width).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke-dasharray", dash);
+		if (path.empty()) return path;
+		if (path.attr("d") === null) {
+			path.attr("d", d);
+			ctx.drawOn(path);
+		} else ctx.set(path, { d });
+		return path;
+	}
+	/** One animated filled region that fades in. `d = null` removes it. */
+	static fill(ctx, name, d, color, opacity = .16) {
+		const path = ctx.marks(name, "path", d ? [d] : []).attr("fill", color).attr("stroke", "none");
+		return ctx.set(path, {
+			d: d ?? "",
+			"fill-opacity": opacity
+		}, {
+			d: d ?? "",
+			"fill-opacity": 0
+		});
+	}
+	/** Bar with a 4px rounded data end; the baseline end stays square. */
+	static bar(x, width, base, end, radius = 4) {
+		const rise = base - end;
+		const r = Math.max(0, Math.min(radius, width / 2, Math.abs(rise)));
+		const sign = rise >= 0 ? 1 : -1;
+		return `M${x},${base}V${end + sign * r}Q${x},${end} ${x + r},${end}H${x + width - r}Q${x + width},${end} ${x + width},${end + sign * r}V${base}Z`;
+	}
+	/** Region between two aligned lines, split at each crossing into `a` above `b` and `b` above `a`. Points are `[x, a, b]` in pixels, y growing down. */
+	static splitBand(points) {
+		const quads = {
+			above: "",
+			below: ""
+		};
+		const quad = (x0, a0, b0, x1, a1, b1) => {
+			quads[a0 <= b0 && a1 <= b1 ? "above" : "below"] += `M${x0},${a0}L${x1},${a1}L${x1},${b1}L${x0},${b0}Z`;
+		};
+		points.slice(1).forEach(([x1, a1, b1], i) => {
+			const [x0, a0, b0] = points[i];
+			const d0 = a0 - b0, d1 = a1 - b1;
+			if (d0 * d1 >= 0) return quad(x0, a0, b0, x1, a1, b1);
+			const t = d0 / (d0 - d1), xm = x0 + (x1 - x0) * t, ym = a0 + (a1 - a0) * t;
+			quad(x0, a0, b0, xm, ym, ym);
+			quad(xm, ym, ym, x1, a1, b1);
+		});
+		return quads;
+	}
+	/** Straight reference rules across the plot at each y. */
+	static rules(ctx, name, levels, width, color, dash = "3 3") {
+		const rule = ctx.marks(name, "line", levels).attr("stroke", color).attr("stroke-width", 1).attr("stroke-dasharray", dash);
+		ctx.set(rule, {
+			x1: 0,
+			x2: width,
+			y1: (level) => level,
+			y2: (level) => level
+		}, {
+			x1: 0,
+			x2: 0,
+			y1: (level) => level,
+			y2: (level) => level
+		});
+	}
+	/** Short text with a surface halo, so it stays readable over marks. */
+	static note(ctx, name, notes, at, size = 10, tone = "secondary") {
+		const text = ctx.text(ctx.marks(name, "text", notes), size, tone).attr("stroke", ctx.theme.surface).attr("stroke-width", 3).attr("paint-order", "stroke").attr("stroke-linejoin", "round").attr("text-anchor", (note) => at(note).anchor ?? "start").text((note) => at(note).text);
+		ctx.set(text, {
+			x: (note) => at(note).x,
+			y: (note) => at(note).y
+		}, {
+			x: (note) => at(note).x,
+			y: (note) => at(note).y
+		});
+		return text;
+	}
+	/** Grid and tick labels for a secondary pane, matching the main axis. */
+	static paneAxis(ctx, name, ticks, scale, format, width) {
+		const grid = ctx.marks(`${name}-grid`, "line", ticks).attr("stroke", ctx.theme.grid).attr("stroke-width", 1);
+		grid.attr("x1", 0).attr("x2", width).attr("y1", scale).attr("y2", scale);
+		grid.lower();
+		ctx.group(`${name}-grid`).lower();
+		ctx.text(ctx.marks(`${name}-ticks`, "text", ticks)).attr("x", -3).attr("y", scale).attr("dy", "0.32em").attr("text-anchor", "end").text(format);
+	}
+};
+export { FinanceInk };