@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/threebars/BarField3DChart.js

@@ -0,0 +1,125 @@
+import { Orientation } from "../../core/enums.js";
+import { BOX3D, Cartesian3DChart } from "./Cartesian3DChart.js";
+import { Rows3D } from "./Rows3D.js";
+import { extent, mean, rollup, scaleBand, scaleLinear, sum } from "d3";
+// src/charts/threebars/BarField3DChart.ts
+/** Where the series dimension goes: across the floor, or packed into clusters inside each category. */
+var BarLayout3D = /* @__PURE__ */ function(BarLayout3D) {
+	BarLayout3D["Field"] = "field";
+	BarLayout3D["Cluster"] = "cluster";
+	return BarLayout3D;
+}({});
+var BarSort3D = /* @__PURE__ */ function(BarSort3D) {
+	BarSort3D["Input"] = "input";
+	BarSort3D["Descending"] = "descending";
+	BarSort3D["Ascending"] = "ascending";
+	return BarSort3D;
+}({});
+/** What the value axis measures. */
+var BarMeasure3D = /* @__PURE__ */ function(BarMeasure3D) {
+	BarMeasure3D["Absolute"] = "absolute";
+	BarMeasure3D["ShareOfCategory"] = "share-of-category";
+	BarMeasure3D["ShareOfSeries"] = "share-of-series";
+	return BarMeasure3D;
+}({});
+var BarBaseline3D = /* @__PURE__ */ function(BarBaseline3D) {
+	BarBaseline3D["Zero"] = "zero";
+	BarBaseline3D["Mean"] = "mean";
+	return BarBaseline3D;
+}({});
+/** Shared logic of category × series charts: aggregation, ordering, measures, layouts and axes. */
+var BarField3DChart = class extends Cartesian3DChart {
+	defaults() {
+		return {
+			...super.defaults(),
+			x: "category",
+			z: "series",
+			y: "value",
+			padding: .25,
+			layout: "field",
+			orientation: Orientation.Vertical,
+			sort: "input",
+			measure: "absolute",
+			baseline: "zero"
+		};
+	}
+	build(ctx) {
+		const { data, x, y, z, padding, layout, orientation, sort, measure, baseline, xTitle, yTitle, zTitle } = this.options;
+		const cells = Rows3D.cross(data, x, z, y);
+		const shares = (key) => rollup(cells, (group) => sum(group, (cell) => Math.abs(cell.value)) || 1, (cell) => cell[key]);
+		const byCategory = shares("x"), bySeries = shares("z");
+		const shown = cells.map((cell) => {
+			if (measure === "share-of-category") return cell.value / byCategory.get(cell.x) * 100;
+			return measure === "share-of-series" ? cell.value / bySeries.get(cell.z) * 100 : cell.value;
+		});
+		const totals = rollup(cells, (group) => sum(group, (cell) => cell.value), (cell) => cell.x);
+		const levels = Rows3D.levels(data, x).filter((level) => totals.has(level));
+		const categories = sort === "input" ? levels : Rows3D.sortBy(levels, (level) => totals.get(level), sort === "ascending" ? 1 : -1);
+		const series = Rows3D.levels(data, z).filter((level) => bySeries.has(level));
+		const base = baseline === "mean" ? mean(shown) ?? 0 : 0;
+		const [low = 0, high = 1] = extent([base, ...shown]);
+		const vertical = orientation !== Orientation.Horizontal;
+		const reach = vertical ? BOX3D.y : BOX3D.x;
+		const value = scaleLinear([low, high === low ? low + 1 : high], [-reach, reach * .96]).nice(5);
+		const clustered = layout === "cluster";
+		const depth = clustered ? .34 : BOX3D.z;
+		const extentAcross = vertical ? BOX3D.x : BOX3D.y;
+		const across = scaleBand(categories, [-extentAcross, extentAcross]).padding(clustered ? padding * .8 : padding);
+		const lanes = scaleBand(series, clustered ? [0, across.bandwidth()] : [-BOX3D.z, BOX3D.z]).padding(clustered ? .08 : padding);
+		const categoryAxis = Cartesian3DChart.bandAxis(across, xTitle ?? x);
+		const valueAxis = Cartesian3DChart.valueAxis(value, yTitle ?? (measure === "absolute" ? y : `% ${y}`));
+		const axes = {
+			x: vertical ? categoryAxis : valueAxis,
+			y: vertical ? valueAxis : categoryAxis,
+			z: clustered ? {
+				ticks: [],
+				rules: [],
+				title: ""
+			} : Cartesian3DChart.bandAxis(lanes, zTitle ?? z)
+		};
+		this.stage(ctx, axes, depth);
+		const bars = cells.map((cell, i) => {
+			const inner = across(cell.x) + (clustered ? lanes(cell.z) : 0);
+			const thick = clustered ? lanes.bandwidth() : across.bandwidth();
+			const center = inner + thick / 2;
+			const lane = clustered ? 0 : lanes(cell.z) + lanes.bandwidth() / 2;
+			const deep = clustered ? .34 : lanes.bandwidth();
+			const length = value(shown[i]) - value(base);
+			return {
+				from: vertical ? [
+					center,
+					value(base),
+					lane
+				] : [
+					value(base),
+					center,
+					lane
+				],
+				axis: vertical ? "y" : "x",
+				length,
+				width: thick,
+				depth: deep,
+				category: cell.x,
+				series: cell.z,
+				value: cell.value,
+				shown: shown[i]
+			};
+		});
+		this.draw(ctx, bars);
+	}
+	/** Series identity, or polarity when bars diverge from a non-zero baseline. */
+	tint(ctx, bar, bars) {
+		if (this.options.baseline !== "mean") return ctx.palette.color(bar.series || bar.category);
+		const peak = Math.max(...bars.map((other) => Math.abs(other.length))) || 1;
+		return ctx.palette.diverging(Math.sign(bar.length) * (.45 + .55 * Math.abs(bar.length) / peak));
+	}
+	tooltip(bar) {
+		const rows = [[bar.series || this.options.y, +bar.value.toFixed(2)]];
+		if (this.options.measure !== "absolute") rows.push(["Share", `${bar.shown.toFixed(1)}%`]);
+		return {
+			title: bar.category,
+			rows
+		};
+	}
+};
+export { BarBaseline3D, BarField3DChart, BarLayout3D, BarMeasure3D, BarSort3D };

