@chipmobilesdk/rn-chart 0.1.1 → 0.2.1

package/src/geometry/progress.ts

@@ -1,204 +1,223 @@
-/**
- * Progress geometry: current value against an optional target.
- *
- * The rule that matters (FR-021, FR-022): with no usable target there is **no
- * proportion**. The chart shows the current value and nothing else. And a value
- * beyond its target renders as overshoot rather than a clamped full bar that
- * hides the excess.
- *
- * PURE. No React, no SVG.
- */
-import type { ChartDatasource } from '../contract/datasource';
-import { findTarget, readProgress } from '../contract/marker';
-import { isKnown, isWithheld } from '../contract/value';
-import type { HitRegion } from './hitTest';
-import { plotRight } from './layout';
-import { rectSubpath } from './path';
-import type {
-	GeometryInput,
-	GeometryLabel,
-	MarkPath,
-	ResolvedGeometry,
-} from './types';
-
-export interface ProgressOptions {
-	readonly orientation?: 'horizontal' | 'vertical';
-	readonly trackRadius?: number;
-}
-
-/** How far past the target an overshoot bar is allowed to extend visually. */
-const OVERSHOOT_DISPLAY_CAP = 1.25;
-
-export function buildProgressGeometry<M>(
-	datasource: ChartDatasource<M>,
-	input: GeometryInput,
-	options: ProgressOptions = {},
-): ResolvedGeometry {
-	const { plot } = input;
-	const metrics = datasource.series.flatMap(series =>
-		series.points.map(point => ({ series, point })),
-	);
-
-	if (metrics.length === 0 || plot.width <= 0) {
-		return {
-			plot,
-			paths: [],
-			markers: [],
-			labels: [],
-			xTicks: [],
-			yTicks: [],
-			hitRegions: [],
-			incomplete: false,
-		};
-	}
-
-	const rowHeight = plot.height / metrics.length;
-	const barHeight = Math.min(rowHeight * 0.45, 24);
-	const radius = options.trackRadius ?? barHeight / 2;
-
-	const paths: MarkPath[] = [];
-	const labels: GeometryLabel[] = [];
-	const hitRegions: HitRegion[] = [];
-	let incomplete = false;
-
-	metrics.forEach(({ series, point }, index) => {
-		const rowY = plot.y + index * rowHeight + (rowHeight - barHeight) / 2;
-		const target = findTarget(datasource.markers, point.id) ?? findTarget(datasource.markers);
-		const reading = readProgress(point.value, target);
-
-		// Track: the full width, always drawn, so an empty metric still reads as
-		// a metric rather than as blank space.
-		paths.push({
-			key: `track-${series.id}-${point.id}`,
-			seriesId: series.id,
-			d: rectSubpath({
-				x: plot.x,
-				y: rowY,
-				width: plot.width,
-				height: barHeight,
-				radius,
-			}),
-			color: input.seriesColors[series.id],
-			pattern: 'solid',
-			filled: true,
-			opacity: 0.15,
-		});
-
-		if (!isKnown(point.value)) {
-			incomplete = true;
-			// No fill at all, and a texture rather than a zero-length bar — a gap
-			// must not look like "none of the target achieved".
-			paths.push({
-				key: `nonvalue-${series.id}-${point.id}`,
-				seriesId: series.id,
-				d: rectSubpath({
-					x: plot.x,
-					y: rowY,
-					width: plot.width,
-					height: barHeight,
-					radius,
-				}),
-				color: input.seriesColors[series.id],
-				pattern: 'solid',
-				filled: true,
-				texture: input.nonValueTextures[point.value.kind],
-				opacity: 0.5,
-			});
-		} else {
-			const proportion = reading.proportion;
-			// With no usable target there is no proportion to draw, so the fill
-			// shows the value's presence rather than a fabricated percentage.
-			const fillFraction =
-				proportion === undefined
-					? 1
-					: Math.min(proportion, OVERSHOOT_DISPLAY_CAP);
-
-			paths.push({
-				key: `fill-${series.id}-${point.id}`,
-				seriesId: series.id,
-				d: rectSubpath({
-					x: plot.x,
-					y: rowY,
-					width: Math.max(0, plot.width * Math.min(fillFraction, 1)),
-					height: barHeight,
-					radius,
-				}),
-				color: input.seriesColors[series.id],
-				pattern: 'solid',
-				filled: true,
-			});
-
-			// Overshoot is drawn beyond the target line rather than clamped away,
-			// so exceeding a goal is visible instead of indistinguishable from
-			// exactly meeting it.
-			if (reading.overshoot && proportion !== undefined) {
-				const overshootWidth =
-					plot.width * (Math.min(proportion, OVERSHOOT_DISPLAY_CAP) - 1);
-				paths.push({
-					key: `overshoot-${series.id}-${point.id}`,
-					seriesId: series.id,
-					d: rectSubpath({
-						x: plot.x + plot.width,
-						y: rowY + barHeight * 0.2,
-						width: Math.max(0, overshootWidth),
-						height: barHeight * 0.6,
-						radius: radius / 2,
-					}),
-					color: input.seriesColors[series.id],
-					pattern: 'dashed',
-					filled: true,
-					opacity: 0.7,
-				});
-			}
-		}
-
-		const valueText = isKnown(point.value)
-			? input.formatValue(point.value.value)
-			: '';
-		// Only append a percentage when one is real.
-		const proportionText =
-			reading.proportion === undefined
-				? ''
-				: ` (${Math.round(reading.proportion * 100)}%)`;
-
-		labels.push({
-			key: `label-${series.id}-${point.id}`,
-			text: input.formatCategory(
-				point.position.kind === 'category' ? point.position.category : series.label,
-			),
-			x: plot.x,
-			y: rowY - 4,
-			anchor: 'start',
-		});
-
-		if (valueText) {
-			labels.push({
-				key: `value-${series.id}-${point.id}`,
-				text: `${valueText}${proportionText}`,
-				x: plotRight(plot),
-				y: rowY - 4,
-				anchor: 'end',
-			});
-		}
-
-		hitRegions.push({
-			seriesId: series.id,
-			pointId: point.id,
-			x: plot.x + plot.width / 2,
-			y: rowY + barHeight / 2,
-			bounds: { x: plot.x, y: rowY, width: plot.width, height: barHeight },
-			selectable: !isWithheld(point.value),
-		});
-	});
-
-	return {
-		plot,
-		paths,
-		markers: [],
-		labels,
-		xTicks: [],
-		yTicks: [],
-		hitRegions,
-		incomplete,
-	};
-}
+/**
+ * Progress geometry: current value against an optional target.
+ *
+ * The rule that matters (FR-021, FR-022): with no usable target there is **no
+ * proportion**. The chart shows the current value and nothing else. And a value
+ * beyond its target renders as overshoot rather than a clamped full bar that
+ * hides the excess.
+ *
+ * PURE. No React, no SVG.
+ */
+import type { ChartDatasource } from '../contract/datasource';
+import { findTarget, readProgress } from '../contract/marker';
+import { isKnown, isWithheld } from '../contract/value';
+import type { HitRegion } from './hitTest';
+import { plotBottom, plotRight } from './layout';
+import { rectSubpath } from './path';
+import type { GeometryInput, GeometryLabel, MarkerLine, MarkPath, ResolvedGeometry } from './types';
+
+export interface ProgressOptions {
+	readonly orientation?: 'horizontal' | 'vertical';
+	readonly trackRadius?: number;
+}
+
+/** How far past the target an overshoot bar is allowed to extend visually. */
+const OVERSHOOT_DISPLAY_CAP = 1.25;
+
+export function buildProgressGeometry<M>(
+	datasource: ChartDatasource<M>,
+	input: GeometryInput,
+	options: ProgressOptions = {},
+): ResolvedGeometry {
+	const { plot } = input;
+	const metrics = datasource.series.flatMap(series =>
+		series.points.map(point => ({ series, point })),
+	);
+
+	if (metrics.length === 0 || plot.width <= 0) {
+		return {
+			plot,
+			paths: [],
+			markers: [],
+			labels: [],
+			xTicks: [],
+			yTicks: [],
+			hitRegions: [],
+			incomplete: false,
+		};
+	}
+
+	const readings = metrics.map(({ point }) =>
+		readProgress(
+			point.value,
+			findTarget(datasource.markers, point.id) ?? findTarget(datasource.markers),
+		),
+	);
+
+	// The track spans 0..displayMax of the target, shared by every row so their
+	// targets line up. With an overshoot the target sits inside the plot and the
+	// excess is drawn to its right — previously the target was the plot's right
+	// edge, so overshoot started there and was clipped by the SVG (CHT-03).
+	const displayMax = readings.reduce(
+		(max, r) =>
+			r.proportion === undefined
+				? max
+				: Math.max(max, Math.min(r.proportion, OVERSHOOT_DISPLAY_CAP)),
+		1,
+	);
+	const unit = plot.width / displayMax;
+	const targetX = plot.x + unit;
+
+	const rowHeight = plot.height / metrics.length;
+	const barHeight = Math.min(rowHeight * 0.45, 24);
+	const radius = options.trackRadius ?? barHeight / 2;
+
+	const paths: MarkPath[] = [];
+	const labels: GeometryLabel[] = [];
+	const hitRegions: HitRegion[] = [];
+	const markers: MarkerLine[] = [];
+	let incomplete = false;
+
+	metrics.forEach(({ series, point }, index) => {
+		const rowY = plot.y + index * rowHeight + (rowHeight - barHeight) / 2;
+		const reading = readings[index];
+
+		// Track: the full width, always drawn, so an empty metric still reads as
+		// a metric rather than as blank space.
+		paths.push({
+			key: `track-${series.id}-${point.id}`,
+			seriesId: series.id,
+			d: rectSubpath({
+				x: plot.x,
+				y: rowY,
+				width: plot.width,
+				height: barHeight,
+				radius,
+			}),
+			color: input.seriesColors[series.id],
+			pattern: 'solid',
+			filled: true,
+			opacity: 0.15,
+		});
+
+		if (!isKnown(point.value)) {
+			incomplete = true;
+			// No fill at all, and a texture rather than a zero-length bar — a gap
+			// must not look like "none of the target achieved".
+			paths.push({
+				key: `nonvalue-${series.id}-${point.id}`,
+				seriesId: series.id,
+				d: rectSubpath({
+					x: plot.x,
+					y: rowY,
+					width: plot.width,
+					height: barHeight,
+					radius,
+				}),
+				color: input.seriesColors[series.id],
+				pattern: 'solid',
+				filled: true,
+				texture: input.nonValueTextures[point.value.kind],
+				opacity: 0.5,
+			});
+		} else {
+			const proportion = reading.proportion;
+			// With no usable target there is no proportion to draw, so the fill
+			// shows the value's presence rather than a fabricated percentage.
+			const fillFraction =
+				proportion === undefined ? 1 : Math.min(proportion, OVERSHOOT_DISPLAY_CAP);
+
+			paths.push({
+				key: `fill-${series.id}-${point.id}`,
+				seriesId: series.id,
+				d: rectSubpath({
+					x: plot.x,
+					y: rowY,
+					width: Math.max(0, unit * Math.min(fillFraction, 1)),
+					height: barHeight,
+					radius,
+				}),
+				color: input.seriesColors[series.id],
+				pattern: 'solid',
+				filled: true,
+			});
+
+			// Overshoot is drawn beyond the target line rather than clamped away,
+			// so exceeding a goal is visible instead of indistinguishable from
+			// exactly meeting it.
+			if (reading.overshoot && proportion !== undefined) {
+				const overshootWidth = unit * (Math.min(proportion, OVERSHOOT_DISPLAY_CAP) - 1);
+				paths.push({
+					key: `overshoot-${series.id}-${point.id}`,
+					seriesId: series.id,
+					d: rectSubpath({
+						x: targetX,
+						y: rowY + barHeight * 0.2,
+						width: Math.max(0, overshootWidth),
+						height: barHeight * 0.6,
+						radius: radius / 2,
+					}),
+					color: input.seriesColors[series.id],
+					pattern: 'dashed',
+					filled: true,
+					opacity: 0.7,
+				});
+			}
+		}
+
+		// The target itself, across this row's bar (FR-022, FR-072).
+		if (reading.proportion !== undefined && reading.target) {
+			markers.push({
+				id: `target-${series.id}-${point.id}`,
+				d: `M${targetX},${Math.max(plot.y, rowY - 3)}V${Math.min(plotBottom(plot), rowY + barHeight + 3)}`,
+				label: reading.target.label,
+				kind: 'target',
+			});
+		}
+
+		const valueText = isKnown(point.value) ? input.formatValue(point.value.value) : '';
+		// Only append a percentage when one is real.
+		const proportionText =
+			reading.proportion === undefined ? '' : ` (${Math.round(reading.proportion * 100)}%)`;
+
+		labels.push({
+			key: `label-${series.id}-${point.id}`,
+			text: input.formatCategory(
+				point.position.kind === 'category' ? point.position.category : series.label,
+			),
+			x: plot.x,
+			y: rowY - 4,
+			anchor: 'start',
+		});
+
+		if (valueText) {
+			labels.push({
+				key: `value-${series.id}-${point.id}`,
+				text: `${valueText}${proportionText}`,
+				x: plotRight(plot),
+				y: rowY - 4,
+				anchor: 'end',
+			});
+		}
+
+		hitRegions.push({
+			seriesId: series.id,
+			pointId: point.id,
+			x: plot.x + plot.width / 2,
+			y: rowY + barHeight / 2,
+			bounds: { x: plot.x, y: rowY, width: plot.width, height: barHeight },
+			selectable: !isWithheld(point.value),
+		});
+	});
+
+	return {
+		plot,
+		paths,
+		markers,
+		labels,
+		xTicks: [],
+		yTicks: [],
+		hitRegions,
+		incomplete,
+	};
+}