@mstone6969/graph 0.1.0 → 0.2.0

package/dist/chunk-Z3JPIJSC.cjs

@@ -0,0 +1,338 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/core/ChartExportError.ts
+var ExportErrorCode = /* @__PURE__ */ ((ExportErrorCode2) => {
+  ExportErrorCode2["Unsupported"] = "unsupported";
+  ExportErrorCode2["NoData"] = "no-data";
+  ExportErrorCode2["Tainted"] = "tainted";
+  ExportErrorCode2["Encoding"] = "encoding";
+  ExportErrorCode2["Unavailable"] = "unavailable";
+  ExportErrorCode2["Unmounted"] = "unmounted";
+  return ExportErrorCode2;
+})(ExportErrorCode || {});
+var ChartExportError = class extends Error {
+  constructor(code, message, options) {
+    super(message, options);
+    this.code = code;
+    this.name = "ChartExportError";
+  }
+  
+};
+
+// src/core/ChartExporter.ts
+var ExportFormat = /* @__PURE__ */ ((ExportFormat2) => {
+  ExportFormat2["SVG"] = "svg";
+  ExportFormat2["PNG"] = "png";
+  ExportFormat2["CSV"] = "csv";
+  ExportFormat2["PDF"] = "pdf";
+  ExportFormat2["Excel"] = "xlsx";
+  return ExportFormat2;
+})(ExportFormat || {});
+var SVG_NS = "http://www.w3.org/2000/svg";
+var MIME = { ["svg" /* SVG */]: "image/svg+xml;charset=utf-8", ["png" /* PNG */]: "image/png", ["csv" /* CSV */]: "text/csv;charset=utf-8" };
+var STYLED = [
+  "fill",
+  "fill-opacity",
+  "fill-rule",
+  "stroke",
+  "stroke-opacity",
+  "stroke-width",
+  "stroke-linecap",
+  "stroke-linejoin",
+  "paint-order",
+  "opacity",
+  "visibility",
+  "font-family",
+  "font-size",
+  "font-style",
+  "font-weight",
+  "letter-spacing",
+  "text-anchor",
+  "dominant-baseline"
+];
+var LIVE_ONLY = [
+  "cursor",
+  "pointer-events",
+  "touch-action",
+  "transition",
+  "stroke-dasharray",
+  "stroke-dashoffset",
+  "opacity",
+  "scale",
+  "transform-origin",
+  "transform-box",
+  "--geo-unzoom"
+];
+var LIVE_ROOT = ["display", "max-width", "background", "position", "z-index"];
+var CHROME = '[role="button"], .m-zoom-hit, .g-keyboard';
+var TIMEOUT = 2e4;
+var HELD_STROKE = "non-scaling-stroke";
+var UNWRITABLE = /[^\t\n\r\x20-\uD7FF\uE000-\uFFFD\u{10000}-\u{10FFFF}]/gu;
+var FORMULA = /^[=+\-@\t\r]/;
+var SHEET_ROWS = 1048576;
+var quoteless = (name) => name.trim().replace(/^['"]|['"]$/g, "").toLowerCase();
+var ChartExporter = class _ChartExporter {
+  /** Comma-separated values per RFC 4180. Text that a spreadsheet would run as a formula is prefixed with `'`. */
+  static csv({ columns, rows }) {
+    if (!rows.length) throw new ChartExportError("no-data" /* NoData */, "CSV export needs rows, and this chart's data has no flat table view.");
+    return [columns, ...rows].map((row) => row.map((cell) => _ChartExporter.#cell(cell)).join(",")).join("\r\n");
+  }
+  /** The formats built from rows. A worksheet has a fixed height, and one row of it is the header. */
+  static tabular(rows) {
+    return rows ? ["csv" /* CSV */, ...rows < SHEET_ROWS ? ["xlsx" /* Excel */] : []] : [];
+  }
+  /** Awaits a writer's dynamic import, so a chunk that fails to load rejects like any other export. */
+  static async load(format, load) {
+    try {
+      return await load();
+    } catch (cause) {
+      throw new ChartExportError("unavailable" /* Unavailable */, `The ${format} writer could not be loaded: ${cause.message}`, { cause });
+    }
+  }
+  static #cell(cell) {
+    const text = _ChartExporter.text(cell);
+    const guarded = typeof cell === "string" && FORMULA.test(text) && !Number.isFinite(+text) ? `'${text}` : text;
+    return /[",\r\n]/.test(guarded) ? `"${guarded.replaceAll('"', '""')}"` : guarded;
+  }
+  /** A cell as plain text. */
+  static text(cell) {
+    if (cell === null || cell === void 0) return "";
+    if (cell instanceof Date) return Number.isNaN(+cell) ? "" : cell.toISOString();
+    if (typeof cell === "number") return Number.isNaN(cell) ? "" : String(cell);
+    return typeof cell === "object" ? _ChartExporter.#json(cell) : String(cell);
+  }
+  /** Layouts leave cycles in the objects they are handed, which JSON cannot write. */
+  static #json(cell) {
+    try {
+      return JSON.stringify(cell);
+    } catch (e) {
+      return String(cell);
+    }
+  }
+  /**
+   * A standalone copy of a live chart's SVG: computed styles written onto the marks, zoom state baked
+   * into plain transforms, the theme surface as a real rectangle, and on-screen controls removed.
+   */
+  static document(svg, theme) {
+    _ChartExporter.#finish(svg);
+    const copy = svg.cloneNode(true);
+    _ChartExporter.#inline(svg, copy);
+    copy.querySelectorAll(CHROME).forEach((el) => el.remove());
+    copy.querySelectorAll("[tabindex]").forEach((el) => el.removeAttribute("tabindex"));
+    for (const el of [copy, ...copy.querySelectorAll("[style]")]) {
+      for (const name of el === copy ? [...LIVE_ONLY, ...LIVE_ROOT] : LIVE_ONLY) el.style.removeProperty(name);
+      if (!el.style.length) el.removeAttribute("style");
+    }
+    copy.setAttribute("font-family", theme.fontFamily);
+    const surface = copy.ownerDocument.createElementNS(SVG_NS, "rect");
+    for (const [name, value] of Object.entries({ x: 0, y: 0, width: svg.getAttribute("width"), height: svg.getAttribute("height"), fill: theme.surface })) surface.setAttribute(name, `${value}`);
+    copy.insertBefore(surface, _nullishCoalesce(_optionalChain([copy, 'access', _ => _.querySelector, 'call', _2 => _2(":scope > title"), 'optionalAccess', _3 => _3.nextSibling]), () => ( copy.firstChild)));
+    return copy;
+  }
+  /** Web Animations show through computed styles, so fades and line reveals jump to their end first. */
+  static #finish(svg) {
+    for (const motion of _nullishCoalesce(_optionalChain([svg, 'access', _4 => _4.getAnimations, 'optionalCall', _5 => _5({ subtree: true })]), () => ( []))) {
+      if (_optionalChain([motion, 'access', _6 => _6.effect, 'optionalAccess', _7 => _7.getComputedTiming, 'call', _8 => _8(), 'access', _9 => _9.iterations]) !== Infinity) motion.finish();
+    }
+  }
+  /** Writes only what differs from the parent, so output stays close to the size of the live SVG. */
+  static #inline(live, copy) {
+    const copies = [copy, ...copy.querySelectorAll("*")];
+    const values = /* @__PURE__ */ new Map();
+    [live, ...live.querySelectorAll("*")].forEach((el, index) => {
+      const computed = getComputedStyle(el), own = {}, parent = values.get(el.parentElement), target = copies[index];
+      for (const name of STYLED) {
+        if (name === "opacity" && el.style.opacity) continue;
+        const value = own[name] = computed.getPropertyValue(name);
+        const inherited = name === "opacity" ? "1" : _optionalChain([parent, 'optionalAccess', _10 => _10[name]]);
+        if (value && value !== inherited && !value.includes("url(")) target.setAttribute(name, value);
+      }
+      values.set(el, own);
+      _ChartExporter.#bakeScale(el, target, computed);
+    });
+  }
+  /** Map symbols hold their size with the CSS `scale` property, which SVG tools outside the browser ignore. */
+  static #bakeScale(el, target, computed) {
+    const scale = parseFloat(computed.scale);
+    if (!el.style.scale || !Number.isFinite(scale)) return;
+    const box = computed.transformBox === "fill-box" ? _optionalChain([el, 'access', _11 => _11.getBBox, 'optionalCall', _12 => _12()]) : null;
+    const [x = 0, y = 0] = box ? [box.x + box.width / 2, box.y + box.height / 2] : computed.transformOrigin.split(" ").map(parseFloat);
+    const placed = target.getAttribute("transform");
+    target.setAttribute("transform", `translate(${x} ${y}) scale(${scale})${placed ? ` ${placed}` : ""} translate(${-x} ${-y})`);
+  }
+  /**
+   * Replaces links inside an exported SVG with their bytes: map tiles and any `@font-face` the page
+   * declares for the theme's font. Tiles must be readable across origins, or this rejects. A font
+   * that cannot be fetched stays linked, because the text still draws in the fallback fonts.
+   */
+  static async embed(svg, theme) {
+    await Promise.all([...svg.querySelectorAll("image")].map(async (image) => {
+      const url = image.getAttribute("href");
+      if (url && !url.startsWith("data:")) image.setAttribute("href", await _ChartExporter.#tile(url));
+    }));
+    const fonts = await _ChartExporter.#fonts(theme.fontFamily);
+    if (!fonts) return;
+    const style = svg.ownerDocument.createElementNS(SVG_NS, "style");
+    style.textContent = fonts;
+    svg.insertBefore(style, _nullishCoalesce(_optionalChain([svg, 'access', _13 => _13.querySelector, 'call', _14 => _14(":scope > title"), 'optionalAccess', _15 => _15.nextSibling]), () => ( svg.firstChild)));
+  }
+  static async #tile(url) {
+    try {
+      const data = await _ChartExporter.#fetch(url);
+      if (data.startsWith("data:image/")) return data;
+      throw new Error("the response is not an image");
+    } catch (cause) {
+      throw new ChartExportError(
+        "tainted" /* Tainted */,
+        `Cannot embed map tile ${url}: ${cause.message}. Pages may only read tiles from servers that send Access-Control-Allow-Origin. Use a tile source with CORS enabled, or drop \`tiles\` for this export. toSVG() still works, and keeps tiles as links.`,
+        { cause }
+      );
+    }
+  }
+  static async #fetch(url) {
+    const response = await fetch(url, { mode: "cors", credentials: "omit", signal: AbortSignal.timeout(TIMEOUT) });
+    if (!response.ok) throw new Error(`the server answered ${response.status}`);
+    const blob = await response.blob();
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = () => reject(_nullishCoalesce(reader.error, () => ( new Error("the response could not be read"))));
+      reader.readAsDataURL(blob);
+    });
+  }
+  static async #fonts(family) {
+    const wanted = new Set(family.split(",").map(quoteless));
+    const rules = [];
+    for (const sheet of document.styleSheets) {
+      let list;
+      try {
+        list = sheet.cssRules;
+      } catch (e2) {
+        continue;
+      }
+      for (const rule of _ChartExporter.#rules(list)) {
+        if (rule.constructor.name === "CSSFontFaceRule" && wanted.has(quoteless(rule.style.getPropertyValue("font-family")))) {
+          rules.push(_ChartExporter.#fontFace(rule.cssText, _nullishCoalesce(sheet.href, () => ( document.baseURI))));
+        }
+      }
+    }
+    return (await Promise.all(rules)).join("\n");
+  }
+  /** Every rule, including those nested in `@media` or `@layer`. */
+  static *#rules(list) {
+    for (const rule of list) {
+      yield rule;
+      if ("cssRules" in rule) yield* _ChartExporter.#rules(rule.cssRules);
+    }
+  }
+  static async #fontFace(css, base) {
+    let out = css;
+    for (const [link, url] of css.matchAll(/url\(["']?([^"')]+)["']?\)/g)) {
+      if (url.startsWith("data:")) continue;
+      out = out.replace(link, await _ChartExporter.#fetch(new URL(url, base).href).then((data) => `url("${data}")`, () => link));
+    }
+    return out;
+  }
+  static serialize(svg) {
+    return _ChartExporter.writable(new XMLSerializer().serializeToString(svg));
+  }
+  /** `text` without the characters XML cannot hold. */
+  static writable(text) {
+    return text.replace(UNWRITABLE, "");
+  }
+  /** Draws SVG text onto a canvas filled with `surface`. The SVG must already be embedded: an SVG image cannot load links. */
+  static async raster(svg, { width, height }, scale, surface) {
+    const url = URL.createObjectURL(_ChartExporter.blob(_ChartExporter.#atScale(svg, { width, height }, scale), "svg" /* SVG */));
+    try {
+      const image = await _ChartExporter.#load(url);
+      const canvas = _ChartExporter.canvas(width * scale, height * scale);
+      const paint = _ChartExporter.paint(canvas);
+      paint.fillStyle = surface;
+      paint.fillRect(0, 0, canvas.width, canvas.height);
+      paint.drawImage(image, 0, 0, canvas.width, canvas.height);
+      return canvas;
+    } finally {
+      URL.revokeObjectURL(url);
+    }
+  }
+  /**
+   * A held stroke is sized in screen pixels, and engines disagree on what those are in an image drawn larger:
+   * Chromium keeps it thin, WebKit scales it. In an image already at full size they agree, so that is what they get.
+   */
+  static #atScale(svg, { width, height }, scale) {
+    if (scale === 1 || !svg.includes(HELD_STROKE)) return svg;
+    const root = new DOMParser().parseFromString(svg, "image/svg+xml").documentElement;
+    for (const [name, value] of Object.entries({ viewBox: `0 0 ${width} ${height}`, width: width * scale, height: height * scale })) root.setAttribute(name, `${value}`);
+    for (const el of root.querySelectorAll(`[vector-effect="${HELD_STROKE}"]`)) {
+      el.style.setProperty("stroke-width", `${parseFloat(_nullishCoalesce(_optionalChain([el, 'access', _16 => _16.closest, 'call', _17 => _17("[stroke-width]"), 'optionalAccess', _18 => _18.getAttribute, 'call', _19 => _19("stroke-width")]), () => ( "1"))) * scale}px`);
+      const dash = el.getAttribute("stroke-dasharray");
+      if (dash && dash !== "none") el.setAttribute("stroke-dasharray", dash.split(/[\s,]+/).map((length) => parseFloat(length) * scale).join(" "));
+    }
+    return _ChartExporter.serialize(root);
+  }
+  static #load(url) {
+    return new Promise((resolve, reject) => {
+      const image = new Image();
+      image.onload = () => resolve(image);
+      image.onerror = () => reject(new ChartExportError("encoding" /* Encoding */, "The browser could not decode the exported SVG."));
+      image.src = url;
+    });
+  }
+  static canvas(width, height) {
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.round(width);
+    canvas.height = Math.round(height);
+    return canvas;
+  }
+  static paint(canvas) {
+    const paint = canvas.getContext("2d");
+    if (!paint) throw new ChartExportError("encoding" /* Encoding */, `The browser could not create a ${canvas.width}\xD7${canvas.height} canvas. Try a smaller scale.`);
+    return paint;
+  }
+  /** Encodes a canvas, turning a tainted or oversized canvas into a clear error. */
+  static png(canvas) {
+    return new Promise((resolve, reject) => {
+      const tooLarge = () => new ChartExportError("encoding" /* Encoding */, `The browser could not encode a ${canvas.width}\xD7${canvas.height} PNG. Try a smaller scale.`);
+      try {
+        canvas.toBlob((blob) => blob ? resolve(blob) : reject(tooLarge()), MIME["png" /* PNG */]);
+      } catch (cause) {
+        reject(cause.name === "SecurityError" ? new ChartExportError("tainted" /* Tainted */, "The chart drew a cross-origin image, so the browser will not let the page read it as a PNG.", { cause }) : cause);
+      }
+    });
+  }
+  static scale(scale = 2) {
+    if (Number.isFinite(scale) && scale > 0) return scale;
+    throw new RangeError(`PNG scale must be a positive number, got ${scale}.`);
+  }
+  /** A file for `content`. CSV carries a byte order mark, which Excel needs to read UTF-8. */
+  static blob(content, format) {
+    return new Blob([format === "csv" /* CSV */ ? "\uFEFF" : "", content], { type: MIME[format] });
+  }
+  /** Whether any mark is still moving, in which case the DOM holds in-between geometry. */
+  static animating(svg) {
+    return !!svg.querySelector(".live-marks[transform]") || !!_optionalChain([svg, 'access', _20 => _20.getAnimations, 'optionalCall', _21 => _21({ subtree: true }), 'access', _22 => _22.length]) || [...svg.querySelectorAll("*")].some((el) => "__transition" in el && el.__transition);
+  }
+  /** An off-screen host, so an unmounted chart still measures text and resolves styles. */
+  static scratch({ width, height }) {
+    const host = document.createElement("div");
+    host.style.cssText = `position:absolute;left:-99999px;top:0;width:${width}px;height:${height}px`;
+    host.setAttribute("aria-hidden", "true");
+    return document.body.appendChild(host);
+  }
+  /** Hands a file to the browser's download flow. Use it directly for a Blob you already hold. */
+  static save(blob, filename) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    link.style.display = "none";
+    document.body.appendChild(link).click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 3e4);
+  }
+};
+
+
+
+
+
+
+exports.ExportErrorCode = ExportErrorCode; exports.ChartExportError = ChartExportError; exports.ExportFormat = ExportFormat; exports.ChartExporter = ChartExporter;

