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

package/src/core/geometry/domain.ts

@@ -0,0 +1,94 @@
+import type { DomainTuple } from "../scale/scale.types";
+import { extent } from "../util/extent";
+
+/** What a scale falls back to when the data offers nothing to measure. */
+export const EMPTY_DOMAIN: DomainTuple = [0, 1];
+
+export type ResolveDomainOptions = {
+	readonly values: Iterable<number | null | undefined>;
+	/**
+	 * Explicit bounds. Either end may be `undefined` to keep the data's own —
+	 * `[0, undefined]` is the common case: pin the floor, let the ceiling grow.
+	 */
+	readonly domain?: readonly [number | undefined, number | undefined];
+	/** Extra span added to each end, as a fraction of the measured extent. */
+	readonly padding?: number;
+	/**
+	 * Extra span added to each end in domain units, after `padding`.
+	 *
+	 * This is how a bar gets its whole width inside the plot: half a step each
+	 * side, where a fraction of the extent would be a different amount for
+	 * every dataset. Applied to a zero-width domain too — one bar still needs
+	 * somewhere to stand.
+	 */
+	readonly absolutePadding?: number;
+	/**
+	 * Pull zero into the domain.
+	 *
+	 * A bar's length is read against the axis, so a bar chart that starts at 40
+	 * exaggerates every difference. A line chart usually should not — clipping
+	 * to the data is what makes a trend legible.
+	 */
+	readonly includeZero?: boolean;
+};
+
+/**
+ * The domain a scale should take.
+ *
+ * A constant series comes back zero-width on purpose. `scaleValue` maps that
+ * to the range midpoint, so a flat series draws as a flat line through the
+ * middle — which is what it is. Expanding it here would invent a spread the
+ * data does not have.
+ */
+export function resolveDomain(options: ResolveDomainOptions): DomainTuple {
+	const measured = extent(options.values);
+	let lo = measured?.[0] ?? EMPTY_DOMAIN[0];
+	let hi = measured?.[1] ?? EMPTY_DOMAIN[1];
+
+	if (options.includeZero) {
+		lo = Math.min(lo, 0);
+		hi = Math.max(hi, 0);
+	}
+
+	const padding = options.padding;
+	if (padding !== undefined && padding > 0 && Number.isFinite(padding)) {
+		const span = hi - lo;
+		const amount = span === 0 ? Math.abs(lo) * padding : span * padding;
+		lo -= amount;
+		hi += amount;
+	}
+
+	const absolute = options.absolutePadding;
+	if (absolute !== undefined && absolute > 0 && Number.isFinite(absolute)) {
+		lo -= absolute;
+		hi += absolute;
+	}
+
+	const explicitLo = options.domain?.[0];
+	const explicitHi = options.domain?.[1];
+	if (explicitLo !== undefined && Number.isFinite(explicitLo)) lo = explicitLo;
+	if (explicitHi !== undefined && Number.isFinite(explicitHi)) hi = explicitHi;
+
+	return [lo, hi];
+}
+
+/** Padding per axis. `x` is measured in steps, `y` as a fraction of the extent. */
+export type DomainPadding = number | { readonly x?: number; readonly y?: number };
+
+/**
+ * `domainPadding` decoded to one number per axis.
+ *
+ * A bare number pads y only — that was the prop's contract before x padding
+ * existed, and a line chart that asked for `0.1` should not grow a margin
+ * beside its first point. Anything non-finite becomes zero rather than
+ * reaching a scale as `NaN`.
+ */
+export function resolveDomainPadding(value: DomainPadding | undefined): { readonly x: number; readonly y: number } {
+	if (value === undefined) return { x: 0, y: 0 };
+	if (typeof value === "number") return { x: 0, y: finiteOrZero(value) };
+	return { x: finiteOrZero(value.x), y: finiteOrZero(value.y) };
+}
+
+function finiteOrZero(value: number | undefined): number {
+	return value !== undefined && Number.isFinite(value) ? value : 0;
+}

