@octane-xplat/charts 0.0.1 → 0.10.0

package/src/core/axes.ts

@@ -0,0 +1,211 @@
+import { format } from 'd3-format'
+import { timeFormat } from 'd3-time-format'
+import type { ScaleBand, ScaleLinear, ScalePoint, ScaleTime } from 'd3-scale'
+import type { AxisSpec } from '../props'
+import type { Mark } from './marks'
+import type { PlotBox, XScale, XScaleKind, YScale } from './scales'
+import { xCenter } from './scales'
+
+/** A positioned text label — rendered as a real element in the overlay,
+ *  never as svg `<text>` (androidsvg/SVGKit text is degraded). `x`/`y` is the
+ *  box origin in chart space; `width` bounds it for alignment. */
+export interface LabelSpec {
+	x: number
+	y: number
+	width: number
+	align: 'start' | 'center' | 'end'
+	text: string
+	axis: 'x' | 'y'
+}
+
+export interface AxisModel {
+	labels: LabelSpec[]
+	/** Spine and tick stubs — painted over marks. */
+	frame: Mark[]
+	/** Gridlines — painted under marks. */
+	grid: Mark[]
+}
+
+const AXIS_COLOR = '#9aa3ad'
+const GRID_COLOR = '#9aa3ad'
+const GRID_OPACITY = 0.22
+
+const si = format('~s')
+const plain = format('~g')
+const day = timeFormat('%b %d')
+
+/** Default tick label formatting — SI suffixes for big magnitudes, plain
+ *  significant digits otherwise, short month-day for dates. */
+export function defaultFormat(value: number | string | Date): string {
+	if (value instanceof Date) {
+		return day(value)
+	}
+
+	if (typeof value === 'number') {
+		return Math.abs(value) >= 1000 ? si(value) : plain(value)
+	}
+
+	return String(value)
+}
+
+/** Cap categorical label count so boxes don't collide — keep every nth. */
+function thinDomain(domain: string[], plotWidth: number): string[] {
+	const maxLabels = Math.max(2, Math.floor(plotWidth / 56))
+	if (domain.length <= maxLabels) {
+		return domain
+	}
+
+	const step = Math.ceil(domain.length / maxLabels)
+	return domain.filter((_, i) => i % step === 0)
+}
+
+export function xAxisModel(
+	kind: XScaleKind,
+	scale: XScale,
+	spec: AxisSpec | undefined,
+	plot: PlotBox,
+): AxisModel {
+	const labels = spec?.labels !== false
+	const stubs = spec?.ticks !== false
+	const grid = spec?.grid === true
+	const fmt = spec?.format ?? defaultFormat
+
+	const frame: Mark[] = [
+		{
+			kind: 'line',
+			x1: plot.x,
+			y1: plot.y + plot.height,
+			x2: plot.x + plot.width,
+			y2: plot.y + plot.height,
+			stroke: AXIS_COLOR,
+			strokeWidth: 1,
+		},
+	]
+
+	const gridMarks: Mark[] = []
+	const out: LabelSpec[] = []
+
+	let values: (string | number | Date)[]
+	let format: (v: number | string | Date) => string = fmt
+	if (kind === 'band' || kind === 'point') {
+		values = thinDomain((scale as ScaleBand<string> | ScalePoint<string>).domain(), plot.width)
+	} else {
+		const continuous = scale as ScaleLinear<number, number> | ScaleTime<number, number>
+		const count = spec?.tickCount ?? 6
+		values = continuous.ticks(count) as (number | Date)[]
+		if (!spec?.format && kind === 'time') {
+			const tf = (continuous as ScaleTime<number, number>).tickFormat(count)
+			format = (v) => tf(v as Date)
+		}
+	}
+
+	for (const v of values) {
+		const px = plot.x + xCenter(kind, scale, v)
+		if (stubs) {
+			frame.push({
+				kind: 'line',
+				x1: px,
+				y1: plot.y + plot.height,
+				x2: px,
+				y2: plot.y + plot.height + 4,
+				stroke: AXIS_COLOR,
+				strokeWidth: 1,
+			})
+		}
+
+		if (grid) {
+			gridMarks.push({
+				kind: 'line',
+				x1: px,
+				y1: plot.y,
+				x2: px,
+				y2: plot.y + plot.height,
+				stroke: GRID_COLOR,
+				strokeOpacity: GRID_OPACITY,
+				strokeWidth: 1,
+			})
+		}
+
+		if (labels) {
+			const width = Math.min(72, plot.width / Math.max(1, values.length))
+			const boxX = Math.min(
+				Math.max(0, px - width / 2),
+				Math.max(0, plot.x + plot.width + 8 - width),
+			)
+
+			out.push({
+				x: boxX,
+				y: plot.y + plot.height + 6,
+				width,
+				align: 'center',
+				text: format(v),
+				axis: 'x',
+			})
+		}
+	}
+
+	return { labels: out, frame, grid: gridMarks }
+}
+
+export function yAxisModel(scale: YScale, spec: AxisSpec | undefined, plot: PlotBox): AxisModel {
+	const labels = spec?.labels !== false
+	const stubs = spec?.ticks !== false
+	const grid = spec?.grid === true
+	const fmt = spec?.format ?? defaultFormat
+
+	const frame: Mark[] = [
+		{
+			kind: 'line',
+			x1: plot.x,
+			y1: plot.y,
+			x2: plot.x,
+			y2: plot.y + plot.height,
+			stroke: AXIS_COLOR,
+			strokeWidth: 1,
+		},
+	]
+
+	const gridMarks: Mark[] = []
+	const out: LabelSpec[] = []
+
+	for (const v of scale.ticks(spec?.tickCount ?? 5)) {
+		const py = plot.y + scale(v)
+		if (stubs) {
+			frame.push({
+				kind: 'line',
+				x1: plot.x - 4,
+				y1: py,
+				x2: plot.x,
+				y2: py,
+				stroke: AXIS_COLOR,
+				strokeWidth: 1,
+			})
+		}
+
+		if (grid) {
+			gridMarks.push({
+				kind: 'line',
+				x1: plot.x,
+				y1: py,
+				x2: plot.x + plot.width,
+				y2: py,
+				stroke: GRID_COLOR,
+				strokeOpacity: GRID_OPACITY,
+				strokeWidth: 1,
+			})
+		}
+
+		if (labels) {
+			out.push({
+				x: 0,
+				y: py - 6,
+				width: Math.max(0, plot.x - 8),
+				align: 'end',
+				text: fmt(v),
+				axis: 'y',
+			})
+		}
+	}
+
+	return { labels: out, frame, grid: gridMarks }
+}

