@delacour/react-native-charts 0.1.0-alpha.20260925053522

package/src/core/geometry/category-domain.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, test } from "bun:test";
+import type { ChartPoint } from "../chart.types";
+import type { ScaleDescriptor } from "../scale/scale.types";
+import { categoryDomainCovers } from "./category-domain";
+
+const at = (xValue: number): ChartPoint => ({ x: 0, y: 0, xValue, yValue: 1 });
+const linear = (domain: readonly [number, number]): ScaleDescriptor => ({ kind: "linear", domain, range: [0, 100] });
+
+describe("categoryDomainCovers", () => {
+	test("holds when the domain reaches half a step past the outermost categories", () => {
+		expect(categoryDomainCovers([at(0), at(1), at(2)], linear([-0.5, 2.5]), 1)).toBe(true);
+		expect(categoryDomainCovers([at(0), at(1), at(2)], linear([-1, 3]), 1)).toBe(true);
+	});
+
+	test("fails when a bar would straddle the plot's edge", () => {
+		expect(categoryDomainCovers([at(0), at(1), at(2)], linear([0, 2]), 1)).toBe(false);
+		expect(categoryDomainCovers([at(0), at(1), at(2)], linear([-0.5, 2]), 1)).toBe(false);
+	});
+
+	test("reads the categories from xValue, which is the category whichever axis it lies on", () => {
+		// A horizontal point has its value on x and its category on y; xValue is still the category.
+		const horizontal: ChartPoint[] = [
+			{ x: 40, y: 10, xValue: 0, yValue: 4 },
+			{ x: 80, y: 90, xValue: 1, yValue: 8 },
+		];
+		expect(categoryDomainCovers(horizontal, linear([-0.5, 1.5]), 1)).toBe(true);
+		expect(categoryDomainCovers(horizontal, linear([0, 1]), 1)).toBe(false);
+	});
+
+	test("an empty series is covered — there is nothing to warn about", () => {
+		expect(categoryDomainCovers([], linear([0, 1]), 1)).toBe(true);
+	});
+});

package/src/core/geometry/category-domain.ts

@@ -0,0 +1,18 @@
+import type { ChartPoint } from "../chart.types";
+import type { ScaleDescriptor } from "../scale/scale.types";
+
+/**
+ * Whether the category scale's domain reaches half a step past the first and
+ * last category, which is what a bar centred on each needs to sit inside the
+ * plot. `xValue` is the category in either orientation, and the caller hands
+ * in whichever canvas scale holds the categories — `yScale` on a horizontal
+ * chart — so the check is the same either way round.
+ */
+export function categoryDomainCovers(series: readonly ChartPoint[], scale: ScaleDescriptor, step: number): boolean {
+	const first = series[0]?.xValue;
+	const last = series[series.length - 1]?.xValue;
+	if (first === undefined || last === undefined) return true;
+	const half = step / 2;
+	const [lo, hi] = scale.domain;
+	return Math.min(first, last) - half >= lo && Math.max(first, last) + half <= hi;
+}

package/src/core/geometry/chart-bounds.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, test } from "bun:test";
+import { getChartBounds, hasArea, NO_GUTTERS } from "./chart-bounds";
+
+const size = { width: 300, height: 200 };
+
+describe("getChartBounds", () => {
+	test("is the whole canvas with no padding or gutters", () => {
+		expect(getChartBounds(size, undefined, NO_GUTTERS)).toEqual({ left: 0, top: 0, right: 300, bottom: 200 });
+	});
+
+	test("subtracts padding and gutters from the right sides", () => {
+		const bounds = getChartBounds(size, { left: 10, bottom: 5 }, { top: 0, right: 4, bottom: 20, left: 30 });
+		expect(bounds).toEqual({ left: 40, top: 0, right: 296, bottom: 175 });
+	});
+
+	test("collapses rather than inverting when the gutters exceed the canvas", () => {
+		// Real on the first frame, before onLayout reports a size. An inverted
+		// rect gives a negative scale range and draws every mark mirrored.
+		const bounds = getChartBounds({ width: 20, height: 20 }, undefined, { top: 0, right: 0, bottom: 40, left: 40 });
+		expect(bounds.right).toBeGreaterThanOrEqual(bounds.left);
+		expect(bounds.bottom).toBeGreaterThanOrEqual(bounds.top);
+		expect(hasArea(bounds)).toBe(false);
+	});
+
+	test("treats a non-finite canvas as zero", () => {
+		const bounds = getChartBounds({ width: Number.NaN, height: 200 }, undefined, NO_GUTTERS);
+		expect(Number.isFinite(bounds.right)).toBe(true);
+	});
+});
+
+describe("hasArea", () => {
+	test("is false for a rect with no room to draw in", () => {
+		expect(hasArea({ left: 0, top: 0, right: 0, bottom: 10 })).toBe(false);
+		expect(hasArea({ left: 0, top: 0, right: 10, bottom: 10 })).toBe(true);
+	});
+});

