@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/core/AnnotationScale.js

@@ -0,0 +1,64 @@
+import { extent } from "d3";
+// src/core/AnnotationScale.ts
+/** Reads data values through whatever scale an axis uses: band, point, time, log or linear. */
+var AnnotationScale = class {
+	#scale;
+	#domain;
+	#discrete;
+	constructor(scale) {
+		this.#scale = scale;
+		this.#domain = scale.domain?.() ?? [];
+		this.#discrete = "bandwidth" in scale || typeof this.#domain[0] === "string";
+	}
+	/** Pixel of one value (the centre of a band), or null when the value is off the domain. */
+	at(value) {
+		if (this.#discrete) {
+			const left = this.#left(value);
+			return left === null ? null : left + this.#bandwidth() / 2;
+		}
+		const number = this.#number(value);
+		const [low, high] = this.#limits();
+		if (!Number.isFinite(number) || low === void 0 || number < low || number > high) return null;
+		return this.#pixel(number);
+	}
+	/** Pixels covered by a range, trimmed to the domain, or null when none of it is on the domain. */
+	span(from, to) {
+		if (this.#discrete) {
+			const a = this.#left(from), b = this.#left(to);
+			return a === null || b === null ? null : [Math.min(a, b), Math.max(a, b) + this.#bandwidth()];
+		}
+		const a = this.#number(from), b = this.#number(to);
+		const [low, high] = this.#limits();
+		if (Number.isNaN(a) || Number.isNaN(b) || low === void 0) return null;
+		const start = Math.max(Math.min(a, b), low), end = Math.min(Math.max(a, b), high);
+		if (start > end) return null;
+		const p = this.#pixel(start), q = this.#pixel(end);
+		return p === null || q === null ? null : [Math.min(p, q), Math.max(p, q)];
+	}
+	/** The scale's pixel range, trimmed to `[0, size]`. */
+	extent(size) {
+		const [low = 0, high = size] = extent(this.#scale.range?.() ?? []);
+		return [Math.max(0, low), Math.min(size, high)];
+	}
+	#bandwidth() {
+		return this.#scale.bandwidth?.() ?? 0;
+	}
+	#limits() {
+		return extent(this.#domain, Number);
+	}
+	#left(value) {
+		if (value === null || value === void 0) return null;
+		const hit = this.#domain.find((entry) => entry === value || String(entry) === String(value));
+		return hit === void 0 ? null : this.#pixel(hit);
+	}
+	#pixel(value) {
+		const pixel = this.#scale(value);
+		return pixel !== void 0 && Number.isFinite(pixel) ? pixel : null;
+	}
+	#number(value) {
+		if (typeof value === "number" || value instanceof Date) return +value;
+		if (typeof value !== "string" || !value.trim()) return NaN;
+		return this.#domain[0] instanceof Date ? Date.parse(value) : +value;
+	}
+};
+export { AnnotationScale };

package/dist/core/AxisWindow.js

