@chipmobilesdk/rn-chart 0.1.1 → 0.2.1

package/src/geometry/bar.ts

@@ -1,256 +1,271 @@
-/**
- * Bar geometry: one batched path per series, grouped or stacked.
- *
- * Bars measure length from zero, so the domain always includes it — otherwise
- * a bar's length means nothing. Negative values place the baseline correctly
- * rather than clamping to the plot floor.
- *
- * PURE. No React, no SVG.
- */
-import type { ChartDatasource, Position, Series } from '../contract/datasource';
-import { isKnown, isWithheld } from '../contract/value';
-import type { HitRegion } from './hitTest';
-import { plotBottom, plotRight } from './layout';
-import { rectBatchPath, type RectSpec } from './path';
-import { bandScale, domainFrom, linearScale } from './scale';
-import { thinTicks, type Tick } from './ticks';
-import type { GeometryInput, MarkPath, ResolvedGeometry } from './types';
-
-export type BarGrouping = 'grouped' | 'stacked';
-
-export interface BarOptions {
-	readonly grouping?: BarGrouping;
-	readonly radius?: number;
-}
-
-/**
- * Bars accept both category and instant positions — that dual acceptance is
- * what makes swapping a time-series chart for a bar chart free. Both collapse
- * to a string key for the band scale.
- */
-function categoryKey(position: Position): string {
-	switch (position.kind) {
-		case 'category':
-			return position.category;
-		case 'instant':
-			return String(position.at);
-		default:
-			return '';
-	}
-}
-
-function countExcluded<M>(datasource: ChartDatasource<M>): number {
-	let excluded = 0;
-	for (const series of datasource.series) {
-		for (const point of series.points) {
-			if (!isKnown(point.value)) {
-				excluded += 1;
-			}
-		}
-	}
-	return excluded;
-}
-
-function groupedDomainValues<M>(datasource: ChartDatasource<M>): number[] {
-	const values: number[] = [];
-	for (const series of datasource.series) {
-		for (const point of series.points) {
-			if (isKnown(point.value)) {
-				values.push(point.value.value);
-			}
-		}
-	}
-	return values;
-}
-
-/**
- * A stacked axis must fit the stack totals, not the individual values.
- * Positive and negative parts accumulate separately so a stack straddling zero
- * still fits.
- */
-function stackedDomainValues<M>(
-	categories: readonly string[],
-	visible: readonly Series<M>[],
-): number[] {
-	const values: number[] = [];
-
-	for (const category of categories) {
-		let positive = 0;
-		let negative = 0;
-
-		for (const series of visible) {
-			const point = series.points.find(
-				p => categoryKey(p.position) === category,
-			);
-			if (point && isKnown(point.value)) {
-				if (point.value.value >= 0) {
-					positive += point.value.value;
-				} else {
-					negative += point.value.value;
-				}
-			}
-		}
-		values.push(positive, negative);
-	}
-
-	return values;
-}
-
-function groupedBarX(
-	bandStart: number,
-	bandWidth: number,
-	seriesIndex: number,
-	seriesCount: number,
-): { barX: number; barWidth: number } {
-	const barWidth = bandWidth / Math.max(seriesCount, 1);
-	return { barX: bandStart + seriesIndex * barWidth, barWidth };
-}
-
-/** Grows from the zero baseline, upward or downward as the sign requires. */
-function groupedBarY(
-	value: number,
-	zeroY: number,
-	project: (v: number) => number,
-): { top: number; height: number } {
-	const valueY = project(value);
-	return { top: Math.min(zeroY, valueY), height: Math.abs(valueY - zeroY) };
-}
-
-/** Grows from wherever the running stack for this sign currently ends. */
-function stackedBarY(
-	value: number,
-	category: string,
-	stack: Map<string, number>,
-	project: (v: number) => number,
-): { top: number; height: number } {
-	const base = stack.get(category) ?? 0;
-	const from = project(base);
-	const to = project(base + value);
-	stack.set(category, base + value);
-	return { top: Math.min(from, to), height: Math.abs(to - from) };
-}
-
-export function buildBarGeometry<M>(
-	datasource: ChartDatasource<M>,
-	input: GeometryInput,
-	options: BarOptions = {},
-): ResolvedGeometry {
-	const { plot } = input;
-	const grouping: BarGrouping = options.grouping ?? 'grouped';
-
-	// Preserve first-seen order rather than sorting: the app chose this order.
-	const categories: string[] = [];
-	const seen = new Set<string>();
-	for (const series of datasource.series) {
-		for (const point of series.points) {
-			const key = categoryKey(point.position);
-			if (key && !seen.has(key)) {
-				seen.add(key);
-				categories.push(key);
-			}
-		}
-	}
-
-	const visible = datasource.series.filter(s => !s.hidden);
-	const excluded = countExcluded(datasource);
-	const values =
-		grouping === 'stacked'
-			? stackedDomainValues(categories, visible)
-			: groupedDomainValues(datasource);
-
-	const xBand = bandScale(categories, { min: plot.x, max: plotRight(plot) }, 0.25);
-	const y = linearScale(
-		domainFrom(values, { includeZero: true, padFraction: 0.05 }),
-		{ min: plotBottom(plot), max: plot.y },
-	);
-	const zeroY = y.project(0);
-
-	const paths: MarkPath[] = [];
-	const hitRegions: HitRegion[] = [];
-
-	// Running stack offsets, tracked separately per sign so negative bars grow
-	// downward from zero while positive bars grow upward.
-	const stackUp = new Map<string, number>();
-	const stackDown = new Map<string, number>();
-
-	visible.forEach((series, seriesIndex) => {
-		const rects: RectSpec[] = [];
-
-		for (const point of series.points) {
-			const category = categoryKey(point.position);
-			const bandStart = xBand.project(category);
-			if (bandStart === undefined || !isKnown(point.value)) {
-				continue;
-			}
-
-			const value = point.value.value;
-
-			const { barX, barWidth } =
-				grouping === 'grouped'
-					? groupedBarX(bandStart, xBand.bandWidth, seriesIndex, visible.length)
-					: { barX: bandStart, barWidth: xBand.bandWidth };
-
-			const stack = value >= 0 ? stackUp : stackDown;
-			const { top, height } =
-				grouping === 'stacked'
-					? stackedBarY(value, category, stack, y.project)
-					: groupedBarY(value, zeroY, y.project);
-
-			rects.push({
-				x: barX,
-				y: top,
-				width: barWidth,
-				height,
-				radius: options.radius,
-			});
-
-			hitRegions.push({
-				seriesId: series.id,
-				pointId: point.id,
-				x: barX + barWidth / 2,
-				y: top + height / 2,
-				bounds: { x: barX, y: top, width: barWidth, height },
-				selectable: !isWithheld(point.value),
-			});
-		}
-
-		if (rects.length > 0) {
-			paths.push({
-				key: `bars-${series.id}`,
-				seriesId: series.id,
-				d: rectBatchPath(rects),
-				color: input.seriesColors[series.id],
-				pattern: series.pattern ?? 'solid',
-				filled: true,
-			});
-		}
-	});
-
-	const xTicks: Tick[] = categories.map(c => ({
-		value: 0,
-		position: xBand.centerOf(c) ?? plot.x,
-		label:
-			datasource.positionKind === 'instant'
-				? input.formatInstant(Number(c))
-				: input.formatCategory(c),
-	}));
-
-	const yTicks: Tick[] = [y.domain.min, 0, y.domain.max]
-		.filter((v, i, arr) => arr.indexOf(v) === i)
-		.map(v => ({
-			value: v,
-			position: y.project(v),
-			label: input.formatValue(v),
-		}));
-
-	return {
-		plot,
-		paths,
-		markers: [],
-		labels: [],
-		xTicks: thinTicks(xTicks, input.fontSize, plot.width),
-		yTicks,
-		hitRegions,
-		incomplete: excluded > 0,
-	};
-}
+/**
+ * Bar geometry: one batched path per series, grouped or stacked.
+ *
+ * Bars measure length from zero, so the domain always includes it — otherwise
+ * a bar's length means nothing. Negative values place the baseline correctly
+ * rather than clamping to the plot floor.
+ *
+ * PURE. No React, no SVG.
+ */
+import type { ChartDatasource, Position, Series } from '../contract/datasource';
+import { isKnown, isWithheld } from '../contract/value';
+import type { HitRegion } from './hitTest';
+import { insetForAxes, plotBottom, plotRight } from './layout';
+import { horizontalMarkers, markerDomainValues } from './markers';
+import { rectBatchPath, type RectSpec } from './path';
+import { bandScale, domainFrom, linearScale, widenDegenerateDomain } from './scale';
+import { thinTicks, type Tick } from './ticks';
+import type { GeometryInput, MarkPath, ResolvedGeometry } from './types';
+
+export type BarGrouping = 'grouped' | 'stacked';
+
+export interface BarOptions {
+	readonly grouping?: BarGrouping;
+	readonly radius?: number;
+}
+
+/**
+ * Bars accept both category and instant positions — that dual acceptance is
+ * what makes swapping a time-series chart for a bar chart free. Both collapse
+ * to a string key for the band scale.
+ */
+function categoryKey(position: Position): string {
+	switch (position.kind) {
+		case 'category':
+			return position.category;
+		case 'instant':
+			return String(position.at);
+		default:
+			return '';
+	}
+}
+
+function countExcluded<M>(datasource: ChartDatasource<M>): number {
+	let excluded = 0;
+	for (const series of datasource.series) {
+		for (const point of series.points) {
+			if (!isKnown(point.value)) {
+				excluded += 1;
+			}
+		}
+	}
+	return excluded;
+}
+
+function groupedDomainValues<M>(datasource: ChartDatasource<M>): number[] {
+	const values: number[] = [];
+	for (const series of datasource.series) {
+		for (const point of series.points) {
+			if (isKnown(point.value)) {
+				values.push(point.value.value);
+			}
+		}
+	}
+	return values;
+}
+
+/**
+ * A stacked axis must fit the stack totals, not the individual values.
+ * Positive and negative parts accumulate separately so a stack straddling zero
+ * still fits.
+ */
+function stackedDomainValues<M>(
+	categories: readonly string[],
+	visible: readonly Series<M>[],
+): number[] {
+	const values: number[] = [];
+
+	for (const category of categories) {
+		let positive = 0;
+		let negative = 0;
+
+		for (const series of visible) {
+			const point = series.points.find(p => categoryKey(p.position) === category);
+			if (point && isKnown(point.value)) {
+				if (point.value.value >= 0) {
+					positive += point.value.value;
+				} else {
+					negative += point.value.value;
+				}
+			}
+		}
+		values.push(positive, negative);
+	}
+
+	return values;
+}
+
+function groupedBarX(
+	bandStart: number,
+	bandWidth: number,
+	seriesIndex: number,
+	seriesCount: number,
+): { barX: number; barWidth: number } {
+	const barWidth = bandWidth / Math.max(seriesCount, 1);
+	return { barX: bandStart + seriesIndex * barWidth, barWidth };
+}
+
+/** Grows from the zero baseline, upward or downward as the sign requires. */
+function groupedBarY(
+	value: number,
+	zeroY: number,
+	project: (v: number) => number,
+): { top: number; height: number } {
+	const valueY = project(value);
+	return { top: Math.min(zeroY, valueY), height: Math.abs(valueY - zeroY) };
+}
+
+/** Grows from wherever the running stack for this sign currently ends. */
+function stackedBarY(
+	value: number,
+	category: string,
+	stack: Map<string, number>,
+	project: (v: number) => number,
+): { top: number; height: number } {
+	const base = stack.get(category) ?? 0;
+	const from = project(base);
+	const to = project(base + value);
+	stack.set(category, base + value);
+	return { top: Math.min(from, to), height: Math.abs(to - from) };
+}
+
+export function buildBarGeometry<M>(
+	datasource: ChartDatasource<M>,
+	input: GeometryInput,
+	options: BarOptions = {},
+): ResolvedGeometry {
+	const grouping: BarGrouping = options.grouping ?? 'grouped';
+
+	// Preserve first-seen order rather than sorting: the app chose this order.
+	const categories: string[] = [];
+	const seen = new Set<string>();
+	for (const series of datasource.series) {
+		for (const point of series.points) {
+			const key = categoryKey(point.position);
+			if (key && !seen.has(key)) {
+				seen.add(key);
+				categories.push(key);
+			}
+		}
+	}
+
+	const visible = datasource.series.filter(s => !s.hidden);
+	const excluded = countExcluded(datasource);
+	const values = [
+		...(grouping === 'stacked'
+			? stackedDomainValues(categories, visible)
+			: groupedDomainValues(datasource)),
+		// A threshold above every bar must still be on the chart.
+		...markerDomainValues(datasource.markers),
+	];
+
+	// Labels depend only on the domain, so they are known before any pixel is,
+	// and the plot can make room for them first.
+	// Bars grow from zero, so padding past zero on a side no bar reaches only
+	// adds a meaningless tick (-5.5 under all-positive data) crowding the 0.
+	const padded = domainFrom(values, { includeZero: true, padFraction: 0.05 });
+	const domain = widenDegenerateDomain({
+		min: values.some(v => v < 0) ? padded.min : Math.max(padded.min, 0),
+		max: values.some(v => v > 0) ? padded.max : Math.min(padded.max, 0),
+	});
+	const yTickValues = [domain.min, 0, domain.max].filter((v, i, arr) => arr.indexOf(v) === i);
+	const xLabel = (c: string) =>
+		datasource.positionKind === 'instant'
+			? input.formatInstant(Number(c))
+			: input.formatCategory(c);
+	const plot = insetForAxes(input.plot, {
+		xLabels: categories.map(xLabel),
+		yLabels: yTickValues.map(input.formatValue),
+		fontSize: input.fontSize,
+	});
+
+	const xBand = bandScale(categories, { min: plot.x, max: plotRight(plot) }, 0.25);
+	const y = linearScale(domain, { min: plotBottom(plot), max: plot.y });
+	const zeroY = y.project(0);
+
+	const paths: MarkPath[] = [];
+	const hitRegions: HitRegion[] = [];
+
+	// Running stack offsets, tracked separately per sign so negative bars grow
+	// downward from zero while positive bars grow upward.
+	const stackUp = new Map<string, number>();
+	const stackDown = new Map<string, number>();
+
+	visible.forEach((series, seriesIndex) => {
+		const rects: RectSpec[] = [];
+
+		for (const point of series.points) {
+			const category = categoryKey(point.position);
+			const bandStart = xBand.project(category);
+			if (bandStart === undefined || !isKnown(point.value)) {
+				continue;
+			}
+
+			const value = point.value.value;
+
+			const { barX, barWidth } =
+				grouping === 'grouped'
+					? groupedBarX(bandStart, xBand.bandWidth, seriesIndex, visible.length)
+					: { barX: bandStart, barWidth: xBand.bandWidth };
+
+			const stack = value >= 0 ? stackUp : stackDown;
+			const { top, height } =
+				grouping === 'stacked'
+					? stackedBarY(value, category, stack, y.project)
+					: groupedBarY(value, zeroY, y.project);
+
+			rects.push({
+				x: barX,
+				y: top,
+				width: barWidth,
+				height,
+				radius: options.radius,
+			});
+
+			hitRegions.push({
+				seriesId: series.id,
+				pointId: point.id,
+				x: barX + barWidth / 2,
+				y: top + height / 2,
+				bounds: { x: barX, y: top, width: barWidth, height },
+				selectable: !isWithheld(point.value),
+			});
+		}
+
+		if (rects.length > 0) {
+			paths.push({
+				key: `bars-${series.id}`,
+				seriesId: series.id,
+				d: rectBatchPath(rects),
+				color: input.seriesColors[series.id],
+				pattern: series.pattern ?? 'solid',
+				filled: true,
+			});
+		}
+	});
+
+	const xTicks: Tick[] = categories.map(c => ({
+		value: 0,
+		position: xBand.centerOf(c) ?? plot.x,
+		label: xLabel(c),
+	}));
+
+	const yTicks: Tick[] = yTickValues.map(v => ({
+		value: v,
+		position: y.project(v),
+		label: input.formatValue(v),
+	}));
+
+	const markers = horizontalMarkers(datasource.markers, plot, y.project);
+
+	return {
+		plot,
+		paths,
+		markers: markers.lines,
+		labels: markers.labels,
+		xTicks: thinTicks(xTicks, input.fontSize, plot.width),
+		yTicks,
+		hitRegions,
+		incomplete: excluded > 0,
+	};
+}