package/src/core/geometry/grid-lines.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, test } from "bun:test";
+import type { ChartTick } from "../ticks/tick.types";
+import { gridSegments } from "./grid-lines";
+
+const bounds = { left: 20, top: 0, right: 300, bottom: 200 };
+const yTicks: ChartTick[] = [
+	{ value: 0, position: 200 },
+	{ value: 50, position: 100 },
+];
+const xTicks: ChartTick[] = [
+	{ value: 0, position: 20 },
+	{ value: 10, position: 300 },
+];
+
+describe("gridSegments", () => {
+	test("spans the plot rect horizontally at each y tick", () => {
+		expect(gridSegments({ bounds, xTicks, yTicks })).toEqual([
+			[20, 200, 300, 200],
+			[20, 100, 300, 100],
+		]);
+	});
+
+	test("defaults to the y ticks alone", () => {
+		// Horizontal rules carry a value across to the axis, which is what a
+		// gridline is for. Vertical ones mostly repeat what the marks show.
+		expect(gridSegments({ bounds, xTicks, yTicks })).toHaveLength(2);
+	});
+
+	test("draws vertical rules when asked", () => {
+		expect(gridSegments({ bounds, xTicks, yTicks, axis: "x" })).toEqual([
+			[20, 0, 20, 200],
+			[300, 0, 300, 200],
+		]);
+	});
+
+	test("draws both", () => {
+		expect(gridSegments({ bounds, xTicks, yTicks, axis: "both" })).toHaveLength(4);
+	});
+
+	test("skips a tick with no usable position rather than pinning it to zero", () => {
+		const broken: ChartTick[] = [{ value: 0, position: Number.NaN }, ...yTicks];
+		expect(gridSegments({ bounds, xTicks, yTicks: broken })).toHaveLength(2);
+	});
+
+	test("draws nothing when there are no ticks", () => {
+		expect(gridSegments({ bounds, xTicks: [], yTicks: [], axis: "both" })).toEqual([]);
+	});
+});

package/src/core/geometry/grid-lines.ts

@@ -0,0 +1,43 @@
+import type { ChartBounds } from "../chart.types";
+import type { ChartTick } from "../ticks/tick.types";
+
+/** One rule, as `[x1, y1, x2, y2]`. */
+export type GridSegment = readonly [number, number, number, number];
+
+export type GridAxis = "x" | "y" | "both";
+
+export type GridSegmentOptions = {
+	readonly bounds: ChartBounds;
+	readonly xTicks: readonly ChartTick[];
+	readonly yTicks: readonly ChartTick[];
+	readonly axis?: GridAxis;
+};
+
+/**
+ * The rules a grid draws, spanning the plot rect at each tick.
+ *
+ * A tick with a non-finite position is skipped rather than drawn at zero. That
+ * happens whenever an axis has no usable domain — a log scale reaching zero,
+ * say — and a rule pinned to the canvas edge reads as a real gridline the data
+ * does not have.
+ */
+export function gridSegments(options: GridSegmentOptions): GridSegment[] {
+	const { bounds, xTicks, yTicks, axis = "y" } = options;
+	const segments: GridSegment[] = [];
+
+	if (axis === "y" || axis === "both") {
+		for (const tick of yTicks) {
+			if (!Number.isFinite(tick.position)) continue;
+			segments.push([bounds.left, tick.position, bounds.right, tick.position]);
+		}
+	}
+
+	if (axis === "x" || axis === "both") {
+		for (const tick of xTicks) {
+			if (!Number.isFinite(tick.position)) continue;
+			segments.push([tick.position, bounds.top, tick.position, bounds.bottom]);
+		}
+	}
+
+	return segments;
+}

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