@@ -0,0 +1,85 @@
+import { extent, precisionFixed, precisionRound } from "d3";
+// src/core/AxisWindow.ts
+var clamp = (value, size) => Math.max(0, Math.min(size, value));
+var STEPS = 6;
+var ENOUGH = 3;
+/** Moves a scale's visible window and converts between plot pixels and data, for every scale a chart can zoom. */
+var AxisWindow = class AxisWindow {
+	/** `null` means the scale cannot be zoomed: it has no inverse and no bands, or is a stand-in whose domain cannot be set. */
+	static kind(scale) {
+		if (!scale?.copy || !scale.range || !scale.domain || scale.copy() === scale) return null;
+		if (scale.step && scale.bandwidth) return "band";
+		return scale.invert ? "continuous" : null;
+	}
+	/**
+	* Applies `transform` to the scale in place, because subclasses close over the scales they build.
+	* Bands grow past the plot; continuous scales narrow their domain, which covers linear, log, power and time alike.
+	*/
+	static rescale(scale, plane, transform) {
+		const apply = (at) => plane === "x" ? transform.applyX(at) : transform.applyY(at);
+		const invert = (at) => plane === "x" ? transform.invertX(at) : transform.invertY(at);
+		if (AxisWindow.kind(scale) === "band") {
+			scale.range(scale.range().map(apply));
+			return;
+		}
+		scale.clamp?.(false);
+		const domain = scale.range().map((at) => scale.invert(invert(at)));
+		if (!domain.every((value) => Number.isFinite(+value))) return;
+		scale.domain(domain);
+		AxisWindow.#retick(scale);
+	}
+	/** Hand-picked ticks are kept while enough of them are in view; past that the scale ticks itself. */
+	static #retick(scale) {
+		const own = scale.ticks, natural = scale.copy(), [low, high] = extent(scale.domain());
+		if (!own) return;
+		scale.ticks = (...args) => {
+			const picked = own.apply(scale, args);
+			const inside = picked.filter((tick) => +tick >= +low && +tick <= +high);
+			return inside.length >= ENOUGH || !picked.length ? inside : natural.ticks(...args);
+		};
+	}
+	/** Where a band's centre, or a value, falls on the plot. */
+	static position(scale, value) {
+		return (scale(value) ?? NaN) + (scale.bandwidth?.() ?? 0) / 2;
+	}
+	/** The data under a pixel interval. Bands count when their centre is inside. */
+	static range(scale, low, high) {
+		if (AxisWindow.kind(scale) === "band") return scale.domain().filter((name) => {
+			const at = AxisWindow.position(scale, name);
+			return at >= low && at <= high;
+		});
+		const span = [scale.invert(low), scale.invert(high)].sort((a, b) => +a - +b);
+		return span.every((value) => Number.isFinite(+value)) ? span : [];
+	}
+	/** The pixel interval of a data range, cut to the plot, or `null` when none of it is visible. */
+	static pixels(scale, range, size) {
+		const band = AxisWindow.kind(scale) === "band";
+		const stops = range.map((value) => scale(value)).filter((at) => Number.isFinite(at));
+		if (!stops.length) return null;
+		const wide = band ? scale.bandwidth() : 0, pad = band && !wide ? scale.step() / 2 : 0;
+		const low = clamp(Math.min(...stops) - pad, size), high = clamp(Math.max(...stops) + wide + pad, size);
+		return high > low ? [low, high] : null;
+	}
+	/** A chart's own tick text can stop telling neighbours apart once zoomed past its precision; d3's own then takes over. */
+	static legible(scale, format, count) {
+		if (!format || !scale.ticks || !scale.tickFormat) return format;
+		const shown = scale.ticks(count).map(format);
+		return shown.some((text, i) => text && text === shown[i - 1]) ? scale.tickFormat(count) : format;
+	}
+	/** Tick text for a zoomed numeric axis: as many digits as the ticks need to stay distinct. */
+	static format(scale) {
+		const domain = scale.domain();
+		const [a = 0, b = 0] = [domain[0], domain[domain.length - 1]];
+		const reach = Math.max(Math.abs(a), Math.abs(b)), step = Math.abs(b - a) / STEPS || 1;
+		if (reach >= 1e4) {
+			const compact = new Intl.NumberFormat("en", {
+				notation: "compact",
+				maximumSignificantDigits: Math.max(2, Math.min(21, precisionRound(step, reach)))
+			});
+			return (value) => compact.format(+value);
+		}
+		const fixed = new Intl.NumberFormat("en", { maximumFractionDigits: Math.min(20, precisionFixed(step)) });
+		return (value) => fixed.format(+value);
+	}
+};
+export { AxisWindow };

package/dist/core/CartesianChart.js

