@mstone6969/graph 0.0.0-stage → 0.2.0

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

package/dist/charts/financial/PointFigureChart.js

@@ -0,0 +1,135 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BoxMethod, PriceSource } from "./financeEnums.js";
+import { BrickChart } from "./BrickChart.js";
+import { FinanceInk } from "./FinanceInk.js";
+import { PriceTransforms } from "./PriceTransforms.js";
+// src/charts/financial/PointFigureChart.ts
+/** Columns of X and O on a price grid: use it to read breakouts, support and price targets without time. */
+var PointFigureChart = class extends BrickChart {
+	static meta = {
+		id: "point-figure",
+		name: "Point and figure chart",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Records only meaningful moves as columns of X and O on a box grid, making breakouts and targets explicit.",
+		tags: [
+			"p&f",
+			"x and o",
+			"box",
+			"reversal"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 240),
+		variants: {
+			method: [
+				BoxMethod.ATR,
+				BoxMethod.Range,
+				BoxMethod.Percent
+			],
+			reversal: [
+				3,
+				2,
+				1
+			],
+			source: [PriceSource.Close, PriceSource.HighLow],
+			trendlines: [false, true],
+			paper: [true, false]
+		}
+	};
+	columns = [];
+	unit = 0;
+	defaults() {
+		return {
+			...super.defaults(),
+			multiple: .6,
+			reversal: 3,
+			trendlines: false,
+			paper: true
+		};
+	}
+	construct(bars, box) {
+		this.unit = box;
+		this.columns = PriceTransforms.pointFigure(bars, box, this.options.reversal, this.options.source);
+		return this.columns.map((column) => {
+			const low = (column.low - .5) * box, high = (column.high + .5) * box;
+			return this.column(column.index, column.rising ? low : high, column.rising ? high : low, column.bar);
+		});
+	}
+	columnMarks(ctx, view, tones) {
+		const { x, y, step } = view;
+		const box = this.unit;
+		const level = (k) => y(k * box);
+		const cell = box ? Math.abs(level(1) - level(0)) : 0;
+		const half = Math.max(1, Math.min(step, cell) / 2 - 1);
+		const cells = this.columns.flatMap((column) => Array.from({ length: column.high - column.low + 1 }, (_, i) => ({
+			column: column.index,
+			level: column.low + i,
+			rising: column.rising
+		})));
+		const key = (mark) => `${mark.column}/${mark.level}`;
+		const [floor, ceiling] = view.y.domain();
+		const first = box ? Math.ceil(floor / box) : 0, boxes = box ? Math.floor(ceiling / box) - first + 1 : 0;
+		const every = cell >= 7 ? 1 : 5;
+		const levels = this.options.paper && box ? Array.from({ length: boxes }, (_, i) => first + i).filter((k) => k % every === 0) : [];
+		ctx.marks("paper", "line", levels).attr("stroke", ctx.theme.grid).attr("stroke-width", 1).attr("x1", 0).attr("x2", ctx.plot.width).attr("y1", level).attr("y2", level);
+		const crosses = ctx.marks("xs", "path", cells.filter((mark) => mark.rising), key).attr("fill", "none").attr("stroke", tones.up).attr("stroke-width", 1.5).attr("stroke-linecap", "round");
+		const cross = (mark, r) => {
+			const cx = x(mark.column), cy = level(mark.level);
+			return `M${cx - r},${cy - r}L${cx + r},${cy + r}M${cx + r},${cy - r}L${cx - r},${cy + r}`;
+		};
+		ctx.set(crosses, { d: (mark) => cross(mark, half) }, { d: (mark) => cross(mark, 0) }, 1);
+		const noughts = ctx.marks("os", "circle", cells.filter((mark) => !mark.rising), key).attr("fill", "none").attr("stroke", tones.down).attr("stroke-width", 1.5);
+		ctx.set(noughts, {
+			cx: (mark) => x(mark.column),
+			cy: (mark) => level(mark.level),
+			r: half
+		}, {
+			cx: (mark) => x(mark.column),
+			cy: (mark) => level(mark.level),
+			r: 0
+		}, 1);
+		const lines = this.options.trendlines ? this.trendlines(view) : {
+			support: null,
+			resistance: null
+		};
+		FinanceInk.stroke(ctx, "support", lines.support, tones.up, 1.5);
+		FinanceInk.stroke(ctx, "resistance", lines.resistance, tones.down, 1.5);
+	}
+	/** Classic construction: rising from the lowest O and falling from the highest X, one box per column, until price breaks through. */
+	trendlines(view) {
+		const { columns, unit } = this;
+		if (columns.length < 3) return {
+			support: null,
+			resistance: null
+		};
+		const [floorY, ceilY] = view.y.domain();
+		const walk = (start, base, slope) => {
+			let last = start.index;
+			for (const column of columns.slice(start.index + 1)) {
+				const value = base + slope * (column.index - start.index);
+				if ((slope > 0 ? column.low <= value : column.high >= value) || value * unit > ceilY || value * unit < floorY) break;
+				last = column.index;
+			}
+			if (last === start.index) return null;
+			const end = base + slope * (last - start.index);
+			return `M${view.x(start.index)},${view.y(base * unit)}L${view.x(last)},${view.y(end * unit)}`;
+		};
+		const lowest = columns.reduce((best, column) => column.low < best.low ? column : best);
+		const highest = columns.reduce((best, column) => column.high > best.high ? column : best);
+		return {
+			support: walk(lowest, lowest.low - 1, 1),
+			resistance: walk(highest, highest.high + 1, -1)
+		};
+	}
+	legendItems() {
+		return [{
+			key: "X rising",
+			color: this.palette.diverging(-1)
+		}, {
+			key: "O falling",
+			color: this.palette.diverging(1)
+		}];
+	}
+};
+export { PointFigureChart };

