@chipmobilesdk/rn-chart 0.2.0 → 0.3.0

package/src/react/useChartSelection.ts

@@ -1,170 +1,152 @@
-/**
- * Selection ownership: uncontrolled by default, controlled when the app
- * supplies a value (FR-054a).
- *
- * Two properties matter and both are load-bearing:
- *
- *  - The selection is **resolved against the current datasource on every
- *    render** rather than stored resolved. A reference to a point that no
- *    longer exists therefore draws nothing, in either mode (FR-054).
- *  - Selection state lives outside the geometry memo, so highlighting repaints
- *    the highlight without recomputing scales or path strings (FR-073).
- */
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import type {
-	PointInteractionEvent,
-	SelectionRef,
-	SeriesInteractionEvent,
-} from '../contract/interaction';
-import { sameSelection } from '../contract/interaction';
-import { findRegion, type HitRegion } from '../geometry/hitTest';
-
-export interface UseChartSelectionArgs<M> {
-	/** Present (including `null`) means the app owns the selection. */
-	readonly controlled?: SelectionRef | null;
-	readonly onSelectionChange?: (
-		next: SelectionRef | null,
-		event: PointInteractionEvent<M> | null,
-	) => void;
-	readonly onSelectionUnresolvable?: (ref: SelectionRef) => void;
-	readonly hitRegions: readonly HitRegion[];
-	/** Non-ready statuses suppress selection entirely (FR-053). */
-	readonly interactionSuppressed: boolean;
-	/**
-	 * False until the container has been measured and geometry exists.
-	 *
-	 * Without this, a chart that has not laid out yet has no hit regions, and a
-	 * perfectly valid app-controlled selection would be reported as
-	 * unresolvable on first paint — telling the app its state is wrong when it
-	 * is not.
-	 */
-	readonly geometryReady: boolean;
-}
-
-export interface ChartSelectionApi<M> {
-	/** What to draw. Never a reference the datasource cannot resolve. */
-	readonly resolved: HitRegion | undefined;
-	readonly selection: SelectionRef | null;
-	readonly select: (
-		ref: SelectionRef | null,
-		event: PointInteractionEvent<M> | null,
-	) => void;
-}
-
-export function useChartSelection<M>(
-	args: UseChartSelectionArgs<M>,
-): ChartSelectionApi<M> {
-	const isControlled = args.controlled !== undefined;
-	const [internal, setInternal] = useState<SelectionRef | null>(null);
-
-	const selection = isControlled ? args.controlled ?? null : internal;
-
-	// Resolve fresh every render. A stale reference resolves to `undefined` and
-	// simply is not drawn.
-	const resolved =
-		selection && !args.interactionSuppressed
-			? findRegion(args.hitRegions, selection.seriesId, selection.pointId)
-			: undefined;
-
-	// Tell a controlling app when its selection stopped resolving, rather than
-	// silently ignoring it. Uncontrolled selections are cleared instead.
-	const reportedRef = useRef<string | null>(null);
-	useEffect(() => {
-		if (
-			!selection ||
-			resolved ||
-			args.interactionSuppressed ||
-			!args.geometryReady
-		) {
-			reportedRef.current = null;
-			return;
-		}
-
-		const key = `${selection.seriesId}:${selection.pointId ?? ''}`;
-		if (reportedRef.current === key) {
-			return;
-		}
-		reportedRef.current = key;
-
-		if (isControlled) {
-			args.onSelectionUnresolvable?.(selection);
-		} else {
-			setInternal(null);
-		}
-	}, [selection, resolved, isControlled, args, args.geometryReady]);
-
-	const select = useCallback(
-		(ref: SelectionRef | null, event: PointInteractionEvent<M> | null) => {
-			if (args.interactionSuppressed) {
-				return;
-			}
-			if (!isControlled) {
-				setInternal(prev => (sameSelection(prev, ref) ? null : ref));
-			}
-			args.onSelectionChange?.(ref, event);
-		},
-		[args, isControlled],
-	);
-
-	return { resolved, selection, select };
-}
-
-export interface UseSeriesVisibilityArgs<M> {
-	/** Present means the app owns visibility. */
-	readonly controlled?: readonly string[];
-	readonly onVisibilityChange?: (event: SeriesInteractionEvent<M>) => void;
-	/** Toggling stays off unless the app opts in (FR-049). */
-	readonly enabled: boolean;
-	/** Series marked hidden in the datasource itself. */
-	readonly initiallyHidden: readonly string[];
-}
-
-export interface SeriesVisibilityApi {
-	readonly hidden: ReadonlySet<string>;
-	readonly toggle: (seriesId: string, metadata?: unknown) => void;
-	readonly enabled: boolean;
-}
-
-export function useSeriesVisibility<M>(
-	args: UseSeriesVisibilityArgs<M>,
-): SeriesVisibilityApi {
-	const isControlled = args.controlled !== undefined;
-	const [internal, setInternal] = useState<readonly string[]>(
-		args.initiallyHidden,
-	);
-
-	const hiddenList = isControlled ? args.controlled ?? [] : internal;
-	const hidden = new Set(hiddenList);
-
-	const toggle = useCallback(
-		(seriesId: string, metadata?: unknown) => {
-			if (!args.enabled) {
-				return;
-			}
-
-			const currentlyHidden = new Set(
-				isControlled ? args.controlled ?? [] : internal,
-			);
-			const willBeVisible = currentlyHidden.has(seriesId);
-
-			if (!isControlled) {
-				setInternal(prev =>
-					prev.includes(seriesId)
-						? prev.filter(id => id !== seriesId)
-						: [...prev, seriesId],
-				);
-			}
-
-			args.onVisibilityChange?.({
-				type: 'visibilityChange',
-				seriesId,
-				visible: willBeVisible,
-				metadata: metadata as M,
-			});
-		},
-		[args, internal, isControlled],
-	);
-
-	return { hidden, toggle, enabled: args.enabled };
-}
+/**
+ * Selection ownership: uncontrolled by default, controlled when the app
+ * supplies a value (FR-054a).
+ *
+ * Two properties matter and both are load-bearing:
+ *
+ *  - The selection is **resolved against the current datasource on every
+ *    render** rather than stored resolved. A reference to a point that no
+ *    longer exists therefore draws nothing, in either mode (FR-054).
+ *  - Selection state lives outside the geometry memo, so highlighting repaints
+ *    the highlight without recomputing scales or path strings (FR-073).
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import type {
+	PointInteractionEvent,
+	SelectionRef,
+	SeriesInteractionEvent,
+} from '../contract/interaction';
+import { sameSelection } from '../contract/interaction';
+import { findRegion, type HitRegion } from '../geometry/hitTest';
+
+export interface UseChartSelectionArgs<M> {
+	/** Present (including `null`) means the app owns the selection. */
+	readonly controlled?: SelectionRef | null;
+	readonly onSelectionChange?: (
+		next: SelectionRef | null,
+		event: PointInteractionEvent<M> | null,
+	) => void;
+	readonly onSelectionUnresolvable?: (ref: SelectionRef) => void;
+	readonly hitRegions: readonly HitRegion[];
+	/** Non-ready statuses suppress selection entirely (FR-053). */
+	readonly interactionSuppressed: boolean;
+	/**
+	 * False until the container has been measured and geometry exists.
+	 *
+	 * Without this, a chart that has not laid out yet has no hit regions, and a
+	 * perfectly valid app-controlled selection would be reported as
+	 * unresolvable on first paint — telling the app its state is wrong when it
+	 * is not.
+	 */
+	readonly geometryReady: boolean;
+}
+
+export interface ChartSelectionApi<M> {
+	/** What to draw. Never a reference the datasource cannot resolve. */
+	readonly resolved: HitRegion | undefined;
+	readonly selection: SelectionRef | null;
+	readonly select: (ref: SelectionRef | null, event: PointInteractionEvent<M> | null) => void;
+}
+
+export function useChartSelection<M>(args: UseChartSelectionArgs<M>): ChartSelectionApi<M> {
+	const isControlled = args.controlled !== undefined;
+	const [internal, setInternal] = useState<SelectionRef | null>(null);
+
+	const selection = isControlled ? (args.controlled ?? null) : internal;
+
+	// Resolve fresh every render. A stale reference resolves to `undefined` and
+	// simply is not drawn.
+	const resolved =
+		selection && !args.interactionSuppressed
+			? findRegion(args.hitRegions, selection.seriesId, selection.pointId)
+			: undefined;
+
+	// Tell a controlling app when its selection stopped resolving, rather than
+	// silently ignoring it. Uncontrolled selections are cleared instead.
+	const reportedRef = useRef<string | null>(null);
+	useEffect(() => {
+		if (!selection || resolved || args.interactionSuppressed || !args.geometryReady) {
+			reportedRef.current = null;
+			return;
+		}
+
+		const key = `${selection.seriesId}:${selection.pointId ?? ''}`;
+		if (reportedRef.current === key) {
+			return;
+		}
+		reportedRef.current = key;
+
+		if (isControlled) {
+			args.onSelectionUnresolvable?.(selection);
+		} else {
+			setInternal(null);
+		}
+	}, [selection, resolved, isControlled, args, args.geometryReady]);
+
+	const select = useCallback(
+		(ref: SelectionRef | null, event: PointInteractionEvent<M> | null) => {
+			if (args.interactionSuppressed) {
+				return;
+			}
+			if (!isControlled) {
+				setInternal(prev => (sameSelection(prev, ref) ? null : ref));
+			}
+			args.onSelectionChange?.(ref, event);
+		},
+		[args, isControlled],
+	);
+
+	return { resolved, selection, select };
+}
+
+export interface UseSeriesVisibilityArgs<M> {
+	/** Present means the app owns visibility. */
+	readonly controlled?: readonly string[];
+	readonly onVisibilityChange?: (event: SeriesInteractionEvent<M>) => void;
+	/** Toggling stays off unless the app opts in (FR-049). */
+	readonly enabled: boolean;
+	/** Series marked hidden in the datasource itself. */
+	readonly initiallyHidden: readonly string[];
+}
+
+export interface SeriesVisibilityApi {
+	readonly hidden: ReadonlySet<string>;
+	readonly toggle: (seriesId: string, metadata?: unknown) => void;
+	readonly enabled: boolean;
+}
+
+export function useSeriesVisibility<M>(args: UseSeriesVisibilityArgs<M>): SeriesVisibilityApi {
+	const isControlled = args.controlled !== undefined;
+	const [internal, setInternal] = useState<readonly string[]>(args.initiallyHidden);
+
+	const hiddenList = isControlled ? (args.controlled ?? []) : internal;
+	const hidden = new Set(hiddenList);
+
+	const toggle = useCallback(
+		(seriesId: string, metadata?: unknown) => {
+			if (!args.enabled) {
+				return;
+			}
+
+			const currentlyHidden = new Set(isControlled ? (args.controlled ?? []) : internal);
+			const willBeVisible = currentlyHidden.has(seriesId);
+
+			if (!isControlled) {
+				setInternal(prev =>
+					prev.includes(seriesId) ? prev.filter(id => id !== seriesId) : [...prev, seriesId],
+				);
+			}
+
+			args.onVisibilityChange?.({
+				type: 'visibilityChange',
+				seriesId,
+				visible: willBeVisible,
+				metadata: metadata as M,
+			});
+		},
+		[args, internal, isControlled],
+	);
+
+	return { hidden, toggle, enabled: args.enabled };
+}

