@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/financial/MarketProfileChart.js

@@ -0,0 +1,234 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Quotes } from "./Quotes.js";
+import { TpoBracket, TpoForm, TpoGrouping, TpoProfile, TpoStacking } from "./TpoProfile.js";
+import { max, min, scaleBand, scaleLinear, utcFormat } from "d3";
+// src/charts/financial/MarketProfileChart.ts
+var MINUTES = {
+	[TpoBracket.ThirtyMinutes]: 30,
+	[TpoBracket.Hour]: 60
+};
+var MIN_ROW = 11;
+var MAX_ROWS = 400;
+var MAX_CELL = 11;
+var RAIL = 4;
+var SAMPLE_DAYS = [
+	8,
+	9,
+	12,
+	13,
+	14
+];
+var SAMPLE_BRACKETS = 13;
+utcFormat("%H:%M");
+/** Daily-looking bars become 30-minute regular-hours brackets, with most of each day's trend removed so sessions balance. */
+var sampleSessions = (seed) => {
+	const rows = SampleData.ohlc(seed, SAMPLE_DAYS.length * SAMPLE_BRACKETS);
+	let level = 100;
+	return SAMPLE_DAYS.flatMap((day, s) => {
+		const session = rows.slice(s * SAMPLE_BRACKETS, (s + 1) * SAMPLE_BRACKETS);
+		const first = session[0].open, trend = session.at(-1).close - first;
+		const shaped = session.map((row, i) => {
+			const at = (value) => +(level + (value - first - trend * .7 * i / 12) * .45).toFixed(2);
+			return {
+				date: new Date(Date.UTC(2026, 0, day, 9, 30 + i * 30)),
+				open: at(row.open),
+				high: at(row.high),
+				low: at(row.low),
+				close: at(row.close),
+				volume: row.volume
+			};
+		});
+		level = shaped.at(-1).close;
+		return shaped;
+	});
+};
+/** Time at price: use it to read where a session accepted value, which a candle's open and close cannot show. */
+var MarketProfileChart = class extends CartesianChart {
+	static meta = {
+		id: "market-profile",
+		name: "Market profile",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Prints a TPO letter for each time bracket at every price traded, per session, marking the point of control, value area and initial balance.",
+		tags: [
+			"tpo",
+			"time price opportunity",
+			"steidlmayer",
+			"poc",
+			"value area",
+			"initial balance",
+			"composite"
+		],
+		sample: sampleSessions,
+		variants: {
+			form: [TpoForm.Letters, TpoForm.Blocks],
+			stacking: [TpoStacking.Collapsed, TpoStacking.Split],
+			grouping: [
+				TpoGrouping.Session,
+				TpoGrouping.Week,
+				TpoGrouping.Composite
+			],
+			bracket: [TpoBracket.ThirtyMinutes, TpoBracket.Hour],
+			levels: [true, false],
+			initialBalance: [true, false]
+		},
+		valid: ({ stacking, grouping, initialBalance }) => grouping === TpoGrouping.Session || stacking === TpoStacking.Collapsed && initialBalance === false
+	};
+	#labels = /* @__PURE__ */ new Map();
+	#height = 300;
+	defaults() {
+		return {
+			date: "date",
+			open: "open",
+			high: "high",
+			low: "low",
+			close: "close",
+			volume: "volume",
+			session: "session",
+			form: TpoForm.Letters,
+			stacking: TpoStacking.Collapsed,
+			grouping: TpoGrouping.Session,
+			bracket: TpoBracket.ThirtyMinutes,
+			valueShare: .7,
+			levels: true,
+			initialBalance: true
+		};
+	}
+	yTicks() {
+		return Math.max(2, Math.min(6, Math.floor(this.#height / 34)));
+	}
+	tickFormat(scale) {
+		return super.tickFormat(scale) ?? ((value) => this.#labels.get(String(value)) ?? String(value));
+	}
+	scales(ctx) {
+		const { data, grouping, bracket, tickSize, valueShare, session, close } = this.options;
+		const { width, height } = ctx.plot;
+		this.#height = height;
+		const bars = Quotes.read(data, this.options);
+		const tags = (data ?? []).filter((row) => Number.isFinite(Quotes.number(row[close]))).map((row) => row[session] == null ? null : String(row[session]));
+		const low = min(bars, (bar) => bar.low) ?? 0, high = max(bars, (bar) => bar.high) ?? 1;
+		const range = bars.length ? high - low : 1;
+		const fitted = TpoProfile.tick(range, Math.max(2, Math.floor(height / MIN_ROW) - 1), bars[0]?.close);
+		const tick = Math.max(tickSize && tickSize > 0 ? tickSize : fitted, range / MAX_ROWS);
+		const minutes = MINUTES[bracket];
+		const sessions = TpoProfile.groups(bars, tags, grouping, minutes).map((group) => TpoProfile.session(group, tick, valueShare, Math.ceil(60 / minutes)));
+		this.#labels = new Map(sessions.map((one) => [one.key, one.label]));
+		const x = scaleBand(sessions.map((one) => one.key), [0, width]).paddingInner(.06);
+		const every = Math.ceil(52 / Math.max(1, x.step()));
+		Object.assign(x, { ticks: () => x.domain().filter((_, i) => i % every === 0) });
+		return {
+			x,
+			y: scaleLinear(bars.length ? [Math.round(low / tick) * tick - tick / 2, Math.round(high / tick) * tick + tick / 2] : [0, 1], [height, 0]),
+			sessions,
+			tick
+		};
+	}
+	plotMarks(ctx, { x, y, sessions, tick }) {
+		const { form, stacking, levels, initialBalance, grouping } = this.options;
+		const split = stacking === TpoStacking.Split;
+		const columns = Math.max(1, ...sessions.map((one) => split ? one.brackets : Math.max(...one.rows.map((row) => row.count))));
+		const band = x.bandwidth();
+		const unit = Math.min(MAX_CELL, Math.max(1, (band - RAIL) / columns));
+		const tall = Math.abs(y(0) - y(tick));
+		const top = (price) => y(price + tick / 2);
+		const start = (one) => x(one.key) + RAIL;
+		const size = Math.min(10, tall - 1, unit * 1.45);
+		const letters = form === TpoForm.Letters && size >= 7;
+		const areaColor = levels ? ctx.palette.color("Value area") : "";
+		const pocColor = levels ? ctx.palette.color("POC") : "";
+		const shown = levels ? sessions : [];
+		const area = ctx.marks("value-area", "rect", shown, (one) => one.key).attr("fill", areaColor).attr("fill-opacity", .16).attr("rx", 2);
+		ctx.set(area, {
+			x: (one) => x(one.key),
+			width: band,
+			y: (one) => top(one.valueHigh),
+			height: (one) => top(one.valueLow - tick) - top(one.valueHigh)
+		}, {
+			x: (one) => x(one.key),
+			width: 0,
+			y: (one) => top(one.valueHigh),
+			height: (one) => top(one.valueLow - tick) - top(one.valueHigh)
+		});
+		const poc = ctx.marks("poc", "rect", shown, (one) => one.key).attr("fill", pocColor).attr("fill-opacity", letters ? 1 : .28).attr("rx", 2);
+		ctx.set(poc, {
+			x: (one) => x(one.key),
+			width: band,
+			y: (one) => top(one.poc.price),
+			height: tall
+		}, {
+			x: (one) => x(one.key),
+			width: 0,
+			y: (one) => top(one.poc.price),
+			height: tall
+		});
+		const cells = sessions.flatMap((session) => session.cells.map((cell) => ({
+			session,
+			cell
+		})));
+		const key = ({ session, cell }) => `${session.key}/${cell.row}/${cell.stack}`;
+		const left = ({ session, cell }) => start(session) + (split ? cell.bracket : cell.stack) * unit;
+		const onPoc = ({ session, cell }) => levels && cell.row === session.poc.row;
+		const held = ({ session, cell }) => !levels || cell.price >= session.valueLow && cell.price <= session.valueHigh;
+		const gap = Math.min(2, unit / 3);
+		const span = Math.max(1, ...sessions.map((one) => one.brackets - 1));
+		const blocks = ctx.marks("tpo-blocks", "rect", letters ? [] : cells, key).attr("rx", 1.5).attr("pointer-events", "none").attr("fill", (cell) => cell.cell.mark ? ctx.theme.ink : onPoc(cell) ? pocColor : ctx.palette.sequential(.3 + .7 * cell.cell.bracket / span));
+		ctx.set(blocks, {
+			x: left,
+			width: Math.max(1, unit - gap),
+			y: ({ cell }) => top(cell.price) + gap / 2,
+			height: Math.max(1, tall - gap)
+		}, {
+			x: ({ session }) => start(session),
+			width: 0,
+			y: ({ cell }) => top(cell.price) + gap / 2,
+			height: Math.max(1, tall - gap)
+		});
+		const glyph = ({ cell }) => cell.mark === "open" ? "O" : cell.mark === "close" ? "#" : cell.letter;
+		const text = ctx.text(ctx.marks("tpo-letters", "text", letters ? cells : [], key), size, "ink").attr("text-anchor", "middle").attr("dy", "0.35em").attr("pointer-events", "none").attr("font-weight", ({ cell }) => cell.mark ? 700 : 400).text(glyph).attr("fill", (cell) => onPoc(cell) ? ctx.palette.inkOn(pocColor) : held(cell) ? ctx.theme.ink : ctx.theme.inkMuted);
+		const middle = (placed) => top(placed.cell.price) + tall / 2;
+		ctx.set(text, {
+			x: (placed) => left(placed) + unit / 2,
+			y: middle
+		}, {
+			x: ({ session }) => start(session) + unit / 2,
+			y: middle
+		});
+		const opening = initialBalance && grouping === TpoGrouping.Session ? sessions : [];
+		const railColor = opening.length ? ctx.palette.color("Initial balance") : "";
+		const rail = ctx.marks("initial-balance", "line", opening, (one) => one.key).attr("stroke", railColor).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		const railAt = (one) => x(one.key) + 1;
+		ctx.set(rail, {
+			x1: railAt,
+			x2: railAt,
+			y1: (one) => y(one.balance[1]),
+			y2: (one) => y(one.balance[0])
+		}, {
+			x1: railAt,
+			x2: railAt,
+			y1: (one) => y(one.balance[0]),
+			y2: (one) => y(one.balance[0])
+		});
+		const hits = ctx.marks("hits", "rect", sessions.flatMap((session) => session.rows.map((row) => ({
+			session,
+			row
+		}))), ({ session, row }) => `${session.key}/${row.row}`).attr("fill", "transparent").attr("pointer-events", "all").attr("x", ({ session }) => x(session.key)).attr("width", band).attr("y", ({ row }) => top(row.price)).attr("height", tall);
+		ctx.hover(hits, (hit) => this.#tip(hit));
+	}
+	#tip({ session, row }) {
+		const opened = session.cells.filter((cell) => cell.row === row.row && cell.mark).map((cell) => cell.mark === "open" ? "Open" : "Close");
+		return {
+			title: `${Quotes.money(row.price)}, ${session.label}`,
+			rows: [
+				["TPOs", String(row.count)],
+				["Brackets", row.letters],
+				...opened.length ? [["Print", opened.join(", ")]] : [],
+				["Point of control", Quotes.money(session.poc.price)],
+				["Value area", `${Quotes.money(session.valueLow)} to ${Quotes.money(session.valueHigh)}`]
+			]
+		};
+	}
+};
+export { MarketProfileChart };

package/dist/charts/financial/OHLCChart.js

@@ -0,0 +1,57 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { OhlcTicks, PriceOverlay, PriceScale, VolumeLayout } from "./financeEnums.js";
+import { PriceChart } from "./PriceChart.js";
+import { PriceMarks } from "./PriceMarks.js";
+// src/charts/financial/OHLCChart.ts
+/** Bar-style price chart: use it when the exact open and close levels matter more than candle bodies. */
+var OHLCChart = class extends PriceChart {
+	static meta = {
+		id: "ohlc",
+		name: "OHLC bar chart",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws each session as a high-low bar with open and close ticks, keeping dense price series precise.",
+		tags: [
+			"hlc",
+			"bar",
+			"stock",
+			"price"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 72),
+		variants: {
+			ticks: [
+				OhlcTicks.OpenClose,
+				OhlcTicks.CloseOnly,
+				OhlcTicks.RangeOnly
+			],
+			overlay: [
+				PriceOverlay.None,
+				PriceOverlay.SMA,
+				PriceOverlay.EMA,
+				PriceOverlay.Donchian
+			],
+			volumeLayout: [
+				VolumeLayout.None,
+				VolumeLayout.Pane,
+				VolumeLayout.Overlay
+			],
+			scale: [
+				PriceScale.Linear,
+				PriceScale.Log,
+				PriceScale.Percent
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			ticks: OhlcTicks.OpenClose
+		};
+	}
+	priceMarks(ctx, view, tones) {
+		PriceMarks.ohlc(ctx, view, tones, view.bars, this.options.ticks);
+	}
+};
+export { OHLCChart };

package/dist/charts/financial/OscillatorChart.js

@@ -0,0 +1,56 @@
+import { FinanceInk } from "./FinanceInk.js";
+import { PriceMarks } from "./PriceMarks.js";
+import { Quotes } from "./Quotes.js";
+import { SessionChart } from "./SessionChart.js";
+import { area, scaleLinear } from "d3";
+// src/charts/financial/OscillatorChart.ts
+/** Indicator on the main axis, with price optionally in a companion pane above it. */
+var OscillatorChart = class extends SessionChart {
+	defaults() {
+		return {
+			...super.defaults(),
+			pricePane: false
+		};
+	}
+	subShare() {
+		return this.options.pricePane ? .36 : 0;
+	}
+	subOnTop() {
+		return true;
+	}
+	legendItems() {
+		return this.palette.items().filter((item) => item.key !== "Up");
+	}
+	plotMarks(ctx, view) {
+		const tones = this.tones(ctx);
+		this.drawPricePane(ctx, view);
+		this.oscillator(ctx, view, tones);
+		this.sessions(ctx, view, (bar) => this.tooltip(bar));
+	}
+	drawPricePane(ctx, view) {
+		const { sub, bars } = view;
+		const closes = sub ? bars.map((bar) => bar.close) : [];
+		const low = Math.min(...closes), high = Math.max(...closes);
+		const y = scaleLinear(closes.length ? [low, high] : [0, 1], sub ? [sub.bottom, sub.top] : [0, 0]).nice(3);
+		FinanceInk.paneAxis(ctx, "price-axis", closes.length ? y.ticks(2) : [], y, Quotes.compact, ctx.plot.width);
+		PriceMarks.line(ctx, {
+			...view,
+			y
+		}, "price-pane", closes, ctx.theme.inkSecondary, 1.5);
+		this.paneTitle(ctx, "price-title", "Price", sub);
+	}
+	/** Overbought and oversold rules, a neutral band between them, and shaded excursions beyond them. */
+	zones(ctx, view, tones, values, upper, lower, shade) {
+		const { x, y } = view;
+		FinanceInk.rules(ctx, "zone-rules", [y(upper), y(lower)], ctx.plot.width, ctx.theme.axis);
+		const breach = (limit, over) => area().defined((value) => value !== null).x((_, i) => x(i)).y0(y(limit)).y1((value) => over ? Math.min(y(value), y(limit)) : Math.max(y(value), y(limit)))(values);
+		FinanceInk.fill(ctx, "zone-over", shade ? breach(upper, true) : null, tones.down, .3);
+		FinanceInk.fill(ctx, "zone-under", shade ? breach(lower, false) : null, tones.up, .3);
+		FinanceInk.note(ctx, "zone-labels", [upper, lower], (level) => ({
+			x: 3,
+			y: y(level) + (level === upper ? -4 : 11),
+			text: level === upper ? "Overbought" : "Oversold"
+		}), 10, "muted");
+	}
+};
+export { OscillatorChart };

package/dist/charts/financial/PayoffDiagram.js

@@ -0,0 +1,288 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { OptionStrategy, PayoffAxis, PayoffHorizon } from "./financeEnums.js";
+import { FinanceInk } from "./FinanceInk.js";
+import { FinanceMath } from "./FinanceMath.js";
+import { Quotes } from "./Quotes.js";
+import { extent, line, scaleLinear } from "d3";
+// src/charts/financial/PayoffDiagram.ts
+var SAMPLES = 161;
+/** Profit and loss of an options position by underlying price: use it to size risk before entering a trade. */
+var PayoffDiagram = class extends CartesianChart {
+	static meta = {
+		id: "payoff-diagram",
+		name: "Options payoff diagram",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots profit and loss of an options position across underlying prices, marking breakevens and maximum risk.",
+		tags: [
+			"options",
+			"hockey stick",
+			"straddle",
+			"condor",
+			"spread",
+			"pnl",
+			"breakeven"
+		],
+		sample: (seed) => {
+			const spot = Math.round(+SampleData.ohlc(seed, 30).at(-1).close);
+			return [{
+				type: "call",
+				strike: spot,
+				premium: 4.2,
+				quantity: 1
+			}, {
+				type: "call",
+				strike: spot + 10,
+				premium: 1.3,
+				quantity: -1
+			}];
+		},
+		variants: {
+			strategy: Object.values(OptionStrategy),
+			horizon: [PayoffHorizon.Expiry, PayoffHorizon.Decay],
+			axis: [PayoffAxis.Price, PayoffAxis.Move],
+			legs: [false, true]
+		}
+	};
+	spotPrice = 100;
+	priceScale = null;
+	defaults() {
+		return {
+			type: "type",
+			strike: "strike",
+			premium: "premium",
+			quantity: "quantity",
+			strategy: OptionStrategy.Custom,
+			horizon: PayoffHorizon.Expiry,
+			axis: PayoffAxis.Price,
+			legs: false,
+			volatility: .3,
+			days: 30
+		};
+	}
+	readLegs() {
+		const { data, type, strike, premium, quantity } = this.options;
+		return (data ?? []).flatMap((row) => {
+			const leg = {
+				type: String(row[type] ?? "").toLowerCase(),
+				strike: Quotes.number(row[strike]),
+				premium: Quotes.number(row[premium]) || 0,
+				quantity: Quotes.number(row[quantity])
+			};
+			if (!Number.isFinite(leg.quantity)) leg.quantity = 1;
+			return Number.isFinite(leg.strike) && /^(call|put|stock)$/.test(leg.type) ? [leg] : [];
+		});
+	}
+	preset(spot) {
+		const { strategy } = this.options;
+		const width = spot * .1;
+		const priced = (type, offset, quantity) => {
+			const strike = spot + offset * width;
+			return {
+				type,
+				strike,
+				quantity,
+				premium: FinanceMath.optionValue(type === "call", spot, strike, this.options.volatility, this.options.days / 365)
+			};
+		};
+		const stock = {
+			type: "stock",
+			strike: spot,
+			premium: 0,
+			quantity: 1
+		};
+		switch (strategy) {
+			case OptionStrategy.LongCall: return [priced("call", 0, 1)];
+			case OptionStrategy.LongPut: return [priced("put", 0, 1)];
+			case OptionStrategy.CoveredCall: return [stock, priced("call", 1, -1)];
+			case OptionStrategy.ProtectivePut: return [stock, priced("put", -1, 1)];
+			case OptionStrategy.BullCallSpread: return [priced("call", 0, 1), priced("call", 1, -1)];
+			case OptionStrategy.BearPutSpread: return [priced("put", 0, 1), priced("put", -1, -1)];
+			case OptionStrategy.Straddle: return [priced("call", 0, 1), priced("put", 0, 1)];
+			case OptionStrategy.Strangle: return [priced("call", 1, 1), priced("put", -1, 1)];
+			case OptionStrategy.IronCondor: return [
+				priced("put", -2, 1),
+				priced("put", -1, -1),
+				priced("call", 1, -1),
+				priced("call", 2, 1)
+			];
+			case OptionStrategy.Butterfly: return [
+				priced("call", -1, 1),
+				priced("call", 0, -2),
+				priced("call", 1, 1)
+			];
+			default: return null;
+		}
+	}
+	profit(legs, price, years) {
+		return legs.reduce((sum, leg) => {
+			if (leg.type === "stock") return sum + leg.quantity * (price - leg.strike);
+			return sum + leg.quantity * (FinanceMath.optionValue(leg.type === "call", price, leg.strike, this.options.volatility, years) - leg.premium);
+		}, 0);
+	}
+	horizons() {
+		const years = this.options.days / 365;
+		const expiry = {
+			name: "At expiry",
+			years: 0
+		};
+		return this.options.horizon === PayoffHorizon.Decay ? [
+			expiry,
+			{
+				name: `${this.options.days} days left`,
+				years
+			},
+			{
+				name: `${Math.round(this.options.days / 2)} days left`,
+				years: years / 2
+			}
+		] : [expiry];
+	}
+	scales(ctx) {
+		const { width, height } = ctx.plot;
+		const given = this.readLegs();
+		const strikes = given.map((leg) => leg.strike).sort((a, b) => a - b);
+		const spot = strikes[Math.floor((strikes.length - 1) / 2)] ?? 100;
+		const legs = this.preset(spot) ?? given;
+		const reach = Math.max(Math.abs(spot) * .3, ...legs.map((leg) => Math.abs(leg.strike - spot) * 1.4)) || 1;
+		const prices = Array.from({ length: SAMPLES }, (_, i) => Math.max(0, spot - reach) + i / 160 * (spot + reach - Math.max(0, spot - reach)));
+		const values = this.horizons().flatMap(({ years }) => prices.map((price) => this.profit(legs, price, years)));
+		const [low = -1, high = 1] = extent([...values, 0]);
+		const pad = (high - low || 1) * .1;
+		this.spotPrice = spot;
+		const x = scaleLinear([prices[0], prices.at(-1)], [0, width]);
+		this.priceScale = x;
+		if (this.options.axis === PayoffAxis.Move && spot) x.ticks = (count) => scaleLinear(x.domain().map((price) => (price - spot) / spot * 100), [0, 1]).ticks(count).map((move) => spot * (1 + move / 100));
+		return {
+			x,
+			y: scaleLinear([low - pad, high + pad], [height, 0]).nice(this.yTicks()),
+			legs,
+			spot,
+			prices
+		};
+	}
+	tickFormat(scale) {
+		if (scale === this.priceScale && this.options.axis === PayoffAxis.Move && this.spotPrice) return (value) => {
+			const move = Math.round((+value - this.spotPrice) / this.spotPrice * 100);
+			return move ? `${Quotes.signed(move, 0)}%` : "0%";
+		};
+		return super.tickFormat(scale);
+	}
+	plotMarks(ctx, axes) {
+		const { x, y, legs, spot, prices } = axes;
+		const { width } = ctx.plot;
+		const expiry = prices.map((price) => this.profit(legs, price, 0));
+		const zero = y(0);
+		const region = FinanceInk.splitBand(prices.map((price, i) => [
+			x(price),
+			y(expiry[i]),
+			zero
+		]));
+		const profit = ctx.palette.diverging(-1), loss = ctx.palette.diverging(1);
+		FinanceInk.fill(ctx, "profit", region.above || null, profit, .18);
+		FinanceInk.fill(ctx, "loss", region.below || null, loss, .18);
+		FinanceInk.rules(ctx, "zero", [zero], width, ctx.theme.axis, null);
+		const [floor, ceiling] = y.domain();
+		const curve = (values) => line().defined((value) => value >= floor && value <= ceiling).x((_, i) => x(prices[i])).y((value) => y(value))(values);
+		for (const slot of [
+			0,
+			1,
+			2,
+			3
+		]) {
+			const leg = this.options.legs ? legs[slot] : void 0;
+			FinanceInk.stroke(ctx, `leg-${slot}`, leg ? curve(prices.map((price) => this.profit([leg], price, 0))) : null, ctx.theme.inkMuted, 1, "3 3");
+		}
+		const horizons = this.horizons();
+		for (const slot of [
+			2,
+			1,
+			0
+		]) {
+			const item = horizons[slot];
+			FinanceInk.stroke(ctx, `horizon-${slot}`, item ? curve(prices.map((price) => this.profit(legs, price, item.years))) : null, item ? ctx.palette.color(item.name) : ctx.theme.axis, slot ? 1.5 : 2);
+		}
+		this.annotate(ctx, axes, expiry, spot);
+		const step = prices[1] - prices[0];
+		const hit = ctx.marks("hits", "rect", prices).attr("fill", "transparent").attr("pointer-events", "all").attr("x", (price) => Math.max(0, x(price - step / 2))).attr("width", x(prices[0] + step) - x(prices[0])).attr("y", 0).attr("height", ctx.plot.height);
+		ctx.hover(hit, (price) => this.payoffTip(price, legs, spot));
+	}
+	payoffTip(price, legs, spot) {
+		const rows = this.horizons().map((item) => [item.name, Quotes.signed(this.profit(legs, price, item.years))]);
+		return {
+			title: `Underlying ${Quotes.money(price)}`,
+			rows: [...rows, ["Move", spot ? `${Quotes.signed((price - spot) / spot * 100, 1)}%` : "–"]]
+		};
+	}
+	annotate(ctx, { x, y, prices }, expiry, spot) {
+		const { width } = ctx.plot;
+		const crossings = expiry.slice(1).flatMap((value, i) => {
+			const before = expiry[i];
+			if (before === 0 || before * value >= 0) return [];
+			return [prices[i] + (prices[i + 1] - prices[i]) * before / (before - value)];
+		});
+		const dot = ctx.marks("breakevens", "circle", crossings, (price) => price.toFixed(4)).attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dot, {
+			cx: x,
+			cy: y(0),
+			r: 4
+		}, {
+			cx: x,
+			cy: y(0),
+			r: 0
+		});
+		const labels = crossings.length <= 3 ? crossings.filter((price, i) => i === 0 || x(price) - x(crossings[i - 1]) > 52) : [];
+		const shallow = y(Math.min(...expiry)) - y(0) < 16;
+		FinanceInk.note(ctx, "breakeven-labels", labels, (price) => {
+			return {
+				x: Math.max(26, Math.min(width - 26, x(price))),
+				y: y(0) + (shallow ? -9 : 16),
+				text: Quotes.money(price),
+				anchor: "middle"
+			};
+		}, 10, "secondary");
+		const peak = Math.max(...expiry), trough = Math.min(...expiry);
+		const level = (value, edge, inner) => Math.abs(expiry[edge] - value) < 1e-9 && Math.abs(expiry[inner] - value) < 1e-9;
+		const capped = (value) => {
+			const at = expiry.indexOf(value), last = expiry.length - 1;
+			if (at > 0 && at < last) return true;
+			return at === 0 ? level(value, 0, 1) : level(value, last, last - 1);
+		};
+		const notes = [capped(peak) && {
+			text: `Max gain ${Quotes.money(peak)}`,
+			price: prices[expiry.indexOf(peak)],
+			value: peak,
+			shift: -7
+		}, capped(trough) && {
+			text: `Max loss ${Quotes.money(trough)}`,
+			price: prices[expiry.indexOf(trough)],
+			value: trough,
+			shift: 14
+		}].filter((note) => !!note);
+		FinanceInk.note(ctx, "extremes", notes, (note) => {
+			const half = note.text.length * 3.1;
+			return {
+				x: Math.max(half, Math.min(width - half, x(note.price))),
+				y: Math.min(ctx.plot.height - 4, Math.max(11, y(note.value) + note.shift)),
+				text: note.text,
+				anchor: "middle"
+			};
+		}, 11, "ink");
+		const rule = ctx.marks("spot", "line", [spot]).attr("stroke", ctx.theme.inkMuted).attr("stroke-dasharray", "2 3");
+		ctx.set(rule, {
+			x1: x,
+			x2: x,
+			y1: 0,
+			y2: ctx.plot.height
+		}, {
+			x1: x,
+			x2: x,
+			y1: ctx.plot.height,
+			y2: ctx.plot.height
+		});
+	}
+};
+export { PayoffDiagram };