@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/financial/PriceTransforms.js

@@ -0,0 +1,284 @@
+import { FinanceMath } from "./FinanceMath.js";
+import { BoxMethod, PriceSource } from "./financeEnums.js";
+// src/charts/financial/PriceTransforms.ts
+var ohlc = (bar, open, high, low, close) => ({
+	...bar,
+	open,
+	high,
+	low,
+	close
+});
+/** Price-action constructions: each turns time-based bars into something driven by price moves alone. */
+var PriceTransforms = class {
+	static heikinAshi(bars) {
+		const out = [];
+		bars.forEach((bar, i) => {
+			const close = (bar.open + bar.high + bar.low + bar.close) / 4;
+			const previous = out[i - 1];
+			const open = previous ? (previous.open + previous.close) / 2 : (bar.open + bar.close) / 2;
+			out.push(ohlc(bar, open, Math.max(bar.high, open, close), Math.min(bar.low, open, close), close));
+		});
+		return out;
+	}
+	/** EMA-smooths each price before the Heikin-Ashi step, which removes more noise and adds lag. */
+	static smoothed(bars, period = 5) {
+		const pick = (field) => FinanceMath.ema(bars.map((bar) => bar[field]), Math.min(period, Math.max(1, bars.length)));
+		const [open, high, low, close] = [
+			pick("open"),
+			pick("high"),
+			pick("low"),
+			pick("close")
+		];
+		const ready = bars.flatMap((bar, i) => close[i] === null ? [] : [ohlc(bar, open[i], high[i], low[i], close[i])]);
+		return this.heikinAshi(ready.map((bar, index) => ({
+			...bar,
+			index
+		})));
+	}
+	/** One box in price units. An explicit `size` always wins. */
+	static boxSize(bars, method, multiple = 1, size) {
+		if (size && size > 0) return size;
+		const closes = bars.map((bar) => Math.abs(bar.close));
+		const peak = Math.max(...bars.map((bar) => bar.high)), trough = Math.min(...bars.map((bar) => bar.low));
+		const last = closes.at(-1) ?? 1;
+		return ((method === BoxMethod.ATR ? FinanceMath.lastAtr(bars) : method === BoxMethod.Percent ? last * .015 : (peak - trough) / 24) || last * .01 || 1) * multiple;
+	}
+	/** Bricks of a fixed size; a turn needs `reversal` box lengths against the last brick's far edge. */
+	static renko(bars, box, reversal, source) {
+		const first = bars[0];
+		if (!first || !(box > 0)) return [];
+		const bricks = [];
+		let top = first.close, bottom = first.close - box, up = true, far = first.close;
+		const push = (bar, high, rising) => {
+			top = high;
+			bottom = high - box;
+			up = rising;
+			bricks.push({
+				index: bricks.length,
+				top,
+				bottom,
+				up,
+				bar,
+				wick: far
+			});
+			far = rising ? top : bottom;
+		};
+		for (const bar of bars.slice(1)) {
+			const highPrice = source === PriceSource.HighLow ? bar.high : bar.close;
+			const lowPrice = source === PriceSource.HighLow ? bar.low : bar.close;
+			const before = bricks.length;
+			if (up) {
+				while (highPrice >= top + box) push(bar, top + box, true);
+				if (bricks.length === before && lowPrice <= top - reversal * box) {
+					let edge = reversal === 1 ? top : bottom;
+					while (lowPrice <= edge - box) {
+						push(bar, edge, false);
+						edge -= box;
+					}
+				}
+			} else {
+				while (lowPrice <= bottom - box) push(bar, bottom, false);
+				if (bricks.length === before && highPrice >= bottom + reversal * box) {
+					let edge = reversal === 1 ? bottom : top;
+					while (highPrice >= edge + box) {
+						push(bar, edge + box, true);
+						edge += box;
+					}
+				}
+			}
+			far = up ? Math.min(far, lowPrice) : Math.max(far, highPrice);
+		}
+		return bricks;
+	}
+	/** Line that keeps running until price turns by `box`, thick (yang) above the last shoulder, thin (yin) below the last waist. */
+	static kagi(bars, box, source) {
+		const first = bars[0];
+		if (!first || !(box > 0)) return {
+			segments: [],
+			pivots: [],
+			columns: 0
+		};
+		const legs = [];
+		let from = first.close, to = first.close, up = true, bar = first;
+		let started = false;
+		for (const next of bars.slice(1)) {
+			const high = source === PriceSource.HighLow ? next.high : next.close;
+			const low = source === PriceSource.HighLow ? next.low : next.close;
+			if (!started) {
+				if (high >= from + box) {
+					started = true;
+					up = true;
+					to = high;
+					bar = next;
+				} else if (low <= from - box) {
+					started = true;
+					up = false;
+					to = low;
+					bar = next;
+				}
+				continue;
+			}
+			if (up ? high > to : low < to) {
+				to = up ? high : low;
+				bar = next;
+			} else if (up ? to - low >= box : high - to >= box) {
+				legs.push({
+					from,
+					to,
+					bar
+				});
+				from = to;
+				to = up ? low : high;
+				up = !up;
+				bar = next;
+			}
+		}
+		if (started) legs.push({
+			from,
+			to,
+			bar
+		});
+		const segments = [], pivots = [];
+		let yang = legs.length ? legs[0].to >= legs[0].from : true;
+		let shoulder = -Infinity, waist = Infinity;
+		legs.forEach((leg, column) => {
+			const rising = leg.to >= leg.from;
+			const line = rising ? shoulder : waist;
+			if (Number.isFinite(line) && (rising ? !yang && leg.to > line : yang && leg.to < line)) {
+				segments.push({
+					column,
+					from: leg.from,
+					to: line,
+					yang,
+					up: rising,
+					bar: leg.bar
+				});
+				yang = rising;
+				segments.push({
+					column,
+					from: line,
+					to: leg.to,
+					yang,
+					up: rising,
+					bar: leg.bar
+				});
+			} else segments.push({
+				column,
+				from: leg.from,
+				to: leg.to,
+				yang,
+				up: rising,
+				bar: leg.bar
+			});
+			if (rising) shoulder = leg.to;
+			else waist = leg.to;
+			if (column < legs.length - 1) pivots.push({
+				column,
+				price: leg.to,
+				shoulder: rising
+			});
+		});
+		return {
+			segments,
+			pivots,
+			columns: legs.length
+		};
+	}
+	/** Columns of X and O on a box grid; a new column needs `reversal` boxes against the current one. */
+	static pointFigure(bars, box, reversal, source) {
+		const first = bars[0];
+		if (!first || !(box > 0)) return [];
+		const snap = (price) => Math.round(price / box);
+		const columns = [];
+		const start = snap(first.close);
+		let current = null;
+		for (const bar of bars.slice(1)) {
+			const high = Math.floor((source === PriceSource.HighLow ? bar.high : bar.close) / box);
+			const low = Math.ceil((source === PriceSource.HighLow ? bar.low : bar.close) / box);
+			if (!current) {
+				if (high >= start + reversal) current = {
+					index: 0,
+					rising: true,
+					low: start,
+					high,
+					bar
+				};
+				else if (low <= start - reversal) current = {
+					index: 0,
+					rising: false,
+					low,
+					high: start,
+					bar
+				};
+				if (current) columns.push(current);
+				continue;
+			}
+			if (current.rising) {
+				if (high > current.high) {
+					current.high = high;
+					current.bar = bar;
+				} else if (low <= current.high - reversal) {
+					current = {
+						index: columns.length,
+						rising: false,
+						low,
+						high: current.high - 1,
+						bar
+					};
+					columns.push(current);
+				}
+			} else if (low < current.low) {
+				current.low = low;
+				current.bar = bar;
+			} else if (high >= current.low + reversal) {
+				current = {
+					index: columns.length,
+					rising: true,
+					low: current.low + 1,
+					high,
+					bar
+				};
+				columns.push(current);
+			}
+		}
+		return columns;
+	}
+	/** N-line break: a new line prints only past the extreme of the last `lines` lines when reversing. */
+	static lineBreak(bars, lines, source) {
+		const price = (bar) => source === PriceSource.HighLow ? (bar.high + bar.low) / 2 : bar.close;
+		const out = [];
+		let last = bars[0] ? price(bars[0]) : 0;
+		for (const bar of bars.slice(1)) {
+			const value = price(bar);
+			const tail = out.slice(-lines);
+			const previous = out.at(-1);
+			if (!previous) {
+				if (value !== last) out.push({
+					index: 0,
+					top: Math.max(value, last),
+					bottom: Math.min(value, last),
+					up: value > last,
+					bar
+				});
+				continue;
+			}
+			const high = Math.max(...tail.map((line) => line.top)), low = Math.min(...tail.map((line) => line.bottom));
+			if (previous.up ? value > previous.top : value > high) out.push({
+				index: out.length,
+				top: value,
+				bottom: previous.top,
+				up: true,
+				bar
+			});
+			else if (!previous.up ? value < previous.bottom : value < low) out.push({
+				index: out.length,
+				top: previous.bottom,
+				bottom: value,
+				up: false,
+				bar
+			});
+		}
+		return out;
+	}
+};
+export { PriceTransforms };

