@chipmobilesdk/rn-chart 0.2.0 → 0.3.0

package/src/geometry/heatmap.ts

@@ -1,195 +1,189 @@
-/**
- * Heatmap geometry: a matrix of cells, batched by intensity bucket.
- *
- * This is where batching pays off most. A thousand cells become roughly eight
- * paths — one per intensity bucket, plus one per non-value class — instead of a
- * thousand elements. Cell count no longer drives element count at all
- * (research.md R2).
- *
- * Empty, zero, and unavailable cells are distinct by construction (FR-027): a
- * genuine zero lands in the lowest ramp bucket, while unknown, not-applicable,
- * and withheld each get their own texture.
- *
- * PURE. No React, no SVG.
- */
-import type { ChartDatasource } from '../contract/datasource';
-import { isKnown, isWithheld } from '../contract/value';
-import type { HitRegion } from './hitTest';
-import { rectBatchPath, type RectSpec } from './path';
-import type { GeometryInput, MarkPath, ResolvedGeometry } from './types';
-
-export interface HeatmapOptions {
-	/** Intensity buckets. More buckets means finer shading, more paths. */
-	readonly buckets?: number;
-	readonly cellGap?: number;
-	readonly cellRadius?: number;
-}
-
-export function buildHeatmapGeometry<M>(
-	datasource: ChartDatasource<M>,
-	input: GeometryInput,
-	options: HeatmapOptions = {},
-): ResolvedGeometry {
-	const { plot } = input;
-
-	const rows: string[] = [];
-	const columns: string[] = [];
-	const rowSeen = new Set<string>();
-	const colSeen = new Set<string>();
-
-	for (const series of datasource.series) {
-		for (const point of series.points) {
-			if (point.position.kind !== 'matrix') {
-				continue;
-			}
-			if (!rowSeen.has(point.position.row)) {
-				rowSeen.add(point.position.row);
-				rows.push(point.position.row);
-			}
-			if (!colSeen.has(point.position.column)) {
-				colSeen.add(point.position.column);
-				columns.push(point.position.column);
-			}
-		}
-	}
-
-	if (rows.length === 0 || columns.length === 0 || plot.width <= 0) {
-		return {
-			plot,
-			paths: [],
-			markers: [],
-			labels: [],
-			xTicks: [],
-			yTicks: [],
-			hitRegions: [],
-			incomplete: false,
-		};
-	}
-
-	const gap = options.cellGap ?? 2;
-	const cellWidth = plot.width / columns.length;
-	const cellHeight = plot.height / rows.length;
-
-	const ramp = input.heatmapRamp;
-	const bucketCount = Math.max(
-		2,
-		Math.min(options.buckets ?? ramp.length, ramp.length),
-	);
-
-	let min = Infinity;
-	let max = -Infinity;
-	for (const series of datasource.series) {
-		for (const point of series.points) {
-			if (isKnown(point.value)) {
-				min = Math.min(min, point.value.value);
-				max = Math.max(max, point.value.value);
-			}
-		}
-	}
-	const hasKnown = Number.isFinite(min) && Number.isFinite(max);
-	const span = max - min;
-
-	// Rects grouped by the path they will join.
-	const byBucket = new Map<number, RectSpec[]>();
-	const byTexture = new Map<'unknown' | 'notApplicable' | 'withheld', RectSpec[]>();
-	const hitRegions: HitRegion[] = [];
-	let excluded = 0;
-
-	for (const series of datasource.series) {
-		if (series.hidden) {
-			continue;
-		}
-
-		for (const point of series.points) {
-			if (point.position.kind !== 'matrix') {
-				continue;
-			}
-
-			const colIndex = columns.indexOf(point.position.column);
-			const rowIndex = rows.indexOf(point.position.row);
-			if (colIndex < 0 || rowIndex < 0) {
-				continue;
-			}
-
-			const rect: RectSpec = {
-				x: plot.x + colIndex * cellWidth + gap / 2,
-				y: plot.y + rowIndex * cellHeight + gap / 2,
-				width: Math.max(0, cellWidth - gap),
-				height: Math.max(0, cellHeight - gap),
-				radius: options.cellRadius,
-			};
-
-			if (isKnown(point.value)) {
-				// A zero lands in bucket 0 rather than being treated as absent —
-				// "logged nothing" and "we do not know" must not look alike.
-				const t = hasKnown && span > 0 ? (point.value.value - min) / span : 0;
-				const bucket = Math.min(
-					bucketCount - 1,
-					Math.floor(t * (bucketCount - 1) + 0.5),
-				);
-				const list = byBucket.get(bucket) ?? [];
-				list.push(rect);
-				byBucket.set(bucket, list);
-			} else {
-				excluded += 1;
-				const kind = point.value.kind;
-				const list = byTexture.get(kind) ?? [];
-				list.push(rect);
-				byTexture.set(kind, list);
-			}
-
-			hitRegions.push({
-				seriesId: series.id,
-				pointId: point.id,
-				x: rect.x + rect.width / 2,
-				y: rect.y + rect.height / 2,
-				bounds: rect,
-				selectable: !isWithheld(point.value),
-			});
-		}
-	}
-
-	const paths: MarkPath[] = [];
-
-	for (const [bucket, rects] of byBucket) {
-		paths.push({
-			key: `cells-${bucket}`,
-			seriesId: datasource.series[0]?.id ?? 'heatmap',
-			d: rectBatchPath(rects),
-			color: ramp[Math.min(bucket, ramp.length - 1)],
-			pattern: 'solid',
-			filled: true,
-		});
-	}
-
-	for (const [kind, rects] of byTexture) {
-		paths.push({
-			key: `cells-${kind}`,
-			seriesId: datasource.series[0]?.id ?? 'heatmap',
-			d: rectBatchPath(rects),
-			color: ramp[0],
-			pattern: 'solid',
-			filled: true,
-			texture: input.nonValueTextures[kind],
-		});
-	}
-
-	return {
-		plot,
-		paths,
-		markers: [],
-		labels: [],
-		xTicks: columns.map((c, i) => ({
-			value: i,
-			position: plot.x + i * cellWidth + cellWidth / 2,
-			label: input.formatCategory(c),
-		})),
-		yTicks: rows.map((r, i) => ({
-			value: i,
-			position: plot.y + i * cellHeight + cellHeight / 2,
-			label: input.formatCategory(r),
-		})),
-		hitRegions,
-		incomplete: excluded > 0,
-	};
-}
+/**
+ * Heatmap geometry: a matrix of cells, batched by intensity bucket.
+ *
+ * This is where batching pays off most. A thousand cells become roughly eight
+ * paths — one per intensity bucket, plus one per non-value class — instead of a
+ * thousand elements. Cell count no longer drives element count at all
+ * (research.md R2).
+ *
+ * Empty, zero, and unavailable cells are distinct by construction (FR-027): a
+ * genuine zero lands in the lowest ramp bucket, while unknown, not-applicable,
+ * and withheld each get their own texture.
+ *
+ * PURE. No React, no SVG.
+ */
+import type { ChartDatasource } from '../contract/datasource';
+import { isKnown, isWithheld } from '../contract/value';
+import type { HitRegion } from './hitTest';
+import { rectBatchPath, type RectSpec } from './path';
+import type { GeometryInput, MarkPath, ResolvedGeometry } from './types';
+
+export interface HeatmapOptions {
+	/** Intensity buckets. More buckets means finer shading, more paths. */
+	readonly buckets?: number;
+	readonly cellGap?: number;
+	readonly cellRadius?: number;
+}
+
+export function buildHeatmapGeometry<M>(
+	datasource: ChartDatasource<M>,
+	input: GeometryInput,
+	options: HeatmapOptions = {},
+): ResolvedGeometry {
+	const { plot } = input;
+
+	const rows: string[] = [];
+	const columns: string[] = [];
+	const rowSeen = new Set<string>();
+	const colSeen = new Set<string>();
+
+	for (const series of datasource.series) {
+		for (const point of series.points) {
+			if (point.position.kind !== 'matrix') {
+				continue;
+			}
+			if (!rowSeen.has(point.position.row)) {
+				rowSeen.add(point.position.row);
+				rows.push(point.position.row);
+			}
+			if (!colSeen.has(point.position.column)) {
+				colSeen.add(point.position.column);
+				columns.push(point.position.column);
+			}
+		}
+	}
+
+	if (rows.length === 0 || columns.length === 0 || plot.width <= 0) {
+		return {
+			plot,
+			paths: [],
+			markers: [],
+			labels: [],
+			xTicks: [],
+			yTicks: [],
+			hitRegions: [],
+			incomplete: false,
+		};
+	}
+
+	const gap = options.cellGap ?? 2;
+	const cellWidth = plot.width / columns.length;
+	const cellHeight = plot.height / rows.length;
+
+	const ramp = input.heatmapRamp;
+	const bucketCount = Math.max(2, Math.min(options.buckets ?? ramp.length, ramp.length));
+
+	let min = Infinity;
+	let max = -Infinity;
+	for (const series of datasource.series) {
+		for (const point of series.points) {
+			if (isKnown(point.value)) {
+				min = Math.min(min, point.value.value);
+				max = Math.max(max, point.value.value);
+			}
+		}
+	}
+	const hasKnown = Number.isFinite(min) && Number.isFinite(max);
+	const span = max - min;
+
+	// Rects grouped by the path they will join.
+	const byBucket = new Map<number, RectSpec[]>();
+	const byTexture = new Map<'unknown' | 'notApplicable' | 'withheld', RectSpec[]>();
+	const hitRegions: HitRegion[] = [];
+	let excluded = 0;
+
+	for (const series of datasource.series) {
+		if (series.hidden) {
+			continue;
+		}
+
+		for (const point of series.points) {
+			if (point.position.kind !== 'matrix') {
+				continue;
+			}
+
+			const colIndex = columns.indexOf(point.position.column);
+			const rowIndex = rows.indexOf(point.position.row);
+			if (colIndex < 0 || rowIndex < 0) {
+				continue;
+			}
+
+			const rect: RectSpec = {
+				x: plot.x + colIndex * cellWidth + gap / 2,
+				y: plot.y + rowIndex * cellHeight + gap / 2,
+				width: Math.max(0, cellWidth - gap),
+				height: Math.max(0, cellHeight - gap),
+				radius: options.cellRadius,
+			};
+
+			if (isKnown(point.value)) {
+				// A zero lands in bucket 0 rather than being treated as absent —
+				// "logged nothing" and "we do not know" must not look alike.
+				const t = hasKnown && span > 0 ? (point.value.value - min) / span : 0;
+				const bucket = Math.min(bucketCount - 1, Math.floor(t * (bucketCount - 1) + 0.5));
+				const list = byBucket.get(bucket) ?? [];
+				list.push(rect);
+				byBucket.set(bucket, list);
+			} else {
+				excluded += 1;
+				const kind = point.value.kind;
+				const list = byTexture.get(kind) ?? [];
+				list.push(rect);
+				byTexture.set(kind, list);
+			}
+
+			hitRegions.push({
+				seriesId: series.id,
+				pointId: point.id,
+				x: rect.x + rect.width / 2,
+				y: rect.y + rect.height / 2,
+				bounds: rect,
+				selectable: !isWithheld(point.value),
+			});
+		}
+	}
+
+	const paths: MarkPath[] = [];
+
+	for (const [bucket, rects] of byBucket) {
+		paths.push({
+			key: `cells-${bucket}`,
+			seriesId: datasource.series[0]?.id ?? 'heatmap',
+			d: rectBatchPath(rects),
+			color: ramp[Math.min(bucket, ramp.length - 1)],
+			pattern: 'solid',
+			filled: true,
+		});
+	}
+
+	for (const [kind, rects] of byTexture) {
+		paths.push({
+			key: `cells-${kind}`,
+			seriesId: datasource.series[0]?.id ?? 'heatmap',
+			d: rectBatchPath(rects),
+			color: ramp[0],
+			pattern: 'solid',
+			filled: true,
+			texture: input.nonValueTextures[kind],
+		});
+	}
+
+	return {
+		plot,
+		paths,
+		markers: [],
+		labels: [],
+		xTicks: columns.map((c, i) => ({
+			value: i,
+			position: plot.x + i * cellWidth + cellWidth / 2,
+			label: input.formatCategory(c),
+		})),
+		yTicks: rows.map((r, i) => ({
+			value: i,
+			position: plot.y + i * cellHeight + cellHeight / 2,
+			label: input.formatCategory(r),
+		})),
+		hitRegions,
+		incomplete: excluded > 0,
+	};
+}

