@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/threebars/Cartesian3DChart.js

@@ -0,0 +1,249 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { Scales } from "../../core/Scales.js";
+import { ticks, utcFormat } from "d3";
+import { BackSide, BoxGeometry, BufferGeometry, Float32BufferAttribute, Group, Mesh, MeshBasicMaterial, MeshStandardMaterial, PlaneGeometry, Vector3 } from "three";
+// src/charts/threebars/Cartesian3DChart.ts
+/** How much of the reference box is drawn around the data. */
+var BoxFrame = /* @__PURE__ */ function(BoxFrame) {
+	BoxFrame["Full"] = "full";
+	BoxFrame["Floor"] = "floor";
+	BoxFrame["Open"] = "open";
+	return BoxFrame;
+}({});
+/** Half-extents of the reference box. */
+var BOX3D = {
+	x: 1,
+	y: .66,
+	z: 1
+};
+var KEYS = [
+	"x",
+	"y",
+	"z"
+];
+var RULE = .0045;
+var RAIL = .009;
+var FOV = 19 * (Math.PI / 180);
+var CHAR = 5.7;
+var MAX_CHARS = 12;
+/**
+* A chart inside a reference box. Walls are back-face culled and the axes hop between edges,
+* so grids stay behind the data and labels stay on the near side as the viewer orbits.
+*/
+var Cartesian3DChart = class extends Chart3D {
+	defaults() {
+		return {
+			frame: "full",
+			distance: 5.5,
+			elevation: 30
+		};
+	}
+	static bandAxis(scale, title = "") {
+		const domain = scale.domain();
+		const half = scale.step() * scale.paddingInner() / 2;
+		return {
+			title: domain.length > 1 ? title : "",
+			ticks: domain.length > 1 || domain[0] ? domain.filter(Boolean).map((text) => ({
+				at: scale(text) + scale.bandwidth() / 2,
+				text
+			})) : [],
+			rules: domain.slice(1).map((name) => scale(name) - half)
+		};
+	}
+	static valueAxis(scale, title = "", count = 5, read = (value) => value) {
+		const [low, high] = scale.domain();
+		const reach = Math.abs(high - low);
+		const [start, end] = scale.range();
+		const room = Math.abs(end - start) / (count + 2);
+		let last = -Infinity;
+		const spaced = (candidates) => candidates.filter((value) => {
+			const clear = Math.abs(scale(value) - last) >= room;
+			if (clear) last = scale(value);
+			return clear;
+		});
+		let values = spaced(scale.ticks(count));
+		if (values.length < 3) {
+			last = -Infinity;
+			values = spaced(ticks(low, high, count));
+		}
+		return {
+			title,
+			rules: values.map((value) => scale(value)),
+			ticks: values.map((value) => ({
+				at: scale(value),
+				text: Scales.format(read(value), Math.abs(read(high)) + reach)
+			}))
+		};
+	}
+	static timeAxis(scale, title = "", count = 4) {
+		const days = (+scale.domain()[1] - +scale.domain()[0]) / 864e5;
+		const label = utcFormat(days > 700 ? "%Y" : days > 3 ? "%b %-d" : "%H:%M");
+		const values = scale.ticks(count);
+		return {
+			title,
+			rules: values.map((value) => scale(value)),
+			ticks: values.map((value) => ({
+				at: scale(value),
+				text: label(value)
+			}))
+		};
+	}
+	/** Draws the box. `depth` shrinks the z half-extent for charts that only need a slab. */
+	stage(ctx, axes, depth = BOX3D.z) {
+		const box = {
+			...BOX3D,
+			z: depth
+		};
+		const { frame } = this.options;
+		if (frame !== "open") ctx.root.add(this.panel(ctx, box), this.grid(ctx, box, axes));
+		this.rails(ctx, box, axes);
+	}
+	panel(ctx, box) {
+		const full = this.options.frame === "full";
+		const geometry = full ? new BoxGeometry(box.x * 2, box.y * 2, box.z * 2) : new PlaneGeometry(box.x * 2, box.z * 2).rotateX(-Math.PI / 2).translate(0, -box.y, 0);
+		const mesh = new Mesh(geometry, new MeshStandardMaterial({
+			color: ctx.theme.surface,
+			roughness: 1,
+			metalness: 0,
+			side: full ? BackSide : void 0
+		}));
+		mesh.receiveShadow = true;
+		return mesh;
+	}
+	/** Rules are thin quads wound inward, so they disappear with the wall they sit on. */
+	grid(ctx, box, axes) {
+		const floorOnly = this.options.frame === "floor";
+		const positions = [];
+		for (const normal of KEYS) for (const side of [-1, 1]) {
+			if (floorOnly && (normal !== "y" || side !== -1)) continue;
+			const [a, b] = KEYS.filter((key) => key !== normal);
+			for (const [along, across] of [[a, b], [b, a]]) for (const at of axes[across].rules) {
+				const start = new Vector3().setComponent(KEYS.indexOf(normal), side * (box[normal] - .002)).setComponent(KEYS.indexOf(across), at).setComponent(KEYS.indexOf(along), -box[along]);
+				const end = start.clone().setComponent(KEYS.indexOf(along), box[along]);
+				const wide = new Vector3().setComponent(KEYS.indexOf(across), RULE);
+				const [p, q] = new Vector3().subVectors(end, start).cross(wide).getComponent(KEYS.indexOf(normal)) * side > 0 ? [end, start] : [start, end];
+				const corners = [
+					p.clone().sub(wide),
+					q.clone().sub(wide),
+					q.clone().add(wide),
+					p.clone().sub(wide),
+					q.clone().add(wide),
+					p.clone().add(wide)
+				];
+				for (const corner of corners) positions.push(corner.x, corner.y, corner.z);
+			}
+		}
+		const geometry = new BufferGeometry().setAttribute("position", new Float32BufferAttribute(positions, 3));
+		return new Mesh(geometry, new MeshBasicMaterial({ color: ctx.theme.grid }));
+	}
+	rails(ctx, box, axes) {
+		const ink = new MeshBasicMaterial({ color: ctx.theme.axis });
+		const rail = (size, at, parent) => {
+			const mesh = new Mesh(new BoxGeometry(...size), ink);
+			mesh.position.set(...at);
+			mesh.frustumCulled = false;
+			parent.add(mesh);
+			return mesh;
+		};
+		const xSide = new Group(), zSide = new Group(), ySide = new Group();
+		ctx.root.add(xSide, zSide, ySide);
+		const xRail = rail([
+			box.x * 2,
+			RAIL,
+			RAIL
+		], [
+			0,
+			-box.y,
+			box.z
+		], xSide);
+		rail([
+			RAIL,
+			RAIL,
+			box.z * 2
+		], [
+			box.x,
+			-box.y,
+			0
+		], zSide);
+		rail([
+			RAIL,
+			box.y * 2,
+			RAIL
+		], [
+			box.x,
+			0,
+			box.z
+		], ySide);
+		const { x, z } = this.thinned(axes);
+		const low = -box.y - .07;
+		const xLabels = x.map(({ at, text }) => ctx.label(text, [
+			at,
+			low,
+			box.z + .05
+		], "secondary", 10, xSide));
+		const zLabels = z.map(({ at, text }) => ctx.label(text, [
+			box.x + .05,
+			low,
+			at
+		], "secondary", 10, zSide));
+		for (const { center } of [...xLabels, ...zLabels]) center.y = 0;
+		for (const { at, text } of axes.y.ticks) ctx.label(text, [
+			box.x + .05,
+			at,
+			box.z + .05
+		], "secondary", 10, ySide).center.x = 1;
+		if (axes.x.title) ctx.label(axes.x.title, [
+			0,
+			low,
+			box.z + .62
+		], "muted", 11, xSide).center.y = 0;
+		if (axes.z.title) ctx.label(axes.z.title, [
+			box.x + .62,
+			low,
+			0
+		], "muted", 11, zSide).center.y = 0;
+		if (axes.y.title) ctx.label(axes.y.title, [
+			box.x,
+			box.y + .07,
+			box.z
+		], "muted", 11, ySide).center.y = 1;
+		let quadrant = "";
+		const aim = (cameraX, cameraZ) => {
+			const sideX = cameraX >= 0 ? 1 : -1, sideZ = cameraZ >= 0 ? 1 : -1;
+			if (quadrant === `${sideX}${sideZ}`) return;
+			quadrant = `${sideX}${sideZ}`;
+			xSide.scale.z = sideZ;
+			zSide.scale.x = sideX;
+			ySide.scale.set(-sideZ, 1, sideX);
+			const xLeft = sideX * sideZ > 0;
+			for (const { center } of xLabels) center.x = xLeft ? 1 : 0;
+			for (const { center } of zLabels) center.x = xLeft ? 0 : 1;
+		};
+		const azimuth = (this.options.azimuth ?? 38) * Math.PI / 180;
+		aim(Math.sin(azimuth), Math.cos(azimuth));
+		xRail.onBeforeRender = (_renderer, _scene, camera) => aim(camera.position.x, camera.position.z);
+	}
+	/** Drops every nth tick label when neighbours would collide at the opening view. */
+	thinned(axes) {
+		const { azimuth = 38, elevation = 26, distance = 5.4 } = this.options;
+		const pixels = this.size.height / (2 * distance * Math.tan(FOV));
+		const a = azimuth * Math.PI / 180;
+		const tilt = Math.abs(Math.sin(elevation * Math.PI / 180));
+		const every = (ticks, across, down) => {
+			if (ticks.length < 2) return ticks;
+			const gap = Math.abs(ticks[1].at - ticks[0].at) * pixels;
+			const wide = Math.max(...ticks.map(({ text }) => text.length)) * CHAR + 8;
+			const stride = Math.ceil(Math.min(wide / Math.max(gap * across, .001), 15 / Math.max(gap * down, .001)));
+			return ticks.filter((_, i) => i % stride === 0);
+		};
+		const clip = (ticks) => ticks.map((tick) => ({
+			...tick,
+			text: tick.text.length > MAX_CHARS ? `${tick.text.slice(0, 11)}…` : tick.text
+		}));
+		return {
+			x: every(clip(axes.x.ticks), Math.abs(Math.cos(a)), Math.abs(Math.sin(a)) * tilt),
+			z: every(clip(axes.z.ticks), Math.abs(Math.sin(a)), Math.abs(Math.cos(a)) * tilt)
+		};
+	}
+};
+export { BOX3D, BoxFrame, Cartesian3DChart };