package/dist/charts/threebars/Bubble3DChart.js

@@ -0,0 +1,89 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BOX3D, Cartesian3DChart } from "./Cartesian3DChart.js";
+import { PointCloud3DChart, PointCloudProjection3D } from "./PointCloud3DChart.js";
+import { Marks3D } from "./Marks3D.js";
+import { Rows3D } from "./Rows3D.js";
+import { max, scaleBand, scalePow, scaleSqrt } from "d3";
+import { SphereGeometry } from "three";
+// src/charts/threebars/Bubble3DChart.ts
+/** Which visual quantity is proportional to the value. */
+var BubbleSizing3D = /* @__PURE__ */ function(BubbleSizing3D) {
+	BubbleSizing3D["Area"] = "area";
+	BubbleSizing3D["Volume"] = "volume";
+	return BubbleSizing3D;
+}({});
+/** A 3D scatter whose spheres carry a fourth measure: for comparing size across positions in three dimensions. */
+var Bubble3DChart = class extends PointCloud3DChart {
+	static meta = {
+		id: "bubble-3d",
+		name: "3D bubble chart",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Adds a fourth measure to a 3D scatter by sizing spheres honestly, by cross-section area or by volume.",
+		tags: [
+			"bubble",
+			"sphere",
+			"four variables"
+		],
+		sample: (seed) => {
+			const depth = SampleData.points(seed + 1, 45, 3);
+			return SampleData.points(seed, 45, 3).map((row, i) => ({
+				...row,
+				z: depth[(i + 1) % depth.length].y
+			}));
+		},
+		variants: {
+			sizing: ["area", "volume"],
+			maxRadius: [.15, .09],
+			lanes: [false, true],
+			projection: [
+				PointCloudProjection3D.None,
+				PointCloudProjection3D.Floor,
+				PointCloudProjection3D.Walls
+			],
+			drops: [false, true],
+			scale: [ScaleKind.Linear, ScaleKind.Log]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			size: "size",
+			sizing: "area",
+			maxRadius: .15,
+			lanes: false
+		};
+	}
+	build(ctx) {
+		const { data, size, sizing, maxRadius, lanes, group, x, y, zTitle } = this.options;
+		const band = scaleBand(Rows3D.levels(data, group), [-BOX3D.z, BOX3D.z]).padding(.25);
+		const laneOf = lanes ? (row) => band(Rows3D.text(row[group])) + band.bandwidth() / 2 : void 0;
+		const { points, axes } = this.cloud(data, laneOf);
+		if (lanes) axes.z = Cartesian3DChart.bandAxis(band, zTitle ?? group);
+		this.stage(ctx, axes);
+		for (const point of points) this.tint(ctx, point);
+		const measure = (row) => Math.max(0, Rows3D.number(row[size]) ?? 0);
+		const top = max(points, (point) => measure(point.row)) || 1;
+		const radius = sizing === "volume" ? scalePow([0, top], [0, maxRadius]).exponent(1 / 3) : scaleSqrt([0, top], [0, maxRadius]);
+		const ordered = Rows3D.sortBy(points, (point) => measure(point.row), -1);
+		Marks3D.instanced(ctx, new SphereGeometry(1, 28, 20), ordered, {
+			place: (dummy, point, progress) => {
+				dummy.position.copy(point.at);
+				dummy.scale.setScalar(Math.max(.001, radius(measure(point.row)) * progress));
+			},
+			color: (point) => this.tint(ctx, point),
+			tip: ({ row, group: name }) => ({
+				title: name || void 0,
+				rows: [
+					[x, row[x]],
+					[y, row[y]],
+					[size, measure(row)]
+				]
+			})
+		});
+		this.guides(ctx, points);
+	}
+};
+export { Bubble3DChart, BubbleSizing3D };