@@ -0,0 +1,151 @@
+import { describe, expect, test } from "bun:test";
+import type { ScaleDescriptor } from "../scale/scale.types";
+import { collectStackedYValues, stackSeries } from "./stack";
+
+/** Domain 0..10 onto a 100pt tall plot, canvas y growing downward. */
+const yScale: ScaleDescriptor = { kind: "linear", domain: [0, 10], range: [100, 0] };
+const at = (value: number): number => 100 - value * 10;
+
+const stack = (
+	data: readonly Record<string, unknown>[],
+	keys: readonly string[],
+	scale: ScaleDescriptor = yScale
+): ReturnType<typeof stackSeries> =>
+	stackSeries({
+		data,
+		keys,
+		xValues: data.map((_, index) => index),
+		xPositions: data.map((_, index) => index * 10),
+		yScale: scale,
+	});
+
+describe("stackSeries", () => {
+	test("each series bases where the one before it ended", () => {
+		const result = stack(
+			[
+				{ a: 3, b: 1 },
+				{ a: 2, b: 4 },
+			],
+			["a", "b"]
+		);
+		expect(result.a?.map((segment) => segment.yValue)).toEqual([3, 2]);
+		expect(result.a?.map((segment) => segment.y0Value)).toEqual([0, 0]);
+		expect(result.b?.map((segment) => segment.yValue)).toEqual([4, 6]);
+		expect(result.b?.map((segment) => segment.y0Value)).toEqual([3, 2]);
+	});
+
+	test("scales both edges through the y scale", () => {
+		const result = stack([{ a: 3, b: 1 }], ["a", "b"]);
+		expect(result.b?.[0]?.y).toBe(at(4));
+		expect(result.b?.[0]?.y0).toBe(at(3));
+	});
+
+	test("carries x through unchanged", () => {
+		const result = stack([{ a: 1 }, { a: 2 }], ["a"]);
+		expect(result.a?.map((segment) => segment.x)).toEqual([0, 10]);
+		expect(result.a?.map((segment) => segment.xValue)).toEqual([0, 1]);
+	});
+
+	test("negatives stack downward from zero, independently of the positives", () => {
+		const result = stack([{ a: 3, b: -2, c: -1, d: 1 }], ["a", "b", "c", "d"]);
+		expect(result.b?.[0]).toMatchObject({ yValue: -2, y0Value: 0 });
+		expect(result.c?.[0]).toMatchObject({ yValue: -3, y0Value: -2 });
+		expect(result.d?.[0]).toMatchObject({ yValue: 4, y0Value: 3 });
+	});
+
+	test("a null contributes nothing and yields a null segment", () => {
+		const result = stack([{ a: 3, b: null, c: 2 }], ["a", "b", "c"]);
+		expect(result.b?.[0]).toMatchObject({ y: null, yValue: null, y0: null, y0Value: null });
+		// c bases where a ended, as if b were not there.
+		expect(result.c?.[0]).toMatchObject({ yValue: 5, y0Value: 3 });
+	});
+
+	test("an unreadable value is a null segment too", () => {
+		const result = stack([{ a: "nope", b: 2 }], ["a", "b"]);
+		expect(result.a?.[0]?.yValue).toBeNull();
+		expect(result.b?.[0]).toMatchObject({ yValue: 2, y0Value: 0 });
+	});
+
+	test("a zero contributes nothing but is not a gap", () => {
+		const result = stack([{ a: 0, b: 2 }], ["a", "b"]);
+		expect(result.a?.[0]).toMatchObject({ yValue: 0, y0Value: 0 });
+		expect(result.a?.[0]?.y).toBe(at(0));
+	});
+
+	test("a log scale puts a base of zero at the floor, never at -Infinity", () => {
+		const log: ScaleDescriptor = { kind: "log", domain: [1, 1000], range: [100, 0], base: 10 };
+		const result = stack([{ a: 10, b: 100 }], ["a", "b"], log);
+		expect(result.a?.[0]?.y0).toBe(100);
+		expect(Number.isFinite(result.a?.[0]?.y as number)).toBe(true);
+		expect(Number.isFinite(result.b?.[0]?.y0 as number)).toBe(true);
+	});
+
+	test("returns an entry for every key, empty data included", () => {
+		expect(stack([], ["a", "b"])).toEqual({ a: [], b: [] });
+	});
+});
+
+describe("collectStackedYValues", () => {
+	// A zero pair per row would put zero into the y domain of a chart with no
+	// stack at all, which is how a line of prices came to start at nothing.
+	test("yields nothing when there are no stack keys", () => {
+		expect(collectStackedYValues([{ a: 140 }, { a: 160 }], [])).toEqual([]);
+	});
+
+	test("yields each row's positive and negative running totals", () => {
+		const values = collectStackedYValues(
+			[
+				{ a: 3, b: 1 },
+				{ a: 2, b: 4 },
+				{ a: -2, b: 1 },
+			],
+			["a", "b"]
+		);
+		expect(values).toContain(4);
+		expect(values).toContain(6);
+		expect(values).toContain(-2);
+	});
+
+	test("includes zero, so a stack always has a base to stand on", () => {
+		expect(collectStackedYValues([{ a: 3 }], ["a"])).toContain(0);
+	});
+
+	test("skips nulls and unreadable values", () => {
+		expect(collectStackedYValues([{ a: null, b: "x", c: 2 }], ["a", "b", "c"])).toEqual([2, 0]);
+	});
+
+	test("is empty for empty data", () => {
+		expect(collectStackedYValues([], ["a"])).toEqual([]);
+	});
+});
+
+describe("stackSeries horizontal", () => {
+	test("puts the value edges on x and the category on y, with y0 along the value axis", () => {
+		const valueScale: ScaleDescriptor = { kind: "linear", domain: [0, 10], range: [0, 100] };
+		const result = stackSeries({
+			data: [{ a: 3, b: 1 }],
+			keys: ["a", "b"],
+			xValues: [0],
+			xPositions: [40],
+			yScale: valueScale,
+			orientation: "horizontal",
+		});
+		expect(result.a?.[0]).toMatchObject({ x: 30, y: 40, y0: 0, yValue: 3, y0Value: 0 });
+		expect(result.b?.[0]).toMatchObject({ x: 40, y: 40, y0: 30, yValue: 4, y0Value: 3 });
+	});
+
+	test("a gap keeps its category position and has no x", () => {
+		const valueScale: ScaleDescriptor = { kind: "linear", domain: [0, 10], range: [0, 100] };
+		const result = stackSeries({
+			data: [{ a: null }],
+			keys: ["a"],
+			xValues: [0],
+			xPositions: [40],
+			yScale: valueScale,
+			orientation: "horizontal",
+		});
+		expect(result.a?.[0]?.y).toBe(40);
+		expect(Number.isNaN(result.a?.[0]?.x)).toBe(true);
+		expect(result.a?.[0]?.y0).toBeNull();
+	});
+});

