@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/financial/KagiChart.js

@@ -0,0 +1,91 @@
+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";
+import { Quotes } from "./Quotes.js";
+// src/charts/financial/KagiChart.ts
+/** Line that thickens through old highs and thins through old lows: use it to read supply and demand shifts. */
+var KagiChart = class extends BrickChart {
+	static meta = {
+		id: "kagi",
+		name: "Kagi chart",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Follows price with a line that reverses only on a set move, changing weight when it breaks a prior shoulder or waist.",
+		tags: [
+			"yin yang",
+			"shoulder",
+			"waist",
+			"price action"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 240),
+		variants: {
+			method: [
+				BoxMethod.ATR,
+				BoxMethod.Range,
+				BoxMethod.Percent
+			],
+			source: [PriceSource.Close, PriceSource.HighLow],
+			multiple: [1, 2],
+			pivots: [false, true]
+		}
+	};
+	built = {
+		segments: [],
+		pivots: []
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			pivots: false
+		};
+	}
+	construct(bars, box) {
+		const built = PriceTransforms.kagi(bars, box, this.options.source);
+		this.built = built;
+		const columns = /* @__PURE__ */ new Map();
+		for (const segment of built.segments) columns.set(segment.column, [...columns.get(segment.column) ?? [], segment]);
+		return [...columns].map(([column, parts]) => this.column(column, parts[0].from, parts.at(-1).to, parts.at(-1).bar));
+	}
+	columnMarks(ctx, view, tones) {
+		const { x, y } = view;
+		const { segments, pivots } = this.built;
+		const trace = (yang) => segments.flatMap((segment) => {
+			if (segment.yang !== yang) return [];
+			const at = x(segment.column);
+			return [`${segment.column ? `M${x(segment.column - 1)},${y(segment.from)}H${at}` : `M${at},${y(segment.from)}`}V${y(segment.to)}`];
+		}).join("") || null;
+		FinanceInk.stroke(ctx, "yin", trace(false), tones.down, 1.25);
+		FinanceInk.stroke(ctx, "yang", trace(true), tones.up, 3);
+		const shown = this.options.pivots ? pivots : [];
+		const dots = ctx.marks("pivots", "circle", shown, (pivot) => pivot.column).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("fill", (pivot) => pivot.shoulder ? tones.up : tones.down);
+		ctx.set(dots, {
+			cx: (pivot) => x(pivot.column),
+			cy: (pivot) => y(pivot.price),
+			r: 4
+		}, {
+			cx: (pivot) => x(pivot.column),
+			cy: (pivot) => y(pivot.price),
+			r: 0
+		});
+	}
+	legendItems() {
+		return [{
+			key: "Yang",
+			color: this.palette.diverging(-1)
+		}, {
+			key: "Yin",
+			color: this.palette.diverging(1)
+		}];
+	}
+	columnTip(bar) {
+		return {
+			title: bar.label,
+			rows: [["Leg from", Quotes.money(bar.open)], ["To", Quotes.money(bar.close)]]
+		};
+	}
+};
+export { KagiChart };

package/dist/charts/financial/LineBreakChart.js

@@ -0,0 +1,52 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BrickChart } from "./BrickChart.js";
+import { CandleBody, PriceSource } from "./financeEnums.js";
+import { PriceMarks } from "./PriceMarks.js";
+import { PriceTransforms } from "./PriceTransforms.js";
+// src/charts/financial/LineBreakChart.ts
+/** Blocks of varying height printed only on new closes: use it to see when a trend has genuinely broken. */
+var LineBreakChart = class extends BrickChart {
+	static meta = {
+		id: "line-break",
+		name: "Line break chart",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Adds a block only on a new high or low close, and reverses only when several prior blocks are broken.",
+		tags: [
+			"three line break",
+			"kagi",
+			"price action"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 180),
+		variants: {
+			lines: [
+				3,
+				2,
+				4
+			],
+			source: [PriceSource.Close, PriceSource.HighLow],
+			hollow: [false, true],
+			stems: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			lines: 3,
+			hollow: false,
+			stems: false
+		};
+	}
+	construct(bars, _box) {
+		return PriceTransforms.lineBreak(bars, this.options.lines, this.options.source).map((line) => this.column(line.index, line.up ? line.bottom : line.top, line.up ? line.top : line.bottom, line.bar, line.up ? line.bar.high : line.bar.low));
+	}
+	columnMarks(ctx, view, tones) {
+		PriceMarks.candles(ctx, view, tones, view.bars, {
+			body: this.options.hollow ? CandleBody.Hollow : CandleBody.Solid,
+			wicks: this.options.stems
+		});
+	}
+};
+export { LineBreakChart };

package/dist/charts/financial/MACDChart.js

