@rokkit/chart 1.3.14 → 1.3.15

package/dist/AnimatedPlot.svelte

@@ -202,7 +202,10 @@
 	})
 
 	onDestroy(() => {
-		cancelAnimationFrame(rafId)
+		// onDestroy is the one lifecycle hook that also runs during SSR, where
+		// cancelAnimationFrame is undefined — guard it so the component can be
+		// server-rendered / prerendered (rafId is only ever set in the browser).
+		if (typeof cancelAnimationFrame !== 'undefined') cancelAnimationFrame(rafId)
 		clearInterval(reducedInterval)
 	})
 

package/dist/Plot.svelte

@@ -58,6 +58,13 @@
 		onselect?: (detail: unknown) => void
 		selectable?: boolean
 		selected?: Row[]
+		/** Data-coordinate crossing point of the axes: `[xCross, yCross]`. Drives
+		 *  quadrant mode — where the origin sits relative to the domain makes a chart
+		 *  1- / 2- / 4-quadrant. Omit a component to leave that axis auto (crosses at 0
+		 *  when the domain spans it, else edge-pinned). Also settable via `spec.axisOrigin`. */
+		axisOrigin?: [number | undefined, number | undefined]
+		/** Nudge an edge-pinned axis outward by N px (Q1 only). Also via `spec.axisOffset`. */
+		axisOffset?: number
 		/** Animate marks on data/flip changes (opt-out for e.g. AnimatedPlot, which
 		 *  tweens its own frames). Enabled one frame after the width settles so the
 		 *  initial layout paints un-animated. Default `true`. */
@@ -94,6 +101,8 @@
 		onselect = undefined,
 		selectable = false,
 		selected = $bindable([]),
+		axisOrigin = undefined,
+		axisOffset = undefined,
 		animate = true,
 		children
 	}: Props = $props()
@@ -142,6 +151,8 @@
 			colorScheme: spec?.colorScheme,
 			colorMidpoint: spec?.colorMidpoint,
 			orientation: orientation ?? spec?.orientation,
+			axisOrigin: spec?.axisOrigin ?? axisOrigin,
+			axisOffset: spec?.axisOffset ?? axisOffset,
 			sort: spec?.sort,
 			continuousCategory: spec?.continuousCategory,
 			chartPreset,

package/dist/Plot.svelte.d.ts