package/dist/charts/threebars/CurveSampler3D.js

@@ -0,0 +1,36 @@
+import { Scales } from "../../core/Scales.js";
+import { curveCatmullRomClosed, line } from "d3";
+// src/charts/threebars/CurveSampler3D.ts
+var STEPS = 10;
+/** Flattens a d3 curve into points, so three.js geometry follows the same interpolation as the 2D charts. */
+var CurveSampler3D = class CurveSampler3D {
+	static sample(points, kind) {
+		return points.length < 2 ? points : CurveSampler3D.trace(points, Scales.curve(kind));
+	}
+	/** Smooth closed loop through a ring of points. */
+	static closed(points) {
+		return points.length < 3 ? points : CurveSampler3D.trace(points, curveCatmullRomClosed);
+	}
+	static trace(points, curve) {
+		const out = [];
+		line().curve(curve).context({
+			moveTo: (x, y) => {
+				out.push([x, y]);
+			},
+			lineTo: (x, y) => {
+				out.push([x, y]);
+			},
+			closePath: () => void 0,
+			bezierCurveTo: (x1, y1, x2, y2, x, y) => {
+				const [x0, y0] = out[out.length - 1];
+				for (let i = 1; i <= STEPS; i++) {
+					const t = i / STEPS, u = 1 - t;
+					const a = u * u * u, b = 3 * u * u * t, c = 3 * u * t * t, d = t * t * t;
+					out.push([a * x0 + b * x1 + c * x2 + d * x, a * y0 + b * y1 + c * y2 + d * y]);
+				}
+			}
+		})(points);
+		return out;
+	}
+};
+export { CurveSampler3D };

