@chipmobilesdk/rn-chart 0.2.0 → 0.3.0

package/src/geometry/distribution.ts

@@ -1,203 +1,197 @@
-/**
- * Distribution geometry: proportions between groups.
- *
- * Segments that do not sum to the whole are **not** rescaled to force a full
- * circle (FR-024). The arc stops short and the geometry reports `incomplete`,
- * so the chart can say the data is partial rather than quietly implying it is
- * complete.
- *
- * PURE. No React, no SVG.
- */
-import type { ChartDatasource } from '../contract/datasource';
-import { segmentKey } from '../contract/theme';
-import { isKnown, isWithheld, sumKnown } from '../contract/value';
-import type { HitRegion } from './hitTest';
-import { arcPath, rectSubpath } from './path';
-import type {
-	GeometryInput,
-	GeometryLabel,
-	MarkPath,
-	ResolvedGeometry,
-} from './types';
-
-export type DistributionShape = 'donut' | 'pie' | 'segmentedBar';
-
-export interface DistributionOptions {
-	readonly shape?: DistributionShape;
-	/** Donut hole as a fraction of the outer radius. */
-	readonly innerRadiusRatio?: number;
-}
-
-const TAU = Math.PI * 2;
-
-export function buildDistributionGeometry<M>(
-	datasource: ChartDatasource<M>,
-	input: GeometryInput,
-	options: DistributionOptions = {},
-): ResolvedGeometry {
-	const { plot } = input;
-	const shape = options.shape ?? 'donut';
-
-	const segments = datasource.series.flatMap(series =>
-		series.points.map(point => ({ series, point })),
-	);
-
-	if (segments.length === 0 || plot.width <= 0 || plot.height <= 0) {
-		return {
-			plot,
-			paths: [],
-			markers: [],
-			labels: [],
-			xTicks: [],
-			yTicks: [],
-			hitRegions: [],
-			incomplete: false,
-		};
-	}
-
-	const total = sumKnown(segments.map(s => s.point.value));
-	// Nothing known: there is no distribution to draw, and drawing a full grey
-	// circle would imply a shape the data does not support.
-	if (total.countedPoints === 0 || total.total <= 0) {
-		return {
-			plot,
-			paths: [],
-			markers: [],
-			labels: [],
-			xTicks: [],
-			yTicks: [],
-			hitRegions: [],
-			incomplete: true,
-		};
-	}
-
-	// Proportions supplied directly (each in 0..1, summing to ~1) are honoured
-	// as given; absolute values are normalised by their own total. Either way we
-	// never stretch a short sum to fill the circle.
-	const suppliedAsProportions = segments.every(
-		s => !isKnown(s.point.value) || (s.point.value.value >= 0 && s.point.value.value <= 1),
-	);
-	const denominator = suppliedAsProportions ? 1 : total.total;
-	const coverage = total.total / denominator;
-	const incomplete = total.incomplete || coverage < 0.999;
-
-	const paths: MarkPath[] = [];
-	const labels: GeometryLabel[] = [];
-	const hitRegions: HitRegion[] = [];
-	const colorOf = (seriesId: string, pointId: string) =>
-		input.segmentColors?.[segmentKey(seriesId, pointId)] ?? input.seriesColors[seriesId];
-
-	if (shape === 'segmentedBar') {
-		const barHeight = Math.min(plot.height, 28);
-		const barY = plot.y + (plot.height - barHeight) / 2;
-		let cursor = plot.x;
-
-		for (const { series, point } of segments) {
-			if (!isKnown(point.value)) {
-				continue;
-			}
-			const fraction = point.value.value / denominator;
-			const width = plot.width * fraction;
-
-			paths.push({
-				key: `seg-${series.id}-${point.id}`,
-				seriesId: series.id,
-				d: rectSubpath({ x: cursor, y: barY, width, height: barHeight }),
-				color: colorOf(series.id, point.id),
-				pattern: 'solid',
-				filled: true,
-			});
-
-			hitRegions.push({
-				seriesId: series.id,
-				pointId: point.id,
-				x: cursor + width / 2,
-				y: barY + barHeight / 2,
-				bounds: { x: cursor, y: barY, width, height: barHeight },
-				selectable: !isWithheld(point.value),
-			});
-
-			cursor += width;
-		}
-
-		return {
-			plot,
-			paths,
-			markers: [],
-			labels,
-			xTicks: [],
-			yTicks: [],
-			hitRegions,
-			incomplete,
-		};
-	}
-
-	const cx = plot.x + plot.width / 2;
-	const cy = plot.y + plot.height / 2;
-	const outerRadius = Math.min(plot.width, plot.height) / 2;
-	const innerRadius =
-		shape === 'pie' ? 0 : outerRadius * (options.innerRadiusRatio ?? 0.6);
-
-	let angle = 0;
-
-	for (const { series, point } of segments) {
-		if (!isKnown(point.value)) {
-			continue;
-		}
-
-		const fraction = point.value.value / denominator;
-		const sweep = fraction * TAU;
-		const start = angle;
-		const end = angle + sweep;
-		angle = end;
-
-		paths.push({
-			key: `arc-${series.id}-${point.id}`,
-			seriesId: series.id,
-			d: arcPath({
-				cx,
-				cy,
-				outerRadius,
-				innerRadius,
-				startAngle: start,
-				endAngle: end,
-			}),
-			color: colorOf(series.id, point.id),
-			pattern: 'solid',
-			filled: true,
-		});
-
-		// Label at the segment's midpoint, on the ring between the two radii.
-		const mid = start + sweep / 2 - Math.PI / 2;
-		const labelRadius = (outerRadius + innerRadius) / 2;
-
-		labels.push({
-			key: `arc-label-${series.id}-${point.id}`,
-			text: `${Math.round(fraction * 100)}%`,
-			x: cx + labelRadius * Math.cos(mid),
-			y: cy + labelRadius * Math.sin(mid),
-			anchor: 'middle',
-			// Hide labels on slivers where the text would not fit anyway.
-			muted: fraction < 0.05,
-		});
-
-		hitRegions.push({
-			seriesId: series.id,
-			pointId: point.id,
-			x: cx + labelRadius * Math.cos(mid),
-			y: cy + labelRadius * Math.sin(mid),
-			selectable: !isWithheld(point.value),
-		});
-	}
-
-	return {
-		plot,
-		paths,
-		markers: [],
-		labels,
-		xTicks: [],
-		yTicks: [],
-		hitRegions,
-		incomplete,
-	};
-}
+/**
+ * Distribution geometry: proportions between groups.
+ *
+ * Segments that do not sum to the whole are **not** rescaled to force a full
+ * circle (FR-024). The arc stops short and the geometry reports `incomplete`,
+ * so the chart can say the data is partial rather than quietly implying it is
+ * complete.
+ *
+ * PURE. No React, no SVG.
+ */
+import type { ChartDatasource } from '../contract/datasource';
+import { segmentKey } from '../contract/theme';
+import { isKnown, isWithheld, sumKnown } from '../contract/value';
+import type { HitRegion } from './hitTest';
+import { arcPath, rectSubpath } from './path';
+import type { GeometryInput, GeometryLabel, MarkPath, ResolvedGeometry } from './types';
+
+export type DistributionShape = 'donut' | 'pie' | 'segmentedBar';
+
+export interface DistributionOptions {
+	readonly shape?: DistributionShape;
+	/** Donut hole as a fraction of the outer radius. */
+	readonly innerRadiusRatio?: number;
+}
+
+const TAU = Math.PI * 2;
+
+export function buildDistributionGeometry<M>(
+	datasource: ChartDatasource<M>,
+	input: GeometryInput,
+	options: DistributionOptions = {},
+): ResolvedGeometry {
+	const { plot } = input;
+	const shape = options.shape ?? 'donut';
+
+	const segments = datasource.series.flatMap(series =>
+		series.points.map(point => ({ series, point })),
+	);
+
+	if (segments.length === 0 || plot.width <= 0 || plot.height <= 0) {
+		return {
+			plot,
+			paths: [],
+			markers: [],
+			labels: [],
+			xTicks: [],
+			yTicks: [],
+			hitRegions: [],
+			incomplete: false,
+		};
+	}
+
+	const total = sumKnown(segments.map(s => s.point.value));
+	// Nothing known: there is no distribution to draw, and drawing a full grey
+	// circle would imply a shape the data does not support.
+	if (total.countedPoints === 0 || total.total <= 0) {
+		return {
+			plot,
+			paths: [],
+			markers: [],
+			labels: [],
+			xTicks: [],
+			yTicks: [],
+			hitRegions: [],
+			incomplete: true,
+		};
+	}
+
+	// Proportions supplied directly (each in 0..1, summing to ~1) are honoured
+	// as given; absolute values are normalised by their own total. Either way we
+	// never stretch a short sum to fill the circle.
+	const suppliedAsProportions = segments.every(
+		s => !isKnown(s.point.value) || (s.point.value.value >= 0 && s.point.value.value <= 1),
+	);
+	const denominator = suppliedAsProportions ? 1 : total.total;
+	const coverage = total.total / denominator;
+	const incomplete = total.incomplete || coverage < 0.999;
+
+	const paths: MarkPath[] = [];
+	const labels: GeometryLabel[] = [];
+	const hitRegions: HitRegion[] = [];
+	const colorOf = (seriesId: string, pointId: string) =>
+		input.segmentColors?.[segmentKey(seriesId, pointId)] ?? input.seriesColors[seriesId];
+
+	if (shape === 'segmentedBar') {
+		const barHeight = Math.min(plot.height, 28);
+		const barY = plot.y + (plot.height - barHeight) / 2;
+		let cursor = plot.x;
+
+		for (const { series, point } of segments) {
+			if (!isKnown(point.value)) {
+				continue;
+			}
+			const fraction = point.value.value / denominator;
+			const width = plot.width * fraction;
+
+			paths.push({
+				key: `seg-${series.id}-${point.id}`,
+				seriesId: series.id,
+				d: rectSubpath({ x: cursor, y: barY, width, height: barHeight }),
+				color: colorOf(series.id, point.id),
+				pattern: 'solid',
+				filled: true,
+			});
+
+			hitRegions.push({
+				seriesId: series.id,
+				pointId: point.id,
+				x: cursor + width / 2,
+				y: barY + barHeight / 2,
+				bounds: { x: cursor, y: barY, width, height: barHeight },
+				selectable: !isWithheld(point.value),
+			});
+
+			cursor += width;
+		}
+
+		return {
+			plot,
+			paths,
+			markers: [],
+			labels,
+			xTicks: [],
+			yTicks: [],
+			hitRegions,
+			incomplete,
+		};
+	}
+
+	const cx = plot.x + plot.width / 2;
+	const cy = plot.y + plot.height / 2;
+	const outerRadius = Math.min(plot.width, plot.height) / 2;
+	const innerRadius = shape === 'pie' ? 0 : outerRadius * (options.innerRadiusRatio ?? 0.6);
+
+	let angle = 0;
+
+	for (const { series, point } of segments) {
+		if (!isKnown(point.value)) {
+			continue;
+		}
+
+		const fraction = point.value.value / denominator;
+		const sweep = fraction * TAU;
+		const start = angle;
+		const end = angle + sweep;
+		angle = end;
+
+		paths.push({
+			key: `arc-${series.id}-${point.id}`,
+			seriesId: series.id,
+			d: arcPath({
+				cx,
+				cy,
+				outerRadius,
+				innerRadius,
+				startAngle: start,
+				endAngle: end,
+			}),
+			color: colorOf(series.id, point.id),
+			pattern: 'solid',
+			filled: true,
+		});
+
+		// Label at the segment's midpoint, on the ring between the two radii.
+		const mid = start + sweep / 2 - Math.PI / 2;
+		const labelRadius = (outerRadius + innerRadius) / 2;
+
+		labels.push({
+			key: `arc-label-${series.id}-${point.id}`,
+			text: `${Math.round(fraction * 100)}%`,
+			x: cx + labelRadius * Math.cos(mid),
+			y: cy + labelRadius * Math.sin(mid),
+			anchor: 'middle',
+			// Hide labels on slivers where the text would not fit anyway.
+			muted: fraction < 0.05,
+		});
+
+		hitRegions.push({
+			seriesId: series.id,
+			pointId: point.id,
+			x: cx + labelRadius * Math.cos(mid),
+			y: cy + labelRadius * Math.sin(mid),
+			selectable: !isWithheld(point.value),
+		});
+	}
+
+	return {
+		plot,
+		paths,
+		markers: [],
+		labels,
+		xTicks: [],
+		yTicks: [],
+		hitRegions,
+		incomplete,
+	};
+}