@@ -41,6 +41,13 @@ type Props = {
     onselect?: (detail: unknown) => void;
     selectable?: boolean;
     selected?: Row[];
+    /** Data-coordinate crossing point of the axes: `[xCross, yCross]`. Drives
+     *  quadrant mode — where the origin sits relative to the domain makes a chart
+     *  1- / 2- / 4-quadrant. Omit a component to leave that axis auto (crosses at 0
+     *  when the domain spans it, else edge-pinned). Also settable via `spec.axisOrigin`. */
+    axisOrigin?: [number | undefined, number | undefined];
+    /** Nudge an edge-pinned axis outward by N px (Q1 only). Also via `spec.axisOffset`. */
+    axisOffset?: number;
     /** Animate marks on data/flip changes (opt-out for e.g. AnimatedPlot, which
      *  tweens its own frames). Enabled one frame after the width settles so the
      *  initial layout paints un-animated. Default `true`. */

package/dist/PlotState.svelte.js

@@ -425,6 +425,7 @@ export class PlotState {
 		this.#selectable = config.selectable ?? false
 		if (config.selected) this.#selected = new SvelteSet(config.selected)
 		this.#axisOffset = config.axisOffset ?? 0
+		this.axisOrigin = config.axisOrigin ?? [undefined, undefined]
 		this.#marginOverride = config.margin ?? undefined
 		this.#orientationOverride = config.orientation ?? undefined
 		this.#continuousCategory = config.continuousCategory ?? false
@@ -453,6 +454,7 @@ export class PlotState {
 		if (config.onselect !== undefined) this.#onselect = config.onselect
 		if (config.selectable !== undefined) this.#selectable = config.selectable
 		if (config.axisOffset !== undefined) this.#axisOffset = config.axisOffset
+		this.axisOrigin = config.axisOrigin ?? [undefined, undefined]
 		this.#marginOverride = config.margin ?? undefined
 		this.#orientationOverride = config.orientation ?? undefined
 		this.#continuousCategory = config.continuousCategory ?? false

package/dist/Sparkline.svelte

@@ -142,15 +142,40 @@
 		return gen(values)
 	})
 
+	// Area fill anchors at the baseline when one is in effect (so a mixed-sign
+	// area fills up above / down below the crossing), else at the pixel bottom.
+	const baselineY = $derived(effectiveBaseline !== undefined ? yScale(effectiveBaseline) : null)
+
 	const areaPath = $derived.by(() => {
 		const gen = d3area<number>()
 			.x((_, i) => xScale(i))
-			.y0(height)
+			.y0(baselineY ?? height)
 			.y1((v) => yScale(v))
 		if (curve === 'smooth') gen.curve(curveCatmullRom)
 		return gen(values)
 	})
 
+	// When a baseline is in effect, split the fill into above/below regions (each
+	// clamped at the baseline) so themes can colour positive vs negative fills.
+	const areaAbovePath = $derived.by(() => {
+		if (baselineY === null) return null
+		const gen = d3area<number>()
+			.x((_, i) => xScale(i))
+			.y0(baselineY)
+			.y1((v) => Math.min(yScale(v), baselineY))
+		if (curve === 'smooth') gen.curve(curveCatmullRom)
+		return gen(values)
+	})
+	const areaBelowPath = $derived.by(() => {
+		if (baselineY === null) return null
+		const gen = d3area<number>()
+			.x((_, i) => xScale(i))
+			.y0(baselineY)
+			.y1((v) => Math.max(yScale(v), baselineY))
+		if (curve === 'smooth') gen.curve(curveCatmullRom)
+		return gen(values)
+	})
+
 	const barWidth = $derived(Math.max(1, width / values.length - 1))
 
 	const strokeColor = $derived(`rgb(var(--color-${color}-500, 100,116,139))`)
@@ -160,7 +185,7 @@
 	const patternMarks = $derived(pattern ? (PATTERNS[pattern] ?? null) : null)
 </script>
 
-<svg {width} {height} style="overflow: visible; display: block;">
+<svg {width} {height} style="overflow: visible; display: block; --spark-area-fill: {fillColor};">
 	{#if patternMarks}
 		<defs>
 			<PatternDef id={patternId} marks={patternMarks} stroke={strokeColor} />
@@ -177,7 +202,22 @@
 			stroke-linecap="round"
 		/>
 	{:else if type === 'area'}
-		<path d={areaPath} fill={patternMarks ? `url(#${patternId})` : fillColor} stroke="none" />
+		{#if baselineY !== null}
+			<path
+				d={areaAbovePath}
+				data-plot-area
+				data-plot-area-sign="above"
+				fill={patternMarks ? `url(#${patternId})` : undefined}
+			/>
+			<path
+				d={areaBelowPath}
+				data-plot-area
+				data-plot-area-sign="below"
+				fill={patternMarks ? `url(#${patternId})` : undefined}
+			/>
+		{:else}
+			<path d={areaPath} data-plot-area fill={patternMarks ? `url(#${patternId})` : undefined} />
+		{/if}
 		<path
 			d={linePath}
 			fill="none"
@@ -233,6 +273,19 @@
 </svg>
 
 <style>
+	[data-plot-area] {
+		fill: var(--spark-area-fill, rgba(var(--color-primary-300), 0.25));
+		stroke: none;
+	}
+	/* Positive vs negative regions of a baseline-anchored area — default to the
+	   same fill; a theme can distinguish them via these vars. */
+	[data-plot-area][data-plot-area-sign='above'] {
+		fill: var(--chart-area-above-color, var(--spark-area-fill));
+	}
+	[data-plot-area][data-plot-area-sign='below'] {
+		fill: var(--chart-area-below-color, var(--spark-area-fill));
+	}
+
 	[data-plot-baseline] {
 		stroke: var(--chart-baseline-color, currentColor);
 		stroke-width: var(--chart-baseline-width, 1);

package/dist/lib/plot/types.d.ts

@@ -33,6 +33,7 @@ export type PlotSpec = {
     xLabel?: string | undefined;
     yLabel?: string | undefined;
     axisOrigin?: [number, number] | undefined;
+    axisOffset?: number | undefined;
     colorScale?: "categorical" | "sequential" | "diverging" | undefined;
     colorScheme?: string | undefined;
     colorMidpoint?: number | undefined;

package/dist/lib/plot/types.js

@@ -33,6 +33,7 @@
  * @property {string} [xLabel]
  * @property {string} [yLabel]
  * @property {[number, number]} [axisOrigin]
+ * @property {number} [axisOffset]
  * @property {'categorical'|'sequential'|'diverging'} [colorScale]
  * @property {string} [colorScheme]
  * @property {number} [colorMidpoint]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/chart",
-  "version": "1.3.14",
+  "version": "1.3.15",
   "type": "module",
   "description": "Data-driven chart components",
   "repository": {