package/dist/charts/threebars/Cylinder3DBars.js

@@ -0,0 +1,54 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BarField3DChart, BarLayout3D, BarMeasure3D, BarSort3D } from "./BarField3DChart.js";
+import { Marks3D, Prism3D } from "./Marks3D.js";
+// src/charts/threebars/Cylinder3DBars.ts
+/** Round columns for two-dimensional comparisons where the softer silhouette separates a dense floor better than boxes. */
+var Cylinder3DBars = class extends BarField3DChart {
+	static meta = {
+		id: "cylinder-3d-bars",
+		name: "3D cylinder bars",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Stands round columns, cones or frustums on a category by series floor, with height showing the value.",
+		tags: [
+			"cylinder",
+			"cone",
+			"column",
+			"tower"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 4),
+		variants: {
+			shape: [
+				Prism3D.Cylinder,
+				Prism3D.Cone,
+				Prism3D.Frustum
+			],
+			layout: [BarLayout3D.Field, BarLayout3D.Cluster],
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			sort: [BarSort3D.Input, BarSort3D.Ascending],
+			measure: [BarMeasure3D.Absolute, BarMeasure3D.ShareOfCategory]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			shape: Prism3D.Cylinder,
+			padding: .3
+		};
+	}
+	draw(ctx, bars) {
+		const round = bars.map((bar) => ({
+			...bar,
+			depth: Math.min(bar.width, bar.depth),
+			width: Math.min(bar.width, bar.depth)
+		}));
+		Marks3D.instanced(ctx, Marks3D.prism(this.options.shape), round, {
+			place: (dummy, bar, progress) => Marks3D.span(dummy, bar, progress),
+			color: (bar) => this.tint(ctx, bar, round),
+			tip: (bar) => this.tooltip(bar)
+		});
+	}
+};
+export { Cylinder3DBars };

