@chipmobilesdk/rn-chart 0.1.1 → 0.2.1

package/src/geometry/layout.ts

@@ -1,121 +1,162 @@
-/**
- * Plot layout: turning a container size into a drawable plot rectangle.
- *
- * Font scale arrives as a parameter rather than being read from `PixelRatio`
- * here, so this module stays pure and testable at any scale without mocking a
- * platform API. The React layer reads the real value and passes it in.
- *
- * PURE. No React, no SVG.
- */
-import { reserveAxisSpace } from './ticks';
-
-export interface PlotRect {
-	readonly x: number;
-	readonly y: number;
-	readonly width: number;
-	readonly height: number;
-}
-
-export interface ContainerSize {
-	readonly width: number;
-	readonly height: number;
-}
-
-export interface LayoutOptions {
-	readonly container: ContainerSize;
-	/** Axis label text, used to reserve exactly as much space as is needed. */
-	readonly xLabels?: readonly string[];
-	readonly yLabels?: readonly string[];
-	readonly baseFontSize: number;
-	/** System text-size multiplier, from `PixelRatio.getFontScale()` (FR-071). */
-	readonly fontScale: number;
-	readonly padding?: number;
-}
-
-/**
- * Ceiling on how far system text scaling may inflate chart labels.
- *
- * Beyond this the plot area collapses faster than the labels become useful, so
- * we cap the growth rather than let the chart squeeze itself out of existence.
- * The cap is documented in the README as the supported dynamic-type range.
- */
-export const MAX_FONT_SCALE = 1.6;
-
-export function effectiveFontSize(
-	baseFontSize: number,
-	fontScale: number,
-): number {
-	const clamped = Math.max(1, Math.min(fontScale, MAX_FONT_SCALE));
-	return Math.round(baseFontSize * clamped);
-}
-
-/** A container that has not been measured yet, or has collapsed (FR-078). */
-export function isMeasurable(size: ContainerSize): boolean {
-	return (
-		Number.isFinite(size.width) &&
-		Number.isFinite(size.height) &&
-		size.width > 0 &&
-		size.height > 0
-	);
-}
-
-export const EMPTY_PLOT: PlotRect = { x: 0, y: 0, width: 0, height: 0 };
-
-/**
- * Reserves axis space from estimated label widths, then hands back what is
- * left for the marks.
- *
- * If the reservations would leave nothing to draw on, they are scaled back:
- * a cramped axis beats a zero-area plot.
- */
-export function resolvePlotRect(options: LayoutOptions): PlotRect {
-	if (!isMeasurable(options.container)) {
-		return EMPTY_PLOT;
-	}
-
-	const pad = options.padding ?? 0;
-	const fontSize = effectiveFontSize(options.baseFontSize, options.fontScale);
-
-	let left = pad;
-	let bottom = pad;
-
-	if (options.yLabels && options.yLabels.length > 0) {
-		left += reserveAxisSpace(options.yLabels, fontSize, 'vertical');
-	}
-	if (options.xLabels && options.xLabels.length > 0) {
-		bottom += reserveAxisSpace(options.xLabels, fontSize, 'horizontal');
-	}
-
-	const availableWidth = options.container.width - pad;
-	const availableHeight = options.container.height - pad;
-
-	// Never let axis reservations consume more than 40% of either dimension.
-	const maxLeft = availableWidth * 0.4;
-	const maxBottom = availableHeight * 0.4;
-	left = Math.min(left, maxLeft);
-	bottom = Math.min(bottom, maxBottom);
-
-	return {
-		x: left,
-		y: pad,
-		width: Math.max(0, options.container.width - left - pad),
-		height: Math.max(0, options.container.height - bottom - pad),
-	};
-}
-
-export function plotBottom(plot: PlotRect): number {
-	return plot.y + plot.height;
-}
-
-export function plotRight(plot: PlotRect): number {
-	return plot.x + plot.width;
-}
-
-export function containsPoint(plot: PlotRect, x: number, y: number): boolean {
-	return (
-		x >= plot.x &&
-		x <= plotRight(plot) &&
-		y >= plot.y &&
-		y <= plotBottom(plot)
-	);
-}
+/**
+ * Plot layout: turning a container size into a drawable plot rectangle.
+ *
+ * Font scale arrives as a parameter rather than being read from `PixelRatio`
+ * here, so this module stays pure and testable at any scale without mocking a
+ * platform API. The React layer reads the real value and passes it in.
+ *
+ * PURE. No React, no SVG.
+ */
+import { estimateTextWidth, reserveAxisSpace } from './ticks';
+
+export interface PlotRect {
+	readonly x: number;
+	readonly y: number;
+	readonly width: number;
+	readonly height: number;
+}
+
+export interface ContainerSize {
+	readonly width: number;
+	readonly height: number;
+}
+
+export interface LayoutOptions {
+	readonly container: ContainerSize;
+	/** Axis label text, used to reserve exactly as much space as is needed. */
+	readonly xLabels?: readonly string[];
+	readonly yLabels?: readonly string[];
+	readonly baseFontSize: number;
+	/** System text-size multiplier, from `PixelRatio.getFontScale()` (FR-071). */
+	readonly fontScale: number;
+	readonly padding?: number;
+}
+
+/**
+ * Ceiling on how far system text scaling may inflate chart labels.
+ *
+ * Beyond this the plot area collapses faster than the labels become useful, so
+ * we cap the growth rather than let the chart squeeze itself out of existence.
+ * The cap is documented in the README as the supported dynamic-type range.
+ */
+export const MAX_FONT_SCALE = 1.6;
+
+export function effectiveFontSize(baseFontSize: number, fontScale: number): number {
+	const clamped = Math.max(1, Math.min(fontScale, MAX_FONT_SCALE));
+	return Math.round(baseFontSize * clamped);
+}
+
+/** A container that has not been measured yet, or has collapsed (FR-078). */
+export function isMeasurable(size: ContainerSize): boolean {
+	return (
+		Number.isFinite(size.width) && Number.isFinite(size.height) && size.width > 0 && size.height > 0
+	);
+}
+
+export const EMPTY_PLOT: PlotRect = { x: 0, y: 0, width: 0, height: 0 };
+
+/**
+ * Reserves axis space from estimated label widths, then hands back what is
+ * left for the marks.
+ *
+ * If the reservations would leave nothing to draw on, they are scaled back:
+ * a cramped axis beats a zero-area plot.
+ */
+export function resolvePlotRect(options: LayoutOptions): PlotRect {
+	if (!isMeasurable(options.container)) {
+		return EMPTY_PLOT;
+	}
+
+	const pad = options.padding ?? 0;
+	const fontSize = effectiveFontSize(options.baseFontSize, options.fontScale);
+
+	let left = pad;
+	let bottom = pad;
+
+	if (options.yLabels && options.yLabels.length > 0) {
+		left += reserveAxisSpace(options.yLabels, fontSize, 'vertical');
+	}
+	if (options.xLabels && options.xLabels.length > 0) {
+		bottom += reserveAxisSpace(options.xLabels, fontSize, 'horizontal');
+	}
+
+	const availableWidth = options.container.width - pad;
+	const availableHeight = options.container.height - pad;
+
+	// Never let axis reservations consume more than 40% of either dimension.
+	const maxLeft = availableWidth * 0.4;
+	const maxBottom = availableHeight * 0.4;
+	left = Math.min(left, maxLeft);
+	bottom = Math.min(bottom, maxBottom);
+
+	return {
+		x: left,
+		y: pad,
+		width: Math.max(0, options.container.width - left - pad),
+		height: Math.max(0, options.container.height - bottom - pad),
+	};
+}
+
+export interface AxisLabels {
+	readonly xLabels: readonly string[];
+	readonly yLabels: readonly string[];
+	readonly fontSize: number;
+}
+
+/**
+ * Shrinks a plot so its own axis labels fit inside the container.
+ *
+ * Builders call this once they know their tick labels (which depend only on
+ * the data domain) and before projecting anything, so the reservation costs no
+ * second pass. Without it the frame handed every builder the full container:
+ * Y labels, drawn right-aligned left of the plot, landed at negative x, and X
+ * labels below the baseline fell past the bottom of the SVG (CHT-01).
+ *
+ * - left: the widest Y label plus a gutter, and at least half the widest X
+ *   label, because the first X label is centred on the plot's left edge;
+ * - right: half the widest X label, for the last one;
+ * - top: the part of the topmost Y label that rises above its tick;
+ * - bottom: one line of X labels plus a gutter.
+ *
+ * Each side is capped so labels can never squeeze the plot out of existence.
+ */
+export function insetForAxes(outer: PlotRect, labels: AxisLabels): PlotRect {
+	const { fontSize } = labels;
+	let widestX = 0;
+	for (const label of labels.xLabels) {
+		widestX = Math.max(widestX, estimateTextWidth(label, fontSize));
+	}
+	const hasY = labels.yLabels.length > 0;
+	const hasX = labels.xLabels.length > 0;
+
+	const left = Math.min(
+		Math.max(hasY ? reserveAxisSpace(labels.yLabels, fontSize, 'vertical') : 0, widestX / 2),
+		outer.width * 0.4,
+	);
+	const right = Math.min(widestX / 2, outer.width * 0.25);
+	// Y labels sit on their tick at `position + fontSize / 3`, so two thirds of
+	// the glyph box rise above it.
+	const top = hasY ? Math.min(Math.ceil((fontSize * 2) / 3), outer.height * 0.2) : 0;
+	const bottom = hasX
+		? Math.min(reserveAxisSpace(labels.xLabels, fontSize, 'horizontal'), outer.height * 0.4)
+		: 0;
+
+	return {
+		x: outer.x + left,
+		y: outer.y + top,
+		width: Math.max(0, outer.width - left - right),
+		height: Math.max(0, outer.height - top - bottom),
+	};
+}
+
+export function plotBottom(plot: PlotRect): number {
+	return plot.y + plot.height;
+}
+
+export function plotRight(plot: PlotRect): number {
+	return plot.x + plot.width;
+}
+
+export function containsPoint(plot: PlotRect, x: number, y: number): boolean {
+	return x >= plot.x && x <= plotRight(plot) && y >= plot.y && y <= plotBottom(plot);
+}