@@ -0,0 +1,119 @@
+import { ChartFamily, DataShape, Dimension, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MacdBasis, MacdHistogram, MacdPeriods, MovingAverageKind } from "./financeEnums.js";
+import { FinanceInk } from "./FinanceInk.js";
+import { FinanceMath } from "./FinanceMath.js";
+import { OscillatorChart } from "./OscillatorChart.js";
+import { PriceMarks } from "./PriceMarks.js";
+import { area, extent, symbol } from "d3";
+// src/charts/financial/MACDChart.ts
+/** Momentum from the gap between two averages: use it to time trend changes through signal-line crosses. */
+var MACDChart = class extends OscillatorChart {
+	static meta = {
+		id: "macd",
+		name: "MACD",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Tracks the gap between fast and slow moving averages, with a histogram showing momentum building or fading.",
+		tags: [
+			"momentum",
+			"oscillator",
+			"ppo",
+			"histogram",
+			"signal"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 120),
+		variants: {
+			periods: [
+				MacdPeriods.Standard,
+				MacdPeriods.Fast,
+				MacdPeriods.Wide
+			],
+			average: [MovingAverageKind.Exponential, MovingAverageKind.Simple],
+			histogram: [
+				MacdHistogram.Bars,
+				MacdHistogram.Area,
+				MacdHistogram.None
+			],
+			basis: [MacdBasis.Absolute, MacdBasis.Percent],
+			pricePane: [false, true],
+			crossovers: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			periods: MacdPeriods.Standard,
+			average: MovingAverageKind.Exponential,
+			histogram: MacdHistogram.Bars,
+			basis: MacdBasis.Absolute,
+			crossovers: false
+		};
+	}
+	lines(bars) {
+		const { periods, average, basis } = this.options;
+		const [fast, slow, smooth] = periods.split("-").map(Number);
+		const closes = bars.map((bar) => bar.close);
+		const slowLine = FinanceMath.average(average, closes, slow);
+		const gap = FinanceMath.subtract(FinanceMath.average(average, closes, fast), slowLine);
+		const macd = basis === MacdBasis.Percent ? gap.map((value, i) => value === null || !slowLine[i] ? null : 100 * value / slowLine[i]) : gap;
+		const signal = FinanceMath.average(average, macd, smooth);
+		return {
+			macd,
+			signal,
+			histogram: FinanceMath.subtract(macd, signal)
+		};
+	}
+	percentValues() {
+		return this.options.basis === MacdBasis.Percent;
+	}
+	valueDomain(bars) {
+		const { macd, signal, histogram } = this.lines(bars);
+		const [low = 0, high = 1] = extent([
+			...macd,
+			...signal,
+			...histogram,
+			0
+		].filter((value) => value !== null));
+		const pad = (high - low || 1) * .06;
+		return [low - pad, high + pad];
+	}
+	oscillator(ctx, view, tones) {
+		const { macd, signal, histogram } = this.lines(view.bars);
+		const { x, y, body } = view;
+		const zero = y(0), style = this.options.histogram;
+		FinanceInk.rules(ctx, "zero", view.bars.length ? [zero] : [], ctx.plot.width, ctx.theme.axis, null);
+		const rows = style === MacdHistogram.Bars ? view.bars.filter((bar) => histogram[bar.index] !== null) : [];
+		const value = (bar) => histogram[bar.index];
+		const columns = ctx.marks("histogram", "path", rows, (bar) => bar.index).attr("fill", (bar) => value(bar) >= 0 ? tones.up : tones.down).attr("fill-opacity", .55);
+		ctx.set(columns, { d: (bar) => FinanceInk.bar(x(bar.index) - body / 2, body, zero, y(value(bar)), 1) }, { d: (bar) => FinanceInk.bar(x(bar.index) - body / 2, body, zero, zero, 1) });
+		const shade = (sign) => area().defined((v) => v !== null).x((_, i) => x(i)).y0(zero).y1((v) => sign * v > 0 ? y(v) : zero)(histogram);
+		FinanceInk.fill(ctx, "hist-up", style === MacdHistogram.Area ? shade(1) : null, tones.up, .4);
+		FinanceInk.fill(ctx, "hist-down", style === MacdHistogram.Area ? shade(-1) : null, tones.down, .4);
+		PriceMarks.line(ctx, view, "macd-line", macd, ctx.palette.color("MACD"));
+		PriceMarks.line(ctx, view, "signal-line", signal, ctx.palette.color("Signal"), 1.5);
+		const crosses = !this.options.crossovers ? [] : view.bars.filter((bar) => {
+			const now = histogram[bar.index], before = histogram[bar.index - 1];
+			return now != null && before != null && now * before < 0;
+		});
+		const triangle = symbol(Scales.symbol(SymbolKind.Triangle), 64)();
+		const marker = ctx.marks("crosses", "path", crosses, (bar) => bar.index).attr("d", triangle).attr("fill", (bar) => value(bar) > 0 ? tones.up : tones.down).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("paint-order", "stroke");
+		const place = (bar) => `translate(${x(bar.index)},${y(macd[bar.index])}) rotate(${value(bar) > 0 ? 0 : 180})`;
+		ctx.set(marker, { transform: place }, { transform: place });
+	}
+	tooltip(bar) {
+		const { macd, signal, histogram } = this.lines(this.bars());
+		const show = (value) => value == null ? "–" : value.toFixed(3);
+		return {
+			title: bar.label,
+			rows: [
+				["MACD", show(macd[bar.index])],
+				["Signal", show(signal[bar.index])],
+				["Histogram", show(histogram[bar.index])]
+			]
+		};
+	}
+};
+export { MACDChart };

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