package/dist/charts/threebars/Donut3DChart.js

@@ -0,0 +1,58 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Round3DChart, SliceDepth3D, SliceExplode3D, SliceSort3D, SliceSweep3D } from "./Round3DChart.js";
+import { Rows3D } from "./Rows3D.js";
+// src/charts/threebars/Donut3DChart.ts
+var RADIUS = 1;
+var RING_GAP = .03;
+/** Extruded ring: leaves the centre free and can nest one ring per series to compare composition across them. */
+var Donut3DChart = class extends Round3DChart {
+	static meta = {
+		id: "donut-3d",
+		name: "3D donut chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Extrudes a ring of slices into solids, with optional nested rings to compare composition across series.",
+		tags: [
+			"doughnut",
+			"ring",
+			"nested",
+			"part to whole"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 3),
+		variants: {
+			innerRadius: [
+				.55,
+				.35,
+				.72
+			],
+			rings: [false, "series"],
+			depth: [
+				SliceDepth3D.Uniform,
+				SliceDepth3D.ByValue,
+				SliceDepth3D.ByRank
+			],
+			explode: [SliceExplode3D.None, SliceExplode3D.All],
+			sort: [SliceSort3D.Input, SliceSort3D.Descending],
+			sweep: [SliceSweep3D.Full, SliceSweep3D.Half]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			innerRadius: .55,
+			rings: false
+		};
+	}
+	build(ctx) {
+		const { data, innerRadius, rings } = this.options;
+		const hole = RADIUS * innerRadius;
+		if (!rings) return this.sectors(ctx, this.ring(this.parts(data), 0, hole, RADIUS));
+		const levels = Rows3D.levels(data, rings);
+		const width = (RADIUS - hole) / Math.max(levels.length, 1);
+		const slices = levels.flatMap((level, i) => this.ring(this.parts(data.filter((row) => Rows3D.text(row[rings]) === level)), i, hole + i * width, hole + (i + 1) * width - RING_GAP));
+		this.sectors(ctx, slices);
+	}
+};
+export { Donut3DChart };

