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

package/src/core/text/bar-label.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, test } from "bun:test";
+import type { BarRect } from "../shape/build-bars";
+import { barLabelAnchor } from "./bar-label";
+
+const metrics = { ascent: 9, descent: 3 };
+const positive: BarRect = { left: 40, top: 30, right: 60, bottom: 100, negative: false, index: 0 };
+const negative: BarRect = { left: 40, top: 100, right: 60, bottom: 130, negative: true, index: 0 };
+
+describe("barLabelAnchor", () => {
+	test("top centres the label above a positive bar, gap included", () => {
+		const anchor = barLabelAnchor({ rect: positive, position: "top", width: 20, metrics, gap: 4 });
+		expect(anchor.x).toBe(40);
+		// The glyph box's bottom edge sits 4 above the bar's top.
+		expect(anchor.y + metrics.descent).toBe(26);
+	});
+
+	test("top flips below the value end of a negative bar", () => {
+		// The value end is the canvas bottom; a label above the rect would sit
+		// on the baseline, in the middle of the chart.
+		const anchor = barLabelAnchor({ rect: negative, position: "top", width: 20, metrics, gap: 4 });
+		expect(anchor.y - metrics.ascent).toBe(134);
+	});
+
+	test("bottom sits against the base end", () => {
+		expect(barLabelAnchor({ rect: positive, position: "bottom", width: 20, metrics, gap: 4 }).y - metrics.ascent).toBe(
+			104
+		);
+		expect(barLabelAnchor({ rect: negative, position: "bottom", width: 20, metrics, gap: 4 }).y + metrics.descent).toBe(
+			96
+		);
+	});
+
+	test("left and right sit beside the bar, centred on its height", () => {
+		const left = barLabelAnchor({ rect: positive, position: "left", width: 20, metrics, gap: 4 });
+		expect(left.x + 20).toBe(36);
+		const right = barLabelAnchor({ rect: positive, position: "right", width: 20, metrics, gap: 4 });
+		expect(right.x).toBe(64);
+		const centre = (left.y - metrics.ascent + left.y + metrics.descent) / 2;
+		expect(centre).toBe(65);
+	});
+
+	test("defaults the gap to four", () => {
+		expect(barLabelAnchor({ rect: positive, position: "top", width: 0, metrics }).y + metrics.descent).toBe(26);
+	});
+
+	describe("horizontal", () => {
+		const right: BarRect = { left: 20, top: 40, right: 80, bottom: 60, negative: false, index: 0 };
+		const left: BarRect = { left: 20, top: 40, right: 80, bottom: 60, negative: true, index: 0 };
+
+		test("top sits beyond the value end: right of a positive bar, left of a negative one", () => {
+			const a = barLabelAnchor({ rect: right, position: "top", width: 20, metrics, gap: 4, orientation: "horizontal" });
+			expect(a.x).toBe(84);
+			const b = barLabelAnchor({ rect: left, position: "top", width: 20, metrics, gap: 4, orientation: "horizontal" });
+			expect(b.x + 20).toBe(16);
+			// Both centred on the bar's height.
+			expect((a.y - metrics.ascent + a.y + metrics.descent) / 2).toBe(50);
+		});
+
+		test("bottom sits against the base end", () => {
+			const a = barLabelAnchor({
+				rect: right,
+				position: "bottom",
+				width: 20,
+				metrics,
+				gap: 4,
+				orientation: "horizontal",
+			});
+			expect(a.x + 20).toBe(16);
+			const b = barLabelAnchor({
+				rect: left,
+				position: "bottom",
+				width: 20,
+				metrics,
+				gap: 4,
+				orientation: "horizontal",
+			});
+			expect(b.x).toBe(84);
+		});
+
+		test("left and right stay canvas sides", () => {
+			const a = barLabelAnchor({
+				rect: right,
+				position: "right",
+				width: 20,
+				metrics,
+				gap: 4,
+				orientation: "horizontal",
+			});
+			expect(a.x).toBe(84);
+		});
+	});
+});

