@rokkit/chart 1.3.15 → 1.4.0

package/dist/geoms/Radar.svelte.d.ts

@@ -0,0 +1,42 @@
+type Row = Record<string, unknown>;
+type AxisSpec = {
+    key: string;
+    label?: string;
+    unit?: string;
+    domain?: [number, number];
+    ticks?: number;
+    tickLabels?: string[];
+    format?: (value: number) => unknown;
+    weight?: number;
+};
+type Options = {
+    grid?: boolean;
+    rings?: number;
+    sharedDomain?: boolean;
+    radiusScale?: 'linear' | 'sqrt' | 'auto';
+    /** Alias for the `axes` prop, for callers that can only reach `options` — notably
+     *  Plot's spec-driven path, whose passthrough is a fixed prop list. */
+    axes?: (string | AxisSpec)[];
+};
+type Props = {
+    axes?: (string | AxisSpec)[];
+    axis?: string;
+    value?: string;
+    series?: string;
+    /** Generic-pipeline aliases for `axis`/`value`/`series`. Radar's own names say what
+     *  the channels mean here (an axis is not an x position), but Plot's spec-driven
+     *  path passes only the generic set, so these let a spec drive radar too. The
+     *  specific names win when both are given. */
+    x?: string;
+    y?: string;
+    color?: string;
+    pattern?: string;
+    /** Fixed area opacity 0–1; defaults to the per-geom preset (radar = 0.25). */
+    alpha?: number;
+    stat?: string;
+    options?: Options;
+    onselect?: (data: Row) => void;
+};
+declare const Radar: import("svelte").Component<Props, {}, "">;
+type Radar = ReturnType<typeof Radar>;
+export default Radar;

package/dist/geoms/lib/aesthetics.d.ts