package/dist/charts/threebars/Funnel3DChart.js

@@ -0,0 +1,86 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TIER_HEIGHT, TIER_RADIUS, Tier3DChart, TierSection3D, TierSort3D } from "./Tier3DChart.js";
+// src/charts/threebars/Funnel3DChart.ts
+/** What encodes each stage. */
+var FunnelEncoding3D = /* @__PURE__ */ function(FunnelEncoding3D) {
+	FunnelEncoding3D["Area"] = "area";
+	FunnelEncoding3D["Radius"] = "radius";
+	FunnelEncoding3D["Height"] = "height";
+	return FunnelEncoding3D;
+}({});
+var FunnelTaper3D = /* @__PURE__ */ function(FunnelTaper3D) {
+	FunnelTaper3D["Smooth"] = "smooth";
+	FunnelTaper3D["Stepped"] = "stepped";
+	return FunnelTaper3D;
+}({});
+/** A solid funnel of sequential stages: for conversion, with cross-section area or radius showing what survives each step. */
+var Funnel3DChart = class extends Tier3DChart {
+	static meta = {
+		id: "funnel-3d",
+		name: "3D funnel chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Stacks sequential stages into a solid funnel, showing how much of a quantity survives each step.",
+		tags: [
+			"conversion",
+			"pipeline",
+			"stages",
+			"drop-off"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 1).map((row, i) => ({
+			...row,
+			value: +row.value * .5 + 100 - i * 14
+		})),
+		variants: {
+			encoding: [
+				"area",
+				"radius",
+				"height"
+			],
+			taper: ["smooth", "stepped"],
+			section: [
+				TierSection3D.Round,
+				TierSection3D.Square,
+				TierSection3D.Hexagon
+			],
+			sort: [TierSort3D.Descending, TierSort3D.Input],
+			gap: [.03, 0]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			encoding: "area",
+			taper: "smooth"
+		};
+	}
+	build(ctx) {
+		const { encoding, taper } = this.options;
+		const stages = this.stages();
+		const first = stages[0]?.value || 1;
+		const peak = Math.max(...stages.map((stage) => stage.value), 1);
+		const low = Math.min(...stages.map((stage) => stage.value), peak);
+		const total = stages.reduce((sum, stage) => sum + stage.value, 0) || 1;
+		const radius = (value) => TIER_RADIUS * (encoding === "radius" ? value / peak : Math.sqrt(value / peak));
+		let top = TIER_HEIGHT / 2;
+		const tiers = stages.map((stage, i) => {
+			const height = encoding === "height" ? stage.value / total * TIER_HEIGHT : TIER_HEIGHT / stages.length;
+			const next = stages[i + 1]?.value ?? stage.value * .72;
+			const tier = {
+				key: stage.key,
+				value: stage.value,
+				share: stage.value / first,
+				radiusTop: radius(stage.value),
+				radiusBottom: taper === "stepped" ? radius(stage.value) : radius(next),
+				top,
+				bottom: top - height
+			};
+			top -= height;
+			return tier;
+		});
+		this.solid(ctx, tiers, (tier) => ctx.palette.sequential(.25 + .7 * (tier.value - low) / (peak - low || 1)));
+	}
+};
+export { Funnel3DChart, FunnelEncoding3D, FunnelTaper3D };