package/src/geometry/hitTest.ts

@@ -1,120 +1,117 @@
-/**
- * Hit-testing for batched marks.
- *
- * Because marks are batched into one path per series, there are no per-element
- * press handlers to rely on — a touch is resolved against geometry instead.
- * That work would be needed anyway (a mobile time-series chart needs
- * nearest-point search regardless of how it is drawn), and doing it in one
- * place means a single implementation serves every family.
- *
- * PURE. No React, no SVG.
- */
-
-export interface HitRegion {
-	readonly seriesId: string;
-	readonly pointId: string;
-	/** Mark centre, used for nearest-point search and for highlight placement. */
-	readonly x: number;
-	readonly y: number;
-	/** Optional bounds, for marks where containment beats proximity. */
-	readonly bounds?: {
-		readonly x: number;
-		readonly y: number;
-		readonly width: number;
-		readonly height: number;
-	};
-	/**
-	 * False for points that must never be selectable: withheld values, and
-	 * anything the chart is not currently drawing (FR-053).
-	 */
-	readonly selectable: boolean;
-}
-
-export interface HitResult {
-	readonly seriesId: string;
-	readonly pointId: string;
-	readonly distance: number;
-}
-
-/** Touch slop: how far from a mark a tap still counts, in px. */
-export const DEFAULT_HIT_RADIUS = 44;
-
-function inBounds(region: HitRegion, x: number, y: number): boolean {
-	const b = region.bounds;
-	if (!b) {
-		return false;
-	}
-	return x >= b.x && x <= b.x + b.width && y >= b.y && y <= b.y + b.height;
-}
-
-/**
- * Resolves a touch to a mark.
- *
- * Containment wins over proximity where bounds exist — tapping inside a bar
- * should select that bar even if a neighbouring bar's centre happens to be
- * closer. Otherwise the nearest selectable mark within the hit radius wins.
- */
-export function hitTest(
-	regions: readonly HitRegion[],
-	x: number,
-	y: number,
-	hitRadius = DEFAULT_HIT_RADIUS,
-): HitResult | null {
-	let best: HitResult | null = null;
-
-	for (const region of regions) {
-		if (!region.selectable) {
-			continue;
-		}
-
-		if (inBounds(region, x, y)) {
-			return { seriesId: region.seriesId, pointId: region.pointId, distance: 0 };
-		}
-
-		const dx = region.x - x;
-		const dy = region.y - y;
-		const distance = Math.sqrt(dx * dx + dy * dy);
-
-		if (distance <= hitRadius && (best === null || distance < best.distance)) {
-			best = { seriesId: region.seriesId, pointId: region.pointId, distance };
-		}
-	}
-
-	return best;
-}
-
-/**
- * Nearest mark by horizontal distance only.
- *
- * The right model for a time-series chart: a user aiming at "that Tuesday
- * spike" cares about the x position, and demanding vertical accuracy on a line
- * that may sit anywhere in the plot makes selection frustrating.
- */
-export function hitTestByX(
-	regions: readonly HitRegion[],
-	x: number,
-): HitResult | null {
-	let best: HitResult | null = null;
-
-	for (const region of regions) {
-		if (!region.selectable) {
-			continue;
-		}
-		const distance = Math.abs(region.x - x);
-		if (best === null || distance < best.distance) {
-			best = { seriesId: region.seriesId, pointId: region.pointId, distance };
-		}
-	}
-
-	return best;
-}
-
-export function findRegion(
-	regions: readonly HitRegion[],
-	seriesId: string,
-	pointId?: string,
-): HitRegion | undefined {
-	return regions.find(
-		r => r.seriesId === seriesId && (pointId === undefined || r.pointId === pointId),
-	);
-}
+/**
+ * Hit-testing for batched marks.
+ *
+ * Because marks are batched into one path per series, there are no per-element
+ * press handlers to rely on — a touch is resolved against geometry instead.
+ * That work would be needed anyway (a mobile time-series chart needs
+ * nearest-point search regardless of how it is drawn), and doing it in one
+ * place means a single implementation serves every family.
+ *
+ * PURE. No React, no SVG.
+ */
+
+export interface HitRegion {
+	readonly seriesId: string;
+	readonly pointId: string;
+	/** Mark centre, used for nearest-point search and for highlight placement. */
+	readonly x: number;
+	readonly y: number;
+	/** Optional bounds, for marks where containment beats proximity. */
+	readonly bounds?: {
+		readonly x: number;
+		readonly y: number;
+		readonly width: number;
+		readonly height: number;
+	};
+	/**
+	 * False for points that must never be selectable: withheld values, and
+	 * anything the chart is not currently drawing (FR-053).
+	 */
+	readonly selectable: boolean;
+}
+
+export interface HitResult {
+	readonly seriesId: string;
+	readonly pointId: string;
+	readonly distance: number;
+}
+
+/** Touch slop: how far from a mark a tap still counts, in px. */
+export const DEFAULT_HIT_RADIUS = 44;
+
+function inBounds(region: HitRegion, x: number, y: number): boolean {
+	const b = region.bounds;
+	if (!b) {
+		return false;
+	}
+	return x >= b.x && x <= b.x + b.width && y >= b.y && y <= b.y + b.height;
+}
+
+/**
+ * Resolves a touch to a mark.
+ *
+ * Containment wins over proximity where bounds exist — tapping inside a bar
+ * should select that bar even if a neighbouring bar's centre happens to be
+ * closer. Otherwise the nearest selectable mark within the hit radius wins.
+ */
+export function hitTest(
+	regions: readonly HitRegion[],
+	x: number,
+	y: number,
+	hitRadius = DEFAULT_HIT_RADIUS,
+): HitResult | null {
+	let best: HitResult | null = null;
+
+	for (const region of regions) {
+		if (!region.selectable) {
+			continue;
+		}
+
+		if (inBounds(region, x, y)) {
+			return { seriesId: region.seriesId, pointId: region.pointId, distance: 0 };
+		}
+
+		const dx = region.x - x;
+		const dy = region.y - y;
+		const distance = Math.sqrt(dx * dx + dy * dy);
+
+		if (distance <= hitRadius && (best === null || distance < best.distance)) {
+			best = { seriesId: region.seriesId, pointId: region.pointId, distance };
+		}
+	}
+
+	return best;
+}
+
+/**
+ * Nearest mark by horizontal distance only.
+ *
+ * The right model for a time-series chart: a user aiming at "that Tuesday
+ * spike" cares about the x position, and demanding vertical accuracy on a line
+ * that may sit anywhere in the plot makes selection frustrating.
+ */
+export function hitTestByX(regions: readonly HitRegion[], x: number): HitResult | null {
+	let best: HitResult | null = null;
+
+	for (const region of regions) {
+		if (!region.selectable) {
+			continue;
+		}
+		const distance = Math.abs(region.x - x);
+		if (best === null || distance < best.distance) {
+			best = { seriesId: region.seriesId, pointId: region.pointId, distance };
+		}
+	}
+
+	return best;
+}
+
+export function findRegion(
+	regions: readonly HitRegion[],
+	seriesId: string,
+	pointId?: string,
+): HitRegion | undefined {
+	return regions.find(
+		r => r.seriesId === seriesId && (pointId === undefined || r.pointId === pointId),
+	);
+}