@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/financial/VolumeBars.js

@@ -0,0 +1,160 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { VolumeBucket, VolumeMark, VolumeMeasure } from "./financeEnums.js";
+import { FinanceInk } from "./FinanceInk.js";
+import { FinanceMath } from "./FinanceMath.js";
+import { PriceMarks } from "./PriceMarks.js";
+import { Quotes } from "./Quotes.js";
+import { SessionChart } from "./SessionChart.js";
+import { area, mean, utcMonday } from "d3";
+// src/charts/financial/VolumeBars.ts
+/** Trading activity on its own axis: use it to confirm moves and to spot unusual participation. */
+var VolumeBars = class extends SessionChart {
+	static meta = {
+		id: "volume-bars",
+		name: "Volume bars",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows volume by session, coloured by direction, as shares, notional, relative volume or on-balance volume.",
+		tags: [
+			"turnover",
+			"obv",
+			"relative volume",
+			"notional"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 80),
+		variants: {
+			measure: [
+				VolumeMeasure.Shares,
+				VolumeMeasure.Notional,
+				VolumeMeasure.Relative,
+				VolumeMeasure.Balance
+			],
+			mark: [
+				VolumeMark.Bars,
+				VolumeMark.Area,
+				VolumeMark.Lollipop
+			],
+			mirrored: [false, true],
+			average: [false, true],
+			bucket: [VolumeBucket.Session, VolumeBucket.Week]
+		},
+		valid: (values) => !(values.mirrored && values.measure === VolumeMeasure.Balance)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			measure: VolumeMeasure.Shares,
+			mark: VolumeMark.Bars,
+			mirrored: false,
+			average: false,
+			bucket: VolumeBucket.Session
+		};
+	}
+	bars() {
+		const bars = super.bars();
+		if (this.options.bucket !== VolumeBucket.Week) return bars;
+		const weeks = /* @__PURE__ */ new Map();
+		for (const bar of bars) {
+			const key = bar.date ? +utcMonday(bar.date) : Math.floor(bar.index / 5);
+			weeks.set(key, [...weeks.get(key) ?? [], bar]);
+		}
+		return [...weeks.values()].map((group, index) => ({
+			...group[0],
+			index,
+			close: group.at(-1).close,
+			high: Math.max(...group.map((bar) => bar.high)),
+			low: Math.min(...group.map((bar) => bar.low)),
+			volume: group.reduce((sum, bar) => sum + bar.volume, 0)
+		}));
+	}
+	values(bars) {
+		const { measure, mirrored } = this.options;
+		const sign = (bar) => mirrored && bar.close < bar.open ? -1 : 1;
+		if (measure === VolumeMeasure.Balance) {
+			let running = 0;
+			return bars.map((bar, i) => {
+				const previous = bars[i - 1]?.close ?? bar.close;
+				running += bar.close > previous ? bar.volume : bar.close < previous ? -bar.volume : 0;
+				return running;
+			});
+		}
+		if (measure === VolumeMeasure.Notional) return bars.map((bar) => sign(bar) * bar.volume * bar.close);
+		if (measure === VolumeMeasure.Relative) {
+			const volumes = bars.map((bar) => bar.volume);
+			const trail = FinanceMath.sma(volumes, Math.min(20, Math.max(2, Math.floor(bars.length / 3))));
+			return bars.map((bar, i) => {
+				const usual = trail[i] ?? mean(volumes.slice(0, i + 1)) ?? 0;
+				return sign(bar) * (usual ? bar.volume / usual : 1);
+			});
+		}
+		return bars.map((bar) => sign(bar) * bar.volume);
+	}
+	valueDomain(bars) {
+		const values = this.values(bars);
+		return [Math.min(0, ...values), Math.max(0, ...values)];
+	}
+	plotMarks(ctx, view) {
+		const tones = this.tones(ctx);
+		const { x, y, body, bars } = view;
+		const { mark, measure } = this.options;
+		const values = this.values(bars);
+		const zero = y(0);
+		const tone = (bar) => bar.close >= bar.open ? tones.up : tones.down;
+		FinanceInk.rules(ctx, "zero", bars.length ? [zero] : [], ctx.plot.width, ctx.theme.axis, null);
+		const shape = ctx.marks("columns", "path", mark === VolumeMark.Bars ? bars : [], (bar) => bar.index).attr("fill", tone);
+		ctx.set(shape, { d: (bar) => FinanceInk.bar(x(bar.index) - body / 2, body, zero, y(values[bar.index]), body >= 8 ? 4 : 1) }, { d: (bar) => FinanceInk.bar(x(bar.index) - body / 2, body, zero, zero, body >= 8 ? 4 : 1) }, Math.min(3, 240 / Math.max(1, bars.length)));
+		const shade = area().x((_, i) => x(i)).y0(zero).y1((value) => y(value));
+		FinanceInk.fill(ctx, "volume-area", mark === VolumeMark.Area && bars.length ? shade(values) : null, ctx.palette.sequential(.6), .5);
+		PriceMarks.line(ctx, view, "volume-edge", mark === VolumeMark.Area ? values : [], ctx.palette.sequential(.6), 1.5);
+		const pops = mark === VolumeMark.Lollipop ? bars : [];
+		const stem = ctx.marks("stems", "line", pops, (bar) => bar.index).attr("stroke", tone).attr("stroke-width", 1);
+		ctx.set(stem, {
+			x1: (bar) => x(bar.index),
+			x2: (bar) => x(bar.index),
+			y1: zero,
+			y2: (bar) => y(values[bar.index])
+		}, {
+			x1: (bar) => x(bar.index),
+			x2: (bar) => x(bar.index),
+			y1: zero,
+			y2: zero
+		});
+		const radius = Math.max(1.5, Math.min(4, view.step / 2));
+		const dot = ctx.marks("heads", "circle", pops, (bar) => bar.index).attr("fill", tone).attr("stroke", radius >= 3 ? ctx.theme.surface : "none").attr("stroke-width", 2);
+		ctx.set(dot, {
+			cx: (bar) => x(bar.index),
+			cy: (bar) => y(values[bar.index]),
+			r: radius
+		}, {
+			cx: (bar) => x(bar.index),
+			cy: zero,
+			r: 0
+		});
+		const window = Math.min(20, Math.max(2, Math.floor(bars.length / 3)));
+		const trail = this.options.average ? FinanceMath.sma(values, window) : [];
+		PriceMarks.line(ctx, view, "volume-average", trail, ctx.palette.color(this.options.average ? `Average ${window}` : "Up"), 2);
+		const relative = measure === VolumeMeasure.Relative && bars.length ? [y(1)] : [];
+		FinanceInk.rules(ctx, "normal-level", relative, ctx.plot.width, ctx.theme.inkMuted);
+		this.sessions(ctx, view, (bar) => this.volumeTip(bar, values[bar.index]));
+	}
+	legendItems() {
+		const items = super.legendItems();
+		return this.options.mark === VolumeMark.Area ? items.filter((item) => item.key !== "Up" && item.key !== "Down") : items;
+	}
+	volumeTip(bar, value) {
+		const label = {
+			[VolumeMeasure.Shares]: "Volume",
+			[VolumeMeasure.Notional]: "Notional",
+			[VolumeMeasure.Relative]: "Relative",
+			[VolumeMeasure.Balance]: "On-balance"
+		}[this.options.measure];
+		return {
+			title: bar.label,
+			color: this.palette.diverging(bar.close >= bar.open ? -1 : 1),
+			rows: [[label, this.options.measure === VolumeMeasure.Relative ? `${value.toFixed(2)}×` : Quotes.compact(value)], ["Close", Quotes.money(bar.close)]]
+		};
+	}
+};
+export { VolumeBars };