package/dist/core/CartesianChart.js

@@ -1,16 +1,39 @@
 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 estimate = (label) => label.length * 6.2;
+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
@@ -35,16 +58,16 @@ var CartesianChart = class CartesianChart extends Chart2D {
 		return super.animated && !this.#view.moving;
 	}
 	xTicks() {
-		return 7;
+		return this.options.xTicks ?? 7;
 	}
 	yTicks() {
-		return 6;
+		return this.options.yTicks ?? 6;
 	}
 	plotMargin() {
 		return {
 			top: 12,
 			right: 20,
-			bottom: this.options.xLabel ? 44 : 28,
+			bottom: (this.options.xLabel ? 44 : 28) + this.#tickGrowth,
 			left: this.gutter + (this.options.yLabel ? 18 : 0)
 		};
 	}
@@ -84,6 +107,8 @@ var CartesianChart = class CartesianChart extends Chart2D {
 	}
 	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();
@@ -94,6 +119,52 @@ var CartesianChart = class CartesianChart extends Chart2D {
 		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?.() ?? [];
@@ -106,18 +177,20 @@ var CartesianChart = class CartesianChart extends Chart2D {
 	drawAxes(ctx, { x, y }) {
 		const { width, height } = ctx.plot;
 		const { theme } = ctx;
-		const xCount = Math.min(this.xTicks(), Math.floor(width / 80));
+		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(this.yTicks()).tickSize(0);
-		const fx = this.#view.legible(x, this.tickFormat(x), xCount), fy = this.#view.legible(y, this.tickFormat(y), this.yTicks());
+		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 ?? "");
-		this.fitted = Math.min(96, Math.ceil(Math.max(28, ...labels.map(estimate))) + 12);
+		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(this.yTicks()) : [];
+		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);
@@ -127,16 +200,19 @@ var CartesianChart = class CartesianChart extends Chart2D {
 		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,
+			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);
-		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.t));
+		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