@@ -0,0 +1,218 @@
+import { AnnotationLayer } from "./AnnotationLayer.js";
+import { AxisWindow } from "./AxisWindow.js";
+import { Chart2D } from "./Chart2D.js";
+import { ChartViewport, ZoomAxis } from "./ChartViewport.js";
+import { FRAME } from "./Context2D.js";
+import { RenderType } from "./enums.js";
+import { LiveMotion } from "./LiveMotion.js";
+import { Scales } from "./Scales.js";
+import { TextFit } from "./TextFit.js";
+import { axisBottom, axisLeft, max } from "d3";
+// src/core/CartesianChart.ts
+var OPEN = 1e4;
+var clips = 0;
+var CHAR = 6.2;
+var GUTTER = 96;
+var TICK_HEIGHT = 12;
+/** Sets the ends of a continuous scale in place, because subclasses close over the scales they build. Says if it did. */
+function pin(scale, [low, high]) {
+	if (AxisWindow.kind(scale) !== "continuous") return false;
+	const domain = [...scale.domain()], last = domain.length - 1;
+	const flipped = +domain[0] > +domain[last];
+	domain[flipped ? last : 0] = low ?? domain[flipped ? last : 0];
+	domain[flipped ? 0 : last] = high ?? domain[flipped ? 0 : last];
+	const shows = scale.shows ?? scale.copy().domain(domain);
+	if (+domain[0] === +domain[last] || !domain.every((value) => Number.isFinite(shows(value)))) return false;
+	scale.domain(domain);
+	return true;
+}
+/** x/y plots: draws recessive grid and axes around `plot`. Subclasses build scales then marks. */
+var CartesianChart = class CartesianChart extends Chart2D {
+	gutter = 44;
+	fitted = 44;
+	#axes = null;
+	#clipId = `chart-domain-${++clips}`;
+	#pinnedX = false;
+	#pinnedY = false;
+	#plot = {
+		width: 0,
+		height: 0
+	};
+	#motion = null;
+	#view = new ChartViewport({
+		options: () => this.options,
+		name: () => this.meta.name,
+		zoomAxes: () => this.zoomAxes(),
+		redraw: () => this.render(),
+		hideTip: () => this.untip()
+	});
+	/** Pan, zoom and brush from code, once `zoom` or `brush` is on. */
+	get viewport() {
+		return this.#view;
+	}
+	/** Narrow this when marks ignore a scale: a second y axis, or a layout of its own (`null`). */
+	zoomAxes() {
+		return ZoomAxis.XY;
+	}
+	get animated() {
+		return super.animated && !this.#view.moving;
+	}
+	xTicks() {
+		return this.options.xTicks ?? 7;
+	}
+	yTicks() {
+		return this.options.yTicks ?? 6;
+	}
+	plotMargin() {
+		return {
+			top: 12,
+			right: 20,
+			bottom: (this.options.xLabel ? 44 : 28) + this.#tickGrowth,
+			left: this.gutter + (this.options.yLabel ? 18 : 0)
+		};
+	}
+	/** Tick labels decide the left gutter, so a chart whose labels changed lays out once more. */
+	paint() {
+		this.#prepareMotion();
+		super.paint();
+		if (this.options.data != null) this.#view.audit();
+		if (this.fitted !== this.gutter && !this.#view.zoomed && !(this.#motion && this.fitted < this.gutter)) {
+			this.gutter = this.fitted;
+			super.paint();
+		}
+		if (this.#axes) this.#motion?.settle(this.#axes, this.#plot, this.liveFrame && this.motionAllowed);
+	}
+	/** False when marks are painted somewhere SVG motion cannot reach, so ticks must not drift from them. */
+	get liveMotion() {
+		return true;
+	}
+	/** Charts with their own `draw`, or a zoom stage, keep marks elsewhere, so they morph instead of sliding. */
+	get liveSliding() {
+		return this.liveFrame && this.motionAllowed && this.liveMotion && !!this.#axes && LiveMotion.slides(this.#axes) && !this.#view.supported && this.draw === CartesianChart.prototype.draw;
+	}
+	#prepareMotion() {
+		if (this.options.data == null) this.#stopMotion();
+		else if (this.liveFrame && this.motionAllowed && this.liveMotion && this.#axes) this.#motion ??= new LiveMotion(this.svg.select("g.g-plot"), this.#axes);
+		if (this.liveSliding) this.#motion?.slide();
+	}
+	#stopMotion() {
+		this.#motion?.destroy();
+		this.#motion = null;
+	}
+	teardown() {
+		this.#stopMotion();
+		this.#view.release();
+		this.#axes = null;
+		super.teardown();
+	}
+	draw(ctx) {
+		const axes = this.#axes = this.scales(ctx);
+		this.#typeAxes(axes);
+		this.#pinDomains(axes);
+		this.#plot = ctx.plot;
+		const stage = this.#view.attach(ctx, axes);
+		const moved = this.#motion?.layer?.node();
+		if (moved && !this.svg.node().contains(moved)) this.#stopMotion();
+		this.drawAxes(ctx, axes);
+		const layer = this.#motion?.layer;
+		const marks = layer ? stage.sliding(layer) : stage;
+		this.plotMarks(marks, axes);
+		AnnotationLayer.draw(layer ? stage.within(layer) : stage, axes, this.options, this.#view.controlsBox);
+		this.#view.finish(ctx);
+		this.#clipToDomain(ctx);
+	}
+	/** Extra height a larger `fontSize` needs under the plot. */
+	get #tickGrowth() {
+		return TICK_HEIGHT * (this.textRoom - 1);
+	}
+	#typeAxes({ x, y }) {
+		const { xScaleType, yScaleType } = this.options, follows = this.zoomAxes();
+		if (!follows || this.renderer !== RenderType.Svg) return;
+		if (xScaleType && follows !== ZoomAxis.Y) Scales.retype(x, xScaleType, this.#floor("x"));
+		if (yScaleType && follows !== ZoomAxis.X) Scales.retype(y, yScaleType, this.#floor("y"));
+	}
+	/** The smallest value of the column an axis plots, while all of them are positive. */
+	#floor(axis) {
+		const column = this.options[axis], { data } = this.options;
+		if (typeof column !== "string" || !Array.isArray(data)) return null;
+		let low = Infinity;
+		for (const row of data) {
+			const value = row?.[column];
+			if (value === null || value === void 0 || !Number.isFinite(+value)) continue;
+			if (+value <= 0) return null;
+			low = Math.min(low, +value);
+		}
+		return Number.isFinite(low) ? low : null;
+	}
+	/** Runs before the viewport sees the scales, so zoom starts from these ranges. */
+	#pinDomains({ x, y }) {
+		const { xDomain, yDomain } = this.options, follows = this.zoomAxes();
+		this.#pinnedX = !!xDomain && !!follows && follows !== ZoomAxis.Y && pin(x, xDomain);
+		this.#pinnedY = !!yDomain && !!follows && follows !== ZoomAxis.X && pin(y, yDomain);
+	}
+	/** Clipped along the pinned axis only, so labels beside the plot stay. Zoomed, the viewport's own clip takes over. */
+	#clipToDomain(ctx) {
+		const pinnedX = this.#pinnedX, pinnedY = this.#pinnedY;
+		if (!pinnedX && !pinnedY || this.#view.zoomed) return;
+		const { width, height } = ctx.plot;
+		const box = {
+			x: pinnedX ? 0 : -1e4,
+			y: pinnedY ? 0 : -1e4,
+			width: pinnedX ? width : 2 * OPEN,
+			height: pinnedY ? height : 2 * OPEN
+		};
+		ctx.marks("domain-clip", "clipPath", [box]).attr("id", this.#clipId).selectAll("rect").data((d) => [d]).join("rect").attr("x", (d) => d.x).attr("y", (d) => d.y).attr("width", (d) => d.width).attr("height", (d) => d.height);
+		ctx.root.selectAll(":scope > g").filter(function() {
+			return !this.matches(FRAME);
+		}).attr("clip-path", `url(#${this.#clipId})`);
+	}
+	tickFormat(scale) {
+		const domain = scale.domain?.() ?? [];
+		if (typeof domain[0] !== "number") return null;
+		const zoomed = this.#view.format(scale);
+		if (zoomed) return zoomed;
+		const reach = max(domain, (value) => Math.abs(value)) ?? 0;
+		return (value) => Scales.format(+value, reach);
+	}
+	drawAxes(ctx, { x, y }) {
+		const { width, height } = ctx.plot;
+		const { theme } = ctx;
+		const { xFormat, yFormat, xTicks, yTicks } = this.options;
+		const xCount = Math.min(xTicks ?? this.xTicks(), Math.floor(width / 80)), yCount = yTicks ?? this.yTicks();
+		const bottom = axisBottom(x).ticks(xCount).tickSizeOuter(0);
+		const left = axisLeft(y).ticks(yCount).tickSize(0);
+		const fx = this.#view.legible(x, xFormat ?? this.tickFormat(x), xCount), fy = this.#view.legible(y, yFormat ?? this.tickFormat(y), yCount);
+		if (fx) bottom.tickFormat(fx);
+		if (fy) left.tickFormat(fy);
+		const yAxis = ctx.group("axis-y").call(left);
+		const labels = yAxis.selectAll("text").nodes().map((node) => node.textContent ?? "");
+		const char = CHAR * this.fontScale;
+		this.fitted = Math.min(GUTTER * this.textRoom, Math.ceil(Math.max(28, ...labels.map((label) => label.length * char))) + 12);
+		const xAxis = ctx.group("axis-x").attr("transform", `translate(0,${height})`).call(bottom);
+		const grid = ctx.group("grid").lower();
+		const ticks = "ticks" in y ? y.ticks(yCount) : [];
+		grid.selectAll("line").data(this.options.grid === false ? [] : ticks).join("line").attr("x1", 0).attr("x2", width).attr("y1", (tick) => y(tick) ?? 0).attr("y2", (tick) => y(tick) ?? 0).attr("stroke", theme.grid).attr("stroke-width", 1);
+		for (const axis of [xAxis, yAxis]) {
+			axis.select(".domain").attr("stroke", theme.axis);
+			axis.selectAll(".tick line").attr("stroke", theme.axis);
+			axis.selectAll("text").attr("fill", theme.inkSecondary).attr("font-size", 11).attr("font-family", theme.fontFamily);
+		}
+		yAxis.select(".domain").attr("stroke", "none");
+		const titles = [this.options.xLabel && {
+			t: this.options.xLabel,
+			shown: TextFit.fit(this.options.xLabel, width, char),
+			x: width / 2,
+			y: height + 38 + this.#tickGrowth,
+			r: 0
+		}, this.options.yLabel && {
+			t: this.options.yLabel,
+			shown: TextFit.fit(this.options.yLabel, height, char),
+			x: -height / 2,
+			y: -this.gutter - 4,
+			r: -90
+		}].filter(Boolean);
+		const axisTitles = ctx.text(ctx.marks("axis-title", "text", titles, (d) => d.t).attr("text-anchor", "middle").attr("transform", (d) => `rotate(${d.r}) translate(${d.x},${d.y})`).text((d) => d.shown));
+		TextFit.hint(axisTitles, (d) => d.shown === d.t ? void 0 : d.t);
+	}
+};
+export { CartesianChart };