package/src/core/text/bar-label.ts

@@ -0,0 +1,61 @@
+import type { ChartOrientation } from "../chart.types";
+import type { BarRect } from "../shape/build-bars";
+import { anchorX, anchorY, type LabelMetrics } from "./label-anchor";
+
+/**
+ * Where a bar's label sits, relative to the bar.
+ *
+ * `top` and `bottom` are the value end and the base end, so a negative bar
+ * flips them: its `top` label hangs below the bar, where its value is read.
+ * `left` and `right` are canvas sides and do not flip.
+ */
+export type BarLabelPosition = "top" | "bottom" | "left" | "right";
+
+export type BarLabelAnchorOptions = {
+	readonly rect: BarRect;
+	readonly position: BarLabelPosition;
+	/** The label's measured advance width. */
+	readonly width: number;
+	readonly metrics: LabelMetrics;
+	/** Space between the bar's edge and the glyph box. Defaults to 4. */
+	readonly gap?: number;
+	/** On a horizontal bar the value end is a side, so `top` and `bottom` follow it there. */
+	readonly orientation?: ChartOrientation;
+};
+
+/** Skia's text origin — left end of the baseline — for a label on a bar. */
+export function barLabelAnchor(options: BarLabelAnchorOptions): { readonly x: number; readonly y: number } {
+	const { rect, position, width, metrics, gap = 4, orientation = "vertical" } = options;
+	const centreX = (rect.left + rect.right) / 2;
+	const centreY = (rect.top + rect.bottom) / 2;
+	const beside = (side: "left" | "right"): { readonly x: number; readonly y: number } =>
+		side === "left"
+			? { x: anchorX(rect.left, width, "end") - gap, y: anchorY(centreY, metrics, "middle") }
+			: { x: rect.right + gap, y: anchorY(centreY, metrics, "middle") };
+
+	if (orientation === "horizontal") {
+		switch (position) {
+			case "top":
+				return beside(rect.negative ? "left" : "right");
+			case "bottom":
+				return beside(rect.negative ? "right" : "left");
+			case "left":
+			case "right":
+				return beside(position);
+		}
+	}
+
+	switch (position) {
+		case "top":
+			return rect.negative
+				? { x: anchorX(centreX, width, "middle"), y: anchorY(rect.bottom, metrics, "below", gap) }
+				: { x: anchorX(centreX, width, "middle"), y: anchorY(rect.top, metrics, "above", gap) };
+		case "bottom":
+			return rect.negative
+				? { x: anchorX(centreX, width, "middle"), y: anchorY(rect.top, metrics, "above", gap) }
+				: { x: anchorX(centreX, width, "middle"), y: anchorY(rect.bottom, metrics, "below", gap) };
+		case "left":
+		case "right":
+			return beside(position);
+	}
+}