package/src/core/hit.ts

@@ -0,0 +1,201 @@
+import type { ChartHit } from '../props'
+import { defaultFormat } from './axes'
+import type { ChartScene } from './scene'
+
+export interface SceneHit extends ChartHit {
+	/** Datum anchor in chart space — tooltip/crosshair position. */
+	px: number
+	py: number
+}
+
+/** Touch slop — how far outside the plot a pointer may sit and still hit.
+ *  Also the nearest-point distance gate for scatter. */
+export const HIT_SLOP = 24
+
+/** Map a chart-space pointer position to the nearest datum. Cartesian charts
+ *  snap to the nearest x group, then pick the closest point inside it —
+ *  scatter gates on pointer distance instead of always snapping. Pie hits
+ *  resolve by ring + angle. Coordinates outside the plot (+slop) miss. */
+export function hitTest(scene: ChartScene, x: number, y: number, slop = HIT_SLOP): SceneHit | null {
+	if (scene.pie) {
+		return pieHit(scene, x, y, slop)
+	}
+
+	const { plot, points } = scene
+	if (!points.length) {
+		return null
+	}
+
+	if (
+		x < plot.x - slop ||
+		x > plot.x + plot.width + slop ||
+		y < plot.y - slop ||
+		y > plot.y + plot.height + slop
+	) {
+		return null
+	}
+
+	const centers = new Map<string, number>()
+	for (const p of points) {
+		const cur = centers.get(p.key)
+		centers.set(p.key, cur === undefined ? p.cx : (cur + p.cx) / 2)
+	}
+
+	let key: string | null = null
+	let keyDist = Infinity
+	for (const [k, cx] of centers) {
+		const d = Math.abs(cx - x)
+		if (d < keyDist) {
+			keyDist = d
+			key = k
+		}
+	}
+
+	if (key === null) {
+		return null
+	}
+
+	let best: SceneHit | null = null
+	let bestDist = Infinity
+	for (const p of points) {
+		if (p.key !== key) {
+			continue
+		}
+
+		const d = Math.hypot(p.cx - x, p.cy - y)
+		if (d < bestDist) {
+			bestDist = d
+			best = { series: p.series, index: p.index, x: p.x, y: p.y, px: p.cx, py: p.cy }
+		}
+	}
+
+	// Scatter is a point cloud, not a snapped axis — miss when nothing is
+	// actually near the pointer.
+	if (best && scene.type === 'scatter' && bestDist > slop) {
+		return null
+	}
+
+	return best
+}
+
+function pieHit(scene: ChartScene, x: number, y: number, slop: number): SceneHit | null {
+	const pie = scene.pie!
+	const dx = x - pie.cx
+	const dy = y - pie.cy
+	const r = Math.hypot(dx, dy)
+	if (r < pie.rInner - slop || r > pie.rOuter + slop) {
+		return null
+	}
+
+	// d3 pie angles run clockwise from 12 o'clock in y-down space:
+	// θ = atan2(dx, −dy) normalized into [0, 2π).
+	const angle = (Math.atan2(dx, -dy) + Math.PI * 2) % (Math.PI * 2)
+	const slice = pie.slices.find((s) => angle >= s.startAngle && angle < s.endAngle)
+	if (!slice) {
+		return null
+	}
+
+	return {
+		series: slice.series,
+		index: slice.index,
+		x: slice.label,
+		y: slice.value,
+		px: slice.cx,
+		py: slice.cy,
+	}
+}
+
+export type ScrubPhase = 'down' | 'move' | 'up' | 'cancel' | 'hover' | 'leave' | 'tap'
+
+export interface ScrubProps {
+	tooltip?: boolean
+	crosshair?: boolean
+	onPress?: (hit: ChartHit) => void
+	onScrub?: (hit: ChartHit | null) => void
+}
+
+/** Shared gesture → cursor state machine. Both leaves normalize their pointer
+ *  source (DOM pointer/click events, NS `touch`+`tap`) to phases and call
+ *  this; hit math stays identical across targets. `move` while pressed
+ *  scrubs and fires `onScrub`; `hover` (web-only, unpressed move) moves the
+ *  cursor without scrubbing; `up` ends the scrub and persists the cursor;
+ *  `tap` is a completed press — fires `onPress` and updates the cursor;
+ *  `cancel`/`leave` clear. `onPress` lives only on `tap` so NS's tap
+ *  recognizer and the web click both reach it exactly once. */
+export function createScrub(
+	getScene: () => ChartScene | null,
+	getProps: () => ScrubProps,
+	setCursor: (hit: SceneHit | null) => void,
+): (phase: ScrubPhase, x: number, y: number) => void {
+	let downAt: { x: number; y: number; t: number } | null = null
+	return (phase, x, y) => {
+		const scene = getScene()
+		const props = getProps()
+		const showCursor = props.tooltip === true || props.crosshair === true
+		switch (phase) {
+			case 'down': {
+				downAt = { x, y, t: Date.now() }
+				const hit = scene && showCursor ? hitTest(scene, x, y) : null
+				setCursor(hit)
+				if (hit) {
+					props.onScrub?.(hit)
+				}
+
+				break
+			}
+			case 'move': {
+				if (!downAt) {
+					break
+				}
+
+				const hit = scene && showCursor ? hitTest(scene, x, y) : null
+				setCursor(hit)
+				props.onScrub?.(hit)
+				break
+			}
+			case 'hover': {
+				if (downAt) {
+					break
+				}
+
+				setCursor(scene && showCursor ? hitTest(scene, x, y) : null)
+				break
+			}
+			case 'up': {
+				downAt = null
+				setCursor(scene ? hitTest(scene, x, y) : null)
+				props.onScrub?.(null)
+				break
+			}
+			case 'tap': {
+				downAt = null
+				const hit = scene ? hitTest(scene, x, y) : null
+				setCursor(hit)
+				if (hit) {
+					props.onPress?.(hit)
+				}
+
+				break
+			}
+			case 'cancel':
+			case 'leave': {
+				downAt = null
+				setCursor(null)
+				props.onScrub?.(null)
+				break
+			}
+		}
+	}
+}
+
+/** Tooltip body for a hit — series name + formatted y for cartesian charts,
+ *  slice label + value for pie. */
+export function hitLabel(scene: ChartScene, hit: ChartHit): string {
+	if (scene.pie) {
+		const slice = scene.pie.slices.find((s) => s.series === hit.series && s.index === hit.index)
+		return slice ? `${slice.label}: ${defaultFormat(slice.value)}` : defaultFormat(hit.y)
+	}
+
+	const name = scene.series[hit.series]?.name ?? String(hit.series)
+	return `${name}: ${defaultFormat(hit.y)}`
+}