@@ -34,3 +34,17 @@ export function resolveFillStroke(row: Record<string, unknown>, channels: {
 export function resolveAlpha(alpha: number | undefined, type: string, preset?: {
     opacity?: Record<string, number>;
 }): number;
+/**
+ * Resolve a mark's text label from the geom's `label` prop.
+ *
+ *  - falsy      → no label
+ *  - `true`     → the row's value in `defaultField` (usually the geom's y channel)
+ *  - function   → its return value, stringified
+ *  - string     → the row's value in that field
+ *
+ * @param {boolean|string|((row: Record<string, unknown>) => unknown)|undefined} label
+ * @param {Record<string, unknown>} row
+ * @param {string} [defaultField] - field used when `label` is `true`
+ * @returns {string|null}
+ */
+export function resolveLabel(label: boolean | string | ((row: Record<string, unknown>) => unknown) | undefined, row: Record<string, unknown>, defaultField?: string): string | null;

package/dist/geoms/lib/aesthetics.js

@@ -43,3 +43,24 @@ export function resolveAlpha(alpha, type, preset) {
 	if (typeof alpha === 'number') return alpha
 	return preset?.opacity?.[type] ?? 1
 }
+
+/**
+ * Resolve a mark's text label from the geom's `label` prop.
+ *
+ *  - falsy      → no label
+ *  - `true`     → the row's value in `defaultField` (usually the geom's y channel)
+ *  - function   → its return value, stringified
+ *  - string     → the row's value in that field
+ *
+ * @param {boolean|string|((row: Record<string, unknown>) => unknown)|undefined} label
+ * @param {Record<string, unknown>} row
+ * @param {string} [defaultField] - field used when `label` is `true`
+ * @returns {string|null}
+ */
+export function resolveLabel(label, row, defaultField) {
+	if (!label) return null
+	if (label === true) return String((defaultField ? row[defaultField] : undefined) ?? '')
+	if (typeof label === 'function') return String(label(row) ?? '')
+	if (typeof label === 'string') return String(row[label] ?? '')
+	return null
+}

package/dist/geoms/lib/areas.d.ts

@@ -9,7 +9,12 @@
  * @param {'linear'|'smooth'|'step'} [curve]
  * @param {Map<unknown, string>} [patterns]
  * @param {Function} [place] - orientation mapper (x, y) => {x, y}
- * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
+ * @param {number} [baselineValue] - data-space value to anchor/split the fill at. When set,
+ *   each segment is emitted twice (sign: 'above' | 'below'), both anchored at this value's
+ *   pixel position instead of the chart bottom, so themes can colour the two independently.
+ *   Fed straight into `yScale()`, so a value outside the scale's domain extrapolates (e.g.
+ *   100 against a domain of [-5, 5] gives pixel -475) rather than clamping to the chart edge.
+ * @returns {{ d: string, fill: string, stroke: string, key: unknown, groupKey: unknown, patternId: string|null, sign?: 'above'|'below' }[]}
  */
 export function buildAreas(data: Object[], channels: {
     x: string;
@@ -19,12 +24,14 @@ export function buildAreas(data: Object[], channels: {
 }, xScale: Function, yScale: Function, colors: Map<unknown, {
     fill: string;
     stroke: string;
-}>, curve?: "linear" | "smooth" | "step", patterns?: Map<unknown, string>, place?: Function): {
+}>, curve?: "linear" | "smooth" | "step", patterns?: Map<unknown, string>, place?: Function, baselineValue?: number): {
     d: string;
     fill: string;
     stroke: string;
     key: unknown;
+    groupKey: unknown;
     patternId: string | null;
+    sign?: "above" | "below";
 }[];
 /**
  * Builds stacked area paths using d3 stack layout.

package/dist/geoms/lib/areas.js

@@ -13,23 +13,41 @@ import { literalColor, markEntry } from '../../lib/brewing/colors.js'
  * @param {'linear'|'smooth'|'step'} [curve]
  * @param {Map<unknown, string>} [patterns]
  * @param {Function} [place] - orientation mapper (x, y) => {x, y}
- * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
+ * @param {number} [baselineValue] - data-space value to anchor/split the fill at. When set,
+ *   each segment is emitted twice (sign: 'above' | 'below'), both anchored at this value's
+ *   pixel position instead of the chart bottom, so themes can colour the two independently.
+ *   Fed straight into `yScale()`, so a value outside the scale's domain extrapolates (e.g.
+ *   100 against a domain of [-5, 5] gives pixel -475) rather than clamping to the chart edge.
+ * @returns {{ d: string, fill: string, stroke: string, key: unknown, groupKey: unknown, patternId: string|null, sign?: 'above'|'below' }[]}
  */
-export function buildAreas(data, channels, xScale, yScale, colors, curve, patterns, place = (x, y) => ({ x, y })) {
+export function buildAreas(data, channels, xScale, yScale, colors, curve, patterns, place = (x, y) => ({ x, y }), baselineValue = undefined) {
 	const { x: xf, y: yf, pattern: pf } = channels
 	// A literal color (var()/oklch()/hex/currentColor) isn't a data field — it's the exact
 	// fill the caller wants for THIS area. Don't group on it, and don't fall back to the
 	// shared color scale (one value across all geoms); use it directly.
 	const lit = literalColor(channels.color)
 	const cf = lit ? undefined : channels.color
-	const baseline = yScale.range()[0] // bottom of the chart (y pixel max)
+	// Number.isFinite (not a loose !=null check) also rejects NaN/Infinity — a caller-computed
+	// stat (e.g. a mean over an empty group) can easily produce NaN, which would otherwise sail
+	// through and emit literal "NaN" path commands.
+	const hasBaseline = Number.isFinite(baselineValue)
+	const baseline = hasBaseline ? yScale(baselineValue) : yScale.range()[0] // bottom of the chart (y pixel max) unless an explicit baseline value is given
 
 	const xPos = (d) =>
 		typeof xScale.bandwidth === 'function' ? xScale(d[xf]) + xScale.bandwidth() / 2 : xScale(d[xf])
 
 	// Each area edge (baseline + top) is placed so the area transposes under orientation.
-	// `v` carries the raw y-value so the generator can break the area at a gap (null).
-	const toEdge = (d) => ({ base: place(xPos(d), baseline), top: place(xPos(d), yScale(d[yf])), v: d[yf] })
+	// `sign` clamps the top edge to one side of the baseline — 'above' never dips below it,
+	// 'below' never rises above it — the same technique proven in Sparkline (#148). This MUST
+	// happen here, in value space, before `place()` runs: `place` is how horizontal/flipped
+	// orientation is implemented (it can swap x/y), so clamping the post-place coordinate would
+	// clamp whatever axis ends up there — including the category axis on a flipped chart. `v`
+	// carries the raw y-value so the generator can break the area at a gap (null).
+	const toEdge = (d, sign) => {
+		const rawTop = yScale(d[yf])
+		const clampedTop = sign === 'above' ? Math.min(rawTop, baseline) : sign === 'below' ? Math.max(rawTop, baseline) : rawTop
+		return { base: place(xPos(d), baseline), top: place(xPos(d), clampedTop), v: d[yf] }
+	}
 	const makeGen = () => {
 		const gen = area()
 			// A null y-value is a GAP (a missing period): break the area there instead of
@@ -43,6 +61,29 @@ export function buildAreas(data, channels, xScale, yScale, colors, curve, patter
 		else if (curve === 'step') gen.curve(curveStep)
 		return gen
 	}
+	// One unsigned segment normally; with a baseline, an above and a below copy so themes can
+	// colour positive vs negative fill independently. Mirrors the approach proven in Sparkline
+	// (#148). Also owns the "no baseline" `d` computation so both call sites just hand over rows.
+	const splitBySign = (segBase, rows, grouped) => {
+		if (!hasBaseline) return [{ ...segBase, d: makeGen()(rows.map((d) => toEdge(d))) }]
+		return ['above', 'below'].map((sign) => ({
+			...segBase,
+			d: makeGen()(rows.map((d) => toEdge(d, sign))),
+			sign,
+			// Only the genuinely ungrouped case (no color/fill channel at all) may use a bare
+			// sign — there's exactly one segment set in that case, so 'above'/'below' are
+			// already unique. A grouped segment must ALWAYS get a discriminated key, even when
+			// its group's value happens to be null/undefined: that's a real, distinct group,
+			// not "no grouping" — collapsing the two onto the same bare key is exactly the bug
+			// this branches around. `typeof` alone already keeps null (typeof 'object') and
+			// undefined (typeof 'undefined') apart, no extra special-casing needed for them.
+			// This assumes group values are primitives (string/number/boolean/null/undefined),
+			// true for every color/fill channel today; two distinct objects (or two Dates with
+			// equal timestamps) stringifying to the same "type:value" could still collide —
+			// an accepted, documented bound, not an oversight.
+			key: grouped ? `${typeof segBase.key}:${segBase.key}::${sign}` : sign
+		}))
+	}
 
 	// For band (categorical) x scales, sort by domain index to preserve intended ordering.
 	// For continuous scales, sort numerically so the path draws left-to-right.
@@ -62,7 +103,11 @@ export function buildAreas(data, channels, xScale, yScale, colors, curve, patter
 			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
 				? toPatternId(String(patternKey))
 				: null
-		return [{ d: makeGen()(sortByX(data).map(toEdge)), fill: entry.fill, stroke: 'none', key: null, patternId }]
+		// `groupKey` is the untouched, unsigned group discriminator (here always null): callers
+		// that need to look a segment back up in a colors/patterns Map (keyed by the raw group
+		// value, not by our render key) should use this instead of `key`, since `key` gets a
+		// sign suffix once a baseline is in effect.
+		return splitBySign({ fill: entry.fill, stroke: 'none', key: null, groupKey: null, patternId }, sortByX(data), false)
 	}
 
 	// Group by color field
@@ -75,7 +120,7 @@ export function buildAreas(data, channels, xScale, yScale, colors, curve, patter
 	// For different-field patterns, assign positionally so each area gets a distinct pattern
 	const orderedPatternKeys = pf && pf !== cf ? [...(patterns?.keys() ?? [])] : null
 
-	return [...groups.entries()].map(([key, rows], i) => {
+	return [...groups.entries()].flatMap(([key, rows], i) => {
 		const entry = colors?.get(key) ?? { fill: '#888', stroke: '#888' }
 		// Same field or no pf: look up by colorKey. Different field: assign positionally.
 		const patternKey = !pf
@@ -87,7 +132,7 @@ export function buildAreas(data, channels, xScale, yScale, colors, curve, patter
 			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
 				? toPatternId(String(patternKey))
 				: null
-		return { d: makeGen()(sortByX(rows).map(toEdge)), fill: entry.fill, stroke: 'none', key, patternId }
+		return splitBySign({ fill: entry.fill, stroke: 'none', key, groupKey: key, patternId }, sortByX(rows), true)
 	})
 }
 

package/dist/geoms/lib/marks/area.d.ts

@@ -4,6 +4,9 @@
  * are set — so an old `color`-only area stays border-less (backward compatible); the
  * border uses the interior group's darker stroke shade. Per-field border coloring
  * (fill ≠ color, two legends) is the deferred dual-scale follow-up.
+ * `options.baseline`, when set, is passed straight to `buildAreas` (identity-position charts
+ * only — stacked/100% areas ignore it) and splits each segment into signed above/below copies
+ * (#148).
  * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
  */
 export function buildAreaMarks({ data, plot, channels, options, alpha, type }: {

package/dist/geoms/lib/marks/area.js

@@ -7,6 +7,9 @@ import { resolveAlpha } from '../aesthetics.js'
  * are set — so an old `color`-only area stays border-less (backward compatible); the
  * border uses the interior group's darker stroke shade. Per-field border coloring
  * (fill ≠ color, two legends) is the deferred dual-scale follow-up.
+ * `options.baseline`, when set, is passed straight to `buildAreas` (identity-position charts
+ * only — stacked/100% areas ignore it) and splits each segment into signed above/below copies
+ * (#148).
  * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
  */
 export function buildAreaMarks({ data, plot, channels, options = {}, alpha, type = 'area' }) {
@@ -27,12 +30,18 @@ export function buildAreaMarks({ data, plot, channels, options = {}, alpha, type
 	const stacked = position === 'stack' || position === 'fill'
 	const raw = stacked
 		? buildStackedAreas(data, areaChannels, xScale, yScale, colors, options.curve, patterns, place, position === 'fill')
-		: buildAreas(data, areaChannels, xScale, yScale, colors, options.curve, patterns, place)
+		: buildAreas(data, areaChannels, xScale, yScale, colors, options.curve, patterns, place, options.baseline)
 
 	const a = resolveAlpha(alpha, type, plot.chartPreset)
 	return raw.map((seg) => ({
+		// `d`/`fill`/`key`/`patternId`/`sign` all flow through unchanged via this spread;
+		// only `stroke` and `alpha` are actually recomputed below.
 		...seg,
-		stroke: hasBorder ? (colors.get(seg.key)?.stroke ?? 'none') : 'none',
+		// `seg.groupKey` (when present) is the raw, unsigned group value — a baseline split
+		// gives `seg.key` a sign suffix, so looking the border color up by `seg.key` directly
+		// would miss for every signed segment. `buildStackedAreas` segments don't carry a
+		// groupKey (they're never signed), so `seg.key` there is already the raw colorKey.
+		stroke: hasBorder ? (colors.get(seg.groupKey ?? seg.key)?.stroke ?? 'none') : 'none',
 		alpha: a
 	}))
 }

package/dist/geoms/lib/marks/radar.d.ts

@@ -0,0 +1,68 @@
+/**
+ * The one definition of radar's outer radius and which form it is drawing.
+ *
+ * Both `Radar.svelte` (grid, spokes, labels, vertices) and `buildRadarMarks` (the
+ * polygons) need this, and they used to derive it separately from the same
+ * `innerWidth`/`innerHeight` — two copies of one rule, free to drift apart. A test had to
+ * pin the outermost grid ring to the polygon's own radius to catch that drift; this
+ * removes the possibility instead of policing it.
+ *
+ * The micro form draws no labels, so it spends the whole half-extent on the polygon.
+ * Reserving the label margin there is what collapsed it: a Spark is 80×24, so the
+ * half-extent is 12px against a 32px margin, giving R = 0 and an invisible glyph.
+ *
+ * @param {number} innerWidth
+ * @param {number} innerHeight
+ * @returns {{ R: number, micro: boolean }}
+ */
+export function resolveRadarRadius(innerWidth: number, innerHeight: number): {
+    R: number;
+    micro: boolean;
+};
+/**
+ * Build renderable radar/spider polygon marks: one closed polygon per series, split into a
+ * fill-only copy and a stroke-only copy so every series' fill can be drawn before any series'
+ * stroke (see the return-order note below).
+ *
+ * Geometry comes from the pure `buildRadarLayout` (shared with the `Spark` radar form); this
+ * adapter's job is purely the Svelte/Plot-facing plumbing: deriving the outer radius from the
+ * plot's actual pixel size, resolving each series' fill/stroke/pattern through the shared
+ * palette, and applying the geom's alpha.
+ *
+ * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
+ * @returns {{ d: string, fill: string, stroke: string, alpha: number, key: string, patternId: string|null }[]}
+ *   Fill marks (stroke: 'none') for every series, followed by stroke marks (fill: 'none') for
+ *   every series — never interleaved. A smaller series nested inside a larger one would have its
+ *   outline buried under the next series' fill if fills and strokes were paired up per series
+ *   instead, so paint order is fills-then-strokes across the WHOLE series set, not per series.
+ */
+export function buildRadarMarks({ data, plot, channels, options, alpha, type }: {
+    data: any[];
+    plot: any;
+    channels: any;
+    options?: any;
+    alpha?: number;
+    type?: string;
+}): {
+    d: string;
+    fill: string;
+    stroke: string;
+    alpha: number;
+    key: string;
+    patternId: string | null;
+}[];
+export const LABEL_MARGIN: 32;
+/**
+ * Smallest outer radius at which the full form is actually usable: 24px is the minimum
+ * reachable hit target, and a vertex sits ON the outer radius, so below this the chrome
+ * is unreadable and the targets unreachable.
+ */
+export const MIN_PLOT_RADIUS: 24;
+/**
+ * Below this extent (the smaller of width/height) there is no room for BOTH the label
+ * margin and a usable plot radius, so radar drops to its micro form.
+ */
+export const MICRO_THRESHOLD: number;
+/** Legible axis-count range for the micro form — see the warn in `buildRadarMarks`. */
+export const MICRO_MIN_AXES: 3;
+export const MICRO_MAX_AXES: 5;

package/dist/geoms/lib/marks/radar.js

@@ -0,0 +1,153 @@
+import { lineRadial, curveLinearClosed } from 'd3-shape'
+import { buildRadarLayout } from '../../../lib/brewing/polar.js'
+import { resolveFillStroke, resolveAlpha } from '../aesthetics.js'
+import { toPatternId } from '../../../lib/brewing/patterns.js'
+
+// Space reserved outside the outer ring for axis labels, in pixels. `buildArcs` (the pie/donut
+// adapter) reserves none because a pie's labels sit INSIDE the wedge; a radar's axis labels sit
+// OUTSIDE the outer ring (beyond the last vertex), so the plotted radius has to stop short of
+// `min(width, height) / 2` or a spoke's label collides with the plot's own edge. This is a fixed
+// pixel budget (rather than a fraction of R) because label text is a roughly fixed size
+// regardless of how big the plot is.
+export const LABEL_MARGIN = 32
+
+/**
+ * Smallest outer radius at which the full form is actually usable: 24px is the minimum
+ * reachable hit target, and a vertex sits ON the outer radius, so below this the chrome
+ * is unreadable and the targets unreachable.
+ */
+export const MIN_PLOT_RADIUS = 24
+
+/**
+ * Below this extent (the smaller of width/height) there is no room for BOTH the label
+ * margin and a usable plot radius, so radar drops to its micro form.
+ */
+export const MICRO_THRESHOLD = 2 * (LABEL_MARGIN + MIN_PLOT_RADIUS)
+
+/** Legible axis-count range for the micro form — see the warn in `buildRadarMarks`. */
+export const MICRO_MIN_AXES = 3
+export const MICRO_MAX_AXES = 5
+
+/**
+ * The one definition of radar's outer radius and which form it is drawing.
+ *
+ * Both `Radar.svelte` (grid, spokes, labels, vertices) and `buildRadarMarks` (the
+ * polygons) need this, and they used to derive it separately from the same
+ * `innerWidth`/`innerHeight` — two copies of one rule, free to drift apart. A test had to
+ * pin the outermost grid ring to the polygon's own radius to catch that drift; this
+ * removes the possibility instead of policing it.
+ *
+ * The micro form draws no labels, so it spends the whole half-extent on the polygon.
+ * Reserving the label margin there is what collapsed it: a Spark is 80×24, so the
+ * half-extent is 12px against a 32px margin, giving R = 0 and an invisible glyph.
+ *
+ * @param {number} innerWidth
+ * @param {number} innerHeight
+ * @returns {{ R: number, micro: boolean }}
+ */
+export function resolveRadarRadius(innerWidth, innerHeight) {
+	const extent = Math.min(innerWidth, innerHeight)
+	const micro = extent < MICRO_THRESHOLD
+	const half = extent / 2
+	return { R: Math.max(0, micro ? half : half - LABEL_MARGIN), micro }
+}
+
+/**
+ * Converts `polar.js`'s angle convention (degrees, -90 = top, increasing clockwise) to
+ * `lineRadial`'s (radians, 0 = top/12 o'clock, increasing clockwise).
+ *
+ * Both conventions already agree on the direction of travel (clockwise), so the only
+ * difference is where zero sits: polar.js's zero (3 o'clock) is a quarter turn AFTER
+ * lineRadial's zero (12 o'clock). Rotating polar.js's angle forward by the 90° between
+ * them, then converting to radians, aligns the two: `-90°` (polar.js's top) maps to `0`
+ * (lineRadial's top).
+ *
+ * @param {number} degrees - polar.js convention, -90 = top
+ * @returns {number} radians, 0 = top, for `lineRadial`'s `.angle()`
+ */
+function toRadialAngle(degrees) {
+	return ((degrees + 90) * Math.PI) / 180
+}
+
+/**
+ * Build renderable radar/spider polygon marks: one closed polygon per series, split into a
+ * fill-only copy and a stroke-only copy so every series' fill can be drawn before any series'
+ * stroke (see the return-order note below).
+ *
+ * Geometry comes from the pure `buildRadarLayout` (shared with the `Spark` radar form); this
+ * adapter's job is purely the Svelte/Plot-facing plumbing: deriving the outer radius from the
+ * plot's actual pixel size, resolving each series' fill/stroke/pattern through the shared
+ * palette, and applying the geom's alpha.
+ *
+ * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
+ * @returns {{ d: string, fill: string, stroke: string, alpha: number, key: string, patternId: string|null }[]}
+ *   Fill marks (stroke: 'none') for every series, followed by stroke marks (fill: 'none') for
+ *   every series — never interleaved. A smaller series nested inside a larger one would have its
+ *   outline buried under the next series' fill if fills and strokes were paired up per series
+ *   instead, so paint order is fills-then-strokes across the WHOLE series set, not per series.
+ */
+export function buildRadarMarks({ data, plot, channels, options = {}, alpha, type = 'radar' }) {
+	if (!data?.length || !channels?.x || !channels?.y) return []
+
+	const { innerWidth, innerHeight, colors, patterns, chartPreset } = plot
+
+	const { R, micro } = resolveRadarRadius(innerWidth, innerHeight)
+
+	const layout = buildRadarLayout(data, channels, {
+		axes: options.axes,
+		sharedDomain: options.sharedDomain,
+		rings: options.rings,
+		radiusScale: options.radiusScale,
+		R
+	})
+
+	// The micro form is read as a gestalt shape, not measured: below 3 axes there is no area
+	// to perceive, and above 5 at glyph size the spokes collapse into an unreadable star.
+	// Warned rather than clamped — silently dropping a caller's axis would change what the
+	// glyph asserts about the data. Lives here, alongside polar.js's own dev warns, rather
+	// than in Radar.svelte, so the component stays render-only.
+	if (micro && (layout.axes.length < MICRO_MIN_AXES || layout.axes.length > MICRO_MAX_AXES))
+		// eslint-disable-next-line no-console
+		console.warn(
+			`[Radar] ${layout.axes.length} axes in a micro (Spark-sized) radar — ` +
+				`${MICRO_MIN_AXES}–${MICRO_MAX_AXES} is the legible range at glyph size. ` +
+				'The shape is meant to be read at a glance, not measured.'
+		)
+
+	const radial = lineRadial()
+		.angle((p) => p.angleRad)
+		.radius((p) => p.radius)
+		.defined((p) => p.radius !== null)
+		.curve(curveLinearClosed)
+
+	const a = resolveAlpha(alpha, type, chartPreset)
+
+	const fills = []
+	const strokes = []
+
+	for (const [seriesKey, vertices] of layout.series) {
+		const points = vertices.map((vertex, i) => ({
+			angleRad: toRadialAngle(layout.angles[i]),
+			radius: vertex ? vertex.radius : null
+		}))
+		const d = radial(points)
+
+		// One representative row for this series — mirrors the pattern `buildLines` uses for
+		// its grouped path — so the shared fill/stroke resolution reads real row data instead
+		// of a synthetic aggregate.
+		const repRow = vertices.find((vertex) => vertex)?.row ?? {}
+		const { fill, stroke } = resolveFillStroke(repRow, channels, colors)
+
+		const patternKey = channels.pattern ? repRow[channels.pattern] : null
+		const patternId =
+			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
+				? toPatternId(String(patternKey))
+				: null
+
+		const keyBase = String(seriesKey)
+		fills.push({ d, fill, stroke: 'none', alpha: a, key: `${keyBase}::fill`, patternId })
+		strokes.push({ d, fill: 'none', stroke, alpha: 1, key: `${keyBase}::stroke`, patternId: null })
+	}
+
+	return [...fills, ...strokes]
+}

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export namespace Plot {
     export { Ribbon };
     export { Waterfall };
     export { Rule };
+    export { Radar };
 }
 export namespace PlotLayers { }
 export { default as PlotChart } from "./Plot.svelte";
@@ -32,6 +33,7 @@ export { default as GeomLine } from "./geoms/Line.svelte";
 export { default as GeomArea } from "./geoms/Area.svelte";
 export { default as GeomPoint } from "./geoms/Point.svelte";
 export { default as GeomArc } from "./geoms/Arc.svelte";
+export { default as GeomRadar } from "./geoms/Radar.svelte";
 export { default as GeomBox } from "./geoms/Box.svelte";
 export { default as GeomViolin } from "./geoms/Violin.svelte";
 export { default as GeomHeatmap } from "./geoms/Heatmap.svelte";
@@ -45,10 +47,12 @@ export { default as GeomJitter } from "./geoms/Jitter.svelte";
 export { default as GeomRule } from "./geoms/Rule.svelte";
 export { default as Chart } from "./Chart.svelte";
 export { default as Sparkline } from "./Sparkline.svelte";
+export { default as Spark } from "./Spark.svelte";
 export { default as BarChart } from "./charts/BarChart.svelte";
 export { default as LineChart } from "./charts/LineChart.svelte";
 export { default as AreaChart } from "./charts/AreaChart.svelte";
 export { default as PieChart } from "./charts/PieChart.svelte";
+export { default as RadarChart } from "./charts/RadarChart.svelte";
 export { default as ScatterPlot } from "./charts/ScatterPlot.svelte";
 export { default as BoxPlot } from "./charts/BoxPlot.svelte";
 export { default as ViolinPlot } from "./charts/ViolinPlot.svelte";
@@ -79,5 +83,7 @@ import Hexbin from './geoms/Hexbin.svelte';
 import Ribbon from './geoms/Ribbon.svelte';
 import Waterfall from './geoms/Waterfall.svelte';
 import Rule from './geoms/Rule.svelte';
+import Radar from './geoms/Radar.svelte';
 export { createChartPreset, defaultPreset } from "./lib/preset.js";
+export { SparkState, GEOM_CONTRACT } from "./SparkState.svelte.js";
 export { buildSequentialScale, buildDivergingScale } from "./lib/brewing/colors.js";

package/dist/index.js

@@ -18,6 +18,7 @@ import Hexbin from './geoms/Hexbin.svelte'
 import Ribbon from './geoms/Ribbon.svelte'
 import Waterfall from './geoms/Waterfall.svelte'
 import Rule from './geoms/Rule.svelte'
+import Radar from './geoms/Radar.svelte'
 
 // Composable Plot primitives — use as <Plot.Root>, <Plot.Axis>, <Plot.Bar>, etc.
 export const Plot = {
@@ -40,7 +41,8 @@ export const Plot = {
 	Hexbin,
 	Ribbon,
 	Waterfall,
-	Rule
+	Rule,
+	Radar
 }
 
 /** @deprecated Use Plot instead */
@@ -63,6 +65,7 @@ export { default as GeomLine } from './geoms/Line.svelte'
 export { default as GeomArea } from './geoms/Area.svelte'
 export { default as GeomPoint } from './geoms/Point.svelte'
 export { default as GeomArc } from './geoms/Arc.svelte'
+export { default as GeomRadar } from './geoms/Radar.svelte'
 export { default as GeomBox } from './geoms/Box.svelte'
 export { default as GeomViolin } from './geoms/Violin.svelte'
 export { default as GeomHeatmap } from './geoms/Heatmap.svelte'
@@ -78,10 +81,12 @@ export { default as GeomRule } from './geoms/Rule.svelte'
 // Export standalone components
 export { default as Chart } from './Chart.svelte'
 export { default as Sparkline } from './Sparkline.svelte'
+export { default as Spark } from './Spark.svelte'
 export { default as BarChart } from './charts/BarChart.svelte'
 export { default as LineChart } from './charts/LineChart.svelte'
 export { default as AreaChart } from './charts/AreaChart.svelte'
 export { default as PieChart } from './charts/PieChart.svelte'
+export { default as RadarChart } from './charts/RadarChart.svelte'
 export { default as ScatterPlot } from './charts/ScatterPlot.svelte'
 export { default as BoxPlot } from './charts/BoxPlot.svelte'
 export { default as ViolinPlot } from './charts/ViolinPlot.svelte'
@@ -89,6 +94,7 @@ export { default as BubbleChart } from './charts/BubbleChart.svelte'
 
 // Export state and types
 export { PlotState } from './PlotState.svelte.js'
+export { SparkState, GEOM_CONTRACT } from './SparkState.svelte.js'
 
 // Export utilities
 export { buildSequentialScale, buildDivergingScale } from './lib/brewing/colors.js'

package/dist/lib/brewing/marks/boxes.js

@@ -37,6 +37,23 @@ export function buildBoxes(data, channels, xScale, yScale, colors, opts = {}) {
 		const key = pf ? d[pf] : null
 		return key !== null && key !== undefined && patterns?.has(key) ? toPatternId(String(key)) : null
 	}
+	// Every box shares the same vertical quartile geometry; only horizontal placement,
+	// thickness and colour differ between the grouped and non-grouped branches.
+	const toBox = (d, { cx, boxWidth, whiskerWidth, colorEntry }) => ({
+		data: d,
+		cx,
+		q1: yScale(d.q1),
+		median: yScale(d.median),
+		q3: yScale(d.q3),
+		iqr_min: yScale(d.iqr_min),
+		iqr_max: yScale(d.iqr_max),
+		outliers: (d.outliers ?? []).map((v) => ({ cy: yScale(v), value: v })),
+		width: boxWidth,
+		whiskerWidth,
+		fill: colorEntry.fill,
+		stroke: colorEntry.stroke,
+		patternId: patternIdFor(d)
+	})
 
 	if (grouped) {
 		const fillValues = [...new Set(data.map((d) => d[ff]))]
@@ -52,21 +69,7 @@ export function buildBoxes(data, channels, xScale, yScale, colors, opts = {}) {
 			const cx = bandStart + subIndex * subBandWidth + subBandWidth / 2 + laneOffset(subBandWidth)
 			const colorEntry = markEntry(lit, fillVal, colors, { fill: '#aaa', stroke: '#666' })
 
-			return {
-				data: d,
-				cx,
-				q1: yScale(d.q1),
-				median: yScale(d.median),
-				q3: yScale(d.q3),
-				iqr_min: yScale(d.iqr_min),
-				iqr_max: yScale(d.iqr_max),
-				outliers: (d.outliers ?? []).map((v) => ({ cy: yScale(v), value: v })),
-				width: boxWidth,
-				whiskerWidth,
-				fill: colorEntry.fill,
-				stroke: colorEntry.stroke,
-				patternId: patternIdFor(d)
-			}
+			return toBox(d, { cx, boxWidth, whiskerWidth, colorEntry })
 		})
 	}
 
@@ -81,20 +84,6 @@ export function buildBoxes(data, channels, xScale, yScale, colors, opts = {}) {
 			(xScale(d[xf]) ?? 0) +
 			(typeof xScale.bandwidth === 'function' ? bw / 2 : 0) +
 			laneOffset(bw)
-		return {
-			data: d,
-			cx,
-			q1: yScale(d.q1),
-			median: yScale(d.median),
-			q3: yScale(d.q3),
-			iqr_min: yScale(d.iqr_min),
-			iqr_max: yScale(d.iqr_max),
-			outliers: (d.outliers ?? []).map((v) => ({ cy: yScale(v), value: v })),
-			width: boxWidth,
-			whiskerWidth,
-			fill: colorEntry.fill,
-			stroke: colorEntry.stroke,
-			patternId: patternIdFor(d)
-		}
+		return toBox(d, { cx, boxWidth, whiskerWidth, colorEntry })
 	})
 }