@heyramzi/ui 0.0.0-stage → 6.1.0

package/src/charts/ring-chart.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import "./ring-chart.css";
+	import { cn } from "@heyramzi/utils";
+	import AnimatedValue from "./animated-value.svelte";
+
+	// =========================
+	// TYPES
+	// =========================
+	type RingData = {
+		label: string;
+		value: number;
+		/** Denominator for the progress arc. */
+		maxValue: number;
+		/** CSS color or var. Falls back to --chart-1..5. */
+		color?: string;
+	};
+
+	type Props = {
+		data: RingData[];
+		/** Fixed square size in px. Omit to fill the parent (responsive). */
+		size?: number;
+		/** Ring thickness in viewBox units. */
+		strokeWidth?: number;
+		/** Gap between concentric rings in viewBox units. */
+		ringGap?: number;
+		/** Inner radius of the innermost ring in viewBox units. */
+		baseInnerRadius?: number;
+		lineCap?: "round" | "butt";
+		/** Center label when nothing is hovered. */
+		defaultLabel?: string;
+		formatValue?: (v: number) => string;
+		/** Animate arcs on mount. */
+		animate?: boolean;
+		/** Glow the hovered ring. */
+		showGlow?: boolean;
+		/** Hovered ring index, bindable for legend hover-sync. */
+		hoveredIndex?: number | null;
+		onHoverChange?: (index: number | null) => void;
+		minWidth?: number;
+		ariaLabel?: string;
+		class?: string;
+	};
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		data,
+		size,
+		strokeWidth = 11,
+		ringGap = 6,
+		baseInnerRadius = 48,
+		lineCap = "round",
+		defaultLabel = "Total",
+		formatValue = (v) => v.toLocaleString(),
+		animate = true,
+		showGlow = true,
+		hoveredIndex = $bindable(null),
+		onHoverChange,
+		minWidth = 170,
+		ariaLabel,
+		class: className,
+	}: Props = $props();
+
+	// =========================
+	// DERIVED
+	// =========================
+	const rings = $derived.by(() =>
+		data.map((d, i) => {
+			const radius = baseInnerRadius + i * (strokeWidth + ringGap) + strokeWidth / 2;
+			const progress = d.maxValue > 0 ? Math.max(0, Math.min(1, d.value / d.maxValue)) : 0;
+			return {
+				...d,
+				index: i,
+				radius,
+				progress,
+				color: d.color ?? `var(--chart-${(i % 5) + 1})`,
+			};
+		}),
+	);
+	const maxRadius = $derived(
+		rings.length ? rings[rings.length - 1].radius + strokeWidth / 2 : baseInnerRadius,
+	);
+	const vb = $derived(maxRadius * 2 + 4);
+	const center = $derived(vb / 2);
+	const total = $derived(data.reduce((sum, d) => sum + d.value, 0));
+	const hoveredRing = $derived(hoveredIndex != null ? (rings[hoveredIndex] ?? null) : null);
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function setHover(index: number | null) {
+		hoveredIndex = index;
+		onHoverChange?.(index);
+	}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div
+	class={cn("hr-ring", className)}
+	class:glow={showGlow}
+	style:width={size ? `${size}px` : "100%"}
+	style:min-width="{minWidth}px"
+	role="img"
+	aria-label={ariaLabel ?? `${defaultLabel}: ${formatValue(total)}`}
+>
+	<!-- no-inline-svg-ignore -->
+	<svg viewBox="0 0 {vb} {vb}" aria-hidden="true">
+		<g transform="rotate(-90 {center} {center})">
+			{#each rings as ring (ring.index)}
+				<circle
+					class="track"
+					cx={center}
+					cy={center}
+					r={ring.radius}
+					fill="none"
+					stroke={ring.color}
+					stroke-width={strokeWidth}
+				/>
+			{/each}
+			{#each rings as ring (ring.index)}
+				{@const dimmed = hoveredIndex !== null && hoveredIndex !== ring.index}
+				<circle
+					class="fill"
+					class:animate
+					cx={center}
+					cy={center}
+					r={ring.radius}
+					pathLength="100"
+					fill="none"
+					stroke={ring.color}
+					stroke-width={strokeWidth}
+					stroke-linecap={lineCap}
+					style:stroke-dashoffset={100 - ring.progress * 100}
+					style:opacity={dimmed ? 0.25 : 1}
+					style:animation-delay="{160 + ring.index * 120}ms"
+					style:--ring-color={ring.color}
+					onmouseenter={() => setHover(ring.index)}
+					onmouseleave={() => setHover(null)}
+				></circle>
+			{/each}
+		</g>
+	</svg>
+
+	<div class="center">
+		<span class="value">
+			<AnimatedValue value={hoveredRing ? hoveredRing.value : total} format={formatValue} />
+		</span>
+		{#key hoveredRing?.label ?? defaultLabel}
+			<span class="label">{hoveredRing ? hoveredRing.label : defaultLabel}</span>
+		{/key}
+	</div>
+</div>

package/src/charts/sparkline.css

@@ -0,0 +1,45 @@
+/* Styles for Sparkline. Plain stylesheet (see area-chart.css for why).
+   Selectors are namespaced under `.hr-sparkline`. */
+
+.hr-sparkline {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+}
+.hr-sparkline-chart {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+/* Bare is an ornament inside another control: no inline value, so no gap. */
+.hr-sparkline[data-bare] {
+  gap: 0;
+}
+.hr-sparkline-value {
+  flex-shrink: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  font-feature-settings: "tnum";
+  font-family: ui-monospace, SFMono-Regular, monospace;
+}
+
+.hr-sparkline .hr-sparkline-end {
+  filter: drop-shadow(0 0 3px currentColor);
+  opacity: 0.9;
+  transform-box: fill-box;
+  transform-origin: center;
+  /* WHY: the dot lands as the reveal reaches the end of the line. */
+  animation: hr-sparkline-pop var(--duration-fast, 250ms) var(--ease-smooth-out)
+    calc(var(--chart-motion-reveal, 1100ms) * 0.85) both;
+}
+@keyframes hr-sparkline-pop {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .hr-sparkline .hr-sparkline-end {
+    animation: none;
+  }
+}

package/src/charts/sparkline.svelte

@@ -0,0 +1,140 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	// =========================
+	// IMPORTS
+	// =========================
+	import "./sparkline.css";
+	import { Area, Chart, Highlight, LinearGradient, Points, Spline, Svg, Tooltip } from "layerchart";
+	import { curveMonotoneX } from "d3-shape";
+	import Reveal from "./reveal.svelte";
+
+	// =========================
+	// TYPES
+	// =========================
+	type Props = {
+		data: TData[];
+		xKey: keyof TData & string;
+		yKey: keyof TData & string;
+		color?: string;
+		height?: number;
+		smooth?: boolean;
+		/** Show a dot at the latest point */
+		endCap?: boolean;
+		/** Show the latest value as inline text */
+		showLast?: boolean;
+		/**
+		 * Ornament mode: no tooltip, no highlight, no end cap, and the plot runs to the edges of its box.
+		 */
+
+		/*
+		 * For a line inside a control that already states the number and owns the pointer, such as a stat card that links.
+		 */
+		bare?: boolean;
+		formatValue?: (v: number) => string;
+		class?: string;
+	};
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		data,
+		xKey,
+		yKey,
+		color = "var(--chart-1)",
+		height = 44,
+		smooth = true,
+		endCap = true,
+		showLast = false,
+		bare = false,
+		formatValue = (v) => v.toLocaleString(),
+		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-point 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 String(d[xKey]);
+	}
+
+	// =========================
+	// DERIVED
+	// =========================
+	const uid = `hr-spark-${Math.random().toString(36).slice(2, 8)}`;
+	const curve = $derived(smooth ? curveMonotoneX : undefined);
+	const last = $derived(data.length > 0 ? data[data.length - 1] : null);
+	const display = $derived(active ?? last);
+	const dot = $derived(endCap && !bare);
+	// Bare runs to the edges: the fill reaches the bottom of the box and the line keeps three pixels of head so its stroke is not cut at the series
+
+	// maximum.
+	const padding = $derived(
+		bare
+			? { top: 3, bottom: 0, left: 0, right: 0 }
+			: { top: 4, bottom: 4, left: 0, right: dot ? 6 : 0 },
+	);
+</script>
+
+<!-- =========================== -->
+<!-- SPARKLINE -->
+<!-- =========================== -->
+<div
+	class="hr-sparkline {className ?? ''}"
+	role={bare ? undefined : "img"}
+	aria-label={bare ? undefined : "Sparkline"}
+	aria-hidden={bare ? "true" : undefined}
+	data-bare={bare ? "" : undefined}
+	onpointerleave={() => (active = null)}
+>
+	{#if data.length > 0}
+		<div class="hr-sparkline-chart" style:height="{height}px">
+			<Chart {data} x={xKey} y={yKey} {padding} tooltipContext={{ mode: "bisect-x" }}>
+				<Svg>
+					<LinearGradient id={uid} vertical>
+						{#snippet stopsContent()}
+							<stop offset="0%" stop-color={color} stop-opacity="0.38" />
+							<stop offset="100%" stop-color={color} stop-opacity="0" />
+						{/snippet}
+					</LinearGradient>
+					<Reveal bleed={3}>
+						<!-- WHY no `y0`: it defaults to the bottom of the plot, which is what
+						     a fill under a sparkline wants whatever its domain is. -->
+						<Area y1={yKey} {curve} fill="url(#{uid})" />
+						<Spline {curve} style="stroke: {color}; fill: none" stroke-width="1.5" />
+					</Reveal>
+					{#if dot && last}
+						<!-- WHY: Points resolves its own data and hands the inner circle pixel coords; Circle's data mode clobbers the sibling Spline's data in -->
+						<!-- this layerchart prerelease (and a bare object left the dot at the chart origin). -->
+						<Points data={[last]} r={3} fill={color} class="hr-sparkline-end" />
+					{/if}
+					{#if !bare}
+						<Highlight points lines={false} />
+					{/if}
+				</Svg>
+				{#if !bare}
+					<Tooltip.Root>
+						{#snippet children({ data: d })}
+							<Tooltip.Header value={trackActive(d as TData)} />
+							<Tooltip.List>
+								<Tooltip.Item label={String(yKey)} value={formatValue(Number(d[yKey]))} />
+							</Tooltip.List>
+						{/snippet}
+					</Tooltip.Root>
+				{/if}
+			</Chart>
+		</div>
+		{#if showLast && display}
+			<span class="hr-sparkline-value" style:color>
+				{formatValue(Number(display[yKey]))}
+			</span>
+		{/if}
+	{/if}
+</div>

package/src/charts/stat-card.css

@@ -0,0 +1,103 @@
+/* Styles for StatCard. Plain stylesheet (see area-chart.css for why). All
+   selectors are already namespaced under `.hr-stat-card`. */
+
+.hr-stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 1.25rem 1.5rem;
+  border: 1px solid var(--border, oklch(0.92 0.004 286));
+  border-radius: 1rem;
+  background: var(--card, white);
+  box-shadow: var(--chart-card-shadow);
+  min-width: 0;
+  /* WHY: clips the edge-to-edge chart to the card's rounded corners. */
+  overflow: hidden;
+  transition: border-color var(--chart-motion, 250ms) var(--chart-ease-out, ease);
+}
+.hr-stat-card:hover {
+  border-color: color-mix(in srgb, var(--ring, var(--chart-1)) 28%, var(--border, transparent));
+}
+/* WHY: a bare figure, not a card. Dropping the chrome avoids a card-in-card
+   when the figure is placed inside another surface, and lets the chart be the
+   whole element. */
+.hr-stat-figure-only {
+  padding: 0;
+  gap: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+}
+
+/* WHY: the gauge variant sits the figure and a radial gauge side by side
+   instead of bleeding a chart to the bottom edge; no negative margins here. */
+.hr-stat-gauge-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+}
+/* WHY the floor: below the width a gauge and a figure share, the row wraps the
+   gauge to its own line rather than squeezing the figure to nothing. */
+.hr-stat-gauge-row .hr-stat-gauge-figure {
+  flex: 1 1 auto;
+  min-width: 6rem;
+}
+.hr-stat-gauge-row .hr-gauge {
+  flex: 0 0 auto;
+}
+
+/* WHY: the chart bleeds past the card padding to the left/right/bottom edges,
+   matching bklit's edge-to-edge stat-card chart; overflow:hidden on the card
+   clips the corners to the radius. */
+.hr-stat-chart {
+  margin: 0.5rem -1.5rem -1.25rem;
+  width: auto;
+}
+.hr-stat-figure-only .hr-stat-chart {
+  margin: 0;
+}
+
+.hr-stat-card .hr-stat-spline {
+  transition: opacity var(--chart-motion-fast, 150ms) ease;
+}
+.hr-stat-card .hr-stat-bars {
+  transform-box: fill-box;
+  transform-origin: bottom;
+  animation: hr-stat-grow var(--chart-motion-reveal, 1100ms)
+    var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
+}
+.hr-stat-card .hr-stat-bars:nth-of-type(2) {
+  animation-delay: var(--chart-stagger, 30ms);
+}
+.hr-stat-card .hr-stat-bars:nth-of-type(3) {
+  animation-delay: calc(var(--chart-stagger, 30ms) * 2);
+}
+.hr-stat-card .hr-stat-bars:nth-of-type(4) {
+  animation-delay: calc(var(--chart-stagger, 30ms) * 3);
+}
+.hr-stat-card .hr-stat-bars:nth-of-type(5) {
+  animation-delay: calc(var(--chart-stagger, 30ms) * 4);
+}
+.hr-stat-card .hr-stat-bars:nth-of-type(6) {
+  animation-delay: calc(var(--chart-stagger, 30ms) * 5);
+}
+.hr-stat-card .hr-stat-bars:nth-of-type(n + 7) {
+  animation-delay: calc(var(--chart-stagger, 30ms) * 6);
+}
+@keyframes hr-stat-grow {
+  from {
+    transform: scaleY(0);
+  }
+}
+.hr-stat-card .hr-stat-bar-active {
+  filter: brightness(1.08);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hr-stat-card .hr-stat-bars {
+    animation: none;
+  }
+}