@rokkit/chart 1.3.15 → 1.4.1

package/dist/Sparkline.svelte.d.ts

@@ -21,6 +21,8 @@ type Props = {
     baseline?: number;
     highlight?: HighlightSelector | HighlightSelector[];
     trend?: TrendMethod | TrendMethod[];
+    /** Accessible name, forwarded to `Spark`. Omitted → generated from the series. */
+    label?: string;
 };
 declare const Sparkline: import("svelte").Component<Props, {}, "">;
 type Sparkline = ReturnType<typeof Sparkline>;

package/dist/charts/RadarChart.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import Plot from '../Plot.svelte'
+	import Radar from '../geoms/Radar.svelte'
+
+	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 Props = {
+		data?: Row[]
+		/** Field naming which axis each row belongs to. */
+		axis?: string
+		/** Field holding the plotted magnitude. */
+		value?: string
+		/** Field distinguishing one polygon from another. */
+		series?: string
+		/** Axis order and per-axis config — bare names, full specs, or a mix. */
+		axes?: (string | AxisSpec)[]
+		pattern?: string
+		grid?: boolean
+		rings?: number
+		sharedDomain?: boolean
+		radiusScale?: 'linear' | 'sqrt' | 'auto'
+		alpha?: number
+		stat?: string
+		width?: number
+		height?: number
+		mode?: 'light' | 'dark'
+		title?: string
+		tooltip?: boolean | ((data: Row) => string)
+		/** Omit to let it default: on for 2+ series, off for one. */
+		legend?: boolean
+		/** Plot-level selection: receives the `buildSelectDetail` shape, not a bare row —
+		 *  same as AreaChart/BarChart. The geom's own `onselect` (a row) is reached by
+		 *  composing `<Plot><Radar onselect /></Plot>` directly. */
+		onselect?: (detail: unknown) => void
+	}
+
+	let {
+		data = [],
+		axis = undefined,
+		value = undefined,
+		series = undefined,
+		axes = undefined,
+		pattern = undefined,
+		grid = true,
+		rings = undefined,
+		sharedDomain = undefined,
+		radiusScale = undefined,
+		alpha = undefined,
+		stat = 'identity',
+		width = 400,
+		height = 400,
+		mode = undefined,
+		title = undefined,
+		tooltip = false,
+		legend = undefined,
+		onselect = undefined
+	}: Props = $props()
+
+	// ⚠ Diverges from PieChart, which defaults `legend` to false. Radar fills are washed out
+	// (preset alpha 0.25) and they overlap, so where they intersect the blend is a colour
+	// that belongs to neither series — matching a polygon to its series by colour alone is
+	// unreliable. A legend is therefore on by default as soon as there is more than one
+	// series. Still fully overridable in both directions.
+	//
+	// With no `series` channel there is exactly one polygon by construction, so the count
+	// cannot exceed one and the legend is simply off — no need to distinguish empty data
+	// from one implicit series.
+	const multiSeries = $derived(series ? new Set(data.map((row) => row[series])).size > 1 : false)
+	const showLegend = $derived(legend ?? multiSeries)
+</script>
+
+<Plot
+	{data}
+	{width}
+	{height}
+	{mode}
+	{title}
+	grid={false}
+	axes={false}
+	margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
+	legend={showLegend}
+	{tooltip}
+	{onselect}
+>
+	<Radar
+		{axis}
+		{value}
+		{series}
+		{axes}
+		{pattern}
+		{alpha}
+		{stat}
+		options={{ grid, rings, sharedDomain, radiusScale }}
+	/>
+</Plot>

package/dist/charts/RadarChart.svelte.d.ts

@@ -0,0 +1,43 @@
+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 Props = {
+    data?: Row[];
+    /** Field naming which axis each row belongs to. */
+    axis?: string;
+    /** Field holding the plotted magnitude. */
+    value?: string;
+    /** Field distinguishing one polygon from another. */
+    series?: string;
+    /** Axis order and per-axis config — bare names, full specs, or a mix. */
+    axes?: (string | AxisSpec)[];
+    pattern?: string;
+    grid?: boolean;
+    rings?: number;
+    sharedDomain?: boolean;
+    radiusScale?: 'linear' | 'sqrt' | 'auto';
+    alpha?: number;
+    stat?: string;
+    width?: number;
+    height?: number;
+    mode?: 'light' | 'dark';
+    title?: string;
+    tooltip?: boolean | ((data: Row) => string);
+    /** Omit to let it default: on for 2+ series, off for one. */
+    legend?: boolean;
+    /** Plot-level selection: receives the `buildSelectDetail` shape, not a bare row —
+     *  same as AreaChart/BarChart. The geom's own `onselect` (a row) is reached by
+     *  composing `<Plot><Radar onselect /></Plot>` directly. */
+    onselect?: (detail: unknown) => void;
+};
+declare const RadarChart: import("svelte").Component<Props, {}, "">;
+type RadarChart = ReturnType<typeof RadarChart>;
+export default RadarChart;