package/dist/charts/financial/ProjectionCone.js

@@ -0,0 +1,134 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ConeBands, ConeModel } from "./financeEnums.js";
+import { FinanceInk } from "./FinanceInk.js";
+import { PriceMarks } from "./PriceMarks.js";
+import { Quotes } from "./Quotes.js";
+import { SessionChart } from "./SessionChart.js";
+import { deviation, mean, quantile } from "d3";
+// src/charts/financial/ProjectionCone.ts
+/** Standard-normal quantiles for the band edges used here. */
+var Z = {
+	.05: -1.645,
+	.1: -1.282,
+	.25: -.674,
+	.75: .674,
+	.9: 1.282,
+	.95: 1.645
+};
+var PAIRS = {
+	[ConeBands.Fifty]: [[.25, .75]],
+	[ConeBands.Ninety]: [[.05, .95]],
+	[ConeBands.Graded]: [
+		[.05, .95],
+		[.1, .9],
+		[.25, .75]
+	]
+};
+/** History with a widening range of outcomes: use it to communicate forecast uncertainty honestly. */
+var ProjectionCone = class extends SessionChart {
+	static meta = {
+		id: "projection-cone",
+		name: "Projection cone",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Extends a price forward as nested probability bands that widen with time, showing the range of plausible outcomes.",
+		tags: [
+			"fan chart",
+			"forecast",
+			"scenario",
+			"percentile",
+			"risk"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 90),
+		variants: {
+			model: [
+				ConeModel.Lognormal,
+				ConeModel.Normal,
+				ConeModel.Empirical
+			],
+			bands: [
+				ConeBands.Graded,
+				ConeBands.Fifty,
+				ConeBands.Ninety
+			],
+			horizon: [
+				30,
+				60,
+				90
+			],
+			drift: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			model: ConeModel.Lognormal,
+			bands: ConeBands.Graded,
+			horizon: 30,
+			drift: false
+		};
+	}
+	futureSessions() {
+		return this.options.horizon;
+	}
+	twoTone() {
+		return false;
+	}
+	level(bars, probability, step) {
+		const last = bars.at(-1).close;
+		const returns = bars.slice(1).map((bar, i) => Math.log(Math.abs(bar.close / bars[i].close) || 1));
+		const average = mean(returns) ?? 0, spread = deviation(returns) ?? 0;
+		const drift = this.options.drift ? average * step : 0;
+		const root = Math.sqrt(step);
+		switch (this.options.model) {
+			case ConeModel.Normal: return last * (1 + drift + Z[probability] * spread * root);
+			case ConeModel.Empirical: return last * Math.exp(drift + ((quantile(returns, probability) ?? 0) - average) * root);
+			default: return last * Math.exp(drift + Z[probability] * spread * root);
+		}
+	}
+	/** Aligned with the axis: nulls through history, values from the last close onward. */
+	forward(bars, probability) {
+		const last = bars.length - 1;
+		return Array.from({ length: bars.length + this.options.horizon }, (_, i) => i < last ? null : i === last ? bars[last].close : this.level(bars, probability, i - last));
+	}
+	valueDomain(bars) {
+		const edges = PAIRS[this.options.bands].flat().flatMap((p) => this.forward(bars, p).filter((v) => v !== null));
+		const values = [...bars.map((bar) => bar.close), ...edges];
+		const low = Math.min(...values), high = Math.max(...values);
+		const pad = (high - low || 1) * .05;
+		return [low - pad, high + pad];
+	}
+	plotMarks(ctx, view) {
+		const color = this.tones(ctx).up;
+		const { bars } = view;
+		const pairs = PAIRS[this.options.bands];
+		for (const slot of [
+			0,
+			1,
+			2
+		]) {
+			const pair = bars.length > 1 ? pairs[slot] : void 0;
+			PriceMarks.band(ctx, view, `cone-${slot}`, pair ? this.forward(bars, pair[1]) : [], pair ? this.forward(bars, pair[0]) : [], color, .16);
+		}
+		PriceMarks.line(ctx, view, "median", bars.length > 1 ? this.forward(bars, .75).map((high, i) => high === null ? null : (high + this.forward(bars, .25)[i]) / 2) : [], color, 1.5, "4 3");
+		PriceMarks.line(ctx, view, "history", bars.map((bar) => bar.close), color);
+		const outer = pairs[0];
+		const edge = bars.length > 1 ? outer.map((p) => ({
+			p,
+			value: this.forward(bars, p).at(-1)
+		})) : [];
+		FinanceInk.note(ctx, "cone-labels", edge, ({ p, value }) => ({
+			x: ctx.plot.width - 3,
+			y: view.y(value) + (p < .5 ? 13 : -5),
+			text: `${Math.round(p * 100)}% ${Quotes.money(value)}`,
+			anchor: "end"
+		}), 10, "secondary");
+		this.sessions(ctx, view, (bar) => ({
+			title: bar.label,
+			rows: [["Close", Quotes.money(bar.close)]]
+		}));
+	}
+};
+export { ProjectionCone };