package/src/core/geometry/stack.ts

@@ -0,0 +1,109 @@
+import type { ChartOrientation, ChartRow, ChartSegment } from "../chart.types";
+import { scaleValue } from "../scale/scale";
+import type { ScaleDescriptor } from "../scale/scale.types";
+import { asNumber } from "../util/as-number";
+
+export type StackSeriesOptions = {
+	readonly data: readonly ChartRow[];
+	/** The keys to stack, bottom first. */
+	readonly keys: readonly string[];
+	readonly xValues: readonly number[];
+	/** Canvas position of each row's category — on y when horizontal. */
+	readonly xPositions: readonly number[];
+	/** The value scale — on x when horizontal. */
+	readonly yScale: ScaleDescriptor;
+	readonly orientation?: ChartOrientation;
+};
+
+/**
+ * Series stacked on one another, in data space, then scaled.
+ *
+ * Positives climb from zero and negatives descend from zero, each on its own
+ * running total, so a row of `[3, -2, 1]` draws a bar of 4 above the axis and
+ * a bar of 2 below it rather than a bar of 2 that has lost a series. Stacking
+ * after scaling would get that wrong on a log axis and would add canvas
+ * offsets that mean nothing.
+ *
+ * A null contributes nothing and comes out as a null segment, so the series
+ * above it bases where the one below it ended — the gap is in one series, not
+ * in the whole column.
+ */
+export function stackSeries(options: StackSeriesOptions): Record<string, readonly ChartSegment[]> {
+	const { data, keys, xValues, xPositions, yScale, orientation = "vertical" } = options;
+	const horizontal = orientation === "horizontal";
+	const series: Record<string, ChartSegment[]> = {};
+	for (const key of keys) series[key] = new Array(data.length);
+
+	for (let index = 0; index < data.length; index += 1) {
+		const row = data[index] as ChartRow;
+		const x = xPositions[index] as number;
+		const xValue = xValues[index] as number;
+		let positive = 0;
+		let negative = 0;
+
+		for (const key of keys) {
+			const value = asNumber(row[key]);
+			const target = series[key] as ChartSegment[];
+			if (!Number.isFinite(value)) {
+				target[index] = segment(horizontal, x, xValue, null, null, Number.NaN, null);
+				continue;
+			}
+			const base = value < 0 ? negative : positive;
+			const top = base + value;
+			if (value < 0) negative = top;
+			else positive = top;
+			target[index] = segment(horizontal, x, xValue, top, base, scaleStacked(yScale, top), scaleStacked(yScale, base));
+		}
+	}
+
+	return series;
+}
+
+/** One segment, with its category and value positions on whichever canvas axes the orientation says. */
+function segment(
+	horizontal: boolean,
+	category: number,
+	xValue: number,
+	yValue: number | null,
+	y0Value: number | null,
+	valuePosition: number,
+	y0: number | null
+): ChartSegment {
+	if (horizontal) return { x: valuePosition, y: category, xValue, yValue, y0, y0Value };
+	return { x: category, y: yValue === null ? null : valuePosition, xValue, yValue, y0, y0Value };
+}
+
+/**
+ * A stacked edge through the scale, with zero pinned to the range floor on a
+ * log axis. `scaleValue` maps a non-positive value on a log scale to a finite
+ * but enormous negative position, which would put every bar's base far above
+ * the canvas.
+ */
+function scaleStacked(scale: ScaleDescriptor, value: number): number {
+	if (scale.kind === "log" && value <= 0) return scale.range[0];
+	return scaleValue(scale, value);
+}
+
+/**
+ * Every row's positive and negative running total, for measuring the y domain
+ * a stack needs. The raw values are no use here — a domain that covers each
+ * series covers none of their sums.
+ */
+export function collectStackedYValues(data: readonly ChartRow[], keys: readonly string[]): number[] {
+	// No stack, no totals. A zero pair per row would pull zero into the y domain
+	// of every chart, stacked or not, and a line of prices then starts at nothing.
+	if (keys.length === 0) return [];
+	const values: number[] = [];
+	for (const row of data) {
+		let positive = 0;
+		let negative = 0;
+		for (const key of keys) {
+			const value = asNumber(row[key]);
+			if (!Number.isFinite(value)) continue;
+			if (value < 0) negative += value;
+			else positive += value;
+		}
+		values.push(positive, negative);
+	}
+	return values;
+}

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

