@ruckc/truss-chart 1.9.0 → 1.10.0

package/dist/BarChart.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import ChartFrame from './ChartFrame.svelte';
+	import { watchFill } from './fill.js';
 	import Tooltip from './Tooltip.svelte';
 	import type { Series } from './types.js';
 	import { fmtAxis, fmtValue, linear, str, niceTicks, seriesColor, MAX_SERIES } from './util.js';
@@ -22,8 +23,12 @@
 		series: Series[];
 		title?: string;
 		subtitle?: string;
-		/** Plot height in px (horizontal charts grow to fit their categories). */
-		height?: number;
+		/**
+		 * Plot height in px (default 240), or `'fill'` to size to the container's height. `'fill'` measures the
+		 * parent with a ResizeObserver, so the parent needs a definite height (e.g. `height: 360px`, or a grid/flex
+		 * track with a fixed size). A parent with `height: auto` collapses to the 120px minimum. Horizontal charts still grow to fit their categories.
+		 */
+		height?: number | 'fill';
 		/** `true` stacks values (positives up/right of zero, negatives down/left); `'percent'` normalises each category to 100%. */
 		stacked?: boolean | 'percent';
 		/** Bars run left→right with categories down the side — better for long labels and many categories. */
@@ -110,10 +115,22 @@
 	const GAP = 1; // each side of a shared edge yields a 2px surface gap
 	const labelWidth = $derived(Math.min(168, Math.max(48, Math.max(0, ...categories.map((c) => c.length)) * 6.4 + 14)));
 	const trunc = (s: string, px: number) => (s.length * 6.4 > px ? `${s.slice(0, Math.max(1, Math.floor(px / 6.4) - 1))}…` : s);
+
+	// height='fill': plot = container height minus the frame's own chrome (title, legend, key, padding)
+	let wrap = $state<HTMLElement>();
+	let fillH = $state(240);
+	const fill = $derived(height === 'fill');
+	const H = $derived(height === 'fill' ? fillH : height);
+	$effect(() => {
+		if (!fill || !wrap) return;
+		return watchFill(wrap, 'svg[role=img]', (h) => (fillH = h));
+	});
 </script>
 