package/dist/charts/financial/Quotes.js

@@ -0,0 +1,74 @@
+import { utcFormat } from "d3";
+// src/charts/financial/Quotes.ts
+var dayLabel = utcFormat("%b %-d, %Y");
+/** Reads user rows into clean bars, tolerating strings, nulls and missing open/high/low columns. */
+var Quotes = class {
+	static number(value) {
+		if (value === null || value === void 0 || value === "") return NaN;
+		return value instanceof Date ? value.getTime() : Number(value);
+	}
+	static date(value) {
+		if (value === null || value === void 0 || value === "") return null;
+		const date = value instanceof Date ? value : new Date(value);
+		return Number.isNaN(date.getTime()) ? null : date;
+	}
+	static read(rows, fields) {
+		const bars = [];
+		for (const row of rows ?? []) {
+			const close = this.number(row[fields.close]);
+			if (!Number.isFinite(close)) continue;
+			const previous = bars.at(-1)?.close ?? close;
+			const finite = (value, fallback) => Number.isFinite(value) ? value : fallback;
+			const open = finite(this.number(row[fields.open]), previous);
+			const high = Math.max(finite(this.number(row[fields.high]), close), open, close);
+			const low = Math.min(finite(this.number(row[fields.low]), close), open, close);
+			const date = this.date(row[fields.date]);
+			bars.push({
+				index: bars.length,
+				date,
+				label: date ? dayLabel(date) : String(row[fields.date] ?? bars.length + 1),
+				open,
+				high,
+				low,
+				close,
+				volume: Math.max(0, finite(this.number(row[fields.volume]), 0)),
+				source: {
+					open,
+					high,
+					low,
+					close
+				}
+			});
+		}
+		return bars;
+	}
+	/** Expresses prices as percent change from the first close. */
+	static rebased(bars) {
+		const base = bars[0]?.close;
+		if (!base) return bars;
+		const move = (price) => (price - base) / Math.abs(base) * 100;
+		return bars.map((bar) => ({
+			...bar,
+			open: move(bar.open),
+			high: move(bar.high),
+			low: move(bar.low),
+			close: move(bar.close)
+		}));
+	}
+	static money(value) {
+		return value.toLocaleString("en", {
+			minimumFractionDigits: 2,
+			maximumFractionDigits: 2
+		});
+	}
+	static compact(value) {
+		return Intl.NumberFormat("en", {
+			notation: "compact",
+			maximumFractionDigits: 1
+		}).format(value);
+	}
+	static signed(value, digits = 2) {
+		return `${value >= 0 ? "+" : ""}${value.toFixed(digits)}`;
+	}
+};
+export { Quotes };

