@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/financial/FinanceMath.js

@@ -0,0 +1,121 @@
+import { MovingAverageKind } from "./financeEnums.js";
+// src/charts/financial/FinanceMath.ts
+var present = (value) => value !== null;
+/** Pure indicator maths on arrays aligned with the bars: `null` until a window fills. */
+var FinanceMath = class {
+	static aligned(values, compute) {
+		const first = values.findIndex(present);
+		if (first < 0) return values.map(() => null);
+		return [...values.slice(0, first).map(() => null), ...compute(values.slice(first).map((value) => value ?? 0))];
+	}
+	static windowed(values, period, fn) {
+		return this.aligned(values, (clean) => clean.map((_, i) => i + 1 < period ? null : fn(clean.slice(i + 1 - period, i + 1))));
+	}
+	static sma(values, period) {
+		return this.windowed(values, period, (slice) => slice.reduce((a, b) => a + b, 0) / slice.length);
+	}
+	static wma(values, period) {
+		const weight = period * (period + 1) / 2;
+		return this.windowed(values, period, (slice) => slice.reduce((sum, value, i) => sum + value * (i + 1), 0) / weight);
+	}
+	static recursive(values, period, alpha) {
+		return this.aligned(values, (clean) => {
+			let last = null;
+			return clean.map((value, i) => {
+				if (i + 1 < period) return null;
+				last = last === null ? clean.slice(0, period).reduce((a, b) => a + b, 0) / period : last + alpha * (value - last);
+				return last;
+			});
+		});
+	}
+	static ema(values, period) {
+		return this.recursive(values, period, 2 / (period + 1));
+	}
+	static wilder(values, period) {
+		return this.recursive(values, period, 1 / period);
+	}
+	static average(kind, values, period) {
+		switch (kind) {
+			case MovingAverageKind.Exponential: return this.ema(values, period);
+			case MovingAverageKind.Weighted: return this.wma(values, period);
+			case MovingAverageKind.Wilder: return this.wilder(values, period);
+			default: return this.sma(values, period);
+		}
+	}
+	static stdev(values, period) {
+		return this.windowed(values, period, (slice) => {
+			const mean = slice.reduce((a, b) => a + b, 0) / slice.length;
+			return Math.sqrt(slice.reduce((sum, value) => sum + (value - mean) ** 2, 0) / slice.length);
+		});
+	}
+	static highest(values, period) {
+		return this.windowed(values, period, (slice) => Math.max(...slice));
+	}
+	static lowest(values, period) {
+		return this.windowed(values, period, (slice) => Math.min(...slice));
+	}
+	static trueRange(bars) {
+		return bars.map((bar, i) => {
+			const previous = bars[i - 1]?.close ?? bar.close;
+			return Math.max(bar.high - bar.low, Math.abs(bar.high - previous), Math.abs(bar.low - previous));
+		});
+	}
+	static atr(bars, period = 14) {
+		return this.wilder(this.trueRange(bars), period);
+	}
+	/** Last available ATR, or the mean true range when the series is shorter than the window. */
+	static lastAtr(bars, period = 14) {
+		const value = this.atr(bars, period).at(-1);
+		if (value) return value;
+		const ranges = this.trueRange(bars);
+		return ranges.reduce((a, b) => a + b, 0) / Math.max(1, ranges.length);
+	}
+	static vwap(bars) {
+		let dollars = 0, shares = 0;
+		return bars.map((bar) => {
+			dollars += (bar.high + bar.low + bar.close) / 3 * bar.volume;
+			shares += bar.volume;
+			return shares ? dollars / shares : (bar.high + bar.low + bar.close) / 3;
+		});
+	}
+	static rsi(values, period, kind) {
+		const change = values.map((value, i) => i ? value - values[i - 1] : null);
+		const gain = this.average(kind, change.map((c) => c === null ? null : Math.max(0, c)), period);
+		const loss = this.average(kind, change.map((c) => c === null ? null : Math.max(0, -c)), period);
+		return gain.map((up, i) => {
+			const down = loss[i];
+			if (up === null || down === null || down === void 0) return null;
+			return up + down === 0 ? 50 : 100 * up / (up + down);
+		});
+	}
+	/** Position of each value inside its trailing high-low window, 0..100. */
+	static stochastic(values, highs, lows, period) {
+		const top = this.highest(highs, period), bottom = this.lowest(lows, period);
+		return values.map((value, i) => {
+			const high = top[i], low = bottom[i];
+			if (value === null || high == null || low == null) return null;
+			return high === low ? 50 : 100 * (value - low) / (high - low);
+		});
+	}
+	static subtract(a, b) {
+		return a.map((value, i) => value === null || b[i] == null ? null : value - b[i]);
+	}
+	static midpoint(a, b) {
+		return a.map((value, i) => value === null || b[i] == null ? null : (value + b[i]) / 2);
+	}
+	/** Normal CDF via the Abramowitz and Stegun approximation. */
+	static normalCdf(x) {
+		const t = 1 / (1 + .2316419 * Math.abs(x));
+		const tail = Math.exp(-x * x / 2) / Math.sqrt(2 * Math.PI) * t * (.31938153 + t * (-.356563782 + t * (1.781477937 + t * (-1.821255978 + t * 1.330274429))));
+		return x >= 0 ? 1 - tail : tail;
+	}
+	/** Black-Scholes value with zero rate; collapses to intrinsic value at expiry. */
+	static optionValue(call, spot, strike, volatility, years) {
+		if (years <= 0 || volatility <= 0 || spot <= 0 || strike <= 0) return Math.max(0, call ? spot - strike : strike - spot);
+		const root = volatility * Math.sqrt(years);
+		const d1 = (Math.log(spot / strike) + volatility * volatility * years / 2) / root;
+		const d2 = d1 - root;
+		return call ? spot * this.normalCdf(d1) - strike * this.normalCdf(d2) : strike * this.normalCdf(-d2) - spot * this.normalCdf(-d1);
+	}
+};
+export { FinanceMath };