package/dist/charts/financial/VolumeProfile.js

@@ -0,0 +1,205 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PriceMark, ProfileAllocation, ProfileMode, ProfileSide } from "./financeEnums.js";
+import { FinanceInk } from "./FinanceInk.js";
+import { PriceChart } from "./PriceChart.js";
+import { Quotes } from "./Quotes.js";
+import { max, scaleLinear } from "d3";
+// src/charts/financial/VolumeProfile.ts
+var PROFILE_SHARE = .32;
+/** Volume by price rather than by time: use it to find the levels where the market actually traded. */
+var VolumeProfile = class extends PriceChart {
+	static meta = {
+		id: "volume-profile",
+		name: "Volume profile",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Stacks traded volume on the price axis, revealing the point of control and the value area around it.",
+		tags: [
+			"market profile",
+			"poc",
+			"value area",
+			"vpvr",
+			"delta"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 90),
+		variants: {
+			backdrop: [
+				PriceMark.Candles,
+				PriceMark.Line,
+				PriceMark.Bars
+			],
+			bins: [24, 48],
+			side: [ProfileSide.Right, ProfileSide.Left],
+			mode: [
+				ProfileMode.Total,
+				ProfileMode.Split,
+				ProfileMode.Delta
+			],
+			allocation: [ProfileAllocation.Range, ProfileAllocation.Typical],
+			levels: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			bins: 24,
+			side: ProfileSide.Right,
+			mode: ProfileMode.Total,
+			allocation: ProfileAllocation.Range,
+			levels: true,
+			backdrop: PriceMark.Candles
+		};
+	}
+	futureSessions() {
+		return this.options.side === ProfileSide.Right ? Math.ceil(Quotes.read(this.options.data, this.options).length * PROFILE_SHARE / .6799999999999999) : 0;
+	}
+	twoTone() {
+		return this.options.backdrop !== PriceMark.Line || this.options.mode !== ProfileMode.Total;
+	}
+	profile(bars) {
+		const { bins, allocation } = this.options;
+		if (!bars.length) return [];
+		const low = Math.min(...bars.map((bar) => bar.low)), high = Math.max(...bars.map((bar) => bar.high));
+		const size = (high - low || Math.abs(high) || 1) / bins;
+		const rows = Array.from({ length: bins }, (_, index) => ({
+			index,
+			low: low + index * size,
+			high: low + (index + 1) * size,
+			up: 0,
+			down: 0,
+			total: 0
+		}));
+		const add = (row, bar, volume) => {
+			row.total += volume;
+			if (bar.close >= bar.open) row.up += volume;
+			else row.down += volume;
+		};
+		for (const bar of bars) {
+			if (allocation === ProfileAllocation.Typical) {
+				add(rows[Math.min(bins - 1, Math.floor(((bar.high + bar.low + bar.close) / 3 - low) / size))], bar, bar.volume);
+				continue;
+			}
+			const span = bar.high - bar.low;
+			for (const row of rows) {
+				const overlap = span ? Math.max(0, Math.min(row.high, bar.high) - Math.max(row.low, bar.low)) / span : +(bar.close >= row.low && bar.close < row.high);
+				if (overlap) add(row, bar, bar.volume * overlap);
+			}
+		}
+		return rows;
+	}
+	/** Grows outward from the fullest row until 70% of volume is enclosed. */
+	valueArea(rows) {
+		const total = rows.reduce((sum, row) => sum + row.total, 0);
+		if (!total) return null;
+		const poc = rows.reduce((best, row) => row.total > best.total ? row : best);
+		let below = poc.index, above = poc.index, held = poc.total;
+		while (held < total * .7) {
+			const down = rows[below - 1]?.total ?? -1, up = rows[above + 1]?.total ?? -1;
+			if (down < 0 && up < 0) break;
+			if (up >= down) {
+				above += 1;
+				held += up;
+			} else {
+				below -= 1;
+				held += down;
+			}
+		}
+		return {
+			poc,
+			low: rows[below],
+			high: rows[above]
+		};
+	}
+	priceMarks(ctx, view, tones) {
+		this.drawPrice(ctx, view, tones, this.options.backdrop);
+		const { mode, side, levels } = this.options;
+		const rows = this.profile(view.bars);
+		const { y } = view;
+		const { width } = ctx.plot;
+		const room = width * PROFILE_SHARE;
+		const measure = (row) => mode === ProfileMode.Delta ? Math.abs(row.up - row.down) : row.total;
+		const reach = scaleLinear([0, max(rows, measure) || 1], [0, room]);
+		const anchored = side === ProfileSide.Right;
+		const place = (start, length) => anchored ? width - start - length : start;
+		const parts = rows.flatMap((row) => {
+			const top = Math.min(y(row.high), y(row.low));
+			const thick = Math.max(1, Math.abs(y(row.low) - y(row.high)) - 2);
+			if (mode === ProfileMode.Split) {
+				const up = reach(row.up), down = reach(row.down);
+				return [{
+					row,
+					top,
+					thick,
+					start: 0,
+					length: up,
+					color: tones.up
+				}, {
+					row,
+					top,
+					thick,
+					start: up,
+					length: down,
+					color: tones.down
+				}];
+			}
+			const color = mode === ProfileMode.Delta ? row.up >= row.down ? tones.up : tones.down : ctx.palette.color("Volume at price");
+			return [{
+				row,
+				top,
+				thick,
+				start: 0,
+				length: reach(measure(row)),
+				color
+			}];
+		});
+		const mark = ctx.marks("profile", "rect", parts, (part) => `${part.row.index}/${part.start > 0}`).attr("fill", (part) => part.color).attr("fill-opacity", .6).attr("rx", (part) => Math.min(2, part.thick / 2));
+		ctx.set(mark, {
+			x: (part) => place(part.start, part.length),
+			width: (part) => part.length,
+			y: (part) => part.top,
+			height: (part) => part.thick
+		}, {
+			x: (part) => place(0, 0),
+			width: 0,
+			y: (part) => part.top,
+			height: (part) => part.thick
+		}, 6);
+		ctx.hover(mark, (part) => this.rowTip(part.row));
+		const area = levels ? this.valueArea(rows) : null;
+		const names = area ? [
+			{
+				text: "POC",
+				at: y((area.poc.low + area.poc.high) / 2)
+			},
+			{
+				text: "VAH",
+				at: y(area.high.high)
+			},
+			{
+				text: "VAL",
+				at: y(area.low.low)
+			}
+		] : [];
+		const kept = names.filter((name, i) => i === 0 || Math.abs(name.at - names[0].at) > 12);
+		FinanceInk.rules(ctx, "levels", kept.map((name) => name.at), width, ctx.theme.inkMuted);
+		FinanceInk.note(ctx, "level-names", kept, (name) => ({
+			x: anchored ? 4 : width - 4,
+			y: name.at - 3,
+			text: name.text,
+			anchor: anchored ? "start" : "end"
+		}), 10, "secondary");
+	}
+	rowTip(row) {
+		return {
+			title: `${Quotes.money(row.low)} to ${Quotes.money(row.high)}`,
+			rows: [
+				["Volume", Quotes.compact(row.total)],
+				["Up sessions", Quotes.compact(row.up)],
+				["Down sessions", Quotes.compact(row.down)]
+			]
+		};
+	}
+};
+export { VolumeProfile };

