@ruckc/truss-chart 1.5.0 → 1.6.0

package/dist/BarChart.svelte

@@ -35,7 +35,7 @@
 	type Tip = { x: number; y: number; cat: string; name: string; value: number; color: string; share?: number };
 	let tip = $state<Tip | null>(null);
 
-	const all = $derived(series.slice(0, MAX_SERIES).map((s, i) => ({ ...s, i, color: seriesColor(i) })));
+	const all = $derived(series.slice(0, MAX_SERIES).map((s, i) => ({ ...s, i, color: s.color ?? seriesColor(i) })));
 	const vis = $derived(all.filter((s) => !hidden.includes(s.name)));
 	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]);

package/dist/DonutChart.svelte

@@ -52,6 +52,8 @@
 		});
 	});
 	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);
 </script>
 
 <ChartFrame {title} {subtitle} {items} ontoggle={toggle}>
@@ -62,14 +64,14 @@
 					<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 					<path
 						role="img" d={a.d} fill={a.color} fill-rule="evenodd" class="slice" data-dim={active != null && active !== a.name} tabindex="0"
-						aria-label="{a.name}: {format(a.value)} ({Math.round((a.value / total) * 100)}%)"
+						aria-label="{a.name}: {format(a.value)} ({pct(a.value)}%)"
 						onpointerenter={() => (active = a.name)} onpointerleave={() => (active = null)}
 						onfocus={() => (active = a.name)} onblur={() => (active = null)}
 					/>
 				{/each}
 				<text class="big" x={size / 2} y={size / 2 - 2} text-anchor="middle">{format(focus?.value ?? total)}</text>
 				<text class="small" x={size / 2} y={size / 2 + 16} text-anchor="middle">
-					{focus ? `${focus.name} · ${Math.round((focus.value / total) * 100)}%` : centerLabel}
+					{focus ? `${focus.name} · ${pct(focus.value)}%` : centerLabel}
 				</text>
 			</svg>
 		</div>

package/dist/Histogram.svelte

@@ -50,7 +50,6 @@
 	const yScale = $derived(niceTicks(0, Math.max(...counts, 1), 5));
 	const total = $derived(counts.reduce((a, b) => a + b, 0));
 
-	const inRange = (i: number) => !range || (edges[i + 1] > range[0] && edges[i] < range[1]);
 	const sel = $derived(drag ? ([Math.min(drag.a, drag.b), Math.max(drag.a, drag.b)] as [number, number]) : range);
 
 	function set(r: [number, number] | null) {

package/dist/LineChart.svelte

@@ -35,7 +35,7 @@
 	let hidden = $state<string[]>([]);
 	let hover = $state<number | null>(null);
 
-	const all = $derived(series.slice(0, MAX_SERIES).map((s, i) => ({ ...s, i, color: seriesColor(i) })));
+	const all = $derived(series.slice(0, MAX_SERIES).map((s, i) => ({ ...s, i, color: s.color ?? seriesColor(i) })));
 	const vis = $derived(all.filter((s) => !hidden.includes(s.name)));
 	const isDate = $derived(x[0] instanceof Date);
 	const xs = $derived(x.map((v) => +v));

package/dist/Sparkline.svelte

@@ -13,9 +13,12 @@
 	const X = $derived(linear(0, Math.max(values.length - 1, 1), 3, width - 3));
 	const Y = $derived(linear(Math.min(...pts.map((p) => p.v)), Math.max(...pts.map((p) => p.v)), height - 4, 4));
 	const last = $derived(pts.at(-1));
+	// built in script: template-string interpolation in markup would add unreachable `?? ''` branches
+	// a `null` label is printed as nothing (the caller opted out), which is a real branch here
+	const ariaLabel = $derived(`${label ?? ''}: ${pts.map((p) => p.v).join(', ')}`);
 </script>
 
-<svg {width} {height} role="img" aria-label="{label}: {pts.map((p) => p.v).join(', ')}">
+<svg {width} {height} role="img" aria-label={ariaLabel}>
 	<path d={pts.map((p, k) => `${k ? 'L' : 'M'}${X(p.i).toFixed(1)},${Y(p.v).toFixed(1)}`).join(' ')} fill="none" stroke={color} stroke-width="2" stroke-linejoin="round" stroke-linecap="round" />
 	{#if last}<circle cx={X(last.i)} cy={Y(last.v)} r="3.5" fill={color} stroke="var(--tr-surface-container-low)" stroke-width="2" />{/if}
 </svg>

package/dist/Tooltip.svelte

@@ -3,9 +3,11 @@
 
 	/** Positioned inside a `position: relative` host. Values lead, names follow, line keys not boxes. */
 	let { x, y, width, children }: { x: number; y: number; width: number; children: Snippet } = $props();
+	// built in script: template-string interpolation in markup would add unreachable `?? ''` branches
+	const pos = $derived(`left: ${x}px; top: ${y}px`);
 </script>
 
-<div class="tip" role="status" style:left="{x}px" style:top="{y}px" data-flip={x > width * 0.6}>{@render children()}</div>
+<div class="tip" role="status" style={pos} data-flip={x > width * 0.6}>{@render children()}</div>
 
 <style>
 	.tip { position: absolute; z-index: 5; transform: translate(12px, -50%); min-width: 120px; padding: 6px 10px; pointer-events: none; background: var(--tr-surface-container-highest); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); box-shadow: var(--tr-elevation-2); font-size: var(--tr-text-sm); white-space: nowrap; }

package/dist/types.d.ts

@@ -1,6 +1,12 @@
 export type Series = {
     name: string;
     values: (number | null)[];
+    /**
+     * Overrides the series' palette slot. Any CSS colour or `var(--…)`, used for its line, area, bars,
+     * legend swatch and tooltip swatch. Custom colours bypass the validated colour-blind-safe palette,
+     * so you are responsible for contrast and for keeping series distinguishable from each other.
+     */
+    color?: string;
 };
 export type LegendItem = {
     name: string;

package/package.json

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