@@ -0,0 +1,34 @@
+import { describe, expect, test } from "bun:test";
+import { resolveStep } from "./step";
+
+describe("resolveStep", () => {
+	test("is the smallest gap between neighbouring values", () => {
+		expect(resolveStep([0, 1, 2, 3])).toBe(1);
+		expect(resolveStep([0, 10, 15, 30])).toBe(5);
+	});
+
+	test("does not care about input order", () => {
+		expect(resolveStep([30, 0, 15, 10])).toBe(5);
+	});
+
+	test("ignores duplicates rather than reporting a zero gap", () => {
+		// A zero step would give every bar a zero width, and a zero x padding.
+		expect(resolveStep([0, 0, 5, 5, 10])).toBe(5);
+	});
+
+	test("ignores non-finite values", () => {
+		expect(resolveStep([0, Number.NaN, 2, Number.POSITIVE_INFINITY])).toBe(2);
+	});
+
+	test("falls back to one with fewer than two distinct values", () => {
+		expect(resolveStep([])).toBe(1);
+		expect(resolveStep([7])).toBe(1);
+		expect(resolveStep([7, 7, 7])).toBe(1);
+		expect(resolveStep([Number.NaN])).toBe(1);
+	});
+
+	test("never returns zero or NaN", () => {
+		expect(resolveStep([1, 1 + Number.EPSILON])).toBeGreaterThan(0);
+		expect(Number.isFinite(resolveStep([1e308, -1e308]))).toBe(true);
+	});
+});

package/src/core/geometry/step.ts

@@ -0,0 +1,21 @@
+/**
+ * The smallest gap between two distinct finite values — the width one datum
+ * can claim before it touches its neighbour.
+ *
+ * Measured in domain units, so a monthly series on a time scale reports
+ * roughly a month and a categorical one reports one. It is what `xStep` and
+ * the x domain padding are stated in.
+ *
+ * Fewer than two distinct values return one, never zero: a zero step gives
+ * every bar a zero width and pads the domain by nothing, and a lone bar
+ * vanishes with nothing logged.
+ */
+export function resolveStep(values: readonly number[]): number {
+	const sorted = values.filter((value) => Number.isFinite(value)).sort((a, b) => a - b);
+	let step = Number.POSITIVE_INFINITY;
+	for (let index = 1; index < sorted.length; index += 1) {
+		const gap = (sorted[index] as number) - (sorted[index - 1] as number);
+		if (gap > 0 && gap < step) step = gap;
+	}
+	return Number.isFinite(step) && step > 0 ? step : 1;
+}

