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

package/src/cartesian/cartesian-chart.tsx

@@ -0,0 +1,132 @@
+import { Canvas } from "@shopify/react-native-skia";
+import { type ReactElement, useEffect, useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import type { ChartRow } from "../core/chart.types";
+import { buildLinePath } from "../core/curve/build-line";
+import { toCurvePath } from "../core/interaction/path-segments";
+import { EMPTY_SCRUB_MODEL, type ScrubModel, type ScrubSeries } from "../gesture/gesture.types";
+import { ChartGestureOverlay } from "../gesture/gesture-overlay";
+import { useScrubGesture } from "../gesture/use-scrub-gesture";
+import { CartesianChartContext } from "./cartesian-chart.context";
+import type { CartesianChartProps, CartesianRenderArgs, XKeyOf, YKeyOf } from "./cartesian-chart.types";
+import { useCanvasSize } from "./hooks/use-canvas-size";
+import { useChartModel } from "./hooks/use-chart-model";
+
+/**
+ * A cartesian chart: scales, ticks, a plot rect, and whatever marks you place.
+ *
+ * ## Where things are mounted, and why
+ *
+ * ```
+ * View        onLayout, and the only thing that knows the chart's size
+ *   Canvas    the Skia reconciler starts here
+ *     Provider  ← rendered INSIDE the canvas, so marks below can read it
+ *       children
+ *   Overlay   an ordinary RN view; the canvas has no touch targets
+ * ```
+ *
+ * The provider's position is the whole trick. `<Canvas>` mounts a second React
+ * reconciler and context does not cross a reconciler boundary — but it
+ * resolves by which reconciler renders the *provider node*, so placing the
+ * provider among the canvas' children puts it in the Skia tree and consumers
+ * below it resolve normally. No `its-fine`, no context bridge, no
+ * `FiberProvider` wrapping the host app.
+ *
+ * The consequence for a themed wrapper is that every hook — `useThemeColor`,
+ * anything reading a CSS variable — must be called **above** the canvas and
+ * its result passed down as a plain value. There is nowhere inside to call one.
+ *
+ * ## Both child forms
+ *
+ * `children` may be Skia nodes, which read the chart from context, or a
+ * function of the resolved chart. The same mark components serve both: given
+ * `yKey` they read context, given `points` they use what they are handed.
+ */
+export function CartesianChart<
+	Row extends ChartRow,
+	const XK extends XKeyOf<Row>,
+	const YK extends readonly YKeyOf<Row>[],
+>(props: CartesianChartProps<Row, XK, YK>): ReactElement {
+	const { data, xKey, yKeys, children, scrub, scrubConfig, onBoundsChange, ...rest } = props;
+
+	const { size, onLayout } = useCanvasSize();
+
+	const model = useChartModel({
+		...rest,
+		data: data as readonly ChartRow[],
+		xKey,
+		yKeys,
+		canvas: size,
+		scrub,
+	});
+
+	const { bounds, points, xPositions, stacked, xScale, yScale, curve, orientation } = model;
+
+	// Everything the scrub worklet reads, as plain data in one shared value.
+	// Rebuilt on the JavaScript thread whenever the chart changes; read on the
+	// UI thread every frame of a drag.
+	const scrubModel = useSharedValue<ScrubModel>(EMPTY_SCRUB_MODEL);
+
+	// A stacked key's `ys` are the tops of its segments, so the cursor dot sits
+	// on the segment that is visible; its `values` stay the raw series, which is
+	// what a readout should print. On a horizontal chart the value position is
+	// the point's x, and there is no curve to glide along.
+	const nextScrubModel = useMemo<ScrubModel>(() => {
+		const horizontal = orientation === "horizontal";
+		const series: ScrubSeries[] = model.yKeys.map((key) => {
+			const raw = points[key] ?? [];
+			const drawn = stacked[key] ?? raw;
+			return {
+				key,
+				path: horizontal ? [] : toCurvePath(buildLinePath(drawn, { curve })),
+				ys: drawn.map((point) => (horizontal ? (point.yValue === null ? null : point.x) : point.y)),
+				values: raw.map((point) => point.yValue),
+			};
+		});
+
+		const scale = horizontal ? yScale : xScale;
+		return {
+			axis: horizontal ? "y" : "x",
+			left: bounds.left,
+			right: bounds.right,
+			top: bounds.top,
+			bottom: bounds.bottom,
+			positions: xPositions,
+			scale,
+			xPositions,
+			xScale: scale,
+			series,
+		};
+	}, [bounds, points, stacked, xPositions, xScale, yScale, curve, model.yKeys, orientation]);
+
+	useEffect(() => {
+		scrubModel.value = nextScrubModel;
+	}, [nextScrubModel, scrubModel]);
+
+	useEffect(() => {
+		onBoundsChange?.(bounds);
+	}, [bounds, onBoundsChange]);
+
+	const gesture = useScrubGesture({ state: scrub, model: scrubModel, config: scrubConfig });
+
+	const content =
+		typeof children === "function"
+			? children({ ...model, points: model.points, data } as CartesianRenderArgs<Row, YK>)
+			: children;
+
+	return (
+		<View onLayout={onLayout} style={styles.root}>
+			<Canvas style={StyleSheet.absoluteFill}>
+				<CartesianChartContext.Provider value={model}>{content}</CartesianChartContext.Provider>
+			</Canvas>
+			{gesture === null ? null : <ChartGestureOverlay gesture={gesture} />}
+		</View>
+	);
+}
+
+CartesianChart.displayName = "DelacourCharts.CartesianChart";
+
+const styles = StyleSheet.create({
+	root: { flex: 1, overflow: "hidden" },
+});

package/src/cartesian/cartesian-chart.types.ts

@@ -0,0 +1,181 @@
+import type { SkFont } from "@shopify/react-native-skia";
+import type { ReactNode } from "react";
+import type { ChartAnimation } from "../animation/animation.types";
+import type { ChartBounds, ChartOrientation, ChartPoint, ChartRow, ChartSegment, ChartSize } from "../core/chart.types";
+import type { CurveType } from "../core/curve/curves";
+import type { DomainPadding } from "../core/geometry/domain";
+import type { ScaleDescriptor, ScaleType } from "../core/scale/scale.types";
+import type { LabelMetrics } from "../core/text/label-anchor";
+import type { ChartTick } from "../core/ticks/tick.types";
+import type { SidedNumber } from "../core/util/sided-number";
+import type { ChartScrubState, ScrubConfig } from "../gesture/gesture.types";
+
+/**
+ * Fields that can position a point along x — a number, a date, or a label.
+ *
+ * A row typed only as `Record<string, unknown>` knows nothing about its own
+ * fields, so narrowing it would produce `never` and reject every key. The
+ * `string extends keyof Row` guard detects exactly that case — it holds only
+ * for an index signature — and widens back to `string`. Without it a caller
+ * who has not typed their rows cannot name a key at all, which is a type error
+ * on correct code.
+ */
+export type XKeyOf<Row extends ChartRow> = string extends keyof Row
+	? string
+	: {
+			[Key in keyof Row]-?: Row[Key] extends number | string | Date | null | undefined ? Key : never;
+		}[keyof Row] &
+			string;
+
+/** Fields that can be measured up y. Widens the same way — see `XKeyOf`. */
+export type YKeyOf<Row extends ChartRow> = string extends keyof Row
+	? string
+	: {
+			[Key in keyof Row]-?: Row[Key] extends number | null | undefined ? Key : never;
+		}[keyof Row] &
+			string;
+
+export type AxisLabelFormatter = (value: number, index: number) => string;
+
+export type AxisOptions = {
+	/** Draw this axis at all. Ticks and labels both. */
+	readonly show?: boolean;
+	/** How many ticks to aim for. The generator rounds it to human values. */
+	readonly tickCount?: number;
+	/** Explicit tick values, instead of generating any. */
+	readonly tickValues?: readonly number[];
+	readonly formatLabel?: AxisLabelFormatter;
+};
+
+export type { ChartOrientation };
+
+/**
+ * The width one datum owns along the category axis.
+ *
+ * `value` is in domain units — one for a categorical axis, a month's worth of
+ * milliseconds on a monthly time scale. `px` is the same distance on the
+ * canvas. A bar's band and the tooltip's highlight are both stated in it.
+ *
+ * It is the **category** step whichever axis the categories lie on: on a
+ * horizontal chart `px` is a distance along y. The name keeps the vertical
+ * case, like `xPositions` and `xValue`.
+ */
+export type ChartStep = {
+	readonly value: number;
+	readonly px: number;
+};
+
+/** Everything a mark, an axis or a render prop can read about the chart. */
+export type ChartContextValue = {
+	/** One array per y key, in the order the keys were given. */
+	readonly points: Readonly<Record<string, readonly ChartPoint[]>>;
+	/** Canvas position of each row's category, shared by every series — a y on a horizontal chart. */
+	readonly xPositions: readonly number[];
+	readonly xStep: ChartStep;
+	/**
+	 * The stacked series, one entry per key in `stackKeys`.
+	 *
+	 * `points[key]` still holds the raw series; a stacked mark reads here for
+	 * the edges it draws between, and a tooltip reads there for the value it
+	 * prints.
+	 */
+	readonly stacked: Readonly<Record<string, readonly ChartSegment[]>>;
+	readonly orientation: ChartOrientation;
+	/** The plot rect — the canvas minus padding and axis gutters. */
+	readonly bounds: ChartBounds;
+	/** The whole canvas, including the gutters. */
+	readonly canvas: ChartSize;
+	/** The scale on the canvas' x axis: categories when vertical, values when horizontal. */
+	readonly xScale: ScaleDescriptor;
+	/** The scale on the canvas' y axis: values when vertical, categories when horizontal. */
+	readonly yScale: ScaleDescriptor;
+	readonly xTicks: readonly ChartTick[];
+	readonly yTicks: readonly ChartTick[];
+	readonly xLabels: readonly string[];
+	readonly yLabels: readonly string[];
+	readonly yKeys: readonly string[];
+	/** `null` until the font resolves; an axis then draws ticks and no labels. */
+	readonly font: SkFont | null;
+	readonly lineHeight: number;
+	/** The font's ascent and descent, for placing a label by its glyph box. */
+	readonly fontMetrics: LabelMetrics;
+	readonly curve: CurveType;
+	readonly animation: ChartAnimation;
+	readonly scrub: ChartScrubState | null;
+	/** Whether x holds positions rather than measurements. */
+	readonly isCategorical: boolean;
+	/** Whether there is room to draw in. */
+	readonly ready: boolean;
+};
+
+export type CartesianRenderArgs<Row extends ChartRow, YK extends readonly string[]> = Omit<
+	ChartContextValue,
+	"points"
+> & {
+	readonly points: { readonly [Key in YK[number]]: readonly ChartPoint[] };
+	readonly data: readonly Row[];
+};
+
+export type CartesianChartProps<Row extends ChartRow, XK extends XKeyOf<Row>, YK extends readonly YKeyOf<Row>[]> = {
+	readonly data: readonly Row[];
+	readonly xKey: XK;
+	readonly yKeys: YK;
+
+	/** Space between the canvas edge and the axes. */
+	readonly padding?: SidedNumber;
+	/** Explicit bounds. Either end of either axis may be omitted. */
+	readonly domain?: {
+		readonly x?: readonly [number | undefined, number | undefined];
+		readonly y?: readonly [number | undefined, number | undefined];
+	};
+	/**
+	 * Extra span at each end of the domain.
+	 *
+	 * A bare number pads y, as a fraction of the measured extent. An object
+	 * names each axis; `x` is measured in **steps**, so `{ x: 0.5 }` is half a
+	 * band each side — what a bar chart needs for its first and last bars to
+	 * sit inside the plot rather than straddle its edges.
+	 */
+	readonly domainPadding?: DomainPadding;
+	/**
+	 * Which of `yKeys` stack on one another, bottom first.
+	 *
+	 * The root owns this rather than the mark because the y domain has to
+	 * cover the running totals, and only the root builds the y scale. A stacked
+	 * mark that stacked for itself would draw past the top of the plot.
+	 */
+	readonly stackKeys?: readonly string[];
+	/**
+	 * Categories along x (the default) or along y.
+	 *
+	 * Horizontal swaps the axis roles at the model: categories are planned into
+	 * the y range and values into the x range, so `yTicks` and `yLabels` carry
+	 * the categories and the left gutter is measured for them. Every mark reads
+	 * the same flag.
+	 */
+	readonly orientation?: ChartOrientation;
+	/** Pull zero into the y domain. What a bar chart needs; a line usually does not. */
+	readonly includeZero?: boolean;
+	/** Round the y domain out to tick values. */
+	readonly niceDomain?: boolean;
+
+	/** Defaults to `time` when the x field holds dates, `linear` otherwise. */
+	readonly xScaleType?: ScaleType;
+	readonly yScaleType?: ScaleType;
+	/** The interpolator every mark uses unless it overrides it. */
+	readonly curve?: CurveType;
+	readonly animation?: ChartAnimation;
+
+	readonly xAxis?: AxisOptions;
+	readonly yAxis?: AxisOptions;
+	readonly font?: SkFont | null;
+
+	/** From `useChartScrub`. Without it the chart takes no touches. */
+	readonly scrub?: ChartScrubState;
+	readonly scrubConfig?: ScrubConfig;
+
+	readonly onBoundsChange?: (bounds: ChartBounds) => void;
+
+	/** Skia children, or a function of the resolved chart. */
+	readonly children?: ReactNode | ((args: CartesianRenderArgs<Row, YK>) => ReactNode);
+};

package/src/cartesian/hooks/use-canvas-size.ts

@@ -0,0 +1,37 @@
+import { useCallback, useState } from "react";
+import type { LayoutChangeEvent } from "react-native";
+import type { ChartSize } from "../../core/chart.types";
+
+export const ZERO_SIZE: ChartSize = { width: 0, height: 0 };
+
+export type CanvasSize = {
+	readonly size: ChartSize;
+	readonly onLayout: (event: LayoutChangeEvent) => void;
+	/** False until the first layout pass. Nothing should draw before it. */
+	readonly measured: boolean;
+};
+
+/**
+ * The chart's measured size.
+ *
+ * Measured on the wrapping React Native view rather than on the canvas.
+ * Skia's `<Canvas onLayout>` is deprecated and does not fire on Fabric at all,
+ * and its `onSize` alternative reports into a shared value — useful for a
+ * worklet, useless for building scales, which happens on the JavaScript
+ * thread. A plain `View` reports where the work actually is.
+ *
+ * The size is held in state, so a resize re-renders and every scale is rebuilt
+ * against the new rect. Rounding to whole points keeps a fractional layout
+ * from re-rendering the chart on every frame of a parent animation.
+ */
+export function useCanvasSize(): CanvasSize {
+	const [size, setSize] = useState<ChartSize>(ZERO_SIZE);
+
+	const onLayout = useCallback((event: LayoutChangeEvent) => {
+		const { width, height } = event.nativeEvent.layout;
+		const next = { width: Math.round(width), height: Math.round(height) };
+		setSize((current) => (current.width === next.width && current.height === next.height ? current : next));
+	}, []);
+
+	return { size, onLayout, measured: size.width > 0 && size.height > 0 };
+}

package/src/cartesian/hooks/use-chart-model.ts

@@ -0,0 +1,278 @@
+import type { SkFont } from "@shopify/react-native-skia";
+import { useMemo } from "react";
+import type { ChartAnimation } from "../../animation/animation.types";
+import { DEFAULT_CHART_ANIMATION } from "../../animation/animation.types";
+import type { ChartRow, ChartSize } from "../../core/chart.types";
+import type { CurveType } from "../../core/curve/curves";
+import { getChartBounds, hasArea } from "../../core/geometry/chart-bounds";
+import {
+	type AxisPlan,
+	axisRanges,
+	pickAxisRoles,
+	placeAxisRoles,
+	planAxis,
+	resolveChartFrame,
+} from "../../core/geometry/chart-layout";
+import { type DomainPadding, resolveDomain, resolveDomainPadding } from "../../core/geometry/domain";
+import { collectStackedYValues, stackSeries } from "../../core/geometry/stack";
+import { resolveStep } from "../../core/geometry/step";
+import { collectYValues, transformInputData } from "../../core/geometry/transform-input-data";
+import { resolveXValues } from "../../core/geometry/x-values";
+import { scaleValue } from "../../core/scale/scale";
+import type { DomainTuple, RangeTuple, ScaleType } from "../../core/scale/scale.types";
+import { categoricalTickFormat, defaultTickFormat } from "../../core/text/format-tick";
+import { DEFAULT_TICK_COUNT } from "../../core/ticks/tick-count";
+import type { SidedNumber } from "../../core/util/sided-number";
+import type { ChartScrubState } from "../../gesture/gesture.types";
+import { fontMetrics, measureLabelWidths } from "../../skia/font";
+import type { AxisLabelFormatter, AxisOptions, ChartContextValue, ChartOrientation } from "../cartesian-chart.types";
+
+export type UseChartModelOptions = {
+	readonly data: readonly ChartRow[];
+	readonly xKey: string;
+	readonly yKeys: readonly string[];
+	readonly canvas: ChartSize;
+	readonly padding?: SidedNumber;
+	readonly domain?: {
+		readonly x?: readonly [number | undefined, number | undefined];
+		readonly y?: readonly [number | undefined, number | undefined];
+	};
+	readonly domainPadding?: DomainPadding;
+	readonly stackKeys?: readonly string[];
+	readonly orientation?: ChartOrientation;
+	readonly includeZero?: boolean;
+	readonly niceDomain?: boolean;
+	readonly xScaleType?: ScaleType;
+	readonly yScaleType?: ScaleType;
+	readonly curve?: CurveType;
+	readonly animation?: ChartAnimation;
+	readonly xAxis?: AxisOptions;
+	readonly yAxis?: AxisOptions;
+	readonly font?: SkFont | null;
+	readonly scrub?: ChartScrubState;
+};
+
+/**
+ * The whole chart, resolved: scales, ticks, plot rect and plotted points.
+ *
+ * The layout is two passes and the maths for both lives in
+ * `core/geometry/chart-layout.ts` — `planAxis` decides tick values against the
+ * full canvas, this hook measures those labels with the font, and
+ * `resolveChartFrame` turns the measurements into a plot rect and moves the
+ * scales into it. The tick values never change between the passes, which is
+ * what stops the measure/gutter cycle from iterating.
+ *
+ * Only the measuring is here. Everything either side of it is pure and tested.
+ */
+export function useChartModel(options: UseChartModelOptions): ChartContextValue {
+	const {
+		data,
+		xKey,
+		yKeys,
+		canvas,
+		padding,
+		domain,
+		domainPadding,
+		stackKeys,
+		orientation = "vertical",
+		includeZero,
+		niceDomain,
+		xScaleType,
+		yScaleType,
+		curve = "linear",
+		animation = DEFAULT_CHART_ANIMATION,
+		xAxis,
+		yAxis,
+		font = null,
+		scrub,
+	} = options;
+
+	const yKeySignature = yKeys.join(" ");
+	const stackSignature = (stackKeys ?? []).join(" ");
+
+	// `yKeys` and `stackKeys` enter the dependency list as joined signatures, so
+	// a fresh array of the same keys does not rebuild every scale and path on
+	// each render.
+	return useMemo<ChartContextValue>(() => {
+		const keys = splitSignature(yKeySignature);
+		const stackedKeys = splitSignature(stackSignature);
+		const unstackedKeys = keys.filter((key) => !stackedKeys.includes(key));
+		const { values: xValues, isCategorical, raw } = resolveXValues(data, xKey);
+		const pad = resolveDomainPadding(domainPadding);
+		const xStepValue = resolveStep(xValues);
+
+		const xKind = resolveXKind(xScaleType, isCategorical, raw);
+		const yKind = yScaleType ?? "linear";
+		const shown = pickAxisRoles(xAxis?.show ?? true, yAxis?.show ?? true, orientation);
+
+		const xDomain = resolveDomain({ values: xValues, domain: domain?.x, absolutePadding: pad.x * xStepValue });
+		const yDomain = resolveDomain({
+			values: [...collectYValues(data, unstackedKeys), ...collectStackedYValues(data, stackedKeys)],
+			domain: domain?.y,
+			padding: pad.y,
+			includeZero,
+		});
+
+		// The category axis and the value axis are planned by role; the
+		// orientation decides which canvas axis each lands on, and from the
+		// frame onward `x` and `y` name canvas axes only.
+		const outer = getChartBounds(canvas, padding);
+		const ranges = axisRanges(outer, orientation);
+		const axes = pickAxisRoles(xAxis, yAxis, orientation);
+		const plan = placeAxisRoles(
+			planCategoryAxis({
+				domain: xDomain,
+				kind: xKind,
+				range: ranges.category,
+				axis: axes.category,
+				show: shown.category,
+				isCategorical,
+				xValues,
+				raw,
+			}),
+			planAxis({
+				domain: yDomain,
+				kind: yKind,
+				range: ranges.value,
+				tickCount: axes.value?.tickCount ?? DEFAULT_TICK_COUNT,
+				tickValues: axes.value?.tickValues,
+				format: axes.value?.formatLabel ?? defaultTickFormat(yKind, 0),
+				show: shown.value,
+				nice: niceDomain,
+			}),
+			orientation
+		);
+
+		const metrics = fontMetrics(font);
+		const lineHeight = metrics.ascent + metrics.descent;
+		const frame = resolveChartFrame({
+			canvas,
+			padding,
+			plan,
+			xLabelWidths: measureLabelWidths(font, plan.x.labels),
+			yLabelWidths: measureLabelWidths(font, plan.y.labels),
+			lineHeight,
+			showXAxis: xAxis?.show ?? true,
+			showYAxis: yAxis?.show ?? true,
+			orientation,
+		});
+
+		const { points, xPositions } = transformInputData({
+			data,
+			yKeys: keys,
+			xValues,
+			xScale: frame.xScale,
+			yScale: frame.yScale,
+			orientation,
+		});
+
+		const { category: categoryScale, value: valueScale } = pickAxisRoles(frame.xScale, frame.yScale, orientation);
+		const x0 = categoryScale.domain[0];
+		const xStep = {
+			value: xStepValue,
+			px: Math.abs(scaleValue(categoryScale, x0 + xStepValue) - scaleValue(categoryScale, x0)),
+		};
+
+		const stacked = stackSeries({ data, keys: stackedKeys, xValues, xPositions, yScale: valueScale, orientation });
+
+		return {
+			points,
+			xPositions,
+			xStep,
+			stacked,
+			orientation,
+			bounds: frame.bounds,
+			canvas,
+			xScale: frame.xScale,
+			yScale: frame.yScale,
+			xTicks: frame.xTicks,
+			yTicks: frame.yTicks,
+			xLabels: plan.x.labels,
+			yLabels: plan.y.labels,
+			yKeys: keys,
+			font,
+			lineHeight,
+			fontMetrics: metrics,
+			curve,
+			animation,
+			scrub: scrub ?? null,
+			isCategorical,
+			ready: hasArea(frame.bounds) && data.length > 0,
+		};
+	}, [
+		data,
+		xKey,
+		yKeySignature,
+		canvas,
+		padding,
+		domain,
+		domainPadding,
+		stackSignature,
+		orientation,
+		includeZero,
+		niceDomain,
+		xScaleType,
+		yScaleType,
+		curve,
+		animation,
+		xAxis,
+		yAxis,
+		font,
+		scrub,
+	]);
+}
+
+type PlanCategoryAxisOptions = {
+	readonly domain: DomainTuple;
+	readonly kind: ScaleType;
+	readonly range: RangeTuple;
+	readonly axis: AxisOptions | undefined;
+	readonly show: boolean;
+	readonly isCategorical: boolean;
+	readonly xValues: readonly number[];
+	readonly raw: readonly unknown[];
+};
+
+/**
+ * The category axis' plan. A categorical axis ticks on its own data, not on
+ * round numbers — index 2.5 names no month — and prints the original label.
+ */
+function planCategoryAxis(options: PlanCategoryAxisOptions): AxisPlan {
+	const { domain, kind, range, axis, show, isCategorical, xValues, raw } = options;
+	return planAxis({
+		domain,
+		kind,
+		range,
+		tickCount: axis?.tickCount ?? DEFAULT_TICK_COUNT,
+		tickValues: axis?.tickValues ?? (isCategorical ? xValues : undefined),
+		format: axis?.formatLabel ?? categoricalOrValueFormat(isCategorical, raw, kind, domain),
+		show,
+	});
+}
+
+/** A joined key signature back into keys; the empty signature is no keys. */
+function splitSignature(signature: string): string[] {
+	return signature === "" ? [] : signature.split(" ");
+}
+
+/** A date-valued x field gets a time scale unless the caller says otherwise. */
+function resolveXKind(explicit: ScaleType | undefined, isCategorical: boolean, raw: readonly unknown[]): ScaleType {
+	if (explicit !== undefined) return explicit;
+	if (isCategorical) return "linear";
+	return raw.some((value) => value instanceof Date) ? "time" : "linear";
+}
+
+/** A categorical axis prints the original label; anything else prints its value. */
+function categoricalOrValueFormat(
+	isCategorical: boolean,
+	raw: readonly unknown[],
+	kind: ScaleType,
+	domain: readonly [number, number]
+): AxisLabelFormatter {
+	if (isCategorical) {
+		const label = categoricalTickFormat(raw);
+		return (value) => label(value);
+	}
+	const format = defaultTickFormat(kind, Math.abs(domain[1] - domain[0]));
+	return (value) => format(value);
+}

package/src/cartesian/index.ts

@@ -0,0 +1,41 @@
+export { ChartXAxis, type ChartXAxisProps } from "./axes/chart-x-axis";
+export { ChartYAxis, type ChartYAxisProps } from "./axes/chart-y-axis";
+export { CartesianChart } from "./cartesian-chart";
+export { CartesianChartContext, useChartContext, useOptionalChartContext } from "./cartesian-chart.context";
+export type {
+	AxisLabelFormatter,
+	AxisOptions,
+	CartesianChartProps,
+	CartesianRenderArgs,
+	ChartContextValue,
+	ChartOrientation,
+	ChartStep,
+	XKeyOf,
+	YKeyOf,
+} from "./cartesian-chart.types";
+export { type CanvasSize, useCanvasSize } from "./hooks/use-canvas-size";
+export { type UseChartModelOptions, useChartModel } from "./hooks/use-chart-model";
+export { ChartArea, type ChartAreaProps } from "./marks/chart-area";
+export { ChartBar, type ChartBarLabels, type ChartBarProps } from "./marks/chart-bar";
+export { ChartBarGroup, type ChartBarGroupProps } from "./marks/chart-bar-group";
+export {
+	ChartBarStack,
+	type ChartBarStackProps,
+	type ChartBarStackSegmentInfo,
+	type ChartBarStackSegmentOptions,
+} from "./marks/chart-bar-stack";
+export {
+	type ChartCandleColors,
+	ChartCandlestick,
+	type ChartCandlestickKeys,
+	type ChartCandlestickProps,
+} from "./marks/chart-candlestick";
+export {
+	ChartCursorDot,
+	type ChartCursorDotProps,
+	ChartCursorLine,
+	type ChartCursorLineProps,
+} from "./marks/chart-cursor";
+export { ChartGrid, type ChartGridProps } from "./marks/chart-grid";
+export { ChartLine, type ChartLineProps } from "./marks/chart-line";
+export { ChartScatter, type ChartScatterProps } from "./marks/chart-scatter";