@octane-xplat/charts 0.0.1 → 0.10.0

package/src/core/marks.ts

@@ -0,0 +1,380 @@
+import { scaleBand } from 'd3-scale'
+import {
+	arc as arcPath,
+	area as areaPath,
+	curveMonotoneX,
+	line as linePath,
+	pie as pieLayout,
+} from 'd3-shape'
+
+import type { ChartDatum, ChartType } from '../props'
+import type { ScaleBand } from 'd3-scale'
+import type { PlotBox, ResolvedSeries, XScale, XScaleKind, YScale } from './scales'
+import { categoryKey, xCenter } from './scales'
+
+/** Presentation attributes — the androidsvg ∩ SVGKit subset only (fills,
+ *  strokes, opacity). No filters, no text, no radial gradients. */
+export interface Paint {
+	fill?: string
+	fillOpacity?: number
+	stroke?: string
+	strokeOpacity?: number
+	strokeWidth?: number
+	strokeLinecap?: 'butt' | 'round' | 'square'
+}
+
+/** Datum reference — lets the overlay and hit-test map marks back to data. */
+interface DatumRef {
+	series?: number
+	index?: number
+}
+
+export type Mark = DatumRef &
+	Paint & { transform?: string } & (
+		| { kind: 'path'; d: string }
+		| { kind: 'rect'; x: number; y: number; width: number; height: number }
+		| { kind: 'circle'; cx: number; cy: number; r: number }
+		| { kind: 'line'; x1: number; y1: number; x2: number; y2: number }
+	)
+
+/** One hit-testable datum position in chart space. */
+export interface ScenePoint {
+	series: number
+	index: number
+	/** Snap-to-x group — String(datum.x). */
+	key: string
+	cx: number
+	cy: number
+	x: number | string | Date
+	y: number
+}
+
+export interface PieSlice {
+	series: number
+	index: number
+	label: string
+	value: number
+	color: string
+	startAngle: number
+	endAngle: number
+	/** Slice centroid relative to the pie center — the tooltip anchor. */
+	cx: number
+	cy: number
+}
+
+export interface PieScene {
+	/** Pie center in chart space (plot offset applied by scene.ts). */
+	cx: number
+	cy: number
+	rOuter: number
+	rInner: number
+	slices: PieSlice[]
+}
+
+export interface ChartLayout {
+	plot: PlotBox
+	xKind: XScaleKind
+	x: XScale
+	y: YScale
+}
+
+export interface BuiltMarks {
+	marks: Mark[]
+	points: ScenePoint[]
+	pie?: PieScene
+}
+
+export function buildMarks(
+	type: ChartType,
+	layout: ChartLayout,
+	series: ResolvedSeries[],
+	options: { stacked?: boolean; innerRadiusRatio?: number; palette: string[] },
+): BuiltMarks {
+	switch (type) {
+		case 'line':
+			return lineMarks(layout, series)
+		case 'area':
+			return areaMarks(layout, series)
+		case 'scatter':
+			return scatterMarks(layout, series)
+		case 'bar':
+			return options.stacked ? stackedBarMarks(layout, series) : groupedBarMarks(layout, series)
+		case 'pie':
+			return pieMarks(layout, series, options)
+	}
+}
+
+function lineMarks(layout: ChartLayout, series: ResolvedSeries[]): BuiltMarks {
+	const { xKind, x, y } = layout
+	const gen = linePath<ChartDatum>()
+		.defined((d) => Number.isFinite(d.y))
+		.x((d) => xCenter(xKind, x, d.x))
+		.y((d) => y(d.y))
+		.curve(curveMonotoneX)
+
+	const marks: Mark[] = []
+	const points: ScenePoint[] = []
+	series.forEach((s, si) => {
+		marks.push({
+			kind: 'path',
+			d: gen(s.values) ?? '',
+			fill: 'none',
+			stroke: s.color,
+			strokeWidth: 2,
+			strokeLinecap: 'round',
+			series: si,
+		})
+
+		s.values.forEach((d, i) => {
+			points.push({
+				series: si,
+				index: i,
+				key: categoryKey(d.x),
+				cx: xCenter(xKind, x, d.x),
+				cy: y(d.y),
+				x: d.x,
+				y: d.y,
+			})
+		})
+	})
+
+	return { marks, points }
+}
+
+function areaMarks(layout: ChartLayout, series: ResolvedSeries[]): BuiltMarks {
+	const { xKind, x, y } = layout
+	const zero = y(Math.max(y.domain()[0], Math.min(0, y.domain()[1])))
+	const gen = areaPath<ChartDatum>()
+		.defined((d) => Number.isFinite(d.y))
+		.x((d) => xCenter(xKind, x, d.x))
+		.y0(zero)
+		.y1((d) => y(d.y))
+		.curve(curveMonotoneX)
+
+	const stroke = linePath<ChartDatum>()
+		.defined((d) => Number.isFinite(d.y))
+		.x((d) => xCenter(xKind, x, d.x))
+		.y((d) => y(d.y))
+		.curve(curveMonotoneX)
+
+	const marks: Mark[] = []
+	const points: ScenePoint[] = []
+	series.forEach((s, si) => {
+		marks.push({
+			kind: 'path',
+			d: gen(s.values) ?? '',
+			fill: s.color,
+			fillOpacity: 0.25,
+			series: si,
+		})
+
+		marks.push({
+			kind: 'path',
+			d: stroke(s.values) ?? '',
+			fill: 'none',
+			stroke: s.color,
+			strokeWidth: 2,
+			series: si,
+		})
+
+		s.values.forEach((d, i) => {
+			points.push({
+				series: si,
+				index: i,
+				key: categoryKey(d.x),
+				cx: xCenter(xKind, x, d.x),
+				cy: y(d.y),
+				x: d.x,
+				y: d.y,
+			})
+		})
+	})
+
+	return { marks, points }
+}
+
+function scatterMarks(layout: ChartLayout, series: ResolvedSeries[]): BuiltMarks {
+	const { xKind, x, y } = layout
+	const marks: Mark[] = []
+	const points: ScenePoint[] = []
+	series.forEach((s, si) => {
+		s.values.forEach((d, i) => {
+			const cx = xCenter(xKind, x, d.x)
+			const cy = y(d.y)
+			marks.push({
+				kind: 'circle',
+				cx,
+				cy,
+				r: 3.5,
+				fill: d.color ?? s.color,
+				fillOpacity: 0.85,
+				series: si,
+				index: i,
+			})
+
+			points.push({ series: si, index: i, key: categoryKey(d.x), cx, cy, x: d.x, y: d.y })
+		})
+	})
+
+	return { marks, points }
+}
+
+function groupedBarMarks(layout: ChartLayout, series: ResolvedSeries[]): BuiltMarks {
+	const { x, y } = layout
+	const outer = x as ScaleBand<string>
+	const inner = scaleBand<string>()
+		.domain(series.map((_, i) => String(i)))
+		.range([0, outer.bandwidth()])
+		.padding(0.08)
+
+	const marks: Mark[] = []
+	const points: ScenePoint[] = []
+	series.forEach((s, si) => {
+		const offset = inner(String(si)) ?? 0
+		const width = inner.bandwidth()
+		s.values.forEach((d, i) => {
+			const band = outer(String(d.x))
+			if (band === undefined || !Number.isFinite(d.y)) {
+				return
+			}
+
+			const top = y(Math.max(0, d.y))
+			const bottom = y(Math.min(0, d.y))
+			marks.push({
+				kind: 'rect',
+				x: band + offset,
+				y: top,
+				width,
+				height: Math.max(0, bottom - top),
+				fill: d.color ?? s.color,
+				series: si,
+				index: i,
+			})
+
+			points.push({
+				series: si,
+				index: i,
+				key: categoryKey(d.x),
+				cx: band + offset + width / 2,
+				cy: y(d.y),
+				x: d.x,
+				y: d.y,
+			})
+		})
+	})
+
+	return { marks, points }
+}
+
+/** Stacked bars accumulate per category — positive values stack up from the
+ *  baseline, negatives down, so mixed-sign data stays correct. */
+function stackedBarMarks(layout: ChartLayout, series: ResolvedSeries[]): BuiltMarks {
+	const { x, y } = layout
+	const outer = x as ScaleBand<string>
+	const posBase = new Map<string, number>()
+	const negBase = new Map<string, number>()
+
+	const marks: Mark[] = []
+	const points: ScenePoint[] = []
+	series.forEach((s, si) => {
+		s.values.forEach((d, i) => {
+			const cat = String(d.x)
+			const band = outer(cat)
+			if (band === undefined || !Number.isFinite(d.y)) {
+				return
+			}
+
+			const v0 = d.y >= 0 ? (posBase.get(cat) ?? 0) : (negBase.get(cat) ?? 0)
+			const v1 = v0 + d.y
+			if (d.y >= 0) {
+				posBase.set(cat, v1)
+			} else {
+				negBase.set(cat, v1)
+			}
+
+			const top = y(Math.max(v0, v1))
+			const bottom = y(Math.min(v0, v1))
+			marks.push({
+				kind: 'rect',
+				x: band,
+				y: top,
+				width: outer.bandwidth(),
+				height: Math.max(0, bottom - top),
+				fill: d.color ?? s.color,
+				series: si,
+				index: i,
+			})
+
+			points.push({
+				series: si,
+				index: i,
+				key: cat,
+				cx: band + outer.bandwidth() / 2,
+				cy: y(v1),
+				x: d.x,
+				y: d.y,
+			})
+		})
+	})
+
+	return { marks, points }
+}
+
+/** Pie consumes every datum across series — each {x: label, y: value} is a
+ *  slice; slice colors are categorical (palette by order) with datum.color
+ *  overrides. A series color is ignored on pie — it would be monochrome. */
+function pieMarks(
+	layout: ChartLayout,
+	series: ResolvedSeries[],
+	options: { innerRadiusRatio?: number; palette: string[] },
+): BuiltMarks {
+	const { plot } = layout
+	const flat: { d: ChartDatum; si: number; i: number }[] = []
+	series.forEach((s, si) => s.values.forEach((d, i) => flat.push({ d, si, i })))
+
+	// Marks are plot-space; d3 arcs generate around (0,0), so each slice path
+	// carries its own translate to the pie center and scene.ts folds the plot
+	// offset into the published pie center.
+	const cx = plot.width / 2
+	const cy = plot.height / 2
+	const rOuter = Math.max(0, Math.min(plot.width, plot.height) / 2)
+	const ratio = options.innerRadiusRatio ?? 0
+	const rInner = rOuter * Math.min(Math.max(ratio, 0), 0.95)
+
+	const arcs = pieLayout<{ d: ChartDatum; si: number; i: number }>()
+		.value((v) => Math.max(0, v.d.y))
+		.sort(null)(flat)
+
+	const gen = arcPath<any, any>().innerRadius(rInner).outerRadius(rOuter)
+
+	const marks: Mark[] = []
+	const slices: PieSlice[] = []
+	arcs.forEach((a, order) => {
+		// Pie slices are categorical — palette by slice order; a series color on
+		// pie would monochrome every slice. datum.color overrides.
+		const color = a.data.d.color ?? options.palette[order % options.palette.length]
+		const centroid = gen.centroid(a)
+		marks.push({
+			kind: 'path',
+			d: gen(a) ?? '',
+			transform: `translate(${cx} ${cy})`,
+			fill: color,
+			series: a.data.si,
+			index: a.data.i,
+		})
+
+		slices.push({
+			series: a.data.si,
+			index: a.data.i,
+			label: String(a.data.d.x),
+			value: a.data.d.y,
+			color,
+			startAngle: a.startAngle,
+			endAngle: a.endAngle,
+			cx: centroid[0],
+			cy: centroid[1],
+		})
+	})
+
+	return { marks, points: [], pie: { cx, cy, rOuter, rInner, slices } }
+}

