@ruckc/truss-chart 1.2.0 → 1.3.0

package/dist/LineChart.svelte

@@ -11,6 +11,7 @@
 		subtitle,
 		height = 240,
 		area = false,
+		stacked = false,
 		zeroBaseline = false,
 		directLabels = true,
 		yFormat = fmtValue
@@ -23,6 +24,8 @@
 		subtitle?: string;
 		height?: number;
 		area?: boolean;
+		/** Only meaningful with `area`. `true` stacks the series; `'percent'` normalises each x to 100%. Missing values count as 0 in a stack; tooltips and the table show the raw values. */
+		stacked?: boolean | 'percent';
 		zeroBaseline?: boolean;
 		/** Name labels at line ends when ≤ 4 series. */
 		directLabels?: boolean;
@@ -36,19 +39,39 @@
 	const vis = $derived(all.filter((s) => !hidden.includes(s.name)));
 	const isDate = $derived(x[0] instanceof Date);
 	const xs = $derived(x.map((v) => +v));
+	const isStack = $derived(area && !!stacked);
+	const percent = $derived(area && stacked === 'percent');
+	/** Per visible series: [lo, hi] band at each x (stacked), else lo = 0, hi = value. */
+	const bands = $derived.by(() => {
+		if (!isStack) return vis.map((s) => s.values.map((v) => (v == null ? null : { lo: 0, hi: v })));
+		const out = vis.map((s) => s.values.map(() => ({ lo: 0, hi: 0 })));
+		xs.forEach((_, i) => {
+			const total = percent ? vis.reduce((a, s) => a + Math.abs(s.values[i] ?? 0), 0) || 1 : 1;
+			let acc = 0;
+			vis.forEach((s, k) => {
+				const v = percent ? (Math.abs(s.values[i] ?? 0) / total) * 100 : (s.values[i] ?? 0);
+				out[k][i] = { lo: acc, hi: acc + v };
+				acc += v;
+			});
+		});
+		return out;
+	});
+	const share = (i: number, k: number) => { const b = bands[k][i]; return b ? b.hi - b.lo : 0; };
 	const labelled = $derived(directLabels && all.length > 1 && all.length <= 4);
 	const items = $derived(all.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 yScale = $derived.by(() => {
 		let lo = Infinity, hi = -Infinity;
-		for (const s of vis) for (const v of s.values) if (v != null) { lo = Math.min(lo, v); hi = Math.max(hi, v); }
+		for (const b of bands) for (const v of b) if (v != null) { lo = Math.min(lo, v.lo, v.hi); hi = Math.max(hi, v.lo, v.hi); }
+		if (percent) hi = 100;
 		if (!isFinite(lo)) { lo = 0; hi = 1; }
 		if (area || zeroBaseline) lo = Math.min(lo, 0);
 		return niceTicks(lo, hi, 5);
 	});
 
 	function segments(values: (number | null)[]) {
+		if (isStack) return [values.map((_, i) => i)];
 		const out: number[][] = [];
 		let cur: number[] = [];
 		values.forEach((v, i) => { if (v == null) { if (cur.length) out.push(cur); cur = []; } else cur.push(i); });
@@ -64,7 +87,7 @@
 		{@const Y = linear(yScale.min, yScale.max, height - m.bottom, m.top)}
 		{@const span = Math.max(...xs) - Math.min(...xs)}
 		{@const xTicks = xs.length <= 8 ? xs : niceTicks(Math.min(...xs), Math.max(...xs), Math.max(2, Math.floor(w / 100))).ticks.filter((t) => t >= Math.min(...xs) && t <= Math.max(...xs))}
-		{@const ends = vis.map((s) => { const k = s.values.findLastIndex((v) => v != null); return k < 0 ? null : { s, y: Y(s.values[k]!) }; }).filter((e) => !!e)}
+		{@const ends = vis.map((s, si) => { const k = s.values.findLastIndex((v) => v != null); return k < 0 ? null : { s, y: Y(bands[si][k]!.hi) }; }).filter((e) => !!e)}
 		{@const labelY = spreadLabels(ends.map((e) => e.y), 14, m.top + 4, height - m.bottom)}
 
 		<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
@@ -95,14 +118,14 @@
 				<text class="tick" x={X(t)} y={height - 8} text-anchor="middle">{fmtX(t, span, isDate)}</text>
 			{/each}
 
-			{#each vis as s (s.name)}
+			{#each vis as s, si (s.name)}
 				{#if area}
 					{#each segments(s.values) as seg}
-						<path class="area" fill={s.color}
-							d="M{X(xs[seg[0]])},{Y(Math.max(yScale.min, 0))} {seg.map((i) => `L${X(xs[i])},${Y(s.values[i]!)}`).join(' ')} L{X(xs[seg.at(-1)!])},{Y(Math.max(yScale.min, 0))}Z" />
+						<path class="area" class:stack={isStack} fill={s.color}
+							d="M{seg.map((i) => `${X(xs[i])},${Y(bands[si][i]!.hi)}`).join(' L')} L{seg.toReversed().map((i) => `${X(xs[i])},${Y(bands[si][i]!.lo)}`).join(' L')}Z" />
 					{/each}
 				{/if}
-				<path class="line" stroke={s.color} d={segments(s.values).map((seg) => seg.map((i, k) => `${k ? 'L' : 'M'}${X(xs[i]).toFixed(1)},${Y(s.values[i]!).toFixed(1)}`).join(' ')).join(' ')} />
+				<path class="line" stroke={s.color} d={segments(s.values).map((seg) => seg.map((i, k) => `${k ? 'L' : 'M'}${X(xs[i]).toFixed(1)},${Y(bands[si][i]!.hi).toFixed(1)}`).join(' ')).join(' ')} />
 			{/each}
 
 			{#each ends as e, k}
@@ -111,8 +134,8 @@
 
 			{#if hover != null}
 				<line class="cross" x1={X(xs[hover])} x2={X(xs[hover])} y1={m.top} y2={height - m.bottom} />
-				{#each vis as s}
-					{#if s.values[hover] != null}<circle class="dot" cx={X(xs[hover])} cy={Y(s.values[hover]!)} r="4" fill={s.color} />{/if}
+				{#each vis as s, si}
+					{#if bands[si][hover] != null}<circle class="dot" cx={X(xs[hover])} cy={Y(bands[si][hover]!.hi)} r="4" fill={s.color} />{/if}
 				{/each}
 			{/if}
 		</svg>
@@ -120,8 +143,8 @@
 		{#if hover != null}
 			<Tooltip x={X(xs[hover])} y={height / 2} width={w}>
 				<div class="head">{fmtX(xs[hover], span, isDate)}</div>
-				{#each vis as s}
-					<div class="row"><span class="line-key" style:background={s.color}></span><b>{s.values[hover] == null ? '—' : yFormat(s.values[hover]!)}</b><span class="name">{s.name}</span></div>
+				{#each vis as s, si}
+					<div class="row"><span class="line-key" style:background={s.color}></span><b>{s.values[hover] == null ? '—' : yFormat(s.values[hover]!)}</b><span class="name">{s.name}{#if percent && s.values[hover] != null} · {fmtValue(share(hover, si))}%{/if}</span></div>
 				{/each}
 			</Tooltip>
 		{/if}
@@ -132,7 +155,7 @@
 			<thead><tr><th>{isDate ? 'Date' : 'X'}</th>{#each all as s}<th>{s.name}</th>{/each}</tr></thead>
 			<tbody>
 				{#each xs as v, i}
-					<tr><td>{fmtX(v, Math.max(...xs) - Math.min(...xs), isDate)}</td>{#each all as s}<td>{s.values[i] == null ? '—' : yFormat(s.values[i]!)}</td>{/each}</tr>
+					<tr><td>{fmtX(v, Math.max(...xs) - Math.min(...xs), isDate)}</td>{#each all as s}<td>{s.values[i] == null ? '—' : yFormat(s.values[i]!)}{#if percent && s.values[i] != null && !hidden.includes(s.name)} ({fmtValue(share(i, vis.indexOf(s)))}%){/if}</td>{/each}</tr>
 				{/each}
 			</tbody>
 		</table>
@@ -146,6 +169,7 @@
 	.tick { fill: var(--tr-on-surface-variant); font-size: var(--tr-text-xs); font-variant-numeric: tabular-nums; }
 	.line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
 	.area { fill-opacity: 0.14; }
+	.area.stack { fill-opacity: 0.55; }
 	.direct { fill: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); font-weight: 600; }
 	.cross { stroke: var(--tr-outline); stroke-width: 1; stroke-dasharray: 3 3; }
 	.dot { stroke: var(--tr-surface-container-low); stroke-width: 2; }

package/dist/LineChart.svelte.d.ts

@@ -8,6 +8,8 @@ type $$ComponentProps = {
     subtitle?: string;
     height?: number;
     area?: boolean;
+    /** Only meaningful with `area`. `true` stacks the series; `'percent'` normalises each x to 100%. Missing values count as 0 in a stack; tooltips and the table show the raw values. */
+    stacked?: boolean | 'percent';
     zeroBaseline?: boolean;
     /** Name labels at line ends when ≤ 4 series. */
     directLabels?: boolean;

package/dist/ScatterChart.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+	import ChartFrame from './ChartFrame.svelte';
+	import Tooltip from './Tooltip.svelte';
+	import type { ScatterPoint } from './types.js';
+	import { fmtAxis, fmtValue, linear, niceTicks, seriesColor, MAX_SERIES } from './util.js';
+
+	let {
+		points,
+		title,
+		subtitle,
+		height = 280,
+		xLabel,
+		yLabel,
+		sizeLabel = 'Size',
+		sizeRange = [8, 24],
+		xFormat = fmtValue,
+		yFormat = fmtValue,
+		sizeFormat = fmtValue
+	}: {
+		/** `size` encodes a third value as marker diameter; `group` picks the (fixed-order, max 8) palette colour and legend entry. */
+		points: ScatterPoint[];
+		title?: string;
+		subtitle?: string;
+		height?: number;
+		xLabel?: string;
+		yLabel?: string;
+		/** Name of the size dimension in tooltips and the table. */
+		sizeLabel?: string;
+		/** Marker diameter in px for the smallest and largest `size`. Never drawn below 8px. */
+		sizeRange?: [number, number];
+		xFormat?: (n: number) => string;
+		yFormat?: (n: number) => string;
+		sizeFormat?: (n: number) => string;
+	} = $props();
+
+	let hidden = $state<string[]>([]);
+	let active = $state<number | null>(null);
+
+	const groups = $derived([...new Set(points.map((p) => p.group).filter((g): g is string => g != null))].slice(0, MAX_SERIES));
+	const colorOf = (g?: string) => seriesColor(Math.max(0, g == null ? 0 : groups.indexOf(g)));
+	const items = $derived(groups.map((g) => ({ name: g, color: colorOf(g), hidden: hidden.includes(g) })));
+	const toggle = (n: string) => (hidden = hidden.includes(n) ? hidden.filter((h) => h !== n) : [...hidden, n]);
+	const hasSize = $derived(points.some((p) => p.size != null));
+
+	/** Visible points in reading order (x, then y); keyboard navigation walks this list. */
+	const vis = $derived(
+		points
+			.map((p, idx) => ({ ...p, idx }))
+			.filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y) && !(p.group != null && hidden.includes(p.group)))
+			.sort((a, b) => a.x - b.x || a.y - b.y)
+	);
+	const sizes = $derived(vis.map((p) => p.size).filter((v): v is number => v != null && Number.isFinite(v)));
+	const sMin = $derived(Math.min(...sizes));
+	const sMax = $derived(Math.max(...sizes));
+	const diameter = (s?: number) => {
+		const lo = Math.max(8, sizeRange[0]), hi = Math.max(lo, sizeRange[1]);
+		if (s == null || !sizes.length || !Number.isFinite(s)) return lo;
+		return lo + (sMax === sMin ? 0.5 : (s - sMin) / (sMax - sMin)) * (hi - lo);
+	};
+
+	const xScale = $derived(vis.length ? niceTicks(Math.min(...vis.map((p) => p.x)), Math.max(...vis.map((p) => p.x)), 6) : niceTicks(0, 1, 5));
+	const yScale = $derived(vis.length ? niceTicks(Math.min(...vis.map((p) => p.y)), Math.max(...vis.map((p) => p.y)), 5) : niceTicks(0, 1, 5));
+	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)}` : ''}`;
+</script>
+
+<ChartFrame {title} {subtitle} {items} ontoggle={toggle}>
+	{#snippet plot(w)}
+		{@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)}
+
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+		<svg
+			width={w} {height} role="group" tabindex="0"
+			aria-label="{title ?? 'Scatter chart'}, {vis.length} points. Use arrow keys to move between points."
+			onpointermove={(e) => {
+				const r = e.currentTarget.getBoundingClientRect();
+				const px = e.clientX - r.left, py = e.clientY - r.top;
+				let best = -1, bd = 28 * 28;
+				vis.forEach((p, i) => { const d = (X(p.x) - px) ** 2 + (Y(p.y) - py) ** 2; if (d < bd) { bd = d; best = i; } });
+				active = best < 0 ? null : best;
+			}}
+			onpointerleave={() => (active = null)}
+			onblur={() => (active = null)}
+			onkeydown={(e) => {
+				const n = vis.length;
+				if (!n) return;
+				if (e.key === 'ArrowRight' || e.key === 'ArrowUp') active = Math.min(n - 1, (active ?? -1) + 1);
+				else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') active = Math.max(0, (active ?? n) - 1);
+				else if (e.key === 'Home') active = 0;
+				else if (e.key === 'End') active = n - 1;
+				else if (e.key === 'Escape') active = null;
+				else return;
+				e.preventDefault();
+			}}
+		>
+			{#each yScale.ticks as t}
+				<line class="grid" x1={m.left} x2={w - m.right} y1={Y(t)} y2={Y(t)} />
+				<text class="tick" x={m.left - 8} y={Y(t)} text-anchor="end" dominant-baseline="middle">{fmtAxis(t)}</text>
+			{/each}
+			{#each xScale.ticks as t}
+				<text class="tick" x={X(t)} y={height - m.bottom + 16} text-anchor="middle">{fmtAxis(t)}</text>
+			{/each}
+			{#if xLabel}<text class="axis" x={(m.left + w - m.right) / 2} y={height - 6} text-anchor="middle">{xLabel}</text>{/if}
+			{#if yLabel}<text class="axis" transform="translate(12 {(m.top + height - m.bottom) / 2}) rotate(-90)" text-anchor="middle">{yLabel}</text>{/if}
+
+			{#each vis as p, i (p.idx)}
+				<circle class="pt" class:on={i === active} cx={X(p.x)} cy={Y(p.y)} r={diameter(p.size) / 2} fill={colorOf(p.group)} />
+			{/each}
+			{#if cur}
+				<circle class="focus" cx={X(cur.x)} cy={Y(cur.y)} r={diameter(cur.size) / 2 + 4} />
+			{/if}
+		</svg>
+		<div class="sr" role="status" aria-live="polite">{cur ? readout(cur) : ''}</div>
+
+		{#if cur}
+			<Tooltip x={X(cur.x)} y={Y(cur.y)} width={w}>
+				<div class="head">{cur.label ?? 'Point'}{#if cur.group} · {cur.group}{/if}</div>
+				<div class="row"><b>{xFormat(cur.x)}</b><span class="name">{xLabel ?? 'x'}</span></div>
+				<div class="row"><b>{yFormat(cur.y)}</b><span class="name">{yLabel ?? 'y'}</span></div>
+				{#if cur.size != null}<div class="row"><b>{sizeFormat(cur.size)}</b><span class="name">{sizeLabel}</span></div>{/if}
+			</Tooltip>
+		{/if}
+	{/snippet}
+
+	{#snippet table()}
+		<table>
+			<thead><tr><th>Point</th>{#if groups.length}<th>Group</th>{/if}<th>{xLabel ?? 'X'}</th><th>{yLabel ?? 'Y'}</th>{#if hasSize}<th>{sizeLabel}</th>{/if}</tr></thead>
+			<tbody>
+				{#each points as p}
+					<tr><td>{p.label ?? '—'}</td>{#if groups.length}<td>{p.group ?? '—'}</td>{/if}<td>{xFormat(p.x)}</td><td>{yFormat(p.y)}</td>{#if hasSize}<td>{p.size == null ? '—' : sizeFormat(p.size)}</td>{/if}</tr>
+				{/each}
+			</tbody>
+		</table>
+	{/snippet}
+</ChartFrame>
+
+<style>
+	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; }
+	.tick { fill: var(--tr-on-surface-variant); font-size: var(--tr-text-xs); font-variant-numeric: tabular-nums; }
+	.axis { fill: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); font-weight: 600; }
+	.pt { fill-opacity: 0.85; stroke: var(--tr-surface-container-low); stroke-width: 2; }
+	.pt.on { fill-opacity: 1; }
+	.focus { fill: none; stroke: var(--tr-on-surface); stroke-width: 2; pointer-events: none; }
+	.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+	.head { color: var(--tr-on-surface-variant); margin-bottom: 4px; }
+	.row { display: flex; align-items: center; gap: 8px; line-height: 1.5; }
+	.row b { color: var(--tr-on-surface); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
+	.name { color: var(--tr-on-surface-variant); }
+</style>

package/dist/ScatterChart.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ScatterPoint } from './types.js';
+type $$ComponentProps = {
+    /** `size` encodes a third value as marker diameter; `group` picks the (fixed-order, max 8) palette colour and legend entry. */
+    points: ScatterPoint[];
+    title?: string;
+    subtitle?: string;
+    height?: number;
+    xLabel?: string;
+    yLabel?: string;
+    /** Name of the size dimension in tooltips and the table. */
+    sizeLabel?: string;
+    /** Marker diameter in px for the smallest and largest `size`. Never drawn below 8px. */
+    sizeRange?: [number, number];
+    xFormat?: (n: number) => string;
+    yFormat?: (n: number) => string;
+    sizeFormat?: (n: number) => string;
+};
+declare const ScatterChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type ScatterChart = ReturnType<typeof ScatterChart>;
+export default ScatterChart;

package/dist/StatTile.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import Sparkline from './Sparkline.svelte';
+	import { fmtValue } from './util.js';
+
+	let {
+		label,
+		value,
+		format,
+		delta,
+		deltaLabel = 'vs previous',
+		deltaGoodDirection = 'up',
+		spark
+	}: {
+		label: string;
+		value: number | string;
+		/** Formats a numeric `value` (default: grouped, max 2 decimals). */
+		format?: (n: number) => string;
+		/** Change vs the previous period, in percent (4.2 means +4.2%). */
+		delta?: number;
+		deltaLabel?: string;
+		/** Which direction of change is good: picks the success or danger colour. The arrow and signed text carry the meaning without colour. */
+		deltaGoodDirection?: 'up' | 'down';
+		/** Recent values for a trailing trend line. */
+		spark?: number[];
+	} = $props();
+
+	const shown = $derived(typeof value === 'number' ? (format ?? fmtValue)(value) : value);
+	const dir = $derived(delta == null || delta === 0 ? 'flat' : delta > 0 ? 'up' : 'down');
+	const tone = $derived(dir === 'flat' ? 'neutral' : dir === deltaGoodDirection ? 'good' : 'bad');
+	const deltaText = $derived(delta == null ? '' : `${delta > 0 ? '+' : delta < 0 ? '−' : ''}${fmtValue(Math.abs(delta))}%`);
+	const summary = $derived(
+		`${label}: ${shown}.` +
+			(delta == null ? '' : dir === 'flat' ? ` No change ${deltaLabel}.` : ` ${dir === 'up' ? 'Up' : 'Down'} ${fmtValue(Math.abs(delta))}% ${deltaLabel}, ${tone === 'good' ? 'favourable' : 'unfavourable'}.`) +
+			(spark && spark.length > 1 ? ` Trend over ${spark.length} points, from ${fmtValue(spark[0])} to ${fmtValue(spark.at(-1)!)}.` : '')
+	);
+</script>
+
+<div class="tile" role="group" aria-label={summary}>
+	<div class="label" aria-hidden="true">{label}</div>
+	<div class="row" aria-hidden="true">
+		<div class="value">{shown}</div>
+		{#if spark && spark.length > 1}<Sparkline values={spark} {label} />{/if}
+	</div>
+	{#if delta != null}
+		<div class="delta {tone}" data-dir={dir} aria-hidden="true">
+			<svg viewBox="0 0 12 12" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+				{#if dir === 'up'}<path d="M6 10V2M2.5 5.5 6 2l3.5 3.5" />{:else if dir === 'down'}<path d="M6 2v8M2.5 6.5 6 10l3.5-3.5" />{:else}<path d="M2 6h8" />{/if}
+			</svg>
+			<b>{deltaText}</b><span class="vs">{deltaLabel}</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: var(--tr-surface-container-low); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); color: var(--tr-on-surface); font-family: var(--tr-font-sans); }
+	.label { color: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); font-weight: 600; }
+	.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
+	.value { font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
+	.delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--tr-text-sm); font-variant-numeric: tabular-nums; }
+	.delta.good { color: var(--tr-success); }
+	.delta.bad { color: var(--tr-danger); }
+	.delta.neutral { color: var(--tr-on-surface-variant); }
+	.vs { color: var(--tr-on-surface-variant); }
+</style>

package/dist/StatTile.svelte.d.ts

@@ -0,0 +1,16 @@
+type $$ComponentProps = {
+    label: string;
+    value: number | string;
+    /** Formats a numeric `value` (default: grouped, max 2 decimals). */
+    format?: (n: number) => string;
+    /** Change vs the previous period, in percent (4.2 means +4.2%). */
+    delta?: number;
+    deltaLabel?: string;
+    /** Which direction of change is good: picks the success or danger colour. The arrow and signed text carry the meaning without colour. */
+    deltaGoodDirection?: 'up' | 'down';
+    /** Recent values for a trailing trend line. */
+    spark?: number[];
+};
+declare const StatTile: import("svelte").Component<$$ComponentProps, {}, "">;
+type StatTile = ReturnType<typeof StatTile>;
+export default StatTile;

package/dist/index.d.ts

@@ -3,5 +3,7 @@ export { default as BarChart } from './BarChart.svelte';
 export { default as DonutChart } from './DonutChart.svelte';
 export { default as Histogram } from './Histogram.svelte';
 export { default as Sparkline } from './Sparkline.svelte';
+export { default as ScatterChart } from './ScatterChart.svelte';
+export { default as StatTile } from './StatTile.svelte';
 export { seriesColor, niceTicks, linear } from './util.js';
-export type { Series } from './types.js';
+export type { Series, ScatterPoint } from './types.js';

package/dist/index.js

@@ -3,4 +3,6 @@ export { default as BarChart } from './BarChart.svelte';
 export { default as DonutChart } from './DonutChart.svelte';
 export { default as Histogram } from './Histogram.svelte';
 export { default as Sparkline } from './Sparkline.svelte';
+export { default as ScatterChart } from './ScatterChart.svelte';
+export { default as StatTile } from './StatTile.svelte';
 export { seriesColor, niceTicks, linear } from './util.js';

package/dist/types.d.ts

@@ -7,3 +7,10 @@ export type LegendItem = {
     color: string;
     hidden?: boolean;
 };
+export type ScatterPoint = {
+    x: number;
+    y: number;
+    size?: number;
+    group?: string;
+    label?: string;
+};

package/package.json

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