package/src/core/text/format-tick.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, test } from "bun:test";
+import { categoricalTickFormat, defaultTickFormat, formatDateTick, formatNumberTick } from "./format-tick";
+
+const DAY = 86_400_000;
+const YEAR = 365 * DAY;
+
+describe("formatNumberTick", () => {
+	test("prints an integer plainly", () => {
+		expect(formatNumberTick(0)).toBe("0");
+		expect(formatNumberTick(-1200)).toBe("-1200");
+	});
+
+	test("strips floating-point noise", () => {
+		// What a tick generator dividing a domain actually produces.
+		expect(formatNumberTick(0.1 + 0.2)).toBe("0.3");
+		expect(formatNumberTick(1 / 3)).toBe("0.333333333333");
+	});
+
+	test("returns an empty label rather than the word NaN", () => {
+		expect(formatNumberTick(Number.NaN)).toBe("");
+		expect(formatNumberTick(Number.POSITIVE_INFINITY)).toBe("");
+	});
+});
+
+describe("formatDateTick", () => {
+	const noon = new Date(2026, 5, 17, 14, 5).getTime();
+
+	test("uses clock time inside a day", () => {
+		expect(formatDateTick(noon, 6 * 3_600_000)).toBe("14:05");
+	});
+
+	test("uses day and month inside a year", () => {
+		expect(formatDateTick(noon, 30 * DAY)).toBe("17 Jun");
+	});
+
+	test("uses month and two-digit year over a few years", () => {
+		expect(formatDateTick(noon, 2 * YEAR)).toBe("Jun 26");
+	});
+
+	test("uses the year alone over a long span", () => {
+		expect(formatDateTick(noon, 20 * YEAR)).toBe("2026");
+	});
+
+	test("pads the clock so labels stay the same width", () => {
+		// Ragged widths make an axis look broken and shift the measured gutter.
+		expect(formatDateTick(new Date(2026, 0, 1, 9, 5).getTime(), 3_600_000)).toBe("09:05");
+	});
+
+	test("returns an empty label for a non-finite value", () => {
+		expect(formatDateTick(Number.NaN, DAY)).toBe("");
+	});
+});
+
+describe("defaultTickFormat", () => {
+	test("gives a time scale the date formatter and everything else the number one", () => {
+		expect(defaultTickFormat("time", 30 * DAY)(new Date(2026, 5, 17).getTime())).toBe("17 Jun");
+		expect(defaultTickFormat("linear", 0)(42)).toBe("42");
+		expect(defaultTickFormat("log", 0)(1000)).toBe("1000");
+	});
+});
+
+describe("categoricalTickFormat", () => {
+	const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
+
+	test("reads the label at the datum index the tick names", () => {
+		// Six months downsampled to four ticks leaves values [0, 2, 3, 5].
+		// Formatting by the tick's own ordinal would print Jan Feb Mar Apr
+		// against bars standing at Jan, Mar, Apr and Jun.
+		const format = categoricalTickFormat(months);
+		expect([0, 2, 3, 5].map(format)).toEqual(["Jan", "Mar", "Apr", "Jun"]);
+	});
+
+	test("rounds a fractional value onto a datum", () => {
+		expect(categoricalTickFormat(months)(2.4)).toBe("Mar");
+	});
+
+	test("returns an empty label outside the data rather than undefined", () => {
+		const format = categoricalTickFormat(months);
+		expect(format(-1)).toBe("");
+		expect(format(99)).toBe("");
+	});
+
+	test("stringifies a non-string label", () => {
+		expect(categoricalTickFormat([1, null])(0)).toBe("1");
+		expect(categoricalTickFormat([1, null])(1)).toBe("");
+	});
+});

package/src/core/text/format-tick.ts

@@ -0,0 +1,76 @@
+import type { ScaleType } from "../scale/scale.types";
+
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const YEAR = 365 * DAY;
+
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] as const;
+
+/**
+ * A number as a tick label.
+ *
+ * Rounded to twelve significant figures before printing, which is what turns
+ * `0.30000000000000004` back into `0.3`. Floating-point noise is not
+ * hypothetical on an axis: it is what `0.1 + 0.2` looks like, and a tick
+ * generator that divides a domain produces it routinely.
+ */
+export function formatNumberTick(value: number): string {
+	if (!Number.isFinite(value)) return "";
+	if (Number.isInteger(value)) return String(value);
+	return String(Number(value.toPrecision(12)));
+}
+
+/**
+ * An epoch millisecond as a tick label, at a granularity the span deserves.
+ *
+ * Deliberately not `Intl`. It is unavailable inside a worklet, its output
+ * varies with the device locale in ways a screenshot test cannot pin, and a
+ * chart axis wants the shortest unambiguous label rather than a correct
+ * regional one. A caller who needs real localisation passes their own
+ * formatter — that is what the prop is for.
+ */
+export function formatDateTick(value: number, spanMs: number): string {
+	if (!Number.isFinite(value)) return "";
+	const date = new Date(value);
+
+	if (spanMs < DAY) {
+		return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+	}
+	if (spanMs < YEAR) {
+		return `${date.getDate()} ${MONTHS[date.getMonth()] ?? ""}`;
+	}
+	if (spanMs < 4 * YEAR) {
+		return `${MONTHS[date.getMonth()] ?? ""} ${String(date.getFullYear()).slice(2)}`;
+	}
+	return String(date.getFullYear());
+}
+
+/** The formatter a scale kind gets when the caller supplies none. */
+export function defaultTickFormat(kind: ScaleType, spanMs: number): (value: number) => string {
+	if (kind !== "time") return formatNumberTick;
+	return (value) => formatDateTick(value, spanMs);
+}
+
+function pad(value: number): string {
+	return value < 10 ? `0${value}` : String(value);
+}
+
+/**
+ * A categorical axis' labels, read at the datum index each tick names.
+ *
+ * The subtlety that makes this a function rather than an inline closure: a
+ * categorical tick's **value** is the datum's index, and that is not the same
+ * as the tick's own position in the tick list. Six months downsampled to four
+ * ticks leaves values `[0, 2, 3, 5]`; formatting by the tick's ordinal would
+ * print `Jan Feb Mar Apr` against bars standing at Jan, Mar, Apr and Jun — an
+ * axis that is wrong in a way nothing about it looks wrong.
+ */
+export function categoricalTickFormat(raw: readonly unknown[]): (value: number) => string {
+	return (value) => {
+		const index = Math.round(value);
+		if (index < 0 || index >= raw.length) return "";
+		return String(raw[index] ?? "");
+	};
+}