package/src/core/geometry/chart-bounds.ts

@@ -0,0 +1,47 @@
+import type { ChartBounds, ChartSize } from "../chart.types";
+import { type SidedNumber, sidesOf } from "../util/sided-number";
+
+/** Space each axis reserves outside the plot rect, in points. */
+export type ChartGutters = {
+	readonly top: number;
+	readonly right: number;
+	readonly bottom: number;
+	readonly left: number;
+};
+
+export const NO_GUTTERS: ChartGutters = { top: 0, right: 0, bottom: 0, left: 0 };
+
+/**
+ * The plot rect — the canvas minus the caller's padding and the axis gutters.
+ *
+ * Collapses to a zero-size rect at the top-left rather than inverting when the
+ * gutters exceed the canvas. That happens for real on the first frame, before
+ * `onLayout` has reported a size, and an inverted rect produces a negative
+ * scale range that draws every mark mirrored off-screen.
+ */
+export function getChartBounds(
+	size: ChartSize,
+	padding: SidedNumber | undefined,
+	gutters: ChartGutters = NO_GUTTERS
+): ChartBounds {
+	const pad = sidesOf(padding);
+	const width = Number.isFinite(size.width) ? Math.max(0, size.width) : 0;
+	const height = Number.isFinite(size.height) ? Math.max(0, size.height) : 0;
+
+	const left = pad.left + gutters.left;
+	const top = pad.top + gutters.top;
+	const right = width - pad.right - gutters.right;
+	const bottom = height - pad.bottom - gutters.bottom;
+
+	return {
+		left,
+		top,
+		right: Math.max(left, right),
+		bottom: Math.max(top, bottom),
+	};
+}
+
+/** Whether a rect has room to draw in. */
+export function hasArea(bounds: ChartBounds): boolean {
+	return bounds.right > bounds.left && bounds.bottom > bounds.top;
+}

package/src/core/geometry/chart-layout.test.ts