package/dist/charts/financial/YieldCurve.js

@@ -0,0 +1,277 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MaturityScale, YieldMode } from "./financeEnums.js";
+import { FinanceInk } from "./FinanceInk.js";
+import { Quotes } from "./Quotes.js";
+import { area, curveLinear, curveMonotoneX, curveStepAfter, group, line, max, median, min, scaleLinear, scaleLog, scaleSqrt } from "d3";
+// src/charts/financial/YieldCurve.ts
+var TENORS = [
+	.25,
+	.5,
+	1,
+	2,
+	3,
+	5,
+	7,
+	10,
+	20,
+	30
+];
+var CURVES = {
+	[CurveKind.Monotone]: curveMonotoneX,
+	[CurveKind.Linear]: curveLinear,
+	[CurveKind.StepAfter]: curveStepAfter
+};
+/** Years to maturity from a number or a label like `6M`, `10Y`, `30D`. */
+function readYears(value) {
+	const match = /^\s*([\d.]+)\s*([dwmy])?/i.exec(String(value ?? ""));
+	if (!match) return NaN;
+	return Number(match[1]) / ({
+		d: 365,
+		w: 52,
+		m: 12,
+		y: 1
+	}[(match[2] ?? "y").toLowerCase()] ?? 1);
+}
+var tenorLabel = (years) => years < 1 ? `${Math.round(years * 12)}M` : `${+years.toFixed(1)}Y`;
+/** Interest rate by maturity: use it to read the shape of the rate market and spot inversions. */
+var YieldCurve = class extends CartesianChart {
+	static meta = {
+		id: "yield-curve",
+		name: "Yield curve",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots yield against maturity for one or more dates, showing steepening, flattening and inversion.",
+		tags: [
+			"bonds",
+			"term structure",
+			"rates",
+			"treasury",
+			"inversion",
+			"spread"
+		],
+		sample: (seed) => {
+			const names = /* @__PURE__ */ new Map([
+				["Alpha", "Today"],
+				["Bravo", "3M ago"],
+				["Charlie", "1Y ago"]
+			]);
+			const tilt = /* @__PURE__ */ new Map([
+				["Alpha", -.32],
+				["Bravo", .05],
+				["Charlie", .42]
+			]);
+			const level = /* @__PURE__ */ new Map([
+				["Alpha", 4.9],
+				["Bravo", 4.1],
+				["Charlie", 2.9]
+			]);
+			return SampleData.timeSeries(seed, TENORS.length, 3).map((row, i) => {
+				const years = TENORS[i % TENORS.length], name = String(row.series);
+				const hump = .5 * Math.exp(-((Math.log(years) - 1.2) ** 2));
+				return {
+					tenor: tenorLabel(years),
+					series: names.get(name),
+					value: +(level.get(name) + tilt.get(name) * Math.log1p(years) + (name === "Alpha" ? -hump : hump) + +row.value % 1 / 12).toFixed(2)
+				};
+			});
+		},
+		variants: {
+			maturity: [
+				MaturityScale.Log,
+				MaturityScale.Linear,
+				MaturityScale.Sqrt,
+				MaturityScale.Even
+			],
+			mode: [
+				YieldMode.Curves,
+				YieldMode.Spread,
+				YieldMode.Ribbon
+			],
+			curve: [
+				CurveKind.Monotone,
+				CurveKind.Linear,
+				CurveKind.StepAfter
+			],
+			markers: [true, false],
+			inversion: [false, true]
+		},
+		valid: (values) => !values.inversion || values.mode === YieldMode.Curves
+	};
+	defaults() {
+		return {
+			tenor: "tenor",
+			series: "series",
+			value: "value",
+			maturity: MaturityScale.Log,
+			mode: YieldMode.Curves,
+			curve: CurveKind.Monotone,
+			markers: true,
+			inversion: false
+		};
+	}
+	lines() {
+		const { data, tenor, series, value } = this.options;
+		const rows = (data ?? []).flatMap((row) => {
+			const years = readYears(row[tenor]), amount = Quotes.number(row[value]);
+			return years > 0 && Number.isFinite(amount) ? [{
+				name: String(row[series] ?? "Curve"),
+				years,
+				amount
+			}] : [];
+		});
+		return [...group(rows, (row) => row.name)].map(([name, items]) => {
+			return {
+				name,
+				points: [...new Map(items.map((item) => [item.years, item.amount]))].map(([years, amount]) => ({
+					years,
+					value: amount
+				})).sort((a, b) => a.years - b.years)
+			};
+		});
+	}
+	/** In spread mode each curve is read against the first one, which becomes the zero line. */
+	drawnLines(lines) {
+		if (this.options.mode !== YieldMode.Spread || lines.length < 2) return lines;
+		const base = new Map(lines[0].points.map((point) => [point.years, point.value]));
+		return lines.slice(1).map((item) => ({
+			name: `${item.name} vs ${lines[0].name}`,
+			points: item.points.flatMap((point) => base.has(point.years) ? [{
+				years: point.years,
+				value: (point.value - base.get(point.years)) * 100
+			}] : [])
+		}));
+	}
+	plotMargin() {
+		return {
+			...super.plotMargin(),
+			right: 28
+		};
+	}
+	scales(ctx) {
+		const { width, height } = ctx.plot;
+		const lines = this.lines(), drawn = this.drawnLines(lines);
+		const tenors = [...new Set(drawn.flatMap((item) => item.points.map((point) => point.years)))].sort((a, b) => a - b);
+		const values = drawn.flatMap((item) => item.points.map((point) => point.value));
+		const low = min(values) ?? 0, high = max(values) ?? 1;
+		const spreadMode = this.options.mode === YieldMode.Spread;
+		const y = scaleLinear([spreadMode ? Math.min(0, low) : Math.floor(low - .2), spreadMode ? Math.max(0, high) : high + .2], [height, 0]).nice(this.yTicks());
+		const { maturity } = this.options;
+		const even = maturity === MaturityScale.Even;
+		const domain = even ? [0, Math.max(1, tenors.length - 1)] : [tenors[0] ?? .25, tenors.at(-1) ?? 30];
+		const stretched = domain[0] === domain[1] ? [domain[0] * .5, domain[1] * 1.5] : domain;
+		const x = maturity === MaturityScale.Log ? scaleLog(stretched, [0, width]) : maturity === MaturityScale.Sqrt ? scaleSqrt(stretched, [0, width]) : scaleLinear(stretched, [0, width]);
+		const at = (years) => x(even ? tenors.indexOf(years) : years);
+		const spaced = [];
+		for (const years of [...tenors].reverse()) {
+			const last = spaced.at(-1);
+			if (last === void 0 || at(last) - at(years) >= 34) spaced.push(years);
+		}
+		this.axisX = x;
+		x.ticks = (() => spaced.map((years) => even ? tenors.indexOf(years) : years));
+		this.tenorTicks = even ? (value) => tenorLabel(tenors[value] ?? 0) : tenorLabel;
+		return {
+			x,
+			y,
+			lines,
+			drawn,
+			tenors,
+			at
+		};
+	}
+	tenorTicks = tenorLabel;
+	axisX = null;
+	tickFormat(scale) {
+		const percent = this.options.mode === YieldMode.Spread ? "bp" : "%";
+		if (scale === this.axisX) return (value) => this.tenorTicks(+value);
+		const base = super.tickFormat(scale);
+		return base ? (value) => `${base(value)}${percent}` : null;
+	}
+	plotMarks(ctx, axes) {
+		const { y, drawn, lines, at, tenors } = axes;
+		const { mode, curve, markers, inversion } = this.options;
+		const shape = CURVES[curve] ?? curveMonotoneX;
+		const ribbon = mode === YieldMode.Ribbon;
+		this.drawInversion(ctx, axes, inversion ? lines[0] : void 0);
+		const spreadZero = mode === YieldMode.Spread && drawn.length ? [y(0)] : [];
+		FinanceInk.rules(ctx, "zero", spreadZero, ctx.plot.width, ctx.theme.axis, null);
+		const across = tenors.map((years) => {
+			const hits = lines.flatMap((item) => item.points.filter((point) => point.years === years).map((point) => point.value));
+			return {
+				years,
+				low: min(hits) ?? 0,
+				high: max(hits) ?? 0,
+				middle: median(hits) ?? 0
+			};
+		});
+		const bandColor = ribbon ? ctx.palette.color("Range") : ctx.theme.axis;
+		const bandPath = area().curve(shape).x((row) => at(row.years)).y0((row) => y(row.low)).y1((row) => y(row.high));
+		FinanceInk.fill(ctx, "ribbon", ribbon && across.length ? bandPath(across) : null, bandColor, .22);
+		const middle = line().curve(shape).x((row) => at(row.years)).y((row) => y(row.middle));
+		FinanceInk.stroke(ctx, "median", ribbon && across.length ? middle(across) : null, bandColor, 1.5, "4 3");
+		const shown = ribbon ? drawn.slice(0, 1) : drawn;
+		const strokes = ctx.marks("curves", "path", shown, (item) => item.name).attr("fill", "none").attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("stroke", (item) => ctx.palette.color(item.name));
+		const path = line().curve(shape).x((point) => at(point.years)).y((point) => y(point.value));
+		ctx.set(strokes, { d: (item) => path(item.points) ?? "" }, { d: (item) => path(item.points) ?? "" });
+		ctx.drawOn(strokes);
+		const dots = markers ? shown.flatMap((item) => item.points.map((point) => ({
+			...point,
+			name: item.name
+		}))) : [];
+		const dot = ctx.marks("dots", "circle", dots, (point) => `${point.name}/${point.years}`).attr("fill", (point) => ctx.palette.color(point.name)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dot, {
+			cx: (point) => at(point.years),
+			cy: (point) => y(point.value),
+			r: 4
+		}, {
+			cx: (point) => at(point.years),
+			cy: (point) => y(point.value),
+			r: 0
+		}, 8);
+		ctx.hover(dot, (point) => this.pointTip(point, point.name));
+		this.columns(ctx, axes, !markers);
+	}
+	pointTip(point, name) {
+		const unit = this.options.mode === YieldMode.Spread ? `${point.value.toFixed(0)} bp` : `${point.value.toFixed(2)}%`;
+		return {
+			title: tenorLabel(point.years),
+			color: this.palette.color(name),
+			rows: [[name, unit]]
+		};
+	}
+	columns(ctx, { at, tenors, drawn }, on) {
+		const edge = (i) => i <= 0 ? 0 : i >= tenors.length ? ctx.plot.width : (at(tenors[i - 1]) + at(tenors[i])) / 2;
+		const hit = ctx.marks("hits", "rect", on ? tenors : []).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", ctx.plot.height);
+		ctx.hover(hit, (years) => ({
+			title: tenorLabel(years),
+			rows: drawn.flatMap((item) => item.points.filter((point) => point.years === years).map((point) => [item.name, point.value.toFixed(2)]))
+		}));
+	}
+	drawInversion(ctx, { at }, first) {
+		const pairs = (first?.points ?? []).slice(1).flatMap((point, i) => {
+			const before = first.points[i];
+			return point.value < before.value ? [{
+				from: at(before.years),
+				to: at(point.years),
+				key: point.years
+			}] : [];
+		});
+		const strip = ctx.marks("inversion", "rect", pairs, (pair) => pair.key).attr("fill", ctx.theme.grid).attr("fill-opacity", .75);
+		ctx.set(strip, {
+			x: (pair) => pair.from,
+			width: (pair) => pair.to - pair.from,
+			y: 0,
+			height: ctx.plot.height
+		});
+		const lead = pairs.reduce((best, pair) => !best || pair.to - pair.from > best.to - best.from ? pair : best, null);
+		FinanceInk.note(ctx, "inversion-label", lead && lead.to - lead.from > 50 ? [lead] : [], (pair) => ({
+			x: (pair.from + pair.to) / 2,
+			y: 12,
+			text: "Inverted",
+			anchor: "middle"
+		}), 10, "muted");
+	}
+};
+export { YieldCurve };