package/src/core/text/label-anchor.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, test } from "bun:test";
+import { anchorX, anchorY, labelHeight } from "./label-anchor";
+
+describe("anchorX", () => {
+	test("centres a label on the point it labels", () => {
+		expect(anchorX(100, 40, "middle")).toBe(80);
+	});
+
+	test("starts and ends against the point", () => {
+		expect(anchorX(100, 40, "start")).toBe(100);
+		expect(anchorX(100, 40, "end")).toBe(60);
+	});
+});
+
+describe("anchorY", () => {
+	// A 12pt line: 9 above the baseline, 3 below. The asymmetry is the point.
+	const metrics = { ascent: 9, descent: 3 };
+
+	test("puts the glyph box's top edge below the anchor, gap included", () => {
+		// The bug this replaced: a baseline a whole line-height down put the box's
+		// BOTTOM where its top belonged, and every descender — the tail of a `Q`,
+		// the hook of a `y` — hung past the reserved gutter and was sliced off by
+		// the canvas. `Jan` looked perfect; `Q1` was visibly cut.
+		const baseline = anchorY(100, metrics, "below", 6);
+		expect(baseline - metrics.ascent).toBe(106);
+		expect(baseline + metrics.descent).toBe(118);
+	});
+
+	test("keeps a below label inside the gutter reserved for it", () => {
+		const gap = 6;
+		const gutter = gap + labelHeight(metrics);
+		const bottom = anchorY(100, metrics, "below", gap) + metrics.descent;
+		expect(bottom).toBeLessThanOrEqual(100 + gutter);
+	});
+
+	test("puts the glyph box's bottom edge above the anchor", () => {
+		const baseline = anchorY(100, metrics, "above", 6);
+		expect(baseline + metrics.descent).toBe(94);
+	});
+
+	test("centres the glyph box on the anchor, not the baseline", () => {
+		// Anchoring the baseline puts every y-axis label below its own gridline.
+		const baseline = anchorY(100, metrics, "middle");
+		const top = baseline - metrics.ascent;
+		const bottom = baseline + metrics.descent;
+		expect((top + bottom) / 2).toBe(100);
+	});
+
+	test("a symmetric font still centres", () => {
+		const even = { ascent: 6, descent: 6 };
+		expect(anchorY(100, even, "middle")).toBe(100);
+	});
+});
+
+describe("labelHeight", () => {
+	test("is the whole glyph box, which is what a gutter reserves", () => {
+		expect(labelHeight({ ascent: 9, descent: 3 })).toBe(12);
+	});
+});

