@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/core/AnnotationLayer.js

@@ -0,0 +1,236 @@
+import { AnnotationPlacer } from "./AnnotationPlacer.js";
+import { AnnotationScale } from "./AnnotationScale.js";
+import { select } from "d3";
+// src/core/AnnotationLayer.ts
+/** Which axis a reference value belongs to: `Y` gives a horizontal line, `X` a vertical one. */
+var AnnotationAxis = /* @__PURE__ */ function(AnnotationAxis) {
+	AnnotationAxis["X"] = "x";
+	AnnotationAxis["Y"] = "y";
+	return AnnotationAxis;
+}({});
+var LINE_HEIGHT = 14;
+var ASCENT = 11;
+var PAD = 4;
+var GAP_ABOVE = 3;
+var MARKER = 4;
+var CLEARANCE = 6;
+var CHAR = 6.2;
+var ABOVE = ":scope > g.m-brush, :scope > g.m-zoom-controls";
+var REACHES = [
+	22,
+	38,
+	56
+];
+var SIDES = [
+	[1, -1],
+	[-1, -1],
+	[1, 1],
+	[-1, 1],
+	[0, -1],
+	[0, 1],
+	[1, 0],
+	[-1, 0]
+];
+var ALONG_END = [
+	1,
+	0,
+	.75,
+	.25,
+	.5
+];
+var ALONG_TOP = [
+	0,
+	1,
+	.25,
+	.75,
+	.5
+];
+var clamp = (value, low, high) => Math.max(low, Math.min(high, value));
+var along = (start, room, size, stops) => stops.map((stop) => start + PAD + stop * (room - size - 8));
+var blank = (text) => !String(text ?? "").trim();
+function measure(node) {
+	const width = node.getComputedTextLength?.() ?? 0;
+	return width > 0 ? width : (node.textContent ?? "").length * CHAR;
+}
+/** Shortens the text to `room` and returns the width it ends up with. */
+function fit(node, room) {
+	const width = measure(node);
+	if (width <= room) return width;
+	const chars = [...node.textContent ?? ""];
+	let keep = Math.floor(chars.length * room / width);
+	do
+		node.textContent = `${chars.slice(0, Math.max(0, --keep)).join("").trimEnd()}…`;
+	while (keep > 0 && measure(node) > room);
+	return measure(node);
+}
+/**
+* Reference lines, shaded bands and point notes for every cartesian chart. Everything goes through
+* the axes of the current draw, so it follows whatever those scales do, including zoom. Values off
+* the domain are skipped, and a label with no free spot in the plot is dropped.
+*/
+var AnnotationLayer = class AnnotationLayer {
+	#ctx;
+	#x;
+	#y;
+	#plot;
+	#kept;
+	constructor(ctx, axes, kept) {
+		this.#ctx = ctx;
+		this.#kept = kept;
+		this.#x = new AnnotationScale(axes.x);
+		this.#y = new AnnotationScale(axes.y);
+		const [left, right] = this.#x.extent(ctx.plot.width), [top, bottom] = this.#y.extent(ctx.plot.height);
+		this.#plot = {
+			x: left,
+			y: top,
+			width: right - left,
+			height: bottom - top
+		};
+	}
+	/** Draws into `ctx`, or clears earlier drawings when no option is set. Labels stay off `kept`. Safe to call on every paint. */
+	static draw(ctx, axes, { referenceLines, referenceBands, annotations }, kept = null) {
+		if (!referenceLines?.length && !referenceBands?.length && !annotations?.length) {
+			ctx.root.selectAll(":scope > g.m-annotations, :scope > g.m-annotation-bands").remove();
+			return;
+		}
+		new AnnotationLayer(ctx, axes, kept).#render(referenceLines ?? [], referenceBands ?? [], annotations ?? []);
+	}
+	#render(lines, bands, notes) {
+		const ctx = this.#ctx, { theme } = ctx, layer = ctx.group("annotations").attr("pointer-events", "none");
+		const root = ctx.root.node();
+		root.insertBefore(layer.node(), root.querySelector(ABOVE));
+		const rules = lines.flatMap((line, index) => this.#rule(line, index));
+		const shades = bands.flatMap((band, index) => this.#shade(band, index));
+		const spots = notes.flatMap((note, index) => this.#spot(note, index));
+		ctx.marks("annotation-bands", "rect", shades.map((shade) => shade.box), (_, index) => index).attr("fill", theme.inkMuted).attr("fill-opacity", .14).attr("pointer-events", "none").attr("x", (d) => d.x).attr("y", (d) => d.y).attr("width", (d) => d.width).attr("height", (d) => d.height);
+		ctx.group("annotation-bands").lower();
+		ctx.marks("annotation-lines", "line", rules.map((rule) => rule.path), (_, index) => index, layer).attr("stroke", theme.inkSecondary).attr("stroke-width", 1.5).attr("stroke-dasharray", "4 3").attr("x1", (d) => d.x1).attr("y1", (d) => d.y1).attr("x2", (d) => d.x2).attr("y2", (d) => d.y2);
+		const labels = [
+			...spots.map((spot) => spot.label),
+			...rules.flatMap((rule) => rule.label ?? []),
+			...shades.flatMap((shade) => shade.label ?? [])
+		];
+		const placed = this.#place(layer, labels, spots.map((spot) => spot.label.anchor));
+		const shown = spots.filter((spot) => placed.has(spot.label.key));
+		ctx.marks("annotation-connectors", "line", shown, (d) => d.label.key, layer).attr("stroke", theme.inkMuted).attr("stroke-width", 1).each(function({ label }) {
+			const { x, y } = label.anchor, end = AnnotationPlacer.nearest(label.anchor, placed.get(label.key));
+			select(this).attr("x1", x).attr("y1", y).attr("x2", end.x).attr("y2", end.y);
+		});
+		ctx.marks("annotation-dots", "circle", shown, (d) => d.label.key, layer).attr("fill", theme.ink).attr("stroke", theme.surface).attr("stroke-width", 2).attr("cx", (d) => d.label.anchor.x).attr("cy", (d) => d.label.anchor.y).attr("r", MARKER);
+		layer.select("g.m-annotation-text").raise();
+	}
+	#place(layer, labels, anchors) {
+		const { theme } = this.#ctx, plot = this.#plot, placer = new AnnotationPlacer(plot), placed = /* @__PURE__ */ new Map();
+		if (this.#kept) placer.reserve(this.#kept);
+		for (const { x, y } of anchors) placer.reserve({
+			x: x - CLEARANCE,
+			y: y - CLEARANCE,
+			width: 12,
+			height: 12
+		});
+		const texts = this.#ctx.marks("annotation-text", "text", labels, (d) => d.key, layer).text((d) => d.text);
+		this.#ctx.text(texts, 11, "ink").attr("stroke", theme.surface).attr("stroke-width", 3).attr("paint-order", "stroke").attr("stroke-linejoin", "round");
+		texts.each(function(label) {
+			const node = this;
+			const box = placer.place(label.spots(fit(node, Math.min(label.room ?? Infinity, plot.width - 8))), label.anchor);
+			if (!box) {
+				node.remove();
+				return;
+			}
+			placed.set(label.key, box);
+			node.setAttribute("x", String(box.x));
+			node.setAttribute("y", String(box.y + ASCENT));
+		});
+		return placed;
+	}
+	#inside(pixel, vertical) {
+		const { x, y, width, height } = this.#plot;
+		const [low, size] = vertical ? [x, width] : [y, height];
+		return pixel >= low - .5 && pixel <= low + size + .5;
+	}
+	#rule({ axis = "y", value, label }, index) {
+		const { x, y, width, height } = this.#plot, vertical = axis === "x";
+		const at = (vertical ? this.#x : this.#y).at(value);
+		if (at === null || !this.#inside(at, vertical)) return [];
+		const path = vertical ? {
+			x1: at,
+			x2: at,
+			y1: y,
+			y2: y + height
+		} : {
+			x1: x,
+			x2: x + width,
+			y1: at,
+			y2: at
+		};
+		const spots = (w) => vertical ? along(y, height, LINE_HEIGHT, ALONG_TOP).flatMap((top) => [at + PAD, at - w - PAD].map((left) => this.#box(left, top, w))) : along(x, width, w, ALONG_END).flatMap((left) => [at - LINE_HEIGHT - GAP_ABOVE, at + GAP_ABOVE].map((top) => this.#box(left, top, w)));
+		const room = vertical ? Math.max(at - x, x + width - at) - PAD : void 0;
+		return [{
+			path,
+			label: blank(label) ? void 0 : {
+				key: `line-${index}`,
+				text: label,
+				spots,
+				room
+			}
+		}];
+	}
+	#shade({ axis = "y", from, to, label }, index) {
+		const { x, y, width, height } = this.#plot, vertical = axis === "x";
+		const span = (vertical ? this.#x : this.#y).span(from, to);
+		if (!span) return [];
+		const [low, size] = vertical ? [x, width] : [y, height];
+		const start = Math.max(span[0], low), end = Math.min(span[1], low + size);
+		if (end <= start) return [];
+		const box = vertical ? {
+			x: start,
+			y,
+			width: end - start,
+			height
+		} : {
+			x,
+			y: start,
+			width,
+			height: end - start
+		};
+		const inward = (length) => end - start >= length + 8 ? [start + PAD, end - length - PAD] : [clamp((start + end - length) / 2, low, low + size - length)];
+		const spots = (w) => vertical ? along(y, height, LINE_HEIGHT, ALONG_TOP).flatMap((top) => inward(w).map((left) => this.#box(left, top, w))) : along(x, width, w, ALONG_END).flatMap((left) => inward(LINE_HEIGHT).map((top) => this.#box(left, top, w)));
+		return [{
+			box,
+			label: blank(label) ? void 0 : {
+				key: `band-${index}`,
+				text: label,
+				spots
+			}
+		}];
+	}
+	#spot({ x, y, text }, index) {
+		const px = this.#x.at(x), py = this.#y.at(y);
+		if (blank(text) || px === null || py === null || !this.#inside(px, true) || !this.#inside(py, false)) return [];
+		const { x: left, width } = this.#plot;
+		const spots = (w) => REACHES.flatMap((reach) => SIDES.map(([dx, dy]) => {
+			const across = dy ? reach * .6 : reach;
+			const start = dx > 0 ? px + across : dx < 0 ? px - across - w : px - w / 2;
+			const top = dy < 0 ? py - reach - LINE_HEIGHT : dy > 0 ? py + reach : py - LINE_HEIGHT / 2;
+			return this.#box(clamp(start, left, left + width - w), top, w);
+		}));
+		return [{ label: {
+			key: `note-${index}`,
+			text,
+			spots,
+			anchor: {
+				x: px,
+				y: py
+			}
+		} }];
+	}
+	#box(x, y, width) {
+		return {
+			x,
+			y,
+			width,
+			height: LINE_HEIGHT
+		};
+	}
+};
+export { AnnotationAxis, AnnotationLayer };

package/dist/core/AnnotationPlacer.js

@@ -0,0 +1,47 @@
+// src/core/AnnotationPlacer.ts
+var GAP = 2;
+var SAMPLES = 12;
+var overlaps = (a, b) => a.x < b.x + b.width + GAP && b.x < a.x + a.width + GAP && a.y < b.y + b.height + GAP && b.y < a.y + a.height + GAP;
+var crosses = (from, to, box) => Array.from({ length: 13 }, (_, i) => i / SAMPLES).some((t) => {
+	const x = from.x + (to.x - from.x) * t, y = from.y + (to.y - from.y) * t;
+	return x >= box.x && x <= box.x + box.width && y >= box.y && y <= box.y + box.height;
+});
+/** Hands out label boxes inside `bounds` that stay clear of each other, of markers and of connectors. */
+var AnnotationPlacer = class AnnotationPlacer {
+	bounds;
+	#labels = [];
+	#markers = [];
+	#wires = [];
+	constructor(bounds) {
+		this.bounds = bounds;
+	}
+	/** Point on `box` nearest to `point`: where a connector ends. */
+	static nearest(point, box) {
+		return {
+			x: Math.min(box.x + box.width, Math.max(box.x, point.x)),
+			y: Math.min(box.y + box.height, Math.max(box.y, point.y))
+		};
+	}
+	/** Keeps labels off an area they may not cover. */
+	reserve(box) {
+		this.#markers.push(box);
+	}
+	/** Takes the first free spot, reserving it and any connector to `anchor`. Null when none is free. */
+	place(spots, anchor) {
+		const spot = spots.find((box) => this.#free(box, anchor));
+		if (!spot) return null;
+		this.#labels.push(spot);
+		if (anchor) this.#wires.push([anchor, AnnotationPlacer.nearest(anchor, spot)]);
+		return spot;
+	}
+	#free(box, anchor) {
+		const { x, y, width, height } = this.bounds;
+		if (box.x < x || box.y < y || box.x + box.width > x + width || box.y + box.height > y + height) return false;
+		if ([...this.#labels, ...this.#markers].some((other) => overlaps(box, other))) return false;
+		if (this.#wires.some(([from, to]) => crosses(from, to, box))) return false;
+		if (!anchor) return true;
+		const end = AnnotationPlacer.nearest(anchor, box);
+		return !this.#labels.some((other) => crosses(anchor, end, other));
+	}
+};
+export { AnnotationPlacer };

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,142 @@
+import { AnnotationLayer } from "./AnnotationLayer.js";
+import { Chart2D } from "./Chart2D.js";
+import { ChartViewport, ZoomAxis } from "./ChartViewport.js";
+import { LiveMotion } from "./LiveMotion.js";
+import { Scales } from "./Scales.js";
+import { axisBottom, axisLeft, max } from "d3";
+// src/core/CartesianChart.ts
+var estimate = (label) => label.length * 6.2;
+/** 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;
+	#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 7;
+	}
+	yTicks() {
+		return 6;
+	}
+	plotMargin() {
+		return {
+			top: 12,
+			right: 20,
+			bottom: this.options.xLabel ? 44 : 28,
+			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.#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);
+	}
+	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 xCount = Math.min(this.xTicks(), Math.floor(width / 80));
+		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());
+		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 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()) : [];
+		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,
+			x: width / 2,
+			y: height + 38,
+			r: 0
+		}, this.options.yLabel && {
+			t: this.options.yLabel,
+			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));
+	}
+};
+export { CartesianChart };