package/src/core/scales.ts

@@ -0,0 +1,168 @@
+import { extent } from 'd3-array'
+import { scaleBand, scaleLinear, scalePoint, scaleTime } from 'd3-scale'
+import type { ScaleBand, ScaleLinear, ScalePoint, ScaleTime } from 'd3-scale'
+import type { ChartType, SeriesSpec } from '../props'
+
+export type XScaleKind = 'band' | 'point' | 'linear' | 'time'
+
+export type XScale =
+	| ScaleBand<string>
+	| ScalePoint<string>
+	| ScaleLinear<number, number>
+	| ScaleTime<number, number>
+
+export type YScale = ScaleLinear<number, number>
+
+export interface PlotBox {
+	x: number
+	y: number
+	width: number
+	height: number
+}
+
+export interface ResolvedSeries {
+	name: string
+	color: string
+	values: { x: number | string | Date; y: number; color?: string }[]
+}
+
+/** Categorical x values across all series, first-seen order — the band/point
+ *  domain. */
+export function categoryDomain(data: SeriesSpec[]): string[] {
+	const seen = new Set<string>()
+	const out: string[] = []
+	for (const series of data) {
+		for (const d of series.values) {
+			const key = String(d.x)
+			if (!seen.has(key)) {
+				seen.add(key)
+				out.push(key)
+			}
+		}
+	}
+
+	return out
+}
+
+/** A categorical x lookup — band/point domains key on String(x). */
+export function categoryKey(x: number | string | Date): string {
+	return String(x)
+}
+
+/** Pick the x scale family: bar is always band, other cartesian types infer
+ *  from the first datum — Date → time, string → point, number → linear. */
+export function inferXKind(type: ChartType, data: SeriesSpec[]): XScaleKind {
+	if (type === 'bar') {
+		return 'band'
+	}
+
+	const first = data[0]?.values[0]?.x
+	if (first instanceof Date) {
+		return 'time'
+	}
+
+	if (typeof first === 'string') {
+		return 'point'
+	}
+
+	return 'linear'
+}
+
+export function buildXScale(kind: XScaleKind, data: SeriesSpec[], width: number): XScale {
+	switch (kind) {
+		case 'band':
+			return scaleBand<string>()
+				.domain(categoryDomain(data))
+				.range([0, width])
+				.paddingInner(0.25)
+				.paddingOuter(0.15)
+		case 'point': {
+			const domain = categoryDomain(data)
+			return scalePoint<string>()
+				.domain(domain)
+				.range([0, width])
+				.padding(domain.length <= 1 ? 0 : 0.5)
+		}
+		case 'time': {
+			const values = data.flatMap((s) => s.values.map((d) => d.x as Date))
+			const [lo, hi] = extent(values)
+			if (lo === undefined || hi === undefined) {
+				const now = new Date()
+				return scaleTime().domain([now, now]).range([0, width])
+			}
+
+			return scaleTime()
+				.domain(padDomain(+lo, +hi).map((v) => new Date(v)))
+				.range([0, width])
+				.nice()
+		}
+		case 'linear': {
+			const values = data.flatMap((s) => s.values.map((d) => Number(d.x)))
+			const [lo, hi] = extent(values)
+			return scaleLinear()
+				.domain(padDomain(lo ?? 0, hi ?? 1))
+				.range([0, width])
+				.nice()
+		}
+	}
+}
+
+/** Degenerate domains (one value) get a unit pad so the scale still maps
+ *  somewhere sensible. */
+function padDomain(lo: number, hi: number): [number, number] {
+	return lo === hi ? [lo - 0.5, hi + 0.5] : [lo, hi]
+}
+
+/** Y domain: bar/area pin the zero baseline; line/scatter take the data
+ *  extent; stacked bars sum per category (positive stack only — negative
+ *  values in stacked mode stack below zero independently). */
+export function yDomain(data: SeriesSpec[], type: ChartType, stacked: boolean): [number, number] {
+	if (stacked && type === 'bar') {
+		const pos = new Map<string, number>()
+		const neg = new Map<string, number>()
+		for (const series of data) {
+			for (const d of series.values) {
+				const key = String(d.x)
+				if (d.y >= 0) {
+					pos.set(key, (pos.get(key) ?? 0) + d.y)
+				} else {
+					neg.set(key, (neg.get(key) ?? 0) + d.y)
+				}
+			}
+		}
+
+		const hi = Math.max(0, ...pos.values())
+		const lo = Math.min(0, ...neg.values())
+		return lo === hi ? [0, 1] : [lo, hi]
+	}
+
+	const values = data.flatMap((s) => s.values.map((d) => d.y))
+	const [lo, hi] = extent(values)
+	const min = lo ?? 0
+	const max = hi ?? 1
+	if (type === 'bar' || type === 'area') {
+		const domain: [number, number] = [Math.min(0, min), Math.max(0, max)]
+		return domain[0] === domain[1] ? [0, 1] : domain
+	}
+
+	return padDomain(min, max)
+}
+
+export function buildYScale(domain: [number, number], height: number): YScale {
+	return scaleLinear().domain(domain).range([height, 0]).nice()
+}
+
+/** Pixel center of an x value — band offsets by half the band, point and
+ *  continuous scales map directly. */
+export function xCenter(kind: XScaleKind, scale: XScale, value: number | string | Date): number {
+	if (kind === 'band') {
+		const band = scale as ScaleBand<string>
+		return (band(String(value)) ?? NaN) + band.bandwidth() / 2
+	}
+
+	if (kind === 'point') {
+		return (scale as ScalePoint<string>)(String(value)) ?? NaN
+	}
+
+	return (scale as ScaleLinear<number, number> | ScaleTime<number, number>)(value as never)
+}