package/src/core/text/label-anchor.ts

@@ -0,0 +1,62 @@
+/** Where a label sits relative to the point it labels, horizontally. */
+export type LabelAlignment = "start" | "middle" | "end";
+
+/** Where a label sits relative to the point it labels, vertically. */
+export type LabelPosition = "above" | "below" | "middle";
+
+/**
+ * Skia draws text from the left edge of the baseline, so a label centred under
+ * a tick needs the left edge moved half its own width. Every label placement in
+ * the package goes through here rather than each axis re-deriving it and one of
+ * them getting the sign wrong.
+ */
+export function anchorX(x: number, width: number, alignment: LabelAlignment): number {
+	switch (alignment) {
+		case "start":
+			return x;
+		case "middle":
+			return x - width / 2;
+		case "end":
+			return x - width;
+	}
+}
+
+/** A font's vertical extents, both positive, measured from the baseline. */
+export type LabelMetrics = {
+	/** How far the tallest glyph rises above the baseline. */
+	readonly ascent: number;
+	/** How far the deepest descender falls below it. */
+	readonly descent: number;
+};
+
+/** The full glyph box a label occupies — what a gutter has to reserve. */
+export function labelHeight(metrics: LabelMetrics): number {
+	return metrics.ascent + metrics.descent;
+}
+
+/**
+ * The baseline y for a label placed against `y`.
+ *
+ * Skia positions text by its **baseline**, and a glyph box straddles that
+ * line: ascent above it, descent below. So every case here is stated in terms
+ * of where the box's edge should land, and the baseline falls out.
+ *
+ * That distinction is not pedantry. Placing a `below` label a whole line-height
+ * under the plot puts its baseline where the box's *bottom* should be, and the
+ * descenders — the tail of a `Q`, the hook of a `y` — hang past the gutter that
+ * was reserved for them and are sliced off by the edge of the canvas. A label
+ * of `Jan` looks perfect and a label of `Q1` is visibly cut.
+ */
+export function anchorY(y: number, metrics: LabelMetrics, position: LabelPosition, gap = 0): number {
+	switch (position) {
+		// The box's bottom edge sits `gap` above `y`.
+		case "above":
+			return y - gap - metrics.descent;
+		// The box's top edge sits `gap` below `y`.
+		case "below":
+			return y + gap + metrics.ascent;
+		// The box is centred on `y`, which is what a label beside a gridline needs.
+		case "middle":
+			return y + (metrics.ascent - metrics.descent) / 2;
+	}
+}

package/src/core/ticks/build-ticks.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, test } from "bun:test";
+import { scaleValue } from "../scale/scale";
+import type { ScaleDescriptor } from "../scale/scale.types";
+import { buildTicks } from "./build-ticks";
+
+const linear: ScaleDescriptor = { kind: "linear", domain: [0, 100], range: [0, 300] };
+
+describe("buildTicks", () => {
+	test("positions every tick through the same scale the marks use", () => {
+		for (const tick of buildTicks(linear, { count: 5 })) {
+			expect(tick.position).toBe(scaleValue(linear, tick.value));
+		}
+	});
+
+	test("defaults to five-ish ticks", () => {
+		expect(buildTicks(linear).length).toBeGreaterThan(0);
+	});
+
+	test("uses explicit values instead of generating any, downsampled to count", () => {
+		const ticks = buildTicks(linear, { values: [0, 10, 20, 30, 40, 50], count: 3 });
+		expect(ticks).toHaveLength(3);
+		expect(ticks[0]?.value).toBe(0);
+		expect(ticks.at(-1)?.value).toBe(50);
+	});
+
+	test("generates time ticks for a time scale", () => {
+		const start = new Date(2026, 0, 1).getTime();
+		const time: ScaleDescriptor = { kind: "time", domain: [start, start + 7 * 86_400_000], range: [0, 300] };
+		const ticks = buildTicks(time, { count: 7 });
+		expect(ticks.length).toBeGreaterThan(0);
+		for (const tick of ticks) expect(new Date(tick.value).getHours()).toBe(0);
+	});
+
+	test("returns an empty axis rather than NaN positions for an unusable log domain", () => {
+		const broken: ScaleDescriptor = { kind: "log", domain: [0, 100], range: [0, 300], base: 10 };
+		expect(buildTicks(broken, { count: 5 })).toEqual([]);
+	});
+});