package/dist/charts/financial/HeikinAshiChart.js

@@ -0,0 +1,58 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { CandleBody, PriceOverlay, PriceScale, VolumeLayout } from "./financeEnums.js";
+import { PriceChart } from "./PriceChart.js";
+import { PriceMarks } from "./PriceMarks.js";
+import { PriceTransforms } from "./PriceTransforms.js";
+// src/charts/financial/HeikinAshiChart.ts
+/** Averaged candles that hold their colour through a trend: use it to stay with a move and ignore noise. */
+var HeikinAshiChart = class extends PriceChart {
+	static meta = {
+		id: "heikin-ashi",
+		name: "Heikin-Ashi chart",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Averages each session with the last to filter noise, so runs of one colour mark a sustained trend.",
+		tags: [
+			"candles",
+			"trend",
+			"smoothed"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 72),
+		variants: {
+			smoothed: [false, true],
+			hollow: [false, true],
+			wicks: [true, false],
+			overlay: [
+				PriceOverlay.None,
+				PriceOverlay.EMA,
+				PriceOverlay.Keltner
+			],
+			volumeLayout: [
+				VolumeLayout.None,
+				VolumeLayout.Pane,
+				VolumeLayout.Overlay
+			],
+			scale: [PriceScale.Linear, PriceScale.Log]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			smoothed: false,
+			hollow: false,
+			wicks: true
+		};
+	}
+	shown(bars) {
+		return this.options.smoothed ? PriceTransforms.smoothed(bars) : PriceTransforms.heikinAshi(bars);
+	}
+	priceMarks(ctx, view, tones) {
+		PriceMarks.candles(ctx, view, tones, view.bars, {
+			body: this.options.hollow ? CandleBody.Hollow : CandleBody.Solid,
+			wicks: this.options.wicks
+		});
+	}
+};
+export { HeikinAshiChart };

package/dist/charts/financial/IchimokuCloud.js