package/dist/charts/threebars/Candlestick3DChart.js

@@ -0,0 +1,264 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BOX3D, Cartesian3DChart } from "./Cartesian3DChart.js";
+import { Marks3D, Prism3D } from "./Marks3D.js";
+import { Rows3D } from "./Rows3D.js";
+import { extent, max, mean, scaleBand, scaleLinear, scaleUtc } from "d3";
+import { Vector3 } from "three";
+// src/charts/threebars/Candlestick3DChart.ts
+var CandleKind3D = /* @__PURE__ */ function(CandleKind3D) {
+	CandleKind3D["Candle"] = "candle";
+	CandleKind3D["Ohlc"] = "ohlc";
+	CandleKind3D["HeikinAshi"] = "heikin-ashi";
+	return CandleKind3D;
+}({});
+/** How volume enters the scene. */
+var CandleVolume3D = /* @__PURE__ */ function(CandleVolume3D) {
+	CandleVolume3D["None"] = "none";
+	CandleVolume3D["Mat"] = "volume-mat";
+	CandleVolume3D["Depth"] = "volume-depth";
+	CandleVolume3D["Wall"] = "volume-wall";
+	return CandleVolume3D;
+}({});
+var CandleOverlay3D = /* @__PURE__ */ function(CandleOverlay3D) {
+	CandleOverlay3D["None"] = "none";
+	CandleOverlay3D["Average"] = "moving-average";
+	CandleOverlay3D["Band"] = "bollinger-band";
+	return CandleOverlay3D;
+}({});
+var WICK = .012;
+var TICK = .012;
+var LANE = -.34;
+/** Candles in space: price on the wall plane with volume laid out in depth, for reading trend and participation together. */
+var Candlestick3DChart = class extends Cartesian3DChart {
+	static meta = {
+		id: "candlestick-volume-3d",
+		name: "3D candlestick chart",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Draws open, high, low and close in space, using depth to show traded volume beside price.",
+		tags: [
+			"ohlc",
+			"stock",
+			"heikin ashi",
+			"volume",
+			"finance"
+		],
+		sample: (seed) => SampleData.ohlc(seed, 40),
+		variants: {
+			kind: [
+				"candle",
+				"ohlc",
+				"heikin-ashi"
+			],
+			volumeMode: [
+				"volume-mat",
+				"none",
+				"volume-depth",
+				"volume-wall"
+			],
+			overlay: [
+				"none",
+				"moving-average",
+				"bollinger-band"
+			],
+			scale: [ScaleKind.Linear, ScaleKind.Log]
+		},
+		valid: ({ kind, volumeMode }) => !(kind === "ohlc" && volumeMode === "volume-depth")
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			date: "date",
+			open: "open",
+			high: "high",
+			low: "low",
+			close: "close",
+			volume: "volume",
+			kind: "candle",
+			volumeMode: "volume-mat",
+			overlay: "none",
+			scale: ScaleKind.Linear,
+			window: 8
+		};
+	}
+	quotes() {
+		const { data, date, open, high, low, close, volume, kind } = this.options;
+		const quotes = data.flatMap((row) => {
+			const [o, h, l, c] = [
+				row[open],
+				row[high],
+				row[low],
+				row[close]
+			].map((cell) => Rows3D.number(cell));
+			if (o === null || h === null || l === null || c === null) return [];
+			const when = row[date];
+			return [{
+				label: Rows3D.text(when),
+				date: when instanceof Date ? when : null,
+				open: o,
+				high: Math.max(h, o, c),
+				low: Math.min(l, o, c),
+				close: c,
+				volume: Math.max(0, Rows3D.number(row[volume]) ?? 0)
+			}];
+		});
+		if (kind !== "heikin-ashi") return quotes;
+		let previous = quotes[0];
+		return quotes.map((quote) => {
+			const close = (quote.open + quote.high + quote.low + quote.close) / 4;
+			const open = (previous.open + previous.close) / 2;
+			previous = {
+				...quote,
+				open,
+				close
+			};
+			return {
+				...previous,
+				high: Math.max(quote.high, open, close),
+				low: Math.min(quote.low, open, close)
+			};
+		});
+	}
+	build(ctx) {
+		const { kind, volumeMode, overlay, scale, window, date, yTitle, xTitle, zTitle } = this.options;
+		const quotes = this.quotes();
+		const [low = 1, high = 2] = extent(quotes.flatMap((quote) => [quote.low, quote.high]));
+		const log = scale === ScaleKind.Log && low > 0;
+		const price = Scales.continuous(log ? ScaleKind.Log : ScaleKind.Linear).domain([low, high === low ? low + 1 : high]).range([-BOX3D.y * .96, BOX3D.y * .96]);
+		if (!log) price.nice(5);
+		const keys = quotes.map((_, i) => String(i));
+		const across = scaleBand(keys, [-BOX3D.x, BOX3D.x]).padding(.28);
+		const center = (i) => across(String(i)) + across.bandwidth() / 2;
+		const timeTicks = quotes.length > 1 && quotes.every((quote) => quote.date) ? scaleUtc([quotes[0].date, quotes[quotes.length - 1].date], [center(0), center(quotes.length - 1)]) : null;
+		const deep = volumeMode === "volume-mat" || volumeMode === "volume-wall" ? BOX3D.z : volumeMode === "volume-depth" ? .42 : .3;
+		const lane = volumeMode === "volume-mat" ? LANE : 0;
+		const peak = max(quotes, (quote) => quote.volume) || 1;
+		const reach = scaleLinear([0, peak], [0, BOX3D.z - lane - .04]);
+		this.stage(ctx, {
+			x: timeTicks ? Cartesian3DChart.timeAxis(timeTicks, xTitle ?? date) : Cartesian3DChart.bandAxis(across.copy().domain(keys), xTitle ?? date),
+			y: Cartesian3DChart.valueAxis(price, yTitle ?? "price"),
+			z: {
+				ticks: [],
+				rules: [],
+				title: volumeMode === "volume-mat" ? zTitle ?? "volume" : volumeMode === "volume-depth" ? zTitle ?? "body depth = volume" : ""
+			}
+		}, deep);
+		const polarity = (quote) => ctx.palette.diverging(quote.close >= quote.open ? -1 : 1);
+		const tip = (quote) => ({
+			title: quote.label,
+			color: polarity(quote),
+			rows: [
+				["Open", +quote.open.toFixed(2)],
+				["High", +quote.high.toFixed(2)],
+				["Low", +quote.low.toFixed(2)],
+				["Close", +quote.close.toFixed(2)],
+				["Volume", quote.volume]
+			]
+		});
+		const body = across.bandwidth();
+		const parts = (make) => quotes.flatMap((quote, i) => make(quote, i).map((span) => ({
+			...span,
+			quote
+		})));
+		const blocks = (items, tips = true) => Marks3D.instanced(ctx, Marks3D.prism(Prism3D.Box), items, {
+			place: (dummy, part, progress) => Marks3D.span(dummy, part, progress),
+			color: (part) => polarity(part.quote),
+			tip: tips ? (part) => tip(part.quote) : void 0
+		});
+		const thick = (quote) => volumeMode === "volume-depth" ? .05 + quote.volume / peak * .62 : body * 1.6;
+		blocks(parts((quote, i) => [{
+			from: [
+				center(i),
+				price(quote.low),
+				lane
+			],
+			axis: "y",
+			length: price(quote.high) - price(quote.low),
+			width: WICK,
+			depth: WICK
+		}]));
+		if (kind === "ohlc") blocks(parts((quote, i) => [{
+			from: [
+				center(i),
+				price(quote.open),
+				lane
+			],
+			axis: "x",
+			length: -body * .75,
+			width: TICK,
+			depth: TICK
+		}, {
+			from: [
+				center(i),
+				price(quote.close),
+				lane
+			],
+			axis: "x",
+			length: body * .75,
+			width: TICK,
+			depth: TICK
+		}]));
+		else blocks(parts((quote, i) => [{
+			from: [
+				center(i),
+				price(quote.open),
+				lane
+			],
+			axis: "y",
+			length: this.visible(price(quote.close) - price(quote.open)),
+			width: body,
+			depth: thick(quote)
+		}]));
+		if (volumeMode === "volume-mat") blocks(parts((quote, i) => [{
+			from: [
+				center(i),
+				-BOX3D.y + .012,
+				lane
+			],
+			axis: "z",
+			length: reach(quote.volume),
+			width: body,
+			depth: .024
+		}]));
+		if (volumeMode === "volume-wall") {
+			const tall = scaleLinear([0, peak], [.01, BOX3D.y * .7]);
+			blocks(parts((quote, i) => [{
+				from: [
+					center(i),
+					-BOX3D.y + .005,
+					-BOX3D.z + .03
+				],
+				axis: "y",
+				length: tall(quote.volume),
+				width: body,
+				depth: .03
+			}]));
+		}
+		if (overlay !== "none") this.overlayLines(ctx, quotes, center, price, lane, window);
+	}
+	/** Doji bodies still need a visible sliver. */
+	visible(length) {
+		return Math.abs(length) < .01 ? .01 : length;
+	}
+	overlayLines(ctx, quotes, center, price, lane, size) {
+		const front = lane + .04;
+		const stats = quotes.map((_, i) => {
+			const slice = quotes.slice(Math.max(0, i - size + 1), i + 1).map((quote) => quote.close);
+			const average = mean(slice);
+			return {
+				average,
+				spread: Math.sqrt(mean(slice, (value) => (value - average) ** 2)) * 2
+			};
+		}).slice(Math.min(size - 1, Math.max(0, quotes.length - 2)));
+		const skip = quotes.length - stats.length;
+		const trace = (read, name) => Marks3D.tube(ctx, stats.map((stat, i) => new Vector3(center(i + skip), price(read(stat)), front)), name === "Average" ? .0085 : .0055, name === "Average" ? ctx.theme.ink : ctx.theme.inkMuted, () => ({ title: name }));
+		trace((stat) => stat.average, "Average");
+		if (this.options.overlay !== "bollinger-band") return;
+		trace((stat) => stat.average + stat.spread, "Upper band");
+		trace((stat) => stat.average - stat.spread, "Lower band");
+	}
+};
+export { CandleKind3D, CandleOverlay3D, CandleVolume3D, Candlestick3DChart };