@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/core/Chart2D.js

@@ -0,0 +1,286 @@
+import { Chart } from "./Chart.js";
+import { ChartExporter, ExportFormat } from "./ChartExporter.js";
+import { Context2D } from "./Context2D.js";
+import { LegendPosition, RenderType } from "./enums.js";
+import { KeyboardNav } from "./KeyboardNav.js";
+import { MarkOrigin } from "./MarkOrigin.js";
+import { MarkStyle } from "./MarkStyle.js";
+import { TextFit } from "./TextFit.js";
+import { select } from "d3";
+// src/core/Chart2D.ts
+var ROW = 22;
+var CHAR = 6.4;
+/** Swatch and gap before an entry's text. */
+var INDENT = 15;
+/** Empty space kept between a legend's text and the edge of the chart. */
+var EDGE = 8;
+/** How far in from the right edge a right legend starts. */
+var RAIL = 112;
+/** Layout, title, legend and SVG root for all d3 charts. Subclasses implement `draw`. */
+var Chart2D = class Chart2D extends Chart {
+	svg = null;
+	#legendRows = 1;
+	#keyboard = null;
+	#marks = null;
+	/** Canvas when the marks live outside the SVG, which is what `finishCopy` has to add back to an export. */
+	get renderer() {
+		return this.finishCopy === Chart2D.prototype.finishCopy ? RenderType.Svg : RenderType.Canvas;
+	}
+	/** Room the marks need around the plot, excluding title and legend. */
+	plotMargin() {
+		return {
+			top: 12,
+			right: 16,
+			bottom: 16,
+			left: 16
+		};
+	}
+	/** True while marks move by the chart's own clock, which an export stops with a paint and restarts with another. */
+	get looping() {
+		return false;
+	}
+	/** Adds what the SVG alone cannot show to an export. Runs while the chart is still drawn. */
+	finishCopy(_copy) {}
+	/** Legend entries. Defaults to every key given to `palette.color` during `draw`. */
+	legendItems() {
+		return this.palette.items();
+	}
+	/** The legend's size depends on what `draw` colours, so a change of row count lays out once more. */
+	paint() {
+		this.#readyMarks();
+		this.#layoutOnce();
+		const rows = this.#fitLegend();
+		if (rows !== this.#legendRows) {
+			this.#legendRows = rows;
+			this.#layoutOnce();
+		}
+		this.#marks?.apply(this.svg.node());
+		if (this.liveFrame) Context2D.releaseHover(this.svg.node());
+	}
+	/** Drawing starts from the chart's own values, and with no style there is nothing to keep. */
+	#readyMarks() {
+		const style = this.options.chartStyle;
+		if (MarkStyle.wanted(style)) (this.#marks ??= new MarkStyle()).begin(style, this.theme);
+		else if (this.#marks) {
+			this.#marks.end();
+			this.#marks = null;
+		}
+	}
+	#shownLegend() {
+		if (this.legendPosition === LegendPosition.None) return [];
+		const items = this.legendItems();
+		return items.length >= 2 ? items : [];
+	}
+	#fitLegend() {
+		const items = this.#shownLegend();
+		if (this.legendPosition === LegendPosition.Right) return items.length ? 1 : 0;
+		const room = this.size.width - 24;
+		let rows = items.length ? 1 : 0, x = 0;
+		for (const item of items) {
+			const cost = this.#legendCost(this.#legendText(item));
+			if (x && x + cost > room) {
+				rows++;
+				x = 0;
+			}
+			x += cost;
+		}
+		return rows;
+	}
+	/** An entry's text, cut to what is left beside its swatch. */
+	#legendText(item) {
+		const room = this.legendPosition === LegendPosition.Right ? 97 : this.size.width - 16 - INDENT - EDGE;
+		return TextFit.fit(item.label ?? item.key, room, CHAR * this.fontScale);
+	}
+	#legendCost(text) {
+		return 32 + TextFit.width(text, CHAR * this.fontScale);
+	}
+	#layoutOnce() {
+		const { width, height } = this.size;
+		const { title, subtitle } = this.options;
+		if (!this.svg) {
+			this.svg = select(this.host).append("svg").attr("role", "img").style("display", "block").style("max-width", "100%");
+			this.svg.append("title");
+			this.svg.append("g").attr("class", "g-header");
+			this.svg.append("g").attr("class", "g-plot");
+			this.svg.append("g").attr("class", "g-legend");
+		}
+		const svg = this.svg;
+		svg.attr("viewBox", `0 0 ${width} ${height}`).attr("width", width).attr("height", height).attr("aria-label", this.label).style("background", this.theme.surface).style("font-family", this.theme.fontFamily);
+		svg.select("title").text(this.label);
+		const headerHeight = ((title ? 24 : 0) + (subtitle ? 18 : 0)) * this.textRoom;
+		const margin = this.margin(this.plotMargin());
+		const position = this.legendPosition;
+		const reserve = position === LegendPosition.Top || position === LegendPosition.Bottom ? ROW * this.textRoom * this.#legendRows : 0;
+		const rail = position === LegendPosition.Right && this.#legendRows ? 120 : 0;
+		const top = headerHeight + margin.top + (position === LegendPosition.Top ? reserve : 0);
+		const plot = {
+			x: 0,
+			y: 0,
+			width: Math.max(10, width - margin.left - margin.right - rail),
+			height: Math.max(10, height - top - margin.bottom - (position === LegendPosition.Bottom ? reserve : 0))
+		};
+		const root = svg.select("g.g-plot").attr("transform", `translate(${margin.left},${top})`);
+		const ctx = new Context2D(svg, root, plot, this.theme, this.palette, this.animated, (event, content) => this.tip(event, content), () => this.untip(), (datum) => this.options.onSelect?.(MarkOrigin.of(datum, this.options)), this.#readyKeyboard({
+			...plot,
+			x: margin.left,
+			y: top
+		})?.register);
+		ctx.live = this.liveFrame;
+		ctx.marking = this.#marks;
+		this.drawHeader(svg, width);
+		if (this.options.data != null) this.draw(ctx);
+		else root.selectAll("*").remove();
+		this.drawLegend(svg, width, height, headerHeight, plot.height, top, margin);
+		this.#keyboard?.settle();
+	}
+	#readyKeyboard(area) {
+		if (!this.options.keyboard) {
+			this.#keyboard?.destroy();
+			return this.#keyboard = null;
+		}
+		this.#keyboard ??= new KeyboardNav(this.svg.node(), this.host, this.tooltipBox, (point, content) => this.tip(point, content));
+		if (this.options.tooltip === false) this.untip();
+		this.#keyboard.reset(this.theme, this.palette, this.options.series, area);
+		return this.#keyboard;
+	}
+	teardown() {
+		this.#keyboard?.destroy();
+		this.#keyboard = null;
+		this.svg?.remove();
+		this.svg = null;
+	}
+	signature() {
+		const detached = !this.host;
+		if (detached) this.mountScratch(document.createElement("div"));
+		const parts = [];
+		this.svg.select("g.g-plot").selectAll("*").each(function() {
+			const el = this;
+			const geometry = GEOMETRY.map((name) => el.getAttribute(name)).filter((value) => value !== null).join(",");
+			if (geometry) parts.push(`${el.tagName}:${geometry}`);
+		});
+		if (detached) this.destroy();
+		return parts.join("|");
+	}
+	get exportFormats() {
+		return [ExportFormat.SVG, ...super.exportFormats];
+	}
+	toSVG() {
+		return ChartExporter.serialize(this.#snapshot());
+	}
+	async toStandaloneSVG() {
+		return ChartExporter.serialize((await this.#embedded()).copy);
+	}
+	/** Size and surface come from the copy: a resize, theme change or destroy may land while the image loads. */
+	async rasterize(scale) {
+		const { copy, surface } = await this.#embedded();
+		return ChartExporter.raster(ChartExporter.serialize(copy), {
+			width: +copy.getAttribute("width"),
+			height: +copy.getAttribute("height")
+		}, scale, surface);
+	}
+	async #embedded() {
+		await this.ready();
+		const copy = this.#snapshot(), { theme } = this;
+		await ChartExporter.embed(copy, theme);
+		return {
+			copy,
+			surface: theme.surface
+		};
+	}
+	/** A finished copy of the chart. Marks still moving, or an unmounted chart, are drawn once with animation off. */
+	#snapshot() {
+		this.flush();
+		const { animate } = this.options, { looping } = this;
+		const scratch = this.host ? null : ChartExporter.scratch(this.size);
+		this.options.animate = false;
+		try {
+			if (scratch) this.mountScratch(scratch);
+			else if (looping || ChartExporter.animating(this.svg.node())) this.render();
+			const copy = ChartExporter.document(this.svg.node(), this.theme);
+			this.#keyboard?.scrub(copy);
+			this.finishCopy(copy);
+			return copy;
+		} finally {
+			this.options.animate = animate;
+			if (scratch) {
+				this.destroy();
+				scratch.remove();
+			} else if (looping) this.render();
+		}
+	}
+	drawHeader(svg, width) {
+		const lines = [this.options.title && {
+			text: this.options.title,
+			size: 15,
+			weight: 600,
+			fill: this.theme.ink,
+			y: 18
+		}, this.options.subtitle && {
+			text: this.options.subtitle,
+			size: 12,
+			weight: 400,
+			fill: this.theme.inkSecondary,
+			y: this.options.title ? 37 : 14
+		}].filter(Boolean);
+		const room = this.textRoom, scale = this.fontScale;
+		svg.select("g.g-header").selectAll("text").data(lines).join("text").attr("x", 16).attr("y", (d) => d.y * room).attr("font-size", (d) => d.size).attr("font-weight", (d) => d.weight).attr("fill", (d) => d.fill).attr("textLength", (d) => d.text.length * d.size * scale * .6 > width - 32 ? width - 32 : null).text((d) => d.text);
+	}
+	drawLegend(svg, width, height, headerHeight, plotHeight, top, margin) {
+		const position = this.legendPosition;
+		const shown = this.#shownLegend();
+		const room = this.textRoom, row = ROW * room;
+		let x = 16, y = headerHeight + 15 * room;
+		if (position === LegendPosition.Bottom) y = top + plotHeight + margin.bottom + 14 * room;
+		if (position === LegendPosition.Right) {
+			x = width - RAIL;
+			y = top + 10;
+		}
+		const left = x;
+		const placed = shown.map((item) => {
+			const name = item.label ?? item.key, shown = this.#legendText(item), cost = this.#legendCost(shown);
+			if (position !== LegendPosition.Right && x > left && x + cost > width - EDGE) {
+				x = left;
+				y += row;
+			}
+			const at = {
+				...item,
+				name,
+				shown,
+				x,
+				y
+			};
+			if (position === LegendPosition.Right) y += row - 4;
+			else x += cost;
+			return at;
+		});
+		const legend = svg.select("g.g-legend").selectAll("g").data(placed, (d) => d.key).join((enter) => {
+			const g = enter.append("g");
+			g.append("rect").attr("width", 10).attr("height", 10).attr("rx", 3).attr("y", -9);
+			g.append("text").attr("x", INDENT).attr("font-size", 11.5);
+			return g;
+		});
+		legend.attr("transform", (d) => `translate(${d.x},${d.y})`);
+		legend.select("rect").attr("fill", (d) => d.color);
+		legend.select("text").attr("fill", this.theme.inkSecondary).text((d) => d.shown);
+		TextFit.hint(legend, (d) => d.title ?? (d.shown === d.name ? void 0 : d.name));
+	}
+};
+var GEOMETRY = [
+	"d",
+	"x",
+	"y",
+	"width",
+	"height",
+	"cx",
+	"cy",
+	"r",
+	"rx",
+	"ry",
+	"x1",
+	"x2",
+	"y1",
+	"y2",
+	"points",
+	"transform"
+];
+export { Chart2D };