@@ -0,0 +1,230 @@
+import { describe, expect, test } from "bun:test";
+import { formatNumberTick } from "../text/format-tick";
+import { axisRanges, type ChartPlan, pickAxisRoles, placeAxisRoles, planAxis, resolveChartFrame } from "./chart-layout";
+
+const canvas = { width: 300, height: 200 };
+
+function numericAxis(overrides: Partial<Parameters<typeof planAxis>[0]> = {}) {
+	return planAxis({
+		domain: [0, 100],
+		kind: "linear",
+		range: [0, 300],
+		tickCount: 5,
+		format: formatNumberTick,
+		show: true,
+		...overrides,
+	});
+}
+
+describe("planAxis", () => {
+	test("decides tick values and their labels together", () => {
+		const plan = numericAxis();
+		expect(plan.tickValues.length).toBeGreaterThan(0);
+		expect(plan.labels).toHaveLength(plan.tickValues.length);
+		expect(plan.labels[0]).toBe("0");
+	});
+
+	test("produces no labels for a hidden axis, but keeps the values", () => {
+		// The values still position a gridline even when nothing is written.
+		const plan = numericAxis({ show: false });
+		expect(plan.labels).toEqual([]);
+		expect(plan.tickValues.length).toBeGreaterThan(0);
+	});
+
+	test("honours explicit tick values", () => {
+		expect(numericAxis({ tickValues: [0, 50, 100] }).tickValues).toEqual([0, 50, 100]);
+	});
+
+	test("reports the niced domain, so pass two cannot re-nice it", () => {
+		const plan = numericAxis({ domain: [3, 97], nice: true });
+		expect(plan.domain).toEqual([0, 100]);
+	});
+
+	test("nices to its own tick count, so the ends of the axis get labels", () => {
+		// Niced at d3's default ten, [28, 91] rounds to [25, 95] and four ticks
+		// across it lands on 40/60/80 — three labels, neither at an end.
+		const plan = numericAxis({ domain: [28, 91], nice: true, tickCount: 4 });
+		expect(plan.domain).toEqual([20, 100]);
+		expect(plan.tickValues).toEqual([20, 40, 60, 80, 100]);
+	});
+
+	test("uses the caller's formatter", () => {
+		expect(numericAxis({ format: (value) => `${value}%` }).labels[0]).toBe("0%");
+	});
+});
+
+describe("resolveChartFrame", () => {
+	const plan: ChartPlan = {
+		x: numericAxis({ domain: [0, 10], tickValues: [0, 5, 10] }),
+		y: numericAxis({ domain: [0, 100], tickValues: [0, 50, 100] }),
+	};
+
+	const frame = (overrides: Partial<Parameters<typeof resolveChartFrame>[0]> = {}) =>
+		resolveChartFrame({
+			canvas,
+			plan,
+			xLabelWidths: [10, 10, 20],
+			yLabelWidths: [8, 16, 24],
+			lineHeight: 12,
+			showXAxis: true,
+			showYAxis: true,
+			...overrides,
+		});
+
+	test("insets the plot rect by the measured gutters", () => {
+		const resolved = frame();
+		expect(resolved.bounds.left).toBeGreaterThan(0);
+		expect(resolved.bounds.bottom).toBeLessThan(canvas.height);
+	});
+
+	test("keeps the plan's tick values and only moves their positions", () => {
+		// The whole point of two passes: values fixed in pass one, positions in two.
+		const resolved = frame();
+		expect(resolved.xTicks.map((tick) => tick.value)).toEqual([0, 5, 10]);
+		expect(resolved.yTicks.map((tick) => tick.value)).toEqual([0, 50, 100]);
+	});
+
+	test("puts every tick inside the plot rect", () => {
+		const resolved = frame();
+		for (const tick of resolved.xTicks) {
+			expect(tick.position).toBeGreaterThanOrEqual(resolved.bounds.left - 1e-6);
+			expect(tick.position).toBeLessThanOrEqual(resolved.bounds.right + 1e-6);
+		}
+		for (const tick of resolved.yTicks) {
+			expect(tick.position).toBeGreaterThanOrEqual(resolved.bounds.top - 1e-6);
+			expect(tick.position).toBeLessThanOrEqual(resolved.bounds.bottom + 1e-6);
+		}
+	});
+
+	test("inverts the y range, so a larger value sits higher on screen", () => {
+		const resolved = frame();
+		const [low, high] = [resolved.yTicks[0], resolved.yTicks.at(-1)];
+		expect(high?.position ?? 0).toBeLessThan(low?.position ?? 0);
+	});
+
+	test("reclaims the gutter when an axis is hidden", () => {
+		const shown = frame();
+		const hidden = frame({ showXAxis: false, showYAxis: false, xLabelWidths: [], yLabelWidths: [] });
+		expect(hidden.bounds.left).toBeLessThan(shown.bounds.left);
+		expect(hidden.bounds.bottom).toBeGreaterThan(shown.bounds.bottom);
+	});
+
+	test("is stable: measuring the same labels twice gives the same rect", () => {
+		// If this ever failed the layout would oscillate on every render.
+		expect(frame().bounds).toEqual(frame().bounds);
+	});
+
+	test("survives a canvas with no size", () => {
+		const resolved = frame({ canvas: { width: 0, height: 0 } });
+		expect(Number.isFinite(resolved.bounds.right)).toBe(true);
+		expect(resolved.bounds.right).toBeGreaterThanOrEqual(resolved.bounds.left);
+	});
+
+	test("reserves the left gutter for category labels planned onto y", () => {
+		// A horizontal chart plans its categories into the y range. The frame
+		// does not know or care: it measures whatever labels sit on each side.
+		const categories = planAxis({
+			domain: [0, 2],
+			kind: "linear",
+			range: [0, 100],
+			tickCount: 3,
+			tickValues: [0, 1, 2],
+			format: (value) => ["January", "February", "March"][value] ?? "",
+			show: true,
+		});
+		const values = planAxis({
+			domain: [0, 100],
+			kind: "linear",
+			range: [0, 300],
+			tickCount: 4,
+			format: String,
+			show: true,
+		});
+		const frame = resolveChartFrame({
+			canvas: { width: 300, height: 100 },
+			plan: { x: values, y: categories },
+			xLabelWidths: [10, 10, 10, 10],
+			yLabelWidths: [60, 62, 40],
+			lineHeight: 12,
+			showXAxis: true,
+			showYAxis: true,
+		});
+		expect(frame.bounds.left).toBeGreaterThanOrEqual(62);
+		expect(frame.yTicks.map((tick) => tick.value)).toEqual([0, 1, 2]);
+	});
+
+	test("runs a horizontal chart's category axis top to bottom, so the first row is the top one", () => {
+		const categories = planAxis({
+			domain: [0, 2],
+			kind: "linear",
+			range: [0, 100],
+			tickCount: 3,
+			format: String,
+			show: false,
+		});
+		const values = planAxis({
+			domain: [0, 100],
+			kind: "linear",
+			range: [0, 300],
+			tickCount: 4,
+			format: String,
+			show: false,
+		});
+		const frame = resolveChartFrame({
+			canvas: { width: 300, height: 100 },
+			plan: { x: values, y: categories },
+			xLabelWidths: [],
+			yLabelWidths: [],
+			lineHeight: 12,
+			showXAxis: false,
+			showYAxis: false,
+			orientation: "horizontal",
+		});
+		expect(frame.yScale.range[0]).toBe(frame.bounds.top);
+		expect(frame.yScale.range[1]).toBe(frame.bounds.bottom);
+		// The first tick — the first category — sits highest on screen.
+		expect(frame.yTicks[0]?.position).toBeLessThan(frame.yTicks[2]?.position as number);
+		// Values still grow rightward.
+		expect(frame.xScale.range).toEqual([frame.bounds.left, frame.bounds.right]);
+	});
+
+	test("a vertical chart keeps its value axis bottom to top", () => {
+		const frame = resolveChartFrame({
+			canvas: { width: 300, height: 100 },
+			plan: {
+				x: planAxis({ domain: [0, 2], kind: "linear", range: [0, 300], tickCount: 3, format: String, show: false }),
+				y: planAxis({ domain: [0, 100], kind: "linear", range: [100, 0], tickCount: 4, format: String, show: false }),
+			},
+			xLabelWidths: [],
+			yLabelWidths: [],
+			lineHeight: 12,
+			showXAxis: false,
+			showYAxis: false,
+		});
+		expect(frame.yScale.range).toEqual([frame.bounds.bottom, frame.bounds.top]);
+	});
+});
+
+describe("axis roles", () => {
+	const outer = { left: 10, right: 110, top: 5, bottom: 65 };
+
+	test("vertical puts categories on x and values up y", () => {
+		expect(pickAxisRoles("x", "y", "vertical")).toEqual({ category: "x", value: "y" });
+		expect(placeAxisRoles("c", "v", "vertical")).toEqual({ x: "c", y: "v" });
+		expect(axisRanges(outer, "vertical")).toEqual({ category: [10, 110], value: [65, 5] });
+	});
+
+	test("horizontal puts categories down y, top first, and values along x", () => {
+		expect(pickAxisRoles("x", "y", "horizontal")).toEqual({ category: "y", value: "x" });
+		expect(placeAxisRoles("c", "v", "horizontal")).toEqual({ x: "v", y: "c" });
+		// Top to bottom, so the first row is the top one and positions ascend.
+		expect(axisRanges(outer, "horizontal")).toEqual({ category: [5, 65], value: [10, 110] });
+	});
+
+	test("pick and place are inverses", () => {
+		for (const orientation of ["vertical", "horizontal"] as const) {
+			const picked = pickAxisRoles(1, 2, orientation);
+			expect(placeAxisRoles(picked.category, picked.value, orientation)).toEqual({ x: 1, y: 2 });
+		}
+	});
+});