package/dist/charts/financial/PriceChart.js

@@ -0,0 +1,168 @@
+import { FinanceInk } from "./FinanceInk.js";
+import { FinanceMath } from "./FinanceMath.js";
+import { PriceMark, PriceOverlay, PriceScale, VolumeLayout } from "./financeEnums.js";
+import { PriceMarks } from "./PriceMarks.js";
+import { Quotes } from "./Quotes.js";
+import { SessionChart } from "./SessionChart.js";
+import { extent, scaleLinear, scaleLog } from "d3";
+// src/charts/financial/PriceChart.ts
+/** Everything shared by charts whose main axis is price: scale modes, overlays and the volume pane. */
+var PriceChart = class extends SessionChart {
+	defaults() {
+		return {
+			...super.defaults(),
+			scale: PriceScale.Linear,
+			overlay: PriceOverlay.None,
+			period: 20,
+			volumeLayout: VolumeLayout.None
+		};
+	}
+	/** Bars actually drawn; transforms override this and overlays follow it. */
+	shown(bars) {
+		return bars;
+	}
+	bars() {
+		const bars = super.bars();
+		return this.shown(this.options.scale === PriceScale.Percent ? Quotes.rebased(bars) : bars);
+	}
+	percentValues() {
+		return this.options.scale === PriceScale.Percent;
+	}
+	get logarithmic() {
+		return this.options.scale === PriceScale.Log && Quotes.read(this.options.data, this.options).every((bar) => bar.low > 0);
+	}
+	valueScale() {
+		return this.logarithmic ? scaleLog() : scaleLinear();
+	}
+	subShare() {
+		return this.options.volumeLayout === VolumeLayout.Pane ? .22 : 0;
+	}
+	/** Extra lines this chart wants on the price axis. */
+	studies(bars) {
+		return this.overlayLines(bars);
+	}
+	overlayLines(bars) {
+		const { overlay, period } = this.options;
+		const closes = bars.map((bar) => bar.close);
+		const window = period;
+		switch (overlay) {
+			case PriceOverlay.SMA: return [{
+				name: `SMA ${window}`,
+				mid: FinanceMath.sma(closes, window)
+			}];
+			case PriceOverlay.EMA: return [{
+				name: `EMA ${window}`,
+				mid: FinanceMath.ema(closes, window)
+			}];
+			case PriceOverlay.WMA: return [{
+				name: `WMA ${window}`,
+				mid: FinanceMath.wma(closes, window)
+			}];
+			case PriceOverlay.VWAP: return [{
+				name: "VWAP",
+				mid: FinanceMath.vwap(bars)
+			}];
+			case PriceOverlay.Bollinger: {
+				const mid = FinanceMath.sma(closes, window), deviation = FinanceMath.stdev(closes, window);
+				return [{
+					name: `Bollinger ${window}`,
+					mid,
+					upper: mid.map((v, i) => v === null ? null : v + 2 * deviation[i]),
+					lower: mid.map((v, i) => v === null ? null : v - 2 * deviation[i])
+				}];
+			}
+			case PriceOverlay.Keltner: {
+				const mid = FinanceMath.ema(closes, window), range = FinanceMath.atr(bars, Math.min(window, 10));
+				const shift = (sign) => mid.map((v, i) => v === null || range[i] == null ? null : v + sign * 2 * range[i]);
+				return [{
+					name: `Keltner ${window}`,
+					mid,
+					upper: shift(1),
+					lower: shift(-1)
+				}];
+			}
+			case PriceOverlay.Donchian: {
+				const upper = FinanceMath.highest(bars.map((bar) => bar.high), window), lower = FinanceMath.lowest(bars.map((bar) => bar.low), window);
+				return [{
+					name: `Donchian ${window}`,
+					mid: FinanceMath.midpoint(upper, lower),
+					upper,
+					lower
+				}];
+			}
+			default: return [];
+		}
+	}
+	valueDomain(bars) {
+		const values = [...bars.flatMap((bar) => [bar.high, bar.low]), ...this.studies(bars).flatMap((study) => [
+			study.mid,
+			study.upper,
+			study.lower
+		].flatMap((series) => (series ?? []).filter((v) => v !== null)))];
+		const [low, high] = extent(values);
+		const spread = high - low || Math.abs(high) * .05 || 1;
+		const floor = low - spread * (this.options.volumeLayout === VolumeLayout.Overlay ? .3 : .05);
+		return [this.logarithmic ? Math.max(low * .8, floor) : floor, high + spread * .05];
+	}
+	plotMarks(ctx, view) {
+		const tones = this.tones(ctx);
+		this.drawVolume(ctx, view, tones);
+		this.priceMarks(ctx, view, tones);
+		this.drawStudies(ctx, view);
+		const zero = this.options.scale === PriceScale.Percent && view.bars.length ? [view.y(0)] : [];
+		FinanceInk.rules(ctx, "zero", zero, ctx.plot.width, ctx.theme.axis, null);
+		this.paneTitle(ctx, "volume-title", "Volume", view.sub && this.options.volumeLayout === VolumeLayout.Pane ? view.sub : null);
+		this.sessions(ctx, view);
+	}
+	drawPrice(ctx, view, tones, mark) {
+		const { bars } = view;
+		PriceMarks.candles(ctx, view, tones, mark === PriceMark.Candles ? bars : []);
+		PriceMarks.ohlc(ctx, view, tones, mark === PriceMark.Bars ? bars : []);
+		if (mark === PriceMark.Line || mark === PriceMark.Area) PriceMarks.closeLine(ctx, view, bars, tones.up, mark === PriceMark.Area);
+		else PriceMarks.closeLine(ctx, view, [], tones.up, false);
+	}
+	drawStudies(ctx, view) {
+		const studies = this.studies(view.bars);
+		const line = ctx.group("studies");
+		const nested = Object.create(ctx);
+		Object.defineProperty(nested, "root", { value: line });
+		for (const slot of [
+			0,
+			1,
+			2
+		]) {
+			const study = studies[slot];
+			const color = study ? ctx.palette.color(study.name) : ctx.theme.axis;
+			PriceMarks.band(nested, view, `study-fill-${slot}`, study?.upper ?? [], study?.lower ?? [], color, .1);
+			PriceMarks.line(nested, view, `study-upper-${slot}`, study?.upper ?? [], color, 1);
+			PriceMarks.line(nested, view, `study-lower-${slot}`, study?.lower ?? [], color, 1);
+			PriceMarks.line(nested, view, `study-mid-${slot}`, study?.mid ?? [], color, study?.upper ? 1.5 : 2, study?.upper ? "4 3" : null);
+		}
+	}
+	drawVolume(ctx, view, tones) {
+		const layout = this.options.volumeLayout;
+		const pane = layout === VolumeLayout.Pane ? view.sub : layout === VolumeLayout.Overlay ? {
+			top: view.main.bottom - (view.main.bottom - view.main.top) * .2,
+			bottom: view.main.bottom
+		} : null;
+		const bars = pane ? view.bars : [];
+		const peak = Math.max(1, ...bars.map((bar) => bar.volume));
+		const height = scaleLinear([0, peak], pane ? [pane.bottom, pane.top] : [0, 0]).nice(2);
+		const top = height.domain()[1];
+		const { x, body } = view;
+		const volume = ctx.marks("volume", "rect", bars, (bar) => bar.index).attr("fill", (bar) => bar.close >= bar.open ? tones.up : tones.down).attr("fill-opacity", .45).attr("rx", Math.min(1, body / 3));
+		ctx.set(volume, {
+			x: (bar) => x(bar.index) - body / 2,
+			width: body,
+			y: (bar) => height(bar.volume),
+			height: (bar) => Math.max(.5, height(0) - height(bar.volume))
+		}, {
+			x: (bar) => x(bar.index) - body / 2,
+			width: body,
+			y: height(0),
+			height: 0
+		});
+		FinanceInk.paneAxis(ctx, "volume-axis", layout === VolumeLayout.Pane && bars.length ? [top] : [], height, Quotes.compact, ctx.plot.width);
+	}
+};
+export { PriceChart };

