@rokkit/chart 1.3.15 → 1.4.1

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 })
 	})
 }