package/src/core/geometry/chart-layout.ts

@@ -0,0 +1,162 @@
+import type { ChartBounds, ChartOrientation, ChartSize } from "../chart.types";
+import { makeScale } from "../scale/make-scale";
+import type { DomainTuple, RangeTuple, ScaleDescriptor, ScaleType } from "../scale/scale.types";
+import { resolveAxisGutters } from "../text/axis-gutters";
+import { buildTicks } from "../ticks/build-ticks";
+import type { ChartTick } from "../ticks/tick.types";
+import type { SidedNumber } from "../util/sided-number";
+import { getChartBounds } from "./chart-bounds";
+
+/**
+ * Something per axis role, picked out of something per canvas axis.
+ *
+ * A chart has a category axis and a value axis; the canvas has x and y.
+ * Vertical maps category to x; horizontal maps it to y. Every place that
+ * would otherwise write `horizontal ? y : x` goes through here, so the swap
+ * is made in one spot and cannot be made in one direction only.
+ */
+export function pickAxisRoles<T>(x: T, y: T, orientation: ChartOrientation): { category: T; value: T } {
+	return orientation === "horizontal" ? { category: y, value: x } : { category: x, value: y };
+}
+
+/** The inverse of `pickAxisRoles`: per role back onto the canvas axes. */
+export function placeAxisRoles<T>(category: T, value: T, orientation: ChartOrientation): { x: T; y: T } {
+	return orientation === "horizontal" ? { x: value, y: category } : { x: category, y: value };
+}
+
+/**
+ * The canvas range each role maps into.
+ *
+ * Values always grow away from the origin corner: up the y axis, or right
+ * along x. Categories run left to right, or **top to bottom** when horizontal
+ * — so the first row is the top one, as in a table, and the category
+ * positions ascend, which the scrub's binary search requires.
+ */
+export function axisRanges(
+	outer: ChartBounds,
+	orientation: ChartOrientation
+): { category: RangeTuple; value: RangeTuple } {
+	return orientation === "horizontal"
+		? { category: [outer.top, outer.bottom], value: [outer.left, outer.right] }
+		: { category: [outer.left, outer.right], value: [outer.bottom, outer.top] };
+}
+
+/** What one axis decided before anything was measured. */
+export type AxisPlan = {
+	readonly domain: DomainTuple;
+	readonly kind: ScaleType;
+	readonly tickValues: readonly number[];
+	readonly labels: readonly string[];
+};
+
+export type ChartPlan = {
+	readonly x: AxisPlan;
+	readonly y: AxisPlan;
+};
+
+export type PlanAxisOptions = {
+	readonly domain: DomainTuple;
+	readonly kind: ScaleType;
+	readonly range: readonly [number, number];
+	readonly tickCount: number;
+	/** Explicit values, instead of generating any. */
+	readonly tickValues?: readonly number[];
+	readonly format: (value: number, index: number) => string;
+	readonly show: boolean;
+	readonly nice?: boolean;
+};
+
+/**
+ * Pass one: what an axis will say, decided against the whole canvas.
+ *
+ * The tick *values* are chosen here and never chosen again. That is what
+ * breaks the measure/gutter cycle — label width sets the gutter, the gutter
+ * sets the plot rect, and the plot rect would set the tick count, which is a
+ * loop. Fixing the values after one look at the full canvas means the second
+ * pass moves positions only, and there is nothing left to iterate.
+ */
+export function planAxis(options: PlanAxisOptions): AxisPlan {
+	const scale = makeScale({
+		kind: options.kind,
+		domain: options.domain,
+		range: options.range,
+		// Nice to the count this axis will actually tick at, not to d3's default
+		// of ten. `[28, 91]` niced at ten rounds to `[25, 95]`, and four ticks
+		// across that lands on 40/60/80 — three labels, neither of them at an
+		// end of the axis. Niced at four it rounds to `[20, 100]` and ticks
+		// 20/40/60/80/100, which both ends and every gridline agree with.
+		nice: options.nice === true ? options.tickCount : options.nice,
+	});
+
+	const ticks = buildTicks(scale, { values: options.tickValues, count: options.tickCount });
+	const tickValues = ticks.map((tick) => tick.value);
+
+	return {
+		domain: scale.domain,
+		kind: options.kind,
+		tickValues,
+		labels: options.show ? tickValues.map((value, index) => options.format(value, index)) : [],
+	};
+}
+
+/** The resolved frame: where the plot sits and what maps into it. */
+export type ChartFrame = {
+	readonly bounds: ChartBounds;
+	readonly xScale: ScaleDescriptor;
+	readonly yScale: ScaleDescriptor;
+	readonly xTicks: readonly ChartTick[];
+	readonly yTicks: readonly ChartTick[];
+};
+
+export type ResolveChartFrameOptions = {
+	readonly canvas: ChartSize;
+	readonly padding?: SidedNumber;
+	readonly plan: ChartPlan;
+	/** Measured advance widths of the x labels, in the plan's order. */
+	readonly xLabelWidths: readonly number[];
+	readonly yLabelWidths: readonly number[];
+	readonly lineHeight: number;
+	readonly showXAxis: boolean;
+	readonly showYAxis: boolean;
+	/**
+	 * Which canvas axis holds the categories. The frame builds the scales, so
+	 * it has to know: a horizontal chart's y range runs top to bottom for the
+	 * categories, where a vertical chart's runs bottom to top for the values.
+	 */
+	readonly orientation?: ChartOrientation;
+};
+
+/**
+ * Pass two: gutters from the measurements, then the plot rect and the scales.
+ *
+ * The domains come from the plan rather than being re-derived, so a `nice()`
+ * applied in pass one is not applied twice, and the two passes cannot disagree
+ * about what the axis covers.
+ */
+export function resolveChartFrame(options: ResolveChartFrameOptions): ChartFrame {
+	const { canvas, padding, plan } = options;
+
+	const gutters = resolveAxisGutters({
+		xLabelWidths: options.xLabelWidths,
+		yLabelWidths: options.yLabelWidths,
+		fontHeight: options.lineHeight,
+		showXAxis: options.showXAxis,
+		showYAxis: options.showYAxis,
+	});
+
+	const bounds = getChartBounds(canvas, padding, gutters);
+
+	const orientation = options.orientation ?? "vertical";
+	const byRole = axisRanges(bounds, orientation);
+	const ranges = placeAxisRoles(byRole.category, byRole.value, orientation);
+	const xScale = makeScale({ kind: plan.x.kind, domain: plan.x.domain, range: ranges.x });
+	const yScale = makeScale({ kind: plan.y.kind, domain: plan.y.domain, range: ranges.y });
+
+	return {
+		bounds,
+		xScale,
+		yScale,
+		xTicks: buildTicks(xScale, { values: plan.x.tickValues, count: plan.x.tickValues.length }),
+		yTicks: buildTicks(yScale, { values: plan.y.tickValues, count: plan.y.tickValues.length }),
+	};
+}