package/dist/charts/financial/PriceMarks.js

@@ -0,0 +1,64 @@
+import { FinanceInk } from "./FinanceInk.js";
+import { CandleBody, OhlcTicks } from "./financeEnums.js";
+import { area, line } from "d3";
+// src/charts/financial/PriceMarks.ts
+/** Draws price itself, in each of the classic forms, on a session axis. */
+var PriceMarks = class {
+	static bodyPath(left, top, width, height, ring) {
+		const outer = `M${left},${top}h${width}v${height}h${-width}Z`;
+		const wall = Math.min(1.5, width / 3, height / 3);
+		return ring ? `${outer}M${left + wall},${top + wall}v${height - wall * 2}h${width - wall * 2}v${-(height - wall * 2)}Z` : outer;
+	}
+	static candles(ctx, view, tones, bars, { body = CandleBody.Solid, wicks = true } = {}) {
+		const { x, y, step } = view;
+		const peak = Math.max(1, ...bars.map((bar) => bar.volume));
+		const widthOf = (bar) => body === CandleBody.VolumeWidth ? Math.max(1, view.body * Math.sqrt(bar.volume / peak)) : view.body;
+		const rising = (bar, i) => body === CandleBody.Hollow ? bar.close >= (bars[i - 1]?.close ?? bar.open) : bar.close >= bar.open;
+		const tone = (bar, i) => rising(bar, i) ? tones.up : tones.down;
+		const top = (bar) => y(Math.max(bar.open, bar.close));
+		const tall = (bar) => Math.max(1, y(Math.min(bar.open, bar.close)) - top(bar));
+		const wick = ctx.marks("wicks", "line", wicks ? bars : [], (bar) => bar.index).attr("stroke", tone).attr("stroke-width", 1);
+		ctx.set(wick, {
+			x1: (bar) => x(bar.index),
+			x2: (bar) => x(bar.index),
+			y1: (bar) => y(bar.high),
+			y2: (bar) => y(bar.low)
+		}, {
+			x1: (bar) => x(bar.index),
+			x2: (bar) => x(bar.index),
+			y1: (bar) => y(bar.open),
+			y2: (bar) => y(bar.open)
+		}, Math.min(3, 240 / Math.max(1, bars.length)));
+		const shape = ctx.marks("bodies", "path", bars, (bar) => bar.index).attr("fill", tone).attr("fill-rule", "evenodd");
+		const hollow = (bar) => body === CandleBody.Hollow && bar.close >= bar.open && step >= 4;
+		ctx.set(shape, { d: (bar) => this.bodyPath(x(bar.index) - widthOf(bar) / 2, top(bar), widthOf(bar), tall(bar), hollow(bar)) }, { d: (bar) => this.bodyPath(x(bar.index) - widthOf(bar) / 2, y(bar.open), widthOf(bar), 0, hollow(bar)) }, Math.min(3, 240 / Math.max(1, bars.length)));
+	}
+	/** Vertical range bars with open and close ticks, the western alternative to candles. */
+	static ohlc(ctx, view, tones, bars, ticks = OhlcTicks.OpenClose) {
+		const { x, y } = view;
+		const reach = Math.max(1, Math.min(6, view.step * .42));
+		const d = (bar, flat) => {
+			const at = x(bar.index);
+			return `M${at},${y(flat ? bar.close : bar.high)}V${y(flat ? bar.close : bar.low)}${ticks === OhlcTicks.OpenClose ? `M${at - reach},${y(bar.open)}H${at}` : ""}${ticks === OhlcTicks.RangeOnly ? "" : `M${at},${y(bar.close)}H${at + reach}`}`;
+		};
+		const mark = ctx.marks("bars", "path", bars, (bar) => bar.index).attr("fill", "none").attr("stroke-width", ticks === OhlcTicks.RangeOnly ? 2 : 1.5).attr("stroke-linecap", "round").attr("stroke", (bar) => bar.close >= bar.open ? tones.up : tones.down);
+		ctx.set(mark, { d: (bar) => d(bar, false) }, { d: (bar) => d(bar, true) }, Math.min(3, 240 / Math.max(1, bars.length)));
+	}
+	static line(ctx, view, name, values, color, width = 2, dash = null, shift = 0) {
+		const path = line().defined((value) => value !== null).x((_, i) => view.x(i + shift)).y((value) => view.y(value));
+		const drawn = values.some((value) => value !== null);
+		FinanceInk.stroke(ctx, name, drawn ? path(values) : null, color, width, dash);
+	}
+	/** Filled band between two aligned series. */
+	static band(ctx, view, name, upper, lower, color, opacity = .12, shift = 0) {
+		const path = area().defined((value, i) => value !== null && lower[i] != null).x((_, i) => view.x(i + shift)).y0((_, i) => view.y(lower[i])).y1((value) => view.y(value));
+		FinanceInk.fill(ctx, name, upper.some((value) => value !== null) ? path(upper) : null, color, opacity);
+	}
+	/** Close as a plain line, with an optional soft fill to the bottom of the pane. */
+	static closeLine(ctx, view, bars, color, fill) {
+		const shade = area().x((bar) => view.x(bar.index)).y0(view.main.bottom).y1((bar) => view.y(bar.close));
+		FinanceInk.fill(ctx, "price-area", fill && bars.length ? shade(bars) : null, color, .14);
+		this.line(ctx, view, "price-line", bars.map((bar) => bar.close), color);
+	}
+};
+export { PriceMarks };