@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/financial/VolatilitySurface.js

@@ -0,0 +1,197 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { VolatilitySurfaceForm } from "./financeEnums.js";
+import { extent, scaleLinear, scaleSqrt } from "d3";
+import { BoxGeometry, BufferAttribute, BufferGeometry, DoubleSide, InstancedMesh, LineBasicMaterial, LineSegments, Mesh, MeshStandardMaterial, Object3D, PlaneGeometry } from "three";
+// src/charts/financial/VolatilitySurface.ts
+var BASE = -.7;
+var RISE = 1.35;
+var TERRACES = 8;
+/** Implied volatility across strike and expiry: use it to see smile, skew and term structure together. */
+var VolatilitySurface = class extends Chart3D {
+	static meta = {
+		id: "volatility-surface",
+		name: "Volatility surface",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Three,
+		shape: DataShape.Grid,
+		description: "Maps implied volatility over strike and expiry as a 3D surface, exposing smile, skew and term structure.",
+		tags: [
+			"implied volatility",
+			"smile",
+			"skew",
+			"options",
+			"term structure"
+		],
+		sample: (seed) => {
+			const { x, y, z } = SampleData.surface(seed, 30);
+			return {
+				x: x.map((value) => +(100 + value * 40).toFixed(1)),
+				y: y.map((value) => Math.round(30 + (value + 1) * 165)),
+				z: z.map((row, j) => row.map((wobble, i) => {
+					const money = x[i], tenor = (y[j] + 1) / 2;
+					return +(18 + (20 - 10 * tenor) * money * money - 5 * money + 2 * wobble + 4 * Math.exp(-tenor * 3)).toFixed(2);
+				}))
+			};
+		},
+		variants: {
+			form: [
+				VolatilitySurfaceForm.Mesh,
+				VolatilitySurfaceForm.Wireframe,
+				VolatilitySurfaceForm.Slices,
+				VolatilitySurfaceForm.Terraces
+			],
+			floorMap: [false, true],
+			rootTime: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			form: VolatilitySurfaceForm.Mesh,
+			floorMap: false,
+			rootTime: false
+		};
+	}
+	build(ctx) {
+		const { data, form, floorMap, rootTime } = this.options;
+		const rows = data?.z?.length ?? 0, columns = data?.x?.length ?? 0;
+		const floor = new Mesh(new PlaneGeometry(2.3, 2.3), new MeshStandardMaterial({ color: ctx.theme.grid }));
+		floor.rotation.x = -Math.PI / 2;
+		floor.position.y = -.71;
+		floor.receiveShadow = true;
+		ctx.root.add(floor);
+		if (rows < 2 || columns < 2) return;
+		const across = scaleLinear(extent(data.x), [-1, 1]);
+		const depth = (rootTime ? scaleSqrt() : scaleLinear()).domain(extent(data.y)).range([1, -1]);
+		const [low, high] = extent(data.z.flat());
+		const unit = scaleLinear([low, high === low ? low + 1 : high], [0, 1]);
+		const level = (value) => form === VolatilitySurfaceForm.Terraces ? Math.round(unit(value) * TERRACES) / TERRACES : unit(value);
+		const sheet = (flat) => {
+			const positions = new Float32Array(rows * columns * 3), colors = new Float32Array(rows * columns * 3);
+			data.y.forEach((day, j) => data.x.forEach((strike, i) => {
+				const at = (j * columns + i) * 3, height = level(data.z[j][i]);
+				positions.set([
+					across(strike),
+					flat ? BASE : BASE + height * RISE,
+					depth(day)
+				], at);
+				const tint = ctx.color(ctx.palette.sequential(.15 + height * .85));
+				colors.set([
+					tint.r,
+					tint.g,
+					tint.b
+				], at);
+			}));
+			const indices = [];
+			for (let j = 0; j < rows - 1; j++) for (let i = 0; i < columns - 1; i++) {
+				const a = j * columns + i, b = a + 1, c = a + columns, d = c + 1;
+				indices.push(a, c, b, b, c, d);
+			}
+			const geometry = new BufferGeometry();
+			geometry.setAttribute("position", new BufferAttribute(positions, 3));
+			geometry.setAttribute("color", new BufferAttribute(colors, 3));
+			geometry.setIndex(indices);
+			geometry.computeVertexNormals();
+			return geometry;
+		};
+		if (form === VolatilitySurfaceForm.Mesh) {
+			const surface = new Mesh(sheet(false), new MeshStandardMaterial({
+				vertexColors: true,
+				roughness: .6,
+				side: DoubleSide
+			}));
+			surface.castShadow = surface.receiveShadow = true;
+			ctx.root.add(surface);
+			ctx.reveal((progress) => {
+				surface.scale.y = Math.max(.001, progress);
+				surface.position.y = BASE * (1 - progress);
+			});
+			ctx.pick(surface, () => ({
+				title: "Implied volatility",
+				rows: [["Range", `${low.toFixed(1)}–${high.toFixed(1)}%`]]
+			}));
+		} else if (form === VolatilitySurfaceForm.Terraces) this.terraces(ctx, level, across, depth);
+		else this.lines(ctx, sheet(false), rows, columns, form === VolatilitySurfaceForm.Slices);
+		if (floorMap) {
+			const shadow = new Mesh(sheet(true), new MeshStandardMaterial({
+				vertexColors: true,
+				roughness: .9,
+				side: DoubleSide
+			}));
+			shadow.receiveShadow = true;
+			ctx.root.add(shadow);
+		}
+		ctx.label("Strike", [
+			0,
+			-.82,
+			1.28
+		], "secondary", 11);
+		ctx.label("Expiry", [
+			1.3,
+			-.82,
+			0
+		], "secondary", 11);
+		ctx.label(`${high.toFixed(0)}%`, [
+			-1.12,
+			.6500000000000001,
+			-1.05
+		], "muted", 10);
+		ctx.label(`${low.toFixed(0)}%`, [
+			-1.12,
+			BASE,
+			-1.05
+		], "muted", 10);
+	}
+	/** One stepped column per grid cell, so volatility regimes read as contour bands. */
+	terraces(ctx, level, across, depth) {
+		const { x, y, z } = this.options.data;
+		const wide = 2 / (x.length - 1), dummy = new Object3D();
+		const cells = y.flatMap((day, j) => x.map((strike, i) => ({
+			strike,
+			day,
+			height: Math.max(.02, level(z[j][i]) * RISE),
+			value: z[j][i]
+		})));
+		const columns = new InstancedMesh(new BoxGeometry(wide * .94, 1, wide * .94), new MeshStandardMaterial({ roughness: .55 }), cells.length);
+		columns.castShadow = columns.receiveShadow = true;
+		cells.forEach((cell, i) => columns.setColorAt(i, ctx.color(ctx.palette.sequential(.15 + cell.height / RISE * .85))));
+		ctx.reveal((progress) => {
+			cells.forEach((cell, i) => {
+				const tall = Math.max(.002, cell.height * progress);
+				dummy.position.set(across(cell.strike), BASE + tall / 2, depth(cell.day));
+				dummy.scale.set(1, tall, 1);
+				dummy.updateMatrix();
+				columns.setMatrixAt(i, dummy.matrix);
+			});
+			columns.instanceMatrix.needsUpdate = true;
+		});
+		ctx.root.add(columns);
+		ctx.pick(columns, (i) => ({
+			title: `Strike ${cells[i].strike}`,
+			rows: [["Days", cells[i].day], ["Implied vol", `${cells[i].value.toFixed(1)}%`]]
+		}));
+	}
+	/** Grid or per-expiry lines taken from the sheet's vertices, keeping vertex colours. */
+	lines(ctx, sheet, rows, columns, slices) {
+		const pairs = [];
+		for (let j = 0; j < rows; j += slices ? 3 : 1) for (let i = 0; i < columns - 1; i++) pairs.push(j * columns + i, j * columns + i + 1);
+		if (!slices) for (let i = 0; i < columns; i++) for (let j = 0; j < rows - 1; j++) pairs.push(j * columns + i, (j + 1) * columns + i);
+		const geometry = new BufferGeometry();
+		for (const name of ["position", "color"]) {
+			const source = sheet.getAttribute(name);
+			geometry.setAttribute(name, new BufferAttribute(Float32Array.from(pairs.flatMap((index) => [
+				source.getX(index),
+				source.getY(index),
+				source.getZ(index)
+			])), 3));
+		}
+		const lines = new LineSegments(geometry, new LineBasicMaterial({ vertexColors: true }));
+		ctx.root.add(lines);
+		ctx.reveal((progress) => {
+			lines.scale.y = Math.max(.001, progress);
+			lines.position.y = BASE * (1 - progress);
+		});
+	}
+};
+export { VolatilitySurface };

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