package/src/geometry/markers.ts

@@ -0,0 +1,55 @@
+/**
+ * Reference markers on a value axis: thresholds, baselines and targets drawn
+ * as horizontal lines across the plot (FR-008, FR-072).
+ *
+ * Every builder used to return `markers: []`, so a threshold the app supplied
+ * reached the accessibility summary and nowhere else (CHT-03).
+ *
+ * PURE. No React, no SVG.
+ */
+import type { ReferenceMarker } from '../contract/marker';
+import { isKnown } from '../contract/value';
+import { plotRight, type PlotRect } from './layout';
+import type { GeometryLabel, MarkerLine } from './types';
+
+type PlacedMarker = ReferenceMarker & { readonly value: { kind: 'known'; value: number } };
+
+/** Markers that can be placed on a value axis: those with a known value. */
+export function placeableMarkers(markers: readonly ReferenceMarker[] | undefined): PlacedMarker[] {
+	return (markers ?? []).filter((m): m is PlacedMarker => isKnown(m.value));
+}
+
+/** Values the domain must include so every marker lands inside the plot. */
+export function markerDomainValues(markers: readonly ReferenceMarker[] | undefined): number[] {
+	return placeableMarkers(markers).map(m => m.value.value);
+}
+
+/** One line per marker across the plot, plus its label when it has one. */
+export function horizontalMarkers(
+	markers: readonly ReferenceMarker[] | undefined,
+	plot: PlotRect,
+	project: (value: number) => number,
+): { lines: MarkerLine[]; labels: GeometryLabel[] } {
+	const lines: MarkerLine[] = [];
+	const labels: GeometryLabel[] = [];
+	for (const marker of placeableMarkers(markers)) {
+		const y = project(marker.value.value);
+		lines.push({
+			id: `marker-${marker.id}`,
+			d: `M${plot.x},${y}H${plotRight(plot)}`,
+			label: marker.label,
+			kind: marker.kind,
+		});
+		if (marker.label) {
+			labels.push({
+				key: `marker-label-${marker.id}`,
+				text: marker.label,
+				x: plotRight(plot),
+				// Above the line, unless that would leave the plot.
+				y: y - 4 >= plot.y + 8 ? y - 4 : y + 12,
+				anchor: 'end',
+			});
+		}
+	}
+	return { lines, labels };
+}