package/dist/charts/financial/RSIChart.js

@@ -0,0 +1,74 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MovingAverageKind, RsiForm } from "./financeEnums.js";
+import { FinanceMath } from "./FinanceMath.js";
+import { OscillatorChart } from "./OscillatorChart.js";
+import { PriceMarks } from "./PriceMarks.js";
+// src/charts/financial/RSIChart.ts
+/** Bounded momentum gauge: use it to find overbought and oversold extremes. */
+var RSIChart = class extends OscillatorChart {
+	static meta = {
+		id: "rsi",
+		name: "Relative Strength Index",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Scores recent gains against losses from 0 to 100, flagging moves that have run too far too fast.",
+		tags: [
+			"momentum",
+			"oscillator",
+			"overbought",
+			"stochastic rsi",
+			"cutler"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 110),
+		variants: {
+			period: [
+				14,
+				7,
+				21
+			],
+			smoothing: [
+				MovingAverageKind.Wilder,
+				MovingAverageKind.Simple,
+				MovingAverageKind.Exponential
+			],
+			form: [RsiForm.Classic, RsiForm.Stochastic],
+			upper: [70, 80],
+			shade: [true, false],
+			pricePane: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			period: 14,
+			smoothing: MovingAverageKind.Wilder,
+			form: RsiForm.Classic,
+			upper: 70,
+			shade: true
+		};
+	}
+	values(bars) {
+		const { period, smoothing, form } = this.options;
+		const rsi = FinanceMath.rsi(bars.map((bar) => bar.close), period, smoothing);
+		return form === RsiForm.Stochastic ? FinanceMath.sma(FinanceMath.stochastic(rsi, rsi, rsi, period), 3) : rsi;
+	}
+	valueDomain() {
+		return [0, 100];
+	}
+	oscillator(ctx, view, tones) {
+		const values = this.values(view.bars);
+		const { upper, shade } = this.options;
+		this.zones(ctx, view, tones, values, upper, 100 - upper, shade);
+		PriceMarks.line(ctx, view, "rsi-line", values, ctx.theme.categorical[0]);
+	}
+	tooltip(bar) {
+		const value = this.values(this.bars())[bar.index];
+		return {
+			title: bar.label,
+			rows: [[this.options.form === RsiForm.Stochastic ? "Stoch RSI" : "RSI", value == null ? "–" : value.toFixed(1)], ["Close", bar.close.toFixed(2)]]
+		};
+	}
+};
+export { RSIChart };