package/src/core/geometry/domain.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, test } from "bun:test";
+import { EMPTY_DOMAIN, resolveDomain, resolveDomainPadding } from "./domain";
+
+describe("resolveDomain", () => {
+	test("measures the extent of the data", () => {
+		expect(resolveDomain({ values: [3, 1, 4, 1, 5] })).toEqual([1, 5]);
+	});
+
+	test("falls back to a usable domain when nothing is measurable", () => {
+		expect(resolveDomain({ values: [] })).toEqual(EMPTY_DOMAIN);
+		expect(resolveDomain({ values: [null, Number.NaN] })).toEqual(EMPTY_DOMAIN);
+	});
+
+	test("leaves a constant series zero-width so it draws flat through the middle", () => {
+		// Expanding here would invent a spread the data does not have.
+		expect(resolveDomain({ values: [50, 50, 50] })).toEqual([50, 50]);
+	});
+
+	test("pulls zero in only when asked", () => {
+		expect(resolveDomain({ values: [40, 90] })).toEqual([40, 90]);
+		expect(resolveDomain({ values: [40, 90], includeZero: true })).toEqual([0, 90]);
+		expect(resolveDomain({ values: [-40, -10], includeZero: true })).toEqual([-40, 0]);
+	});
+
+	test("pads by a fraction of the extent", () => {
+		expect(resolveDomain({ values: [0, 100], padding: 0.1 })).toEqual([-10, 110]);
+	});
+
+	test("pads a constant series against its own magnitude", () => {
+		expect(resolveDomain({ values: [50, 50], padding: 0.1 })).toEqual([45, 55]);
+	});
+
+	test("lets an explicit bound override either end independently", () => {
+		expect(resolveDomain({ values: [3, 77], domain: [0, undefined] })).toEqual([0, 77]);
+		expect(resolveDomain({ values: [3, 77], domain: [undefined, 100] })).toEqual([3, 100]);
+		expect(resolveDomain({ values: [3, 77], domain: [0, 100] })).toEqual([0, 100]);
+	});
+
+	test("an explicit bound wins over padding", () => {
+		expect(resolveDomain({ values: [0, 100], padding: 0.5, domain: [0, undefined] })[0]).toBe(0);
+	});
+
+	test("ignores a non-finite explicit bound rather than poisoning the scale", () => {
+		expect(resolveDomain({ values: [3, 77], domain: [Number.NaN, undefined] })).toEqual([3, 77]);
+	});
+
+	test("pads by an absolute amount in domain units", () => {
+		// Half a step each side is what puts a bar's whole width inside the plot.
+		expect(resolveDomain({ values: [0, 4], absolutePadding: 0.5 })).toEqual([-0.5, 4.5]);
+	});
+
+	test("applies absolute padding after fractional padding", () => {
+		expect(resolveDomain({ values: [0, 100], padding: 0.1, absolutePadding: 5 })).toEqual([-15, 115]);
+	});
+
+	test("applies absolute padding to a zero-width domain", () => {
+		// One bar still needs a width to stand in.
+		expect(resolveDomain({ values: [2, 2], absolutePadding: 0.5 })).toEqual([1.5, 2.5]);
+	});
+
+	test("an explicit bound wins over absolute padding", () => {
+		expect(resolveDomain({ values: [0, 4], absolutePadding: 0.5, domain: [0, undefined] })).toEqual([0, 4.5]);
+	});
+
+	test("ignores a non-finite or negative absolute padding", () => {
+		expect(resolveDomain({ values: [0, 4], absolutePadding: Number.NaN })).toEqual([0, 4]);
+		expect(resolveDomain({ values: [0, 4], absolutePadding: -1 })).toEqual([0, 4]);
+	});
+});
+
+describe("resolveDomainPadding", () => {
+	test("a bare number pads y only, which is the existing contract", () => {
+		expect(resolveDomainPadding(0.1)).toEqual({ x: 0, y: 0.1 });
+	});
+
+	test("an object names each axis, defaulting the other to nothing", () => {
+		expect(resolveDomainPadding({ x: 0.5 })).toEqual({ x: 0.5, y: 0 });
+		expect(resolveDomainPadding({ y: 0.2 })).toEqual({ x: 0, y: 0.2 });
+		expect(resolveDomainPadding({ x: 0.5, y: 0.2 })).toEqual({ x: 0.5, y: 0.2 });
+	});
+
+	test("undefined and NaN both mean no padding", () => {
+		expect(resolveDomainPadding(undefined)).toEqual({ x: 0, y: 0 });
+		expect(resolveDomainPadding(Number.NaN)).toEqual({ x: 0, y: 0 });
+		expect(resolveDomainPadding({ x: Number.NaN, y: Number.POSITIVE_INFINITY })).toEqual({ x: 0, y: 0 });
+	});
+});