package/src/core/scene.ts

@@ -0,0 +1,145 @@
+import type { ChartProps } from '../props'
+import { xAxisModel, yAxisModel } from './axes'
+import type { LabelSpec } from './axes'
+import { buildMarks } from './marks'
+import type { Mark, PieScene, ScenePoint } from './marks'
+import { buildXScale, buildYScale, inferXKind, yDomain } from './scales'
+import type { PlotBox } from './scales'
+import { svgDocument } from './svg'
+
+/** Default categorical palette — Tableau 10, embedded so the leaf stays free
+ *  of d3-scale-chromatic. */
+export const PALETTE = [
+	'#4e79a7',
+	'#f28e2b',
+	'#e15759',
+	'#76b7b2',
+	'#59a14f',
+	'#edc948',
+	'#b07aa1',
+	'#ff9da7',
+	'#9c755f',
+	'#bab0ac',
+]
+
+export interface LegendItem {
+	color: string
+	text: string
+}
+
+/** The fully-resolved chart: svg markup, overlay label boxes, legend items,
+ *  and per-datum hit targets in chart space. `computeScene` is the core's one
+ *  entry point — the leaves only render it. */
+export interface ChartScene {
+	type: ChartProps['type']
+	width: number
+	height: number
+	plot: PlotBox
+	markup: string
+	labels: LabelSpec[]
+	legend: LegendItem[]
+	series: { name: string; color: string }[]
+	points: ScenePoint[]
+	pie: PieScene | null
+}
+
+export function computeScene(props: ChartProps, width: number, height: number): ChartScene | null {
+	if (!(width > 0) || !(height > 0) || !props.data?.length) {
+		return null
+	}
+
+	const pie = props.type === 'pie'
+	const xLabels = !pie && props.xAxis?.labels !== false
+	const yLabels = !pie && props.yAxis?.labels !== false
+	const margin = {
+		top: 8,
+		right: 10,
+		bottom: pie ? 8 : xLabels ? 26 : 10,
+		left: pie ? 8 : yLabels ? 46 : 10,
+		...props.margin,
+	}
+
+	const plot: PlotBox = {
+		x: margin.left,
+		y: margin.top,
+		width: Math.max(0, width - margin.left - margin.right),
+		height: Math.max(0, height - margin.top - margin.bottom),
+	}
+
+	if (!(plot.width > 0) || !(plot.height > 0)) {
+		return null
+	}
+
+	const series = props.data.map((s, i) => ({
+		name: s.name,
+		color: s.color ?? PALETTE[i % PALETTE.length],
+		values: s.values,
+	}))
+
+	let marks: Mark[]
+	let points: ScenePoint[]
+	let pieScene: PieScene | null = null
+	let labels: LabelSpec[] = []
+	let grid: Mark[] = []
+	let frame: Mark[] = []
+
+	if (pie) {
+		const built = buildMarks(
+			'pie',
+			// Pie doesn't consume the cartesian scales — placeholders only.
+			{ plot, xKind: 'band', x: buildXScale('band', [], 0), y: buildYScale([0, 1], 1) },
+			series,
+			{ innerRadiusRatio: props.innerRadiusRatio, palette: PALETTE },
+		)
+
+		marks = built.marks
+		points = []
+		const center = { cx: built.pie!.cx + plot.x, cy: built.pie!.cy + plot.y }
+		pieScene = {
+			...built.pie!,
+			...center,
+			slices: built.pie!.slices.map((s) => ({ ...s, cx: s.cx + center.cx, cy: s.cy + center.cy })),
+		}
+	} else {
+		const xKind = inferXKind(props.type, props.data)
+		const layout = {
+			plot,
+			xKind,
+			x: buildXScale(xKind, props.data, plot.width),
+			y: buildYScale(yDomain(props.data, props.type, props.stacked === true), plot.height),
+		}
+
+		const built = buildMarks(props.type, layout, series, {
+			stacked: props.stacked,
+			palette: PALETTE,
+		})
+
+		marks = built.marks
+		// Marks stay plot-space in the markup (the serializer wraps them in a
+		// translate group); hit targets publish chart space.
+		points = built.points.map((p) => ({ ...p, cx: p.cx + plot.x, cy: p.cy + plot.y }))
+
+		const xAxis = xAxisModel(xKind, layout.x, props.xAxis, plot)
+		const yAxis = yAxisModel(layout.y, props.yAxis, plot)
+		labels = [...xAxis.labels, ...yAxis.labels]
+		grid = [...xAxis.grid, ...yAxis.grid]
+		frame = [...xAxis.frame, ...yAxis.frame]
+	}
+
+	const legend = pieScene
+		? pieScene.slices.map((s) => ({ color: s.color, text: s.label }))
+		: series.map((s) => ({ color: s.color, text: s.name }))
+
+	return {
+		type: props.type,
+		width,
+		height,
+		plot,
+		markup: svgDocument(marks, grid, frame, plot, width, height),
+		labels,
+		legend,
+		series,
+		points,
+		pie: pieScene,
+	}
+}