package/dist/core/Chart3D.js

@@ -0,0 +1,328 @@
+import { Chart } from "./Chart.js";
+import { ChartExportError, ExportErrorCode } from "./ChartExportError.js";
+import { ChartExporter } from "./ChartExporter.js";
+import { Context3D } from "./Context3D.js";
+import { LegendPosition, RenderType } from "./enums.js";
+import { SceneOverlay } from "./SceneOverlay.js";
+import { AmbientLight, Color, DirectionalLight, Group, HemisphereLight, Mesh, PCFSoftShadowMap, PerspectiveCamera, Raycaster, Scene, ShaderMaterial, Timer, Vector2, WebGLRenderer } from "three";
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import { CSS2DRenderer } from "three/addons/renderers/CSS2DRenderer.js";
+// src/core/Chart3D.ts
+var rad = Math.PI / 180;
+/** The most `chartStyle.pixelRatio` can ask for: past this a large chart costs far more than it shows. */
+var RATIO_LIMIT = 3;
+/** three.js stage: renderer, camera, lights, orbit controls, picking, HTML overlay and disposal. Subclasses implement `build`. */
+var Chart3D = class Chart3D extends Chart {
+	static shared = null;
+	webgl = null;
+	overlay = null;
+	controls = null;
+	camera = new PerspectiveCamera(38, 1.6, .01, 100);
+	scene = null;
+	ctx = null;
+	frame = 0;
+	timer = new Timer();
+	ray = new Raycaster();
+	legendEl = null;
+	#antialias = true;
+	get renderer() {
+		return RenderType.WebGL;
+	}
+	compose(animated) {
+		const scene = new Scene();
+		scene.background = new Color(this.theme.surface);
+		const ctx = new Context3D(new Group(), this.theme, this.palette, animated, this.fontScale, this.#opacity);
+		scene.add(ctx.root);
+		this.light(scene);
+		if (this.options.data != null) this.build(ctx);
+		this.#restyle(scene);
+		return {
+			scene,
+			ctx
+		};
+	}
+	/** A class may share one material between builds, so opacity is always taken from the value it first had. */
+	#restyle(scene) {
+		const { wireframe, opacity } = this.options.chartStyle ?? {};
+		if (wireframe === void 0 && opacity === void 0) return;
+		const share = this.#opacity;
+		scene.traverse((object) => {
+			for (const material of [object.material].flat()) {
+				if (!material) continue;
+				if (wireframe !== void 0 && "wireframe" in material) material.wireframe = wireframe;
+				if (opacity === void 0) continue;
+				material.opacity = (material.userData.opacity ??= material.opacity) * share;
+				material.transparent ||= share < 1;
+				if (material instanceof ShaderMaterial && material.uniforms.uOpacity) material.uniforms.uOpacity.value = share;
+			}
+		});
+	}
+	/** `chartStyle.opacity`, the share of every material's own opacity that shows. */
+	get #opacity() {
+		const { opacity = 1 } = this.options.chartStyle ?? {};
+		return Number.isNaN(opacity) ? 1 : Math.max(0, Math.min(1, opacity));
+	}
+	get #pixelRatio() {
+		const asked = this.options.chartStyle?.pixelRatio;
+		return asked && asked > 0 && Number.isFinite(asked) ? Math.min(asked, RATIO_LIMIT) : Math.min(devicePixelRatio, 2);
+	}
+	light(scene) {
+		const key = new DirectionalLight("#ffffff", 2.2);
+		key.position.set(2.5, 4, 3);
+		key.castShadow = true;
+		key.shadow.mapSize.set(1024, 1024);
+		Object.assign(key.shadow.camera, {
+			left: -2,
+			right: 2,
+			top: 2,
+			bottom: -2
+		});
+		key.shadow.bias = -5e-4;
+		scene.add(key, new AmbientLight("#ffffff", .5), new HemisphereLight("#ffffff", this.theme.surface, .8));
+	}
+	place(camera) {
+		const { azimuth = 38, elevation = 26, distance = 5.4 } = this.options;
+		const cos = Math.cos(elevation * rad);
+		camera.position.set(distance * cos * Math.sin(azimuth * rad), distance * Math.sin(elevation * rad), distance * cos * Math.cos(azimuth * rad));
+		camera.lookAt(0, -.05, 0);
+	}
+	paint() {
+		const { width, height } = this.size;
+		this.clearScene();
+		const antialias = this.options.chartStyle?.antialias ?? true;
+		if (this.webgl && antialias !== this.#antialias) this.teardown();
+		this.#antialias = antialias;
+		if (!this.webgl) {
+			const renderer = this.webgl = new WebGLRenderer({ antialias });
+			renderer.shadowMap.enabled = true;
+			renderer.shadowMap.type = PCFSoftShadowMap;
+			this.host.appendChild(renderer.domElement);
+			renderer.domElement.setAttribute("role", "img");
+			renderer.domElement.style.display = "block";
+			const overlay = this.overlay = new CSS2DRenderer();
+			Object.assign(overlay.domElement.style, {
+				position: "absolute",
+				inset: "0",
+				pointerEvents: "none"
+			});
+			this.host.appendChild(overlay.domElement);
+			this.controls = new OrbitControls(this.camera, renderer.domElement);
+			this.controls.enableDamping = true;
+			this.controls.target.set(0, -.05, 0);
+			this.controls.addEventListener("start", () => {
+				this.controls.autoRotate = false;
+			});
+			renderer.domElement.addEventListener("pointermove", this.onPointer);
+			renderer.domElement.addEventListener("pointerleave", () => this.untip());
+			this.place(this.camera);
+			renderer.setAnimationLoop(() => this.tick());
+		}
+		if (this.webgl.getPixelRatio() !== this.#pixelRatio) this.webgl.setPixelRatio(this.#pixelRatio);
+		this.webgl.domElement.setAttribute("aria-label", this.label);
+		this.webgl.setSize(width, height);
+		this.overlay.setSize(width, height);
+		this.camera.aspect = width / height;
+		this.camera.updateProjectionMatrix();
+		this.controls.autoRotate = this.options.autoRotate ?? false;
+		const { scene, ctx } = this.compose(this.animated);
+		this.scene = scene;
+		this.ctx = ctx;
+		this.timer.reset();
+		this.drawLegend();
+	}
+	tick() {
+		if (!this.scene || !this.webgl) return;
+		this.timer.update();
+		const t = this.timer.getElapsed();
+		for (const fn of this.ctx.frames) fn(t);
+		this.controls.update();
+		this.webgl.render(this.scene, this.camera);
+		this.overlay.render(this.scene, this.camera);
+	}
+	onPointer = (event) => {
+		const box = event.target.getBoundingClientRect();
+		this.ray.setFromCamera(new Vector2((event.clientX - box.left) / box.width * 2 - 1, -((event.clientY - box.top) / box.height) * 2 + 1), this.camera);
+		const picks = this.ctx?.picks;
+		const hit = picks?.size ? this.ray.intersectObjects([...picks.keys()], true)[0] : void 0;
+		if (!hit) return this.untip();
+		let owner = hit.object;
+		while (owner && !picks.has(owner)) owner = owner.parent;
+		if (owner) this.tip(event, picks.get(owner)(hit.instanceId ?? 0));
+	};
+	drawLegend() {
+		this.legendEl?.remove();
+		const items = this.palette.items();
+		const header = [this.options.title, this.options.subtitle].filter(Boolean);
+		if (!header.length && (items.length < 2 || this.legendPosition === LegendPosition.None)) return;
+		const el = this.legendEl = document.createElement("div"), scale = this.fontScale;
+		Object.assign(el.style, {
+			position: "absolute",
+			top: "10px",
+			left: "14px",
+			font: `${12 * scale}px ${this.theme.fontFamily}`,
+			color: this.theme.inkSecondary,
+			pointerEvents: "none"
+		});
+		header.forEach((text, i) => {
+			const line = el.appendChild(document.createElement("div"));
+			line.textContent = text;
+			if (i === 0 && this.options.title) Object.assign(line.style, {
+				font: `600 ${15 * scale}px ${this.theme.fontFamily}`,
+				color: this.theme.ink
+			});
+		});
+		if (items.length >= 2 && this.legendPosition !== LegendPosition.None) {
+			const row = el.appendChild(document.createElement("div"));
+			Object.assign(row.style, {
+				display: "flex",
+				gap: "12px",
+				marginTop: "6px",
+				flexWrap: "wrap"
+			});
+			for (const item of items) {
+				const entry = row.appendChild(document.createElement("span"));
+				const swatch = entry.appendChild(document.createElement("i"));
+				Object.assign(swatch.style, {
+					display: "inline-block",
+					width: "10px",
+					height: "10px",
+					borderRadius: "3px",
+					background: item.color,
+					marginRight: "5px"
+				});
+				entry.append(item.label ?? item.key);
+			}
+		}
+		this.host.appendChild(el);
+	}
+	clearScene() {
+		this.scene?.traverse((object) => {
+			if (object instanceof Mesh || "geometry" in object) object.geometry?.dispose?.();
+			const material = object.material;
+			for (const item of [material].flat()) item?.dispose?.();
+			if ("element" in object) object.element?.remove?.();
+		});
+		this.scene = null;
+		this.ctx = null;
+	}
+	teardown() {
+		this.webgl?.setAnimationLoop(null);
+		this.clearScene();
+		this.controls?.dispose();
+		this.legendEl?.remove();
+		this.overlay?.domElement.remove();
+		this.webgl?.domElement.remove();
+		this.webgl?.dispose();
+		this.webgl = this.overlay = this.controls = null;
+	}
+	/** Works without WebGL: builds the scene and hashes its geometry and transforms. */
+	signature() {
+		this.render();
+		const { scene } = this.compose(false);
+		scene.updateMatrixWorld(true);
+		const parts = [];
+		scene.traverse((object) => {
+			const geometry = object.geometry;
+			if (!geometry && !object.isCSS2DObject) return;
+			const position = geometry?.getAttribute("position");
+			const instances = object.instanceMatrix?.array;
+			parts.push(`${object.type}:${position?.count ?? 0}:${checksum(position?.array)}:${checksum(instances)}:${checksum(object.matrixWorld.elements)}`);
+		});
+		return parts.join("|");
+	}
+	/** PNG data URL from one shared renderer, so galleries never run out of WebGL contexts. */
+	thumbnail(width = 320, height = 200) {
+		this.render();
+		const renderer = Chart3D.shared ??= new WebGLRenderer({
+			antialias: true,
+			preserveDrawingBuffer: true
+		});
+		renderer.shadowMap.enabled = true;
+		renderer.setSize(width, height);
+		const camera = new PerspectiveCamera(38, width / height, .01, 100);
+		this.place(camera);
+		const { scene } = this.compose(false);
+		renderer.render(scene, camera);
+		return renderer.domElement.toDataURL("image/png");
+	}
+	/**
+	* The current camera view. A mounted chart redraws from its own renderer at `scale`, with any entry
+	* animation finished, then returns to its normal resolution in the same task, so the page never shows it.
+	*/
+	async rasterize(scale) {
+		await this.ready();
+		const { webgl: renderer, scene, camera } = this;
+		if (!renderer || !scene) return this.#rasterizeOffscreen(scale);
+		this.ctx.settle();
+		const ratio = renderer.getPixelRatio();
+		try {
+			renderer.setPixelRatio(scale);
+			return this.#capture(renderer, scene, camera, scale);
+		} finally {
+			renderer.setPixelRatio(ratio);
+			renderer.render(scene, camera);
+		}
+	}
+	#rasterizeOffscreen(scale) {
+		this.render();
+		const renderer = Chart3D.#exportRenderer();
+		const { width, height } = this.size;
+		renderer.setPixelRatio(scale);
+		renderer.setSize(width, height, false);
+		const camera = new PerspectiveCamera(38, width / height, .01, 100);
+		this.place(camera);
+		const { scene } = this.compose(false);
+		this.scene = scene;
+		try {
+			return this.#capture(renderer, scene, camera, scale);
+		} finally {
+			renderer.setPixelRatio(1);
+			this.clearScene();
+		}
+	}
+	static #exportRenderer() {
+		try {
+			const renderer = Chart3D.shared ??= new WebGLRenderer({
+				antialias: true,
+				preserveDrawingBuffer: true
+			});
+			renderer.shadowMap.enabled = true;
+			return renderer;
+		} catch (cause) {
+			throw new ChartExportError(ExportErrorCode.Encoding, "PNG export of a 3D chart needs WebGL, which this browser could not provide.", { cause });
+		}
+	}
+	/** Copies the frame in the task that drew it: the renderer does not keep its drawing buffer between frames. Sizes come from the renderer, which a resize reaches a frame after the host. */
+	#capture(renderer, scene, camera, scale) {
+		const { x: width, y: height } = renderer.getSize(new Vector2());
+		const context = renderer.getContext(), { drawingBufferWidth, drawingBufferHeight } = context;
+		if (context.isContextLost()) throw new ChartExportError(ExportErrorCode.Encoding, "This chart lost its WebGL context, usually because the page opened too many. Reload it to export.");
+		if (drawingBufferWidth < Math.floor(width * scale) || drawingBufferHeight < Math.floor(height * scale)) throw new ChartExportError(ExportErrorCode.Encoding, `Scale ${scale} is beyond this GPU's ${drawingBufferWidth}×${drawingBufferHeight} limit for a ${width}×${height} chart. Try a smaller scale.`);
+		renderer.render(scene, camera);
+		const output = ChartExporter.canvas(renderer.domElement.width, renderer.domElement.height);
+		const paint = ChartExporter.paint(output);
+		paint.drawImage(renderer.domElement, 0, 0);
+		const { title, subtitle } = this.options;
+		const items = this.legendPosition === LegendPosition.None || this.palette.items().length < 2 ? [] : this.palette.items();
+		SceneOverlay.paint(paint, scene, camera, {
+			width,
+			height
+		}, output.width / width, this.theme, {
+			title,
+			subtitle,
+			items,
+			fontScale: this.fontScale
+		});
+		return output;
+	}
+};
+function checksum(values) {
+	if (!values) return "-";
+	let hash = 0;
+	for (let i = 0; i < values.length; i++) {
+		if (!Number.isFinite(values[i])) return "NaN";
+		hash = hash * 31 + Math.round(values[i] * 1e3) | 0;
+	}
+	return `${values.length}:${hash}`;
+}
+export { Chart3D };