@@ -1,5 +1,6 @@
 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";
@@ -46,7 +47,13 @@ var Chart = class {
 		if (getComputedStyle(host).position === "static") host.style.position = "relative";
 		this.tooltipBox = new Tooltip(host);
 		this.render();
-		if (typeof ResizeObserver !== "undefined" && !(this.options.width && this.options.height)) {
+		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}`;
@@ -57,22 +64,33 @@ var Chart = class {
 				}
 			});
 			this.observer.observe(host);
+		} else if (!fluid) {
+			this.observer?.disconnect();
+			this.observer = null;
 		}
-		if ((this.options.theme ?? ThemeMode.Auto) === ThemeMode.Auto && typeof matchMedia === "function") {
+		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;
 		}
-		return this;
 	}
+	/** Merges `patch` into the options. A key set to `undefined` returns to the chart's default. */
 	update(patch) {
-		this.options = {
+		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();
 	}
 	/**
@@ -139,7 +157,9 @@ var Chart = class {
 		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;
@@ -162,7 +182,11 @@ var Chart = class {
 	}
 	/** What this chart can export right now. Check this before offering a format. */
 	get exportFormats() {
-		return [ExportFormat.PNG, ...this.#rows.rows.length ? [ExportFormat.CSV] : []];
+		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() {
@@ -182,6 +206,14 @@ var Chart = class {
 		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 ? {
@@ -190,11 +222,13 @@ var Chart = class {
 		} : this.table();
 	}
 	/** Saves the chart through the browser's download flow. */
-	async download(format = ExportFormat.PNG, { filename, scale } = {}) {
-		ChartExporter.save(await this.#file(format, scale), filename ?? `${this.meta.id}.${format}`);
+	async download(format = ExportFormat.PNG, options = {}) {
+		ChartExporter.save(await this.#file(format, options), options.filename ?? `${this.meta.id}.${format}`);
 	}
-	async #file(format, scale) {
-		if (format === ExportFormat.PNG) return this.toPNG({ scale });
+	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. */
@@ -202,18 +236,32 @@ var Chart = class {
 		await this.meta.prepare?.();
 	}
 	render() {
-		this.theme = Theme.resolve(this.options.theme);
-		this.palette = new Palette(this.theme, this.#stream ? this.#seats : void 0);
-		if (this.host) this.paint();
+		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();
+		const box = this.host?.getBoundingClientRect(), { aspectRatio } = this.options;
+		const width = this.options.width ?? (box?.width || 640);
 		return {
-			width: this.options.width ?? (box?.width || 640),
-			height: this.options.height ?? (box?.height || 400)
+			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;
 	}