package/dist/geoms/Area.svelte

@@ -10,6 +10,8 @@
 		/** @deprecated use `position="stack"` — kept as an alias. */
 		stack?: boolean
 		curve?: 'linear' | 'smooth' | 'step'
+		/** Data-space value to anchor/split the fill at; splits the area into above/below segments. */
+		baseline?: number
 	}
 
 	type Props = {
@@ -40,7 +42,12 @@
 		type: 'area',
 		channels: { x, y, color, fill, pattern },
 		stat,
-		options: { stack: options?.stack ?? false, position: resolvedPosition, curve: options?.curve },
+		options: {
+			stack: options?.stack ?? false,
+			position: resolvedPosition,
+			curve: options?.curve,
+			baseline: options?.baseline
+		},
 		alpha,
 		build: buildAreaMarks
 	}))
@@ -59,14 +66,14 @@
 	function selectPoint(d: Row, event: MouseEvent | KeyboardEvent) {
 		if (plotState.interactive)
 			plotState.handleSelect(
-				buildSelectDetail(
-					d,
-					plotState.data.indexOf(d),
-					{ x, y },
-					'area',
-					seriesField ? d[seriesField] : undefined,
+				buildSelectDetail({
+					datum: d,
+					index: plotState.data.indexOf(d),
+					channels: { x, y },
+					geom: 'area',
+					series: seriesField ? d[seriesField] : undefined,
 					event
-				)
+				})
 			)
 	}
 </script>
@@ -80,9 +87,17 @@
 				fill-opacity={seg.patternId ? 1 : seg.alpha}
 				stroke={seg.stroke ?? 'none'}
 				data-plot-element="area"