package/src/core/ticks/build-ticks.ts

@@ -0,0 +1,36 @@
+import { scaleValue } from "../scale/scale";
+import type { ScaleDescriptor } from "../scale/scale.types";
+import { linearTicks, logTicks } from "./linear-ticks";
+import type { ChartTick } from "./tick.types";
+import { DEFAULT_TICK_COUNT, downsampleTicks } from "./tick-count";
+import { timeTicks } from "./time-ticks";
+
+export type BuildTicksOptions = {
+	/** How many ticks to aim for. A suggestion — the generator rounds it to human values. */
+	readonly count?: number;
+	/** Explicit values, used instead of generating any. Downsampled to `count`. */
+	readonly values?: readonly number[];
+};
+
+/**
+ * Tick values for a scale, each already positioned on the canvas.
+ *
+ * Positions come from `scaleValue` rather than a second d3 call so an axis and
+ * its marks can never disagree about where a value sits.
+ */
+export function buildTicks(scale: ScaleDescriptor, options: BuildTicksOptions = {}): ChartTick[] {
+	const count = options.count ?? DEFAULT_TICK_COUNT;
+	const values = options.values ? downsampleTicks(options.values, count) : generate(scale, count);
+	return values.map((value) => ({ value, position: scaleValue(scale, value) }));
+}
+
+function generate(scale: ScaleDescriptor, count: number): number[] {
+	switch (scale.kind) {
+		case "linear":
+			return linearTicks(scale.domain, count);
+		case "time":
+			return timeTicks(scale.domain, count);
+		case "log":
+			return logTicks(scale.domain, scale.base, count);
+	}
+}

package/src/core/ticks/linear-ticks.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, test } from "bun:test";
+import { linearTicks, logTicks } from "./linear-ticks";
+
+describe("linearTicks", () => {
+	test("returns round numbers, not evenly divided ones", () => {
+		expect(linearTicks([0, 97], 5)).toEqual([0, 20, 40, 60, 80]);
+	});
+
+	test("treats count as a suggestion and picks the rounder step", () => {
+		// Six twenties beats five twenty-fives: d3 optimises for how the numbers
+		// read, not for hitting the count. Asserting the count here would be
+		// asserting the wrong thing.
+		expect(linearTicks([0, 100], 5)).toEqual([0, 20, 40, 60, 80, 100]);
+	});
+
+	test("handles a negative domain", () => {
+		expect(linearTicks([-50, 50], 5)).toEqual([-40, -20, 0, 20, 40]);
+	});
+
+	test("returns the single value for a zero-width domain", () => {
+		expect(linearTicks([7, 7], 5)).toEqual([7]);
+	});
+
+	test("returns nothing for a non-positive count or a non-finite domain", () => {
+		expect(linearTicks([0, 100], 0)).toEqual([]);
+		expect(linearTicks([0, 100], -3)).toEqual([]);
+		expect(linearTicks([Number.NaN, 100], 5)).toEqual([]);
+	});
+});
+
+describe("logTicks", () => {
+	test("drops to decade powers when d3 would overshoot the count", () => {
+		// d3 returns 28 values here — every k·10^i. Unthinned that is a smear.
+		expect(logTicks([1, 1000], 10, 4)).toEqual([1, 10, 100, 1000]);
+	});
+
+	test("keeps d3's intermediate multiples when they already fit", () => {
+		expect(logTicks([1, 1_000_000], 10, 4)).toEqual([1, 100, 10_000, 1_000_000]);
+	});
+
+	test("thins the decades themselves when there are more than asked for", () => {
+		const ticks = logTicks([1, 1e9], 10, 4);
+		expect(ticks).toHaveLength(4);
+		expect(ticks[0]).toBe(1);
+		expect(ticks.at(-1)).toBe(1e9);
+	});
+
+	test("honours a non-decimal base", () => {
+		expect(logTicks([1, 1024], 2, 4)).toEqual([1, 8, 128, 1024]);
+	});
+
+	test("returns nothing for a domain reaching zero", () => {
+		expect(logTicks([0, 100], 10, 5)).toEqual([]);
+		expect(logTicks([-1, 100], 10, 5)).toEqual([]);
+	});
+});