package/src/render/Axis.tsx

@@ -1,122 +1,120 @@
-/**
- * Axis and grid rendering. Private SVG adapter.
- *
- * Ticks arrive already thinned by `geometry/ticks.ts`, so nothing here decides
- * what fits — this module only draws what the geometry chose.
- */
-import React from 'react';
-import { G, Line, Text as SvgText } from 'react-native-svg';
-
-import type { ChartTheme } from '../contract/theme';
-import type { PlotRect } from '../geometry/layout';
-import { plotBottom, plotRight } from '../geometry/layout';
-import type { Tick } from '../geometry/ticks';
-
-export function Grid({
-	plot,
-	yTicks,
-	theme,
-}: {
-	readonly plot: PlotRect;
-	readonly yTicks: readonly Tick[];
-	readonly theme: ChartTheme;
-}) {
-	return (
-		<G>
-			{yTicks.map(tick => (
-				<Line
-					key={`grid-${tick.value}`}
-					x1={plot.x}
-					y1={tick.position}
-					x2={plotRight(plot)}
-					y2={tick.position}
-					stroke={theme.grid}
-					strokeWidth={1}
-				/>
-			))}
-		</G>
-	);
-}
-
-export function XAxis({
-	plot,
-	ticks,
-	theme,
-	fontSize,
-	rotateLabels,
-}: {
-	readonly plot: PlotRect;
-	readonly ticks: readonly Tick[];
-	readonly theme: ChartTheme;
-	readonly fontSize: number;
-	readonly rotateLabels?: boolean;
-}) {
-	const baseline = plotBottom(plot);
-
-	return (
-		<G>
-			<Line
-				x1={plot.x}
-				y1={baseline}
-				x2={plotRight(plot)}
-				y2={baseline}
-				stroke={theme.axis}
-				strokeWidth={1}
-			/>
-			{ticks.map(tick => (
-				<SvgText
-					key={`x-${tick.position}-${tick.label}`}
-					x={tick.position}
-					y={baseline + fontSize + 4}
-					fill={theme.typography.axisLabel.color}
-					fontSize={fontSize}
-					textAnchor={rotateLabels ? 'end' : 'middle'}
-					transform={
-						rotateLabels
-							? `rotate(-45, ${tick.position}, ${baseline + fontSize + 4})`
-							: undefined
-					}
-				>
-					{tick.label}
-				</SvgText>
-			))}
-		</G>
-	);
-}
-
-export function YAxis({
-	plot,
-	ticks,
-	theme,
-	fontSize,
-}: {
-	readonly plot: PlotRect;
-	readonly ticks: readonly Tick[];
-	readonly theme: ChartTheme;
-	readonly fontSize: number;
-}) {
-	return (
-		<G>
-			<Line
-				x1={plot.x}
-				y1={plot.y}
-				x2={plot.x}
-				y2={plotBottom(plot)}
-				stroke={theme.axis}
-				strokeWidth={1}
-			/>
-			{ticks.map(tick => (
-				<SvgText
-					key={`y-${tick.position}-${tick.label}`}
-					x={plot.x - 6}
-					y={tick.position + fontSize / 3}
-					fill={theme.typography.axisLabel.color}
-					fontSize={fontSize}
-					textAnchor="end"
-				>
-					{tick.label}
-				</SvgText>
-			))}
-		</G>
-	);
-}
+/**
+ * Axis and grid rendering. Private SVG adapter.
+ *
+ * Ticks arrive already thinned by `geometry/ticks.ts`, so nothing here decides
+ * what fits — this module only draws what the geometry chose.
+ */
+import React from 'react';
+import { G, Line, Text as SvgText } from 'react-native-svg';
+
+import type { ChartTheme } from '../contract/theme';
+import type { PlotRect } from '../geometry/layout';
+import { plotBottom, plotRight } from '../geometry/layout';
+import type { Tick } from '../geometry/ticks';
+
+export function Grid({
+	plot,
+	yTicks,
+	theme,
+}: {
+	readonly plot: PlotRect;
+	readonly yTicks: readonly Tick[];
+	readonly theme: ChartTheme;
+}) {
+	return (
+		<G>
+			{yTicks.map(tick => (
+				<Line
+					key={`grid-${tick.value}`}
+					x1={plot.x}
+					y1={tick.position}
+					x2={plotRight(plot)}
+					y2={tick.position}
+					stroke={theme.grid}
+					strokeWidth={1}
+				/>
+			))}
+		</G>
+	);
+}
+
+export function XAxis({
+	plot,
+	ticks,
+	theme,
+	fontSize,
+	rotateLabels,
+}: {
+	readonly plot: PlotRect;
+	readonly ticks: readonly Tick[];
+	readonly theme: ChartTheme;
+	readonly fontSize: number;
+	readonly rotateLabels?: boolean;
+}) {
+	const baseline = plotBottom(plot);
+
+	return (
+		<G>
+			<Line
+				x1={plot.x}
+				y1={baseline}
+				x2={plotRight(plot)}
+				y2={baseline}
+				stroke={theme.axis}
+				strokeWidth={1}
+			/>
+			{ticks.map(tick => (
+				<SvgText
+					key={`x-${tick.position}-${tick.label}`}
+					x={tick.position}
+					y={baseline + fontSize + 4}
+					fill={theme.typography.axisLabel.color}
+					fontSize={fontSize}
+					textAnchor={rotateLabels ? 'end' : 'middle'}
+					transform={
+						rotateLabels ? `rotate(-45, ${tick.position}, ${baseline + fontSize + 4})` : undefined
+					}
+				>
+					{tick.label}
+				</SvgText>
+			))}
+		</G>
+	);
+}
+
+export function YAxis({
+	plot,
+	ticks,
+	theme,
+	fontSize,
+}: {
+	readonly plot: PlotRect;
+	readonly ticks: readonly Tick[];
+	readonly theme: ChartTheme;
+	readonly fontSize: number;
+}) {
+	return (
+		<G>
+			<Line
+				x1={plot.x}
+				y1={plot.y}
+				x2={plot.x}
+				y2={plotBottom(plot)}
+				stroke={theme.axis}
+				strokeWidth={1}
+			/>
+			{ticks.map(tick => (
+				<SvgText
+					key={`y-${tick.position}-${tick.label}`}
+					x={plot.x - 6}
+					y={tick.position + fontSize / 3}
+					fill={theme.typography.axisLabel.color}
+					fontSize={fontSize}
+					textAnchor="end"
+				>
+					{tick.label}
+				</SvgText>
+			))}
+		</G>
+	);
+}