@heyramzi/ui 0.0.0-stage → 6.0.1

package/src/charts/bar-chart.svelte

@@ -0,0 +1,269 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	// =========================
+	// IMPORTS
+	// =========================
+	import "./bar-chart.css";
+	import { Axis, Bars, Chart, Highlight, Svg, Tooltip } from "layerchart";
+	import { scaleBand } from "d3-scale";
+	import Figure from "./figure.svelte";
+	import { TOOLTIP_GAP, TOOLTIP_TOP } from "./motion.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	type Series = { key: keyof TData & string; label: string; color: string };
+
+	type Props = {
+		data: TData[];
+		xKey: keyof TData & string;
+		/** The bar's value. Required unless `series` is set. */
+		yKey?: keyof TData & string;
+		/** Stacks these keys into one bar per row; the bar's value is their sum. */
+		series?: Series[];
+		color?: string;
+		/** A fill per bar, for bands whose meaning changes along the axis. */
+		colorOf?: (d: TData) => string;
+		/** Body height in px, or "fill" to grow to the parent's height (parent must
+		 * be a flex column that gives the chart a determinate height). Default 240. */
+		height?: number | "fill";
+		orientation?: "vertical" | "horizontal";
+		/** Left padding for horizontal charts (label space). Default 80. */
+		leftPadding?: number;
+		formatValue?: (v: number) => string;
+		formatX?: (v: unknown) => string;
+		/** Axis tick label. Return "" to skip a tick. Defaults to formatX. */
+		formatTick?: (v: unknown) => string;
+		/** Screen-reader summary; also renders an sr-only data table when set. */
+		label?: string;
+		/** Column header for the x values in the sr-only table. */
+		xLabel?: string;
+		/** Column header for the y values in the sr-only table, and the tooltip's label. */
+		yLabel?: string;
+		/** Show the value/label figure above the chart. */
+		showFigure?: boolean;
+		class?: string;
+	};
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		data,
+		xKey,
+		yKey,
+		series,
+		color = "var(--chart-1)",
+		colorOf,
+		height = 240,
+		orientation = "vertical",
+		leftPadding = 80,
+		formatValue = (v) => v.toLocaleString(),
+		formatX = (v) => String(v),
+		formatTick,
+		label,
+		xLabel,
+		yLabel,
+		showFigure = true,
+		class: className,
+	}: Props = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	let active = $state<TData | null>(null);
+
+	// ========================= FUNCTIONS ========================= WHY: called from the tooltip header's value expression so it re-runs on every active-band change; an unread {@const} side effect only evaluates once.
+
+	// The microtask defers the state write out of template evaluation.
+	function trackActive(d: TData): string {
+		queueMicrotask(() => {
+			active = d;
+		});
+		return formatX(d[xKey]);
+	}
+
+	function valueOf(d: TData): number {
+		if (series) return series.reduce((sum, s) => sum + Number(d[s.key] ?? 0), 0);
+		return Number(yKey ? (d[yKey] ?? 0) : 0);
+	}
+
+	/** Where one series' segment starts and ends inside its stacked bar. */
+	function span(d: TData, key: string): [number, number] {
+		let at = 0;
+		for (const s of series ?? []) {
+			const next = at + Number(d[s.key] ?? 0);
+			if (s.key === key) return [at, next];
+			at = next;
+		}
+		return [0, 0];
+	}
+
+	// =========================
+	// DERIVED
+	// =========================
+	const yMax = $derived(Math.max(0, ...data.map(valueOf)));
+	const total = $derived(data.reduce((sum, d) => sum + valueOf(d), 0));
+	const valueLabel = $derived(yLabel ?? String(yKey ?? "value"));
+	const fill = $derived(height === "fill");
+	const horizontal = $derived(orientation === "horizontal");
+	const radius = $derived(horizontal ? "right" : "top");
+	// One Bars layer per fill: a stacked series, a colorOf group, or the single color.
+	const layers = $derived.by(() => {
+		if (series) {
+			return series.map((s) => ({
+				key: s.key,
+				color: s.color,
+				rows: data,
+				at: (d: TData) => span(d, s.key),
+			}));
+		}
+		const groups = new Map<string, TData[]>();
+		for (const d of data) {
+			const c = colorOf?.(d) ?? color;
+			groups.set(c, [...(groups.get(c) ?? []), d]);
+		}
+		return [...groups].map(([c, rows]) => ({ key: c, color: c, rows, at: undefined }));
+	});
+	const activeColor = $derived(active && colorOf ? colorOf(active) : color);
+</script>
+
+<!-- =========================== -->
+<!-- BAR CHART -->
+<!-- =========================== -->
+<div
+	class="hr-bar-chart {className ?? ''}"
+	class:hr-bar-horizontal={horizontal}
+	class:hr-bar-fill={fill}
+	class:hr-bar-has-active={active !== null && !series}
+	role="img"
+	aria-label={label ?? "Bar chart"}
+	onpointerleave={() => (active = null)}
+>
+	{#if showFigure}
+		<Figure
+			value={active ? valueOf(active) : total}
+			color="var(--chart-1)"
+			eyebrow={active ? formatX(active[xKey]) : "Total"}
+			format={formatValue}
+			size="md"
+		/>
+	{/if}
+
+	<div class="hr-chart-body" style:height={fill ? null : `${height}px`}>
+		{#if data.length === 0}
+			<div class="empty"><p>No data</p></div>
+		{:else}
+			<Chart
+				{data}
+				x={horizontal ? valueOf : xKey}
+				y={horizontal ? xKey : valueOf}
+				xScale={horizontal ? undefined : scaleBand().padding(0.3)}
+				yScale={horizontal ? scaleBand().padding(0.3) : undefined}
+				xDomain={horizontal ? [0, yMax || 1] : undefined}
+				yDomain={horizontal ? undefined : [0, yMax || 1]}
+				xNice={horizontal}
+				yNice={!horizontal}
+				padding={{ left: horizontal ? leftPadding : 48, bottom: 28, top: 8, right: 12 }}
+				tooltipContext={{ mode: "band" }}
+			>
+				<Svg>
+					{#if horizontal}
+						<Axis placement="left" format={(v) => (formatTick ?? formatX)(v)} />
+						<Axis placement="bottom" format={(v) => formatValue(Number(v))} ticks={4} />
+						<g class="hr-bar-grid">
+							<Axis placement="bottom" grid rule={false} ticks={4} format={() => ""} />
+						</g>
+					{:else}
+						<Axis placement="left" format={(v) => formatValue(Number(v))} ticks={4} />
+						<Axis placement="bottom" format={(v) => (formatTick ?? formatX)(v)} />
+						<g class="hr-bar-grid">
+							<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />
+						</g>
+					{/if}
+					{#each layers as layer (layer.key)}
+						{#if layer.at && horizontal}
+							<Bars x={layer.at} style="fill: {layer.color}" class="hr-bar-bars" />
+						{:else if layer.at}
+							<Bars y={layer.at} style="fill: {layer.color}" class="hr-bar-bars" />
+						{:else}
+							<Bars
+								data={layer.rows}
+								rounded={radius}
+								radius={4}
+								style="fill: {layer.color}"
+								class="hr-bar-bars"
+							/>
+						{/if}
+					{/each}
+					<!-- WHY: the band tooltip layer eats pointer events, so bar :hover never
+				     fires. The active bar is a Highlight copy; motion "none" keeps it from
+				     sliding between bands. -->
+					{#if !series}
+						<Highlight
+							motion="none"
+							bar={{ rounded: radius, radius: 4, fill: activeColor, class: "hr-bar-active" }}
+						/>
+					{/if}
+				</Svg>
+				<Tooltip.Root
+					x={horizontal ? "pointer" : "data"}
+					y={horizontal ? "data" : TOOLTIP_TOP}
+					xOffset={TOOLTIP_GAP}
+				>
+					{#snippet children({ data: d })}
+						<Tooltip.Header value={trackActive(d as TData)} />
+						<Tooltip.List>
+							{#if series}
+								{#each series as s (s.key)}
+									<Tooltip.Item
+										label={s.label}
+										value={formatValue(Number(d[s.key] ?? 0))}
+										color={s.color}
+									/>
+								{/each}
+							{:else}
+								<Tooltip.Item
+									label={valueLabel}
+									value={formatValue(valueOf(d as TData))}
+									color={colorOf ? colorOf(d as TData) : color}
+								/>
+							{/if}
+						</Tooltip.List>
+					{/snippet}
+				</Tooltip.Root>
+			</Chart>
+		{/if}
+	</div>
+
+	{#if label && data.length > 0}
+		<table class="hr-sr-only">
+			<caption>{label}</caption>
+			<thead>
+				<tr>
+					<th scope="col">{xLabel}</th>
+					{#if series}
+						{#each series as s (s.key)}
+							<th scope="col">{s.label}</th>
+						{/each}
+					{:else}
+						<th scope="col">{yLabel}</th>
+					{/if}
+				</tr>
+			</thead>
+			<tbody>
+				{#each data as d, i (i)}
+					<tr>
+						<th scope="row">{formatX(d[xKey])}</th>
+						{#if series}
+							{#each series as s (s.key)}
+								<td>{formatValue(Number(d[s.key] ?? 0))}</td>
+							{/each}
+						{:else}
+							<td>{formatValue(valueOf(d))}</td>
+						{/if}
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	{/if}
+</div>

package/src/charts/charts.css

@@ -0,0 +1,201 @@
+/* Global theming for layerchart-rendered chrome shared by every chart in this
+   package (tooltip surface, header, rows). Ships with `@heyramzi/ui/charts`, so
+   any consumer that defines the shadcn token set gets a legible tooltip in both
+   themes for free.
+
+   WHY: layerchart's built-in `default` tooltip paints itself with
+   `light-dark(var(--color-surface-100, white), var(--color-surface-300, black))`
+   and a `backdrop-filter` blur. Apps that don't define `--color-surface-*` (and
+   don't set `color-scheme`) fall back to a translucent white card, which is
+   unreadable on a dark page. These rules repaint it with `--popover` /
+   `--border` / `--muted-foreground`, which already flip per theme. The selectors
+   stay unlayered so they beat layerchart's `@layer component` defaults
+   regardless of specificity. */
+
+.lc-tooltip-container[data-variant="default"] {
+  color: var(--popover-foreground, var(--foreground));
+  background-color: var(--popover, #fff);
+  border: 1px solid var(--border, transparent);
+  border-radius: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  min-width: 8.75rem;
+  backdrop-filter: none;
+  box-shadow:
+    0 1px 2px -1px oklch(0 0 0 / 0.2),
+    0 10px 28px -10px oklch(0 0 0 / 0.32);
+  /* WHY: opacity only; the container's transform is inline positioning, so
+	   animating transform here would fight it and make the tooltip jump. */
+  transform-origin: top left;
+  animation: hr-tooltip-in var(--duration-fast, 250ms) var(--ease-smooth-out) both;
+}
+
+/* WHY `scale` and `translate`, not `transform`: the container's inline transform is
+   its position, and the individual properties compose with it instead of fighting. */
+@keyframes hr-tooltip-in {
+  from {
+    opacity: 0;
+    scale: var(--scale-large, 0.96);
+    translate: calc(var(--distance-small, 6px) * -1) 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lc-tooltip-container[data-variant="default"] {
+    animation: none;
+  }
+}
+
+/* bklit-ui's panel: a small title with no rule under it, and a dot on every row. */
+.lc-tooltip-header {
+  color: var(--popover-foreground, var(--foreground));
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-bottom: none;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0;
+}
+
+.lc-tooltip-list {
+  gap: 0.375rem 1rem;
+  font-size: 0.8125rem;
+}
+
+.lc-tooltip-item-color {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+.lc-tooltip-item-label,
+.lc-tooltip-container .label {
+  color: var(--muted-foreground);
+}
+
+.lc-tooltip-item-value,
+.lc-tooltip-container .value {
+  color: var(--popover-foreground, var(--foreground));
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Shared chart tokens, held at zero specificity by `:where()`. The reveal pair
+   is the entrance every chart shares; motion.ts mirrors its duration. */
+:where(
+  .hr-area-chart,
+  .hr-bar-chart,
+  .hr-line-chart,
+  .hr-sparkline,
+  .hr-number-chart,
+  .hr-stat-card,
+  .hr-legend,
+  .hr-ts-chart,
+  .hr-donut-chart,
+  .hr-ring,
+  .hr-gauge
+) {
+  --chart-label: var(--muted-foreground, oklch(0.5 0.01 286));
+  --chart-grid: color-mix(in srgb, var(--border, oklch(0.5 0.01 286)) 65%, transparent);
+  --chart-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --chart-motion-fast: 150ms;
+  --chart-motion: 250ms;
+  --chart-motion-slow: 800ms;
+  --chart-motion-reveal: 1100ms;
+  --chart-ease-reveal: cubic-bezier(0.85, 0, 0.15, 1);
+  --chart-stagger: 30ms;
+  --chart-crosshair: color-mix(
+    in srgb,
+    var(--muted-foreground, oklch(0.5 0.01 286)) 60%,
+    transparent
+  );
+  --chart-card-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.04), 0 1px 3px 0 oklch(0 0 0 / 0.06);
+}
+
+/* Shared layerchart chrome: axis labels, grid rules, and hover highlights were
+   duplicated identically across every chart's scoped <style>. Centralize them
+   here, scoped to the chart roots, so the look is defined once. `:where()` keeps
+   specificity at 0 so a component can still override locally if it must. */
+:where(
+    .hr-area-chart,
+    .hr-bar-chart,
+    .hr-line-chart,
+    .hr-scatter-chart,
+    .hr-live-line-chart,
+    .hr-sparkline,
+    .hr-stat-card,
+    .hr-donut-chart
+  )
+  .lc-axis-tick-label {
+  fill: var(--chart-label);
+  font-size: 11px;
+}
+:where(
+    .hr-area-chart,
+    .hr-bar-chart,
+    .hr-line-chart,
+    .hr-scatter-chart,
+    .hr-live-line-chart,
+    .hr-sparkline,
+    .hr-stat-card,
+    .hr-donut-chart
+  )
+  .lc-axis-tick {
+  stroke: transparent;
+}
+:where(
+    .hr-area-chart,
+    .hr-bar-chart,
+    .hr-line-chart,
+    .hr-scatter-chart,
+    .hr-live-line-chart,
+    .hr-sparkline,
+    .hr-stat-card,
+    .hr-donut-chart
+  )
+  :is(.lc-grid-x-rule, .lc-grid-y-rule) {
+  stroke: var(--chart-grid);
+  stroke-dasharray: 4 4;
+}
+:where(
+    .hr-area-chart,
+    .hr-bar-chart,
+    .hr-line-chart,
+    .hr-scatter-chart,
+    .hr-live-line-chart,
+    .hr-sparkline,
+    .hr-stat-card,
+    .hr-donut-chart
+  )
+  .lc-highlight-point {
+  stroke: var(--background, white);
+  stroke-width: 2;
+}
+:where(
+    .hr-area-chart,
+    .hr-bar-chart,
+    .hr-line-chart,
+    .hr-scatter-chart,
+    .hr-live-line-chart,
+    .hr-sparkline,
+    .hr-stat-card,
+    .hr-donut-chart
+  )
+  .lc-highlight-line {
+  stroke: var(--chart-grid);
+  stroke-width: 1;
+  stroke-dasharray: none;
+}
+/* bklit-ui's hover: the series drops to 0.3 and hover-focus.svelte redraws the
+   stretch around the point at full strength. */
+.hr-hover-dim {
+  transition: opacity 400ms ease-in-out;
+}
+.hr-hover-dim.hr-hover-dimmed {
+  opacity: 0.3;
+}
+@media (prefers-reduced-motion: reduce) {
+  .hr-hover-dim {
+    transition: none;
+  }
+}
+.hr-crosshair-stop {
+  stop-color: var(--chart-crosshair);
+}

package/src/charts/crosshair.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { getChartContext } from "layerchart";
+
+	// =========================
+	// TYPES
+	// =========================
+	type Props = {
+		/** Gradient id. Paint the highlight line with `stroke: url(#id)`. */
+		id: string;
+	};
+
+	// =========================
+	// PROPS
+	// =========================
+	let { id }: Props = $props();
+
+	const ctx = getChartContext();
+</script>
+
+<!-- =========================== -->
+<!-- CROSSHAIR -->
+<!-- =========================== -->
+<!-- WHY userSpaceOnUse: a vertical line has a zero-width bounding box, so an
+     objectBoundingBox gradient on it paints nothing. -->
+<defs>
+	<linearGradient {id} gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2={ctx.height}>
+		<stop offset="0" class="hr-crosshair-stop" stop-opacity="0" />
+		<stop offset="0.12" class="hr-crosshair-stop" />
+		<stop offset="0.88" class="hr-crosshair-stop" />
+		<stop offset="1" class="hr-crosshair-stop" stop-opacity="0" />
+	</linearGradient>
+</defs>

package/src/charts/donut-chart.css

@@ -0,0 +1,56 @@
+/* Styles for DonutChart. Plain stylesheet (see area-chart.css for why).
+   Selectors are namespaced under `.hr-donut-chart`. */
+
+.hr-donut-chart {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.hr-donut-chart .empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  border: 1px dashed var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
+  border-radius: 0.5rem;
+}
+.hr-donut-chart .empty p {
+  font-size: 0.8125rem;
+  color: var(--chart-label, oklch(0.5 0.01 286));
+  margin: 0;
+}
+
+/* The slice slides out a little slower than it slides back: a close is always the quicker. */
+.hr-donut-chart .hr-donut-arc {
+  cursor: pointer;
+  transition:
+    opacity var(--chart-motion-fast, 150ms) ease,
+    translate var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+}
+.hr-donut-chart .hr-donut-arc[data-hovered] {
+  transition:
+    opacity var(--chart-motion-fast, 150ms) ease,
+    translate var(--duration-fast, 250ms) var(--ease-smooth-out);
+}
+
+.hr-donut-chart .hr-donut-center-value {
+  fill: var(--foreground, oklch(0.18 0.02 240));
+  font-size: 16px;
+  font-weight: 600;
+  font-feature-settings: "tnum";
+  transition: opacity 180ms ease;
+}
+
+.hr-donut-chart .hr-donut-center-label {
+  fill: var(--chart-label, oklch(0.5 0.01 286));
+  font-size: 11px;
+  transition: opacity 180ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hr-donut-chart .hr-donut-arc,
+  .hr-donut-chart .hr-donut-arc[data-hovered] {
+    transition: opacity 120ms ease;
+  }
+}