@@ -0,0 +1,112 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { IchimokuLines, IchimokuPeriods, PriceMark, PriceScale } from "./financeEnums.js";
+import { FinanceInk } from "./FinanceInk.js";
+import { FinanceMath } from "./FinanceMath.js";
+import { PriceChart } from "./PriceChart.js";
+import { PriceMarks } from "./PriceMarks.js";
+// src/charts/financial/IchimokuCloud.ts
+/** Complete trend system: use the cloud for support and direction, the lines for momentum and timing. */
+var IchimokuCloud = class extends PriceChart {
+	static meta = {
+		id: "ichimoku-cloud",
+		name: "Ichimoku Cloud",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Projects a cloud of future support ahead of price, with conversion and base lines showing momentum.",
+		tags: [
+			"kumo",
+			"kinko hyo",
+			"trend",
+			"tenkan",
+			"kijun"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 130),
+		variants: {
+			periods: [
+				IchimokuPeriods.Classic,
+				IchimokuPeriods.Fast,
+				IchimokuPeriods.Slow
+			],
+			mark: [
+				PriceMark.Candles,
+				PriceMark.Line,
+				PriceMark.Bars
+			],
+			lines: [
+				IchimokuLines.All,
+				IchimokuLines.NoChikou,
+				IchimokuLines.CloudOnly
+			],
+			scale: [PriceScale.Linear, PriceScale.Log]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			periods: IchimokuPeriods.Classic,
+			mark: PriceMark.Candles,
+			lines: IchimokuLines.All
+		};
+	}
+	get windows() {
+		return this.options.periods.split("-").map(Number);
+	}
+	futureSessions() {
+		return this.windows[1];
+	}
+	twoTone() {
+		return this.options.mark !== PriceMark.Line;
+	}
+	compute(bars) {
+		const [fast, base, slow] = this.windows;
+		const highs = bars.map((bar) => bar.high), lows = bars.map((bar) => bar.low);
+		const middle = (period) => FinanceMath.midpoint(FinanceMath.highest(highs, period), FinanceMath.lowest(lows, period));
+		const tenkan = middle(fast), kijun = middle(base);
+		return {
+			tenkan,
+			kijun,
+			spanA: FinanceMath.midpoint(tenkan, kijun),
+			spanB: middle(slow),
+			chikou: bars.map((bar, i) => i < base ? null : bar.close),
+			shift: base
+		};
+	}
+	studies(bars) {
+		const { tenkan, kijun, spanA, spanB } = this.compute(bars);
+		return [{
+			name: "Ichimoku",
+			mid: tenkan,
+			upper: spanA,
+			lower: spanB
+		}, {
+			name: "Kijun",
+			mid: kijun
+		}];
+	}
+	drawStudies() {}
+	priceMarks(ctx, view, tones) {
+		const { tenkan, kijun, spanA, spanB, chikou, shift } = this.compute(view.bars);
+		const { x, y } = view;
+		const points = spanA.flatMap((a, i) => a === null || spanB[i] === null ? [] : [[
+			x(i + shift),
+			y(a),
+			y(spanB[i])
+		]]);
+		const cloud = FinanceInk.splitBand(points);
+		FinanceInk.fill(ctx, "kumo-bull", cloud.above || null, tones.up, .18);
+		FinanceInk.fill(ctx, "kumo-bear", cloud.below || null, tones.down, .18);
+		PriceMarks.line(ctx, view, "span-a", spanA, tones.up, 1, null, shift);
+		PriceMarks.line(ctx, view, "span-b", spanB, tones.down, 1, null, shift);
+		this.drawPrice(ctx, view, tones, this.options.mark);
+		const { lines } = this.options;
+		const hidden = lines === IchimokuLines.CloudOnly;
+		const color = (name) => hidden ? ctx.theme.axis : ctx.palette.color(name);
+		PriceMarks.line(ctx, view, "tenkan", hidden ? [] : tenkan, color("Tenkan"), 1.5);
+		PriceMarks.line(ctx, view, "kijun", hidden ? [] : kijun, color("Kijun"), 2);
+		const chikouOn = lines === IchimokuLines.All;
+		PriceMarks.line(ctx, view, "chikou", chikouOn ? chikou : [], chikouOn ? ctx.palette.color("Chikou") : ctx.theme.axis, 1.5, "4 3", -shift);
+	}
+};
+export { IchimokuCloud };

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