package/src/core/geometry/transform-input-data.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, test } from "bun:test";
+import type { ScaleDescriptor } from "../scale/scale.types";
+import { collectYValues, transformInputData } from "./transform-input-data";
+
+const xScale: ScaleDescriptor = { kind: "linear", domain: [0, 2], range: [0, 200] };
+const yScale: ScaleDescriptor = { kind: "linear", domain: [0, 100], range: [100, 0] };
+
+const data = [
+	{ m: "Jan", sales: 0, cost: 50 },
+	{ m: "Feb", sales: 50, cost: null },
+	{ m: "Mar", sales: 100, cost: 25 },
+];
+
+describe("transformInputData", () => {
+	test("carries canvas and domain coordinates on the same point", () => {
+		const { points } = transformInputData({ data, yKeys: ["sales"], xValues: [0, 1, 2], xScale, yScale });
+		expect(points.sales?.[0]).toEqual({ x: 0, y: 100, xValue: 0, yValue: 0 });
+		expect(points.sales?.[2]).toEqual({ x: 200, y: 0, xValue: 2, yValue: 100 });
+	});
+
+	test("keeps one point per row, marking a missing value as a gap", () => {
+		// Dropping the row would shift every later point one place left against
+		// the x positions, and the line would draw the wrong shape.
+		const { points } = transformInputData({ data, yKeys: ["cost"], xValues: [0, 1, 2], xScale, yScale });
+		expect(points.cost).toHaveLength(3);
+		expect(points.cost?.[1]?.y).toBeNull();
+		expect(points.cost?.[1]?.yValue).toBeNull();
+		expect(points.cost?.[1]?.x).toBe(100);
+	});
+
+	test("shares one set of x positions across every series", () => {
+		const result = transformInputData({ data, yKeys: ["sales", "cost"], xValues: [0, 1, 2], xScale, yScale });
+		expect(result.xPositions).toEqual([0, 100, 200]);
+		for (const key of ["sales", "cost"]) {
+			expect(result.points[key]?.map((point) => point.x)).toEqual([...result.xPositions]);
+		}
+	});
+
+	test("handles an empty dataset", () => {
+		const result = transformInputData({ data: [], yKeys: ["sales"], xValues: [], xScale, yScale });
+		expect(result.points.sales).toEqual([]);
+		expect(result.xPositions).toEqual([]);
+	});
+
+	test("treats an absent key as a series of gaps rather than throwing", () => {
+		const { points } = transformInputData({ data, yKeys: ["missing"], xValues: [0, 1, 2], xScale, yScale });
+		expect(points.missing?.every((point) => point.y === null)).toBe(true);
+	});
+});
+
+describe("collectYValues", () => {
+	test("gathers every finite value across every series", () => {
+		expect(collectYValues(data, ["sales", "cost"]).sort((a, b) => a - b)).toEqual([0, 25, 50, 50, 100]);
+	});
+
+	test("skips gaps", () => {
+		expect(collectYValues(data, ["cost"])).toEqual([50, 25]);
+	});
+
+	describe("horizontal", () => {
+		// Categories run down y, values across x. The category scale is the one
+		// on y; the value scale is the one on x.
+		const categoryScale: ScaleDescriptor = { kind: "linear", domain: [0, 2], range: [0, 200] };
+		const valueScale: ScaleDescriptor = { kind: "linear", domain: [0, 100], range: [0, 100] };
+
+		test("puts the value on x and the category on y", () => {
+			const { points } = transformInputData({
+				data,
+				yKeys: ["sales"],
+				xValues: [0, 1, 2],
+				xScale: valueScale,
+				yScale: categoryScale,
+				orientation: "horizontal",
+			});
+			expect(points.sales?.[2]).toEqual({ x: 100, y: 200, xValue: 2, yValue: 100 });
+		});
+
+		test("a gap keeps its category position and has no x", () => {
+			const { points } = transformInputData({
+				data,
+				yKeys: ["cost"],
+				xValues: [0, 1, 2],
+				xScale: valueScale,
+				yScale: categoryScale,
+				orientation: "horizontal",
+			});
+			expect(points.cost?.[1]?.y).toBe(100);
+			expect(Number.isNaN(points.cost?.[1]?.x)).toBe(true);
+			expect(points.cost?.[1]?.yValue).toBeNull();
+		});
+
+		test("xPositions are the category positions, whichever axis they lie on", () => {
+			const result = transformInputData({
+				data,
+				yKeys: ["sales"],
+				xValues: [0, 1, 2],
+				xScale: valueScale,
+				yScale: categoryScale,
+				orientation: "horizontal",
+			});
+			expect(result.xPositions).toEqual([0, 100, 200]);
+			expect(result.points.sales?.map((point) => point.y)).toEqual([0, 100, 200]);
+		});
+	});
+});