package/src/core/ticks/linear-ticks.ts

@@ -0,0 +1,67 @@
+import { scaleLinear, scaleLog } from "d3-scale";
+import type { DomainTuple } from "../scale/scale.types";
+import { downsampleTicks } from "./tick-count";
+
+/**
+ * Human tick values across a linear domain.
+ *
+ * `count` is a suggestion, not a promise — d3 returns whatever number of round
+ * values fits, which is the whole point. Asking for five over `[0, 97]` gets
+ * you `0 20 40 60 80` and not five ugly nineteenths.
+ *
+ * Routed through a throwaway `scaleLinear` rather than `d3-array`'s `ticks` so
+ * the package's declared dependencies stay `d3-scale` and `d3-shape`.
+ */
+export function linearTicks(domain: DomainTuple, count: number): number[] {
+	if (count <= 0) return [];
+	if (!Number.isFinite(domain[0]) || !Number.isFinite(domain[1])) return [];
+	if (domain[0] === domain[1]) return [domain[0]];
+	return scaleLinear()
+		.domain([domain[0], domain[1]])
+		.ticks(Math.max(1, Math.round(count)));
+}
+
+/**
+ * Tick values across a log domain — decade powers when the span is wide,
+ * intermediate multiples when it is narrow.
+ *
+ * d3's log ticks treat `count` as a floor, not a ceiling: it thins only once
+ * there are more decades than ticks asked for, and otherwise returns every
+ * `k · base^i` for `k` in `1…base-1`. Three decades at a requested five ticks
+ * is twenty-eight values, which overprints itself into a grey smear. So when
+ * the generator overshoots we drop to the decade powers alone, and thin those
+ * only if there are still too many.
+ */
+export function logTicks(domain: DomainTuple, base: number, count: number): number[] {
+	if (count <= 0) return [];
+	if (domain[0] <= 0 || domain[1] <= 0 || domain[0] === domain[1]) return [];
+
+	const wanted = Math.max(1, Math.round(count));
+	const generated = scaleLog().base(base).domain([domain[0], domain[1]]).ticks(wanted);
+	if (generated.length <= wanted) return generated;
+
+	const decades = decadePowers(domain, base);
+	if (decades.length === 0) return downsampleTicks(generated, wanted);
+	return decades.length <= wanted ? decades : downsampleTicks(decades, wanted);
+}
+
+/**
+ * Every whole power of `base` inside the domain, low to high.
+ *
+ * The epsilon is load-bearing. `Math.log(1000) / Math.log(10)` is
+ * 2.9999999999999996, so a bare `floor` drops the top decade and a chart
+ * domained `[1, 1000]` loses its 1000 tick — the one label the axis most
+ * needs. Nudging by a billionth of a decade costs nothing and fixes every
+ * exact power.
+ */
+const DECADE_EPSILON = 1e-9;
+
+function decadePowers(domain: DomainTuple, base: number): number[] {
+	const lo = Math.min(domain[0], domain[1]);
+	const hi = Math.max(domain[0], domain[1]);
+	const logBase = Math.log(base);
+	const first = Math.ceil(Math.log(lo) / logBase - DECADE_EPSILON);
+	const last = Math.floor(Math.log(hi) / logBase + DECADE_EPSILON);
+	if (!Number.isFinite(first) || !Number.isFinite(last) || last < first) return [];
+	return Array.from({ length: last - first + 1 }, (_, index) => base ** (first + index));
+}