+{#snippet chart()}
 <ChartFrame {title} {subtitle} {items} ontoggle={toggle}>
 	{#snippet plot(w)}
+		{@const height = H}
 		{@const m = horizontal ? { top: refs.length ? 24 : 10, right: showValues ? 56 : 14, bottom: 26, left: labelWidth } : { top: showValues ? 22 : 12, right: 12, bottom: 28, left: 46 }}
 		{@const bandN = Math.max(categories.length, 1)}
 		{@const plotH = horizontal ? Math.max(height, bandN * (isStack ? 30 : Math.max(1, vis.length) * 16 + 14) + m.top + m.bottom) : height}
@@ -225,8 +242,16 @@
 		</table>
 	{/snippet}
 </ChartFrame>
+{/snippet}
+
+{#if fill}
+	<div class="fillwrap" bind:this={wrap}>{@render chart()}</div>
+{:else}
+	{@render chart()}
+{/if}
 
 <style>
+	.fillwrap { height: 100%; min-height: 0; overflow: hidden; }
 	svg { display: block; overflow: visible; }
 	.grid { stroke: var(--tr-outline-variant); stroke-opacity: 0.6; }
 	.grid[data-zero='true'] { stroke-opacity: 1; }

package/dist/BarChart.svelte.d.ts

@@ -9,8 +9,12 @@ type $$ComponentProps = {
     series: Series[];
     title?: string;
     subtitle?: string;
-    /** Plot height in px (horizontal charts grow to fit their categories). */
-    height?: number;
+    /**
+     * Plot height in px (default 240), or `'fill'` to size to the container's height. `'fill'` measures the
+     * parent with a ResizeObserver, so the parent needs a definite height (e.g. `height: 360px`, or a grid/flex
+     * track with a fixed size). A parent with `height: auto` collapses to the 120px minimum. Horizontal charts still grow to fit their categories.
+     */
+    height?: number | 'fill';
     /** `true` stacks values (positives up/right of zero, negatives down/left); `'percent'` normalises each category to 100%. */
     stacked?: boolean | 'percent';
     /** Bars run left→right with categories down the side — better for long labels and many categories. */

package/dist/ColorScale.svelte

@@ -8,6 +8,8 @@
 		caption,
 		label,
 		palette = 'sequential',
+		gradient,
+		stops,
 		vertical = false,
 		size = 200
 	}: {
@@ -23,6 +25,17 @@
 		label?: string;
 		/** Which palette ramp to draw; match the ramp your marks use. */
 		palette?: ScaleKind;
+		/**
+		 * Any CSS gradient (e.g. `linear-gradient(to right, #fff, #06c)`), drawn exactly as given: write the
+		 * direction yourself (`to top` for a `vertical` bar). Takes precedence over `stops` and `palette`.
+		 */
+		gradient?: string;
+		/**
+		 * Colours from the low end to the high end, evenly spaced, e.g. `['#fff', '#06c', '#003']`. Built into a
+		 * linear gradient that runs in the bar's direction (`vertical` runs bottom to top). Colours may be any CSS
+		 * colour or `var(--token)`. Takes precedence over `palette`; ignored when `gradient` is set, or with fewer than two stops.
+		 */
+		stops?: string[];
 		/** Bar runs bottom (low) to top (high) instead of left to right. */
 		vertical?: boolean;
 		/** Bar length in px. */
@@ -30,7 +43,13 @@
 	} = $props();
 
 	const name = $derived(label ?? `${caption ? `${caption}: ` : ''}${low} to ${high}`);
-	const bg = $derived(gradientFrom(palette, vertical ? 'to top' : 'to right'));
+	// precedence: gradient > stops (2 or more) > palette
+	const bg = $derived.by(() => {
+		const dir = vertical ? 'to top' : 'to right';
+		if (gradient) return gradient;
+		if (stops && stops.length > 1) return `linear-gradient(${dir}, ${stops.join(', ')})`;
+		return gradientFrom(palette, dir);
+	});
 	const ends = $derived(vertical ? [high, low] : [low, high]);
 </script>
 

package/dist/ColorScale.svelte.d.ts

@@ -12,6 +12,17 @@ type $$ComponentProps = {
     label?: string;
     /** Which palette ramp to draw; match the ramp your marks use. */
     palette?: ScaleKind;
+    /**
+     * Any CSS gradient (e.g. `linear-gradient(to right, #fff, #06c)`), drawn exactly as given: write the
+     * direction yourself (`to top` for a `vertical` bar). Takes precedence over `stops` and `palette`.
+     */
+    gradient?: string;
+    /**
+     * Colours from the low end to the high end, evenly spaced, e.g. `['#fff', '#06c', '#003']`. Built into a
+     * linear gradient that runs in the bar's direction (`vertical` runs bottom to top). Colours may be any CSS
+     * colour or `var(--token)`. Takes precedence over `palette`; ignored when `gradient` is set, or with fewer than two stops.
+     */
+    stops?: string[];
     /** Bar runs bottom (low) to top (high) instead of left to right. */
     vertical?: boolean;
     /** Bar length in px. */

package/dist/DensityChart.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import ChartFrame from './ChartFrame.svelte';
+	import { watchFill } from './fill.js';
 	import ColorScale from './ColorScale.svelte';
 	import Tooltip from './Tooltip.svelte';
 	import { bin, DEFAULT_RAMP, extentOf, isHome, mergeExtent, nearest, panView, parseColor, prepare, rampColor, zoomView, type DensityHighlight, type DensityHover, type DensityPoint, type Prepared, type View } from './density.js';
@@ -121,16 +122,7 @@
 	$effect(() => {
 		void [mode, colorKey, items.length];
 		if (!fill || !wrap) return;
-		const el = wrap;
-		const measure = () => {
-			const fig = el.querySelector('figure'), cv = el.querySelector('canvas');
-			if (!fig || !cv) return;
-			fillH = Math.max(120, Math.floor(el.clientHeight - (fig.getBoundingClientRect().height - cv.getBoundingClientRect().height)));
-		};
-		const ro = new ResizeObserver(measure);
-		ro.observe(el);
-		measure();
-		return () => ro.disconnect();
+		return watchFill(wrap, 'canvas', (h) => (fillH = h));
 	});
 
 	const m = $derived({ top: 32, right: 16, bottom: xLabel ? 44 : 28, left: yLabel ? 62 : 48 });

package/dist/DonutChart.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import ChartFrame from './ChartFrame.svelte';
+	import { watchFill } from './fill.js';
 	import { fmtValue, seriesColor, str, MAX_SERIES } from './util.js';
 
 	let {
@@ -7,13 +8,22 @@
 		title,
 		subtitle,
 		size = 200,
+		height,
 		format = fmtValue,
 		centerLabel = 'Total'
 	}: {
 		slices: { name: string; value: number }[];
 		title?: string;
 		subtitle?: string;
+		/** Donut diameter in px (default 200). Capped to the available width when `height` is `'fill'`. */
 		size?: number;
+		/**
+		 * Overrides `size`: a number sets the diameter in px, or `'fill'` sizes the donut to the container's height
+		 * (and never wider than the container). `'fill'` measures the parent with a ResizeObserver, so the parent
+		 * needs a definite height (e.g. `height: 360px`, or a grid/flex track with a fixed size). A parent with
+		 * `height: auto` collapses to the 120px minimum.
+		 */
+		height?: number | 'fill';
 		format?: (n: number) => string;
 		centerLabel?: string;
 	} = $props();
@@ -34,9 +44,20 @@
 	const items = $derived(base.map((s) => ({ name: s.name, color: s.color, hidden: hidden.includes(s.name) })));
 	const toggle = (n: string) => (hidden = hidden.includes(n) ? hidden.filter((h) => h !== n) : [...hidden, n]);
 
-	const r = $derived(size / 2 - 6);
-	const th = $derived(Math.max(14, size * 0.14));
-	const arcs = $derived.by(() => {
+	// height='fill': the svg = container height minus the frame's own chrome (title, legend, padding)
+	let wrap = $state<HTMLElement>();
+	let fillH = $state(200);
+	const fill = $derived(height === 'fill');
+	$effect(() => {
+		if (!fill || !wrap) return;
+		return watchFill(wrap, 'svg', (h) => (fillH = h));
+	});
+	const diameter = (w: number) => (height === 'fill' ? Math.max(120, Math.min(fillH, w)) : (height ?? size));
+
+	// geometry for a diameter of `size` px; built per render because 'fill' also depends on the available width
+	const arcsFor = (size: number) => {
+		const r = size / 2 - 6;
+		const th = Math.max(14, size * 0.14);
 		let a0 = -Math.PI / 2;
 		return vis.map((s) => {
 			const sweep = total ? (s.value / total) * Math.PI * 2 : 0;
@@ -50,7 +71,7 @@
 			a0 = a1;
 			return { ...s, d };
 		});
-	});
+};
 	const focus = $derived(vis.find((s) => s.name === active));
 	/** Share of the visible total; 0 (not NaN) when everything visible is 0. */
 	const pct = (v: number) => (total ? Math.round((v / total) * 100) : 0);
@@ -58,8 +79,11 @@
 	const sliceLabel = (a: { name: string; value: number }) => `${a.name}: ${str(format(a.value))} (${pct(a.value)}%)`;
 </script>
 
+{#snippet chart()}
 <ChartFrame {title} {subtitle} {items} ontoggle={toggle}>
-	{#snippet plot()}
+	{#snippet plot(w)}
+		{@const size = diameter(w)}
+		{@const arcs = arcsFor(size)}
 		<div class="wrap">
 			<svg width={size} height={size} role="img" aria-label="{title ?? 'Donut chart'}. A table view is available.">
 				{#each arcs as a (a.name)}
@@ -88,8 +112,16 @@
 		</table>
 	{/snippet}
 </ChartFrame>
+{/snippet}
+
+{#if fill}
+	<div class="fillwrap" bind:this={wrap}>{@render chart()}</div>
+{:else}
+	{@render chart()}
+{/if}
 
 <style>
+	.fillwrap { height: 100%; min-height: 0; overflow: hidden; }
 	.wrap { display: flex; justify-content: center; padding: 8px 0; }
 	/* 2px surface gap between adjacent fills */
 	.slice { stroke: var(--tr-surface-container-low); stroke-width: 2; outline: none; transition: opacity var(--tr-dur-fast) var(--tr-ease); }

package/dist/DonutChart.svelte.d.ts

@@ -5,7 +5,15 @@ type $$ComponentProps = {
     }[];
     title?: string;
     subtitle?: string;
+    /** Donut diameter in px (default 200). Capped to the available width when `height` is `'fill'`. */
     size?: number;
+    /**
+     * Overrides `size`: a number sets the diameter in px, or `'fill'` sizes the donut to the container's height
+     * (and never wider than the container). `'fill'` measures the parent with a ResizeObserver, so the parent
+     * needs a definite height (e.g. `height: 360px`, or a grid/flex track with a fixed size). A parent with
+     * `height: auto` collapses to the 120px minimum.
+     */
+    height?: number | 'fill';
     format?: (n: number) => string;
     centerLabel?: string;
 };

package/dist/Histogram.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import ChartFrame from './ChartFrame.svelte';
+	import { watchFill } from './fill.js';
 	import Tooltip from './Tooltip.svelte';
 	import { barPath, fmtAxis, fmtValue, linear, niceTicks, seriesColor, str } from './util.js';
 
@@ -21,7 +22,12 @@
 		domain?: [number, number];
 		title?: string;
 		subtitle?: string;
-		height?: number;
+		/**
+		 * Plot height in px (default 240), or `'fill'` to size to the container's height. `'fill'` measures the
+		 * parent with a ResizeObserver, so the parent needs a definite height (e.g. `height: 360px`, or a grid/flex
+		 * track with a fixed size). A parent with `height: auto` collapses to the 120px minimum.
+		 */
+		height?: number | 'fill';
 		color?: string;
 		xFormat?: (n: number) => string;
 		/** Brushed selection [from, to] on the value axis (snaps to bin edges). Drag to select, click to clear. */
@@ -61,10 +67,22 @@
 	const span = (i: number) => `${str(xFormat(edges[i]))} – ${str(xFormat(edges[i + 1]))}`;
 	const snapLo = (v: number) => grid.min + Math.floor((v - grid.min) / step + 1e-9) * step;
 	const snapHi = (v: number) => grid.min + Math.ceil((v - grid.min) / step - 1e-9) * step;
+
+	// height='fill': plot = container height minus the frame's own chrome (title, legend, key, padding)
+	let wrap = $state<HTMLElement>();
+	let fillH = $state(240);
+	const fill = $derived(height === 'fill');
+	const H = $derived(height === 'fill' ? fillH : height);
+	$effect(() => {
+		if (!fill || !wrap) return;
+		return watchFill(wrap, 'svg', (h) => (fillH = h));
+	});
 </script>
 
+{#snippet chart()}
 <ChartFrame {title} {subtitle}>
 	{#snippet plot(w)}
+		{@const height = H}
 		{@const m = { top: 12, right: 12, bottom: 28, left: 46 }}
 		{@const X = linear(grid.min, grid.max, m.left, w - m.right)}
 		{@const Y = linear(yScale.min, yScale.max, height - m.bottom, m.top)}
@@ -147,8 +165,16 @@
 		</table>
 	{/snippet}
 </ChartFrame>
+{/snippet}
+
+{#if fill}
+	<div class="fillwrap" bind:this={wrap}>{@render chart()}</div>
+{:else}
+	{@render chart()}
+{/if}
 
 <style>
+	.fillwrap { height: 100%; min-height: 0; overflow: hidden; }
 	svg { display: block; outline: none; overflow: visible; }
 	svg:focus-visible { border-radius: var(--tr-radius-sm); box-shadow: var(--tr-focus-ring); }
 	.grid { stroke: var(--tr-outline-variant); stroke-opacity: 0.6; }

package/dist/Histogram.svelte.d.ts

@@ -5,7 +5,12 @@ type $$ComponentProps = {
     domain?: [number, number];
     title?: string;
     subtitle?: string;
-    height?: number;
+    /**
+     * Plot height in px (default 240), or `'fill'` to size to the container's height. `'fill'` measures the
+     * parent with a ResizeObserver, so the parent needs a definite height (e.g. `height: 360px`, or a grid/flex
+     * track with a fixed size). A parent with `height: auto` collapses to the 120px minimum.
+     */
+    height?: number | 'fill';
     color?: string;
     xFormat?: (n: number) => string;
     /** Brushed selection [from, to] on the value axis (snaps to bin edges). Drag to select, click to clear. */

package/dist/LineChart.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import ChartFrame from './ChartFrame.svelte';
 	import Tooltip from './Tooltip.svelte';
+	import { watchFill } from './fill.js';
 	import type { Series, Band, ReferenceLine } from './types.js';
 	import { fmtAxis, fmtValue, fmtX, isPos, linear, logLinear, logTicks, niceTicks, seriesColor, str, spreadLabels, MAX_SERIES } from './util.js';
 
@@ -96,16 +97,7 @@
 	const H = $derived(height === 'fill' ? fillH : height);
 	$effect(() => {
 		if (!fill || !wrap) return;
-		const el = wrap;
-		const measure = () => {
-			const fig = el.querySelector('figure'), svg = el.querySelector('svg[role=group]');
-			if (!fig || !svg) return;
-			fillH = Math.max(120, Math.floor(el.clientHeight - (fig.getBoundingClientRect().height - svg.getBoundingClientRect().height)));
-		};
-		const ro = new ResizeObserver(measure);
-		ro.observe(el);
-		measure();
-		return () => ro.disconnect();
+		return watchFill(wrap, 'svg[role=group]', (h) => (fillH = h));
 	});
 	/** Per visible series: [lo, hi] band at each x (stacked), else lo = 0, hi = value. */
 	const bands = $derived.by(() => {

package/dist/ScatterChart.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import ChartFrame from './ChartFrame.svelte';
+	import { watchFill } from './fill.js';
 	import Tooltip from './Tooltip.svelte';
 	import type { ScatterPoint } from './types.js';
 	import { fmtAxis, fmtValue, linear, niceTicks, seriesColor, MAX_SERIES } from './util.js';
@@ -21,7 +22,12 @@
 		points: ScatterPoint[];
 		title?: string;
 		subtitle?: string;
-		height?: number;
+		/**
+		 * Plot height in px (default 280), or `'fill'` to size to the container's height. `'fill'` measures the
+		 * parent with a ResizeObserver, so the parent needs a definite height (e.g. `height: 360px`, or a grid/flex
+		 * track with a fixed size). A parent with `height: auto` collapses to the 120px minimum.
+		 */
+		height?: number | 'fill';
 		xLabel?: string;
 		yLabel?: string;
 		/** Name of the size dimension in tooltips and the table. */
@@ -63,10 +69,22 @@
 	const cur = $derived(active != null ? (vis[active] ?? null) : null);
 	const readout = (p: (typeof vis)[number]) =>
 		`${p.label ?? 'Point'}${p.group ? `, ${p.group}` : ''}: ${xLabel ?? 'x'} ${xFormat(p.x)}, ${yLabel ?? 'y'} ${yFormat(p.y)}${p.size != null ? `, ${sizeLabel.toLowerCase()} ${sizeFormat(p.size)}` : ''}`;
+
+	// height='fill': plot = container height minus the frame's own chrome (title, legend, key, padding)
+	let wrap = $state<HTMLElement>();
+	let fillH = $state(280);
+	const fill = $derived(height === 'fill');
+	const H = $derived(height === 'fill' ? fillH : height);
+	$effect(() => {
+		if (!fill || !wrap) return;
+		return watchFill(wrap, 'svg[role=group]', (h) => (fillH = h));
+	});
 </script>
 
+{#snippet chart()}
 <ChartFrame {title} {subtitle} {items} ontoggle={toggle}>
 	{#snippet plot(w)}
+		{@const height = H}
 		{@const m = { top: 14, right: 16, bottom: xLabel ? 44 : 28, left: yLabel ? 62 : 48 }}
 		{@const X = linear(xScale.min, xScale.max, m.left, w - m.right)}
 		{@const Y = linear(yScale.min, yScale.max, height - m.bottom, m.top)}
@@ -136,8 +154,16 @@
 		</table>
 	{/snippet}
 </ChartFrame>
+{/snippet}
+
+{#if fill}
+	<div class="fillwrap" bind:this={wrap}>{@render chart()}</div>
+{:else}
+	{@render chart()}
+{/if}
 
 <style>
+	.fillwrap { height: 100%; min-height: 0; overflow: hidden; }
 	svg { display: block; outline: none; overflow: visible; }
 	svg:focus-visible { border-radius: var(--tr-radius-sm); box-shadow: var(--tr-focus-ring); }
 	.grid { stroke: var(--tr-outline-variant); stroke-opacity: 0.6; stroke-width: 1; }

package/dist/ScatterChart.svelte.d.ts

@@ -4,7 +4,12 @@ type $$ComponentProps = {
     points: ScatterPoint[];
     title?: string;
     subtitle?: string;
-    height?: number;
+    /**
+     * Plot height in px (default 280), or `'fill'` to size to the container's height. `'fill'` measures the
+     * parent with a ResizeObserver, so the parent needs a definite height (e.g. `height: 360px`, or a grid/flex
+     * track with a fixed size). A parent with `height: auto` collapses to the 120px minimum.
+     */
+    height?: number | 'fill';
     xLabel?: string;
     yLabel?: string;
     /** Name of the size dimension in tooltips and the table. */

package/dist/fill.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Shared `height="fill"` measuring for the charts. Observes `el` (the fill wrapper) and reports the plot height:
+ * the wrapper's height minus the frame's own chrome (title, legend, key, padding), found by comparing the
+ * `<figure>` with the plot element matched by `probe`. The result is floored at 120px.
+ * Returns a disposer that disconnects the observer.
+ */
+export declare function watchFill(el: HTMLElement, probe: string, onHeight: (h: number) => void): () => void;

package/dist/fill.js

@@ -0,0 +1,18 @@
+/**
+ * Shared `height="fill"` measuring for the charts. Observes `el` (the fill wrapper) and reports the plot height:
+ * the wrapper's height minus the frame's own chrome (title, legend, key, padding), found by comparing the
+ * `<figure>` with the plot element matched by `probe`. The result is floored at 120px.
+ * Returns a disposer that disconnects the observer.
+ */
+export function watchFill(el, probe, onHeight) {
+    const measure = () => {
+        const fig = el.querySelector('figure'), plot = el.querySelector(probe);
+        if (!fig || !plot)
+            return;
+        onHeight(Math.max(120, Math.floor(el.clientHeight - (fig.getBoundingClientRect().height - plot.getBoundingClientRect().height))));
+    };
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    measure();
+    return () => ro.disconnect();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ruckc/truss-chart",
-	"version": "1.9.0",
+	"version": "1.10.0",
 	"description": "Zero-dependency SVG charts for Truss UI",
 	"type": "module",
 	"license": "MIT",