package/dist/core/Chart.js

@@ -0,0 +1,298 @@
+import { ChartExportError, ExportErrorCode } from "./ChartExportError.js";
+import { ChartExporter, ExportFormat } from "./ChartExporter.js";
+import { ColumnCheck } from "./ColumnCheck.js";
+import { LegendPosition, ThemeMode } from "./enums.js";
+import { LiveStream } from "./LiveStream.js";
+import { Palette } from "./Palette.js";
+import { Theme } from "./Theme.js";
+import { Tooltip } from "./Tooltip.js";
+// src/core/Chart.ts
+var prefersStill = () => globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+/**
+* Root of every chart. Owns options, host lifecycle, sizing, theme, palette and tooltip.
+* `Chart2D` renders with d3 into SVG; `Chart3D` renders with three.js into WebGL.
+*/
+var Chart = class {
+	options;
+	host = null;
+	tooltipBox = null;
+	palette;
+	theme;
+	observer = null;
+	media = null;
+	onScheme = () => this.render();
+	#stream = null;
+	#seats = /* @__PURE__ */ new Map();
+	#liveFrame = false;
+	#scratch = false;
+	constructor(options) {
+		this.options = {
+			...this.defaults(),
+			...options
+		};
+	}
+	/** Per-class option defaults; override and spread `super.defaults()`. */
+	defaults() {
+		return {};
+	}
+	get meta() {
+		return this.constructor.meta;
+	}
+	get data() {
+		return this.options.data;
+	}
+	mount(host) {
+		this.#stream?.start();
+		this.host = host;
+		if (getComputedStyle(host).position === "static") host.style.position = "relative";
+		this.tooltipBox = new Tooltip(host);
+		this.render();
+		this.#watch(host);
+		return this;
+	}
+	/** Follows the host's size and the system scheme only while the options leave them open, which an update can change. */
+	#watch(host) {
+		const fluid = typeof ResizeObserver !== "undefined" && !(this.options.width && this.options.height);
+		if (fluid && !this.observer) {
+			let last = "";
+			this.observer = new ResizeObserver(([entry]) => {
+				const key = `${entry.contentRect.width}x${entry.contentRect.height}`;
+				if (key !== last) {
+					const first = !last;
+					last = key;
+					if (!first) this.render();
+				}
+			});
+			this.observer.observe(host);
+		} else if (!fluid) {
+			this.observer?.disconnect();
+			this.observer = null;
+		}
+		const auto = (this.options.theme ?? ThemeMode.Auto) === ThemeMode.Auto && typeof matchMedia === "function";
+		if (auto && !this.media) {
+			this.media = matchMedia("(prefers-color-scheme: dark)");
+			this.media.addEventListener("change", this.onScheme);
+		} else if (!auto) {
+			this.media?.removeEventListener("change", this.onScheme);
+			this.media = null;
+		}
+	}
+	/** Merges `patch` into the options. A key set to `undefined` returns to the chart's default. */
+	update(patch) {
+		const defaults = this.defaults();
+		const next = {
+			...this.options,
+			...patch
+		};
+		for (const key of Object.keys(patch)) if (patch[key] === void 0) next[key] = defaults[key];
+		this.options = next;
+		if ("data" in patch && this.#stream) {
+			this.#stream.reset(patch.data);
+			this.#seats.clear();
+		}
+		if (this.host) this.#watch(this.host);
+		return this.render();
+	}
+	/**
+	* Adds rows without replacing the data, repainting at most once per animation frame. Takes flat
+	* rows or long-form series rows, on 2D table charts; other charts throw. `window` and `keep`
+	* bound what is held and stick for later calls; with neither, rows accumulate without limit.
+	*/
+	append(rows, options) {
+		this.#liveStream.push(rows, options);
+		return this;
+	}
+	/** Paints appended rows now instead of on the next frame. */
+	flush() {
+		this.#stream?.flush();
+		return this;
+	}
+	/** Freezes the picture while rows keep arriving; `resume` catches up. */
+	pause() {
+		this.#liveStream.pause();
+		return this;
+	}
+	resume() {
+		this.#stream?.resume();
+		return this;
+	}
+	get paused() {
+		return this.#stream?.paused ?? false;
+	}
+	/** True once rows have been appended, when `options.data` holds more than the data passed in. */
+	get streaming() {
+		return !!this.#stream;
+	}
+	get #liveStream() {
+		LiveStream.assert(this.meta, this.options.data);
+		if (!this.#stream) for (const { key } of this.palette?.items() ?? []) this.#seats.set(key, this.#seats.size);
+		return this.#stream ??= new LiveStream(this.options.data, () => this.#liveColumns, () => !!this.host, (held) => this.#commit(held));
+	}
+	/** Mounts for one measurement or export. The `destroy` that ends it leaves the stream open. */
+	mountScratch(host) {
+		this.#scratch = !this.#stream?.stopped;
+		return this.mount(host);
+	}
+	get #liveColumns() {
+		const { x, series, group } = this.options;
+		const split = [series, group].find((column) => typeof column === "string");
+		return {
+			x: typeof x === "string" ? x : void 0,
+			series: split
+		};
+	}
+	#commit(rows) {
+		this.options = {
+			...this.options,
+			data: rows
+		};
+		this.#liveFrame = true;
+		try {
+			this.render();
+		} finally {
+			this.#liveFrame = false;
+		}
+	}
+	destroy() {
+		this.#stream?.stop(this.#scratch);
+		this.#scratch = false;
+		this.observer?.disconnect();
+		this.observer = null;
+		this.media?.removeEventListener("change", this.onScheme);
+		this.media = null;
+		this.teardown();
+		this.tooltipBox?.destroy();
+		this.tooltipBox = null;
+		this.host = null;
+	}
+	/** Tabular view of the data for accessibility and export. Override for non-row data. */
+	table() {
+		const data = this.options.data;
+		if (!Array.isArray(data)) return {
+			columns: [],
+			rows: []
+		};
+		const rows = data.filter((row) => row !== null && typeof row === "object");
+		const columns = /* @__PURE__ */ new Set();
+		for (const row of rows) for (const column in row) columns.add(column);
+		return {
+			columns: [...columns],
+			rows: rows.map((row) => [...columns].map((column) => row[column]))
+		};
+	}
+	/** What this chart can export right now. Check this before offering a format. */
+	get exportFormats() {
+		return [
+			ExportFormat.PNG,
+			ExportFormat.PDF,
+			...ChartExporter.tabular(this.#rows.rows.length)
+		];
+	}
+	/** The chart as SVG text. Map tiles stay links here: use `toStandaloneSVG` to embed them. 3D charts have no SVG and throw. */
+	toSVG() {
+		throw new ChartExportError(ExportErrorCode.Unsupported, `SVG export is unavailable for ${this.meta.name}: 3D charts render to WebGL. Use toPNG() or toCSV().`);
+	}
+	/** `toSVG` with map tiles and page fonts embedded, so the file needs nothing else. Rejects if a tile cannot be read. */
+	async toStandaloneSVG() {
+		return this.toSVG();
+	}
+	/** The chart as a PNG. 2D charts rasterize their SVG; 3D charts draw the current camera view from their renderer. */
+	async toPNG({ scale } = {}) {
+		const multiple = ChartExporter.scale(scale);
+		return ChartExporter.png(await this.rasterize(multiple));
+	}
+	/** `table()` as CSV text. Throws when the chart has no rows; see `exportFormats`. */
+	toCSV() {
+		this.flush();
+		return ChartExporter.csv(this.#rows);
+	}
+	/** The chart as a picture on a PDF page, optionally followed by `table()`. Its code loads on first use. */
+	async toPDF(options) {
+		return (await ChartExporter.load("PDF", () => import("./PdfWriter.js"))).PdfWriter.write(this, options);
+	}
+	/** `table()` as an .xlsx workbook, optionally with the chart on a second sheet. Rejects when the chart has no rows. Its code loads on first use. */
+	async toExcel(options) {
+		return (await ChartExporter.load("Excel", () => import("./ExcelWriter.js"))).ExcelWriter.write(this, options);
+	}
+	/** `table()` for exports. Overrides read their own data shape, so a chart holding none has no rows. */
+	get #rows() {
+		return this.options.data == null ? {
+			columns: [],
+			rows: []
+		} : this.table();
+	}
+	/** Saves the chart through the browser's download flow. */
+	async download(format = ExportFormat.PNG, options = {}) {
+		ChartExporter.save(await this.#file(format, options), options.filename ?? `${this.meta.id}.${format}`);
+	}
+	async #file(format, options) {
+		if (format === ExportFormat.PNG) return this.toPNG(options);
+		if (format === ExportFormat.PDF) return this.toPDF(options);
+		if (format === ExportFormat.Excel) return this.toExcel(options);
+		return format === ExportFormat.SVG ? ChartExporter.blob(await this.toStandaloneSVG(), format) : ChartExporter.blob(this.toCSV(), format);
+	}
+	/** Settles once anything the chart loads by itself has arrived. Exports wait for it, so they never picture a chart still loading. */
+	async ready() {
+		await this.meta.prepare?.();
+	}
+	render() {
+		const { theme, chartStyle } = this.options;
+		this.theme = Theme.resolve(theme, chartStyle);
+		this.palette = new Palette(this.theme, this.#stream ? this.#seats : void 0, Theme.pins(this.theme, chartStyle), chartStyle?.opacity);
+		if (this.host) {
+			if (!this.#liveFrame) ColumnCheck.run(this.meta, this.defaults(), this.options);
+			this.paint();
+		}
+		return this;
+	}
+	get size() {
+		const box = this.host?.getBoundingClientRect(), { aspectRatio } = this.options;
+		const width = this.options.width ?? (box?.width || 640);
+		return {
+			width,
+			height: this.options.height ?? (aspectRatio && aspectRatio > 0 ? width / aspectRatio : box?.height || 400)
+		};
+	}
+	/** `chartStyle.fontSize`, the multiplier on all chart text. */
+	get fontScale() {
+		const scale = this.options.chartStyle?.fontSize;
+		return scale && scale > 0 && Number.isFinite(scale) ? scale : 1;
+	}
+	/** How much taller lines of text get: smaller text keeps the room it had. */
+	get textRoom() {
+		return Math.max(1, this.fontScale);
+	}
+	get animated() {
+		return this.motionAllowed && !this.liveSliding;
+	}
+	get motionAllowed() {
+		return (this.options.animate ?? true) && !prefersStill();
+	}
+	/** True during a paint caused by appended rows. */
+	get liveFrame() {
+		return this.#liveFrame;
+	}
+	/** True when this live paint draws final geometry and the marks slide as one instead. */
+	get liveSliding() {
+		return false;
+	}
+	get legendPosition() {
+		return this.options.legend ?? LegendPosition.Top;
+	}
+	get label() {
+		return this.options.ariaLabel ?? this.options.title ?? this.meta.name;
+	}
+	tip(event, content) {
+		if (this.options.tooltip !== false) this.tooltipBox?.show(event, content, this.theme);
+	}
+	untip() {
+		this.tooltipBox?.hide();
+	}
+	margin(base) {
+		return {
+			...base,
+			...this.options.margin
+		};
+	}
+};
+export { Chart };