+				data-plot-area
+				data-plot-area-sign={seg.sign}
 			/>
 			{#if seg.patternId}
-				<path d={seg.d} fill="url(#{seg.patternId})" data-plot-element="area" />
+				<path
+					d={seg.d}
+					fill="url(#{seg.patternId})"
+					data-plot-element="area"
+					data-plot-area
+					data-plot-area-sign={seg.sign}
+				/>
 			{/if}
 		{/each}
 		<!-- Invisible hit circles for tooltip: one per data point -->

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

@@ -2,6 +2,8 @@ type Options = {
     /** @deprecated use `position="stack"` — kept as an alias. */
     stack?: boolean;
     curve?: 'linear' | 'smooth' | 'step';
+    /** Data-space value to anchor/split the fill at; splits the area into above/below segments. */
+    baseline?: number;
 };
 type Props = {
     x?: string;

package/dist/geoms/Bar.svelte

@@ -4,6 +4,7 @@
 	import type { createCrossFilter } from '../crossfilter/createCrossFilter.svelte.js'
 	import { GeomState } from './lib/GeomState.svelte.js'
 	import { buildBarMarks } from './lib/marks/bar.js'
+	import { resolveLabel } from './lib/aesthetics.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
 	import { buildSelectDetail } from '../lib/select.js'
 	import LabelPill from './LabelPill.svelte'
@@ -60,14 +61,6 @@
 	// `options.stack: true` is the back-compat alias for position='stack'.
 	const resolvedPosition = $derived(position ?? (options?.stack ? 'stack' : 'dodge'))
 
-	function resolveLabel(data: Row, defaultField: string | undefined): string | null {
-		if (!label) return null
-		if (label === true) return String((defaultField ? data[defaultField] : undefined) ?? '')
-		if (typeof label === 'function') return String(label(data) ?? '')
-		if (typeof label === 'string') return String(data[label] ?? '')
-		return null
-	}
-
 	/**
 	 * Pick white or dark text based on perceived luminance of a hex fill color.
 	 */
@@ -126,14 +119,14 @@
 	function selectBar(bar: { data: Row }, event: MouseEvent | KeyboardEvent) {
 		if (plotState.interactive)
 			plotState.handleSelect(
-				buildSelectDetail(
-					bar.data,
-					plotState.data.indexOf(bar.data),
-					{ x, y },
-					'bar',
-					seriesField ? bar.data[seriesField] : undefined,
+				buildSelectDetail({
+					datum: bar.data,
+					index: plotState.data.indexOf(bar.data),
+					channels: { x, y },
+					geom: 'bar',
+					series: seriesField ? bar.data[seriesField] : undefined,
 					event
-				)
+				})
 			)
 	}
 
@@ -198,7 +191,7 @@
 				/>
 			{/if}
 			{#if label}
-				{@const text = resolveLabel(bar.data, effectiveOrientation === 'horizontal' ? x : y)}
+				{@const text = resolveLabel(label, bar.data, effectiveOrientation === 'horizontal' ? x : y)}
 				{#if text}
 					{#if effectiveOrientation === 'horizontal'}
 						{#if options.labelInside}

package/dist/geoms/Highlight.svelte

@@ -3,6 +3,7 @@
 	import type { PlotState } from '../PlotState.svelte.js'
 	import { resolveHighlight } from '../lib/highlight.js'
 	import { scalePos } from '../lib/scale.js'
+	import { resolveLabel } from './lib/aesthetics.js'
 
 	type Row = Record<string, unknown>
 	type Props = {
@@ -15,49 +16,69 @@
 
 	const state = getContext<PlotState>('plot-state')
 
-	const marks = $derived.by(() => {
-		const rows = state?.data ?? []
-		const xs = state?.xScale
-		const ys = state?.yScale
-		if (!xs || !ys || !x || !y) return []
-		const selectedRows = state?.selectedRows ?? []
-		const selectedSet = new Set(selectedRows)
-		const out = []
-		const seen = new Set()
-		if (highlight !== null && highlight !== undefined && rows.length) {
-			for (const i of resolveHighlight(rows, highlight, { y })) {
-				const row = rows[i]
-				out.push({
-					key: `h${i}`,
-					cx: scalePos(xs, row[x]),
-					cy: ys(Number(row[y])),
-					row,
-					// A statically-highlighted point that is also selected renders as
-					// selected — selection is the stronger, interactive state.
-					selected: selectedSet.has(row)
-				})
-				seen.add(row)
-			}
+	type Mark = { key: string; cx: number; cy: number; row: Row; selected: boolean }
+	/** Everything both mark builders need, resolved once per derivation. */
+	type Ctx = {
+		rows: Row[]
+		selectedRows: Row[]
+		// Scales come from PlotState (untyped JS), so they stay loose here.
+		xs: (v: unknown) => number
+		ys: (v: number) => number
+		x: string
+		y: string
+	}
+
+	const hasScales = (s: PlotState | undefined) => Boolean(s?.xScale && s?.yScale)
+
+	/** Null until the plot has both scales and both channels — nothing can be placed before then. */
+	const ctx = $derived.by((): Ctx | null => {
+		if (!hasScales(state) || !x || !y) return null
+		return {
+			rows: state.data ?? [],
+			selectedRows: state.selectedRows ?? [],
+			xs: state.xScale,
+			ys: state.yScale,
+			x,
+			y
 		}
-		selectedRows.forEach((row, j) => {
-			if (seen.has(row)) return
-			out.push({
-				key: `s${j}`,
-				cx: scalePos(xs, row[x]),
-				cy: ys(Number(row[y])),
-				row,
-				selected: true
-			})
-		})
-		return out.filter((m) => Number.isFinite(m.cx) && Number.isFinite(m.cy))
 	})
 
-	function resolveLabel(row: Row): string | null {
-		if (!label) return null
-		if (label === true) return String((y ? row[y] : '') ?? '')
-		if (typeof label === 'function') return String(label(row) ?? '')
-		return String(row[label] ?? '')
+	const place = (c: Ctx, row: Row) => ({
+		cx: scalePos(c.xs, row[c.x]),
+		cy: c.ys(Number(row[c.y]))
+	})
+
+	/** Marks for the declarative `highlight` selector. */
+	function highlightMarks(c: Ctx, selector: Props['highlight']): Mark[] {
+		if (selector === null || selector === undefined) return []
+		const selected = new Set(c.selectedRows)
+		return resolveHighlight(c.rows, selector, { y: c.y }).map((i) => ({
+			key: `h${i}`,
+			...place(c, c.rows[i]),
+			row: c.rows[i],
+			// A statically-highlighted point that is also selected renders as
+			// selected — selection is the stronger, interactive state.
+			selected: selected.has(c.rows[i])
+		}))
 	}
+
+	/** Marks for interactive selection, minus any row a highlight mark already covers. */
+	function selectionMarks(c: Ctx, covered: Set<Row>): Mark[] {
+		return c.selectedRows
+			.map((row, j) => ({ row, j }))
+			.filter(({ row }) => !covered.has(row))
+			.map(({ row, j }) => ({ key: `s${j}`, ...place(c, row), row, selected: true }))
+	}
+
+	const isPlaced = (m: Mark) => Number.isFinite(m.cx) && Number.isFinite(m.cy)
+
+	const marks = $derived.by(() => {
+		if (!ctx) return []
+		const highlighted = highlightMarks(ctx, highlight)
+		// Derived from the marks just built, so "already emitted" has one source of truth.
+		const selected = selectionMarks(ctx, new Set(highlighted.map((m) => m.row)))
+		return [...highlighted, ...selected].filter(isPlaced)
+	})
 </script>
 
 {#if marks.length}
@@ -70,7 +91,7 @@
 				data-plot-selected={m.selected ? 'true' : undefined}
 			/>
 			{#if label}
-				{@const text = resolveLabel(m.row)}
+				{@const text = resolveLabel(label, m.row, y)}
 				{#if text}
 					<text x={m.cx} y={m.cy} dy="-8" text-anchor="middle" data-plot-highlight-label
 						>{text}</text

package/dist/geoms/Line.svelte

@@ -3,6 +3,7 @@
 	import type { PlotState } from '../PlotState.svelte.js'
 	import { GeomState } from './lib/GeomState.svelte.js'
 	import { buildLineMarks } from './lib/marks/line.js'
+	import { resolveLabel } from './lib/aesthetics.js'
 	import { buildSymbolPath } from '../lib/brewing/marks/points.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
 	import { buildSelectDetail } from '../lib/select.js'
@@ -47,13 +48,6 @@
 		keyboard = false
 	}: Props = $props()
 
-	function resolveLabel(data: Row): string | null {
-		if (!label) return null
-		if (label === true) return String((y ? data[y] : undefined) ?? '')
-		if (typeof label === 'function') return String(label(data) ?? '')
-		return typeof label === 'string' ? String(data[label] ?? '') : null
-	}
-
 	const plotState = getContext<PlotState>('plot-state')
 
 	const geom = new GeomState(plotState, () => ({
@@ -81,7 +75,14 @@
 		onselect?.(pt.data)
 		if (plotState.interactive)
 			plotState.handleSelect(
-				buildSelectDetail(pt.data, plotState.data.indexOf(pt.data), { x, y }, 'line', seg?.key, event)
+				buildSelectDetail({
+					datum: pt.data,
+					index: plotState.data.indexOf(pt.data),
+					channels: { x, y },
+					geom: 'line',
+					series: seg?.key,
+					event
+				})
 			)
 	}
 </script>
@@ -113,7 +114,7 @@
 			{/if}
 			{#if label}
 				{#each seg.points as pt (`label::${pt.i}`)}
-					{@const text = resolveLabel(pt.data)}
+					{@const text = resolveLabel(label, pt.data, y)}
 					{#if text}
 						<LabelPill
 							x={pt.x + (options.labelOffset?.x ?? 0)}

package/dist/geoms/Point.svelte

@@ -3,6 +3,7 @@
 	import type { PlotState } from '../PlotState.svelte.js'
 	import { GeomState } from './lib/GeomState.svelte.js'
 	import { buildPointMarks } from './lib/marks/point.js'
+	import { resolveLabel } from './lib/aesthetics.js'
 	import { keyboardNav } from '../lib/keyboard-nav.js'
 	import { buildSelectDetail } from '../lib/select.js'
 	import LabelPill from './LabelPill.svelte'
@@ -49,13 +50,6 @@
 		keyboard = false
 	}: Props = $props()
 
-	function resolveLabel(data: Row): string | null {
-		if (!label) return null
-		if (label === true) return String((y ? data[y] : undefined) ?? '')
-		if (typeof label === 'function') return String(label(data) ?? '')
-		return typeof label === 'string' ? String(data[label] ?? '') : null
-	}
-
 	const plotState = getContext<PlotState>('plot-state')
 
 	// All plumbing (register/data/scales/colors) + mark building (geometry + fill/color/alpha)
@@ -80,14 +74,14 @@
 		onselect?.(pt.data)
 		if (plotState.interactive)
 			plotState.handleSelect(
-				buildSelectDetail(
-					pt.data,
-					plotState.data.indexOf(pt.data),
-					{ x, y },
-					'point',
-					seriesField ? pt.data[seriesField] : undefined,
+				buildSelectDetail({
+					datum: pt.data,
+					index: plotState.data.indexOf(pt.data),
+					channels: { x, y },
+					geom: 'point',
+					series: seriesField ? pt.data[seriesField] : undefined,
 					event
-				)
+				})
 			)
 	}
 </script>
@@ -141,7 +135,7 @@
 				/>
 			{/if}
 			{#if label}
-				{@const text = resolveLabel(pt.data)}
+				{@const text = resolveLabel(label, pt.data, y)}
 				{#if text}
 					<LabelPill
 						x={pt.cx + (options.labelOffset?.x ?? 0)}