@heyramzi/ui 1.54.1 → 2.0.0

package/src/charts/legend.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import "./legend.css";
+	import { cn } from "../lib/utils.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	type LegendItem = {
+		label: string;
+		value: number;
+		/** Required when `showProgress` or `showPercentage` is set. */
+		maxValue?: number;
+		color: string;
+	};
+
+	interface Props {
+		items: LegendItem[];
+		title?: string;
+		/** Stacked rows vs inline wrap. */
+		layout?: "vertical" | "horizontal";
+		/** Render a progress bar under each row (needs maxValue). */
+		showProgress?: boolean;
+		/** Show the value beside each label. */
+		showValue?: boolean;
+		/** Append a percentage (needs maxValue). */
+		showPercentage?: boolean;
+		formatValue?: (v: number) => string;
+		formatPercentage?: (p: number) => string;
+		/** Hovered index, bindable for chart hover-sync. */
+		hoveredIndex?: number | null;
+		onHoverChange?: (index: number | null) => void;
+		class?: string;
+	};
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		items,
+		title,
+		layout = "vertical",
+		showProgress = false,
+		showValue = true,
+		showPercentage = false,
+		formatValue = (v) => v.toLocaleString(),
+		formatPercentage = (p) => `${p.toFixed(0)}%`,
+		hoveredIndex = $bindable(null),
+		onHoverChange,
+		class: className,
+	}: Props = $props();
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function pct(item: LegendItem): number {
+		if (!item.maxValue || item.maxValue <= 0) return 0;
+		return Math.max(0, Math.min(100, (item.value / item.maxValue) * 100));
+	}
+
+	function setHover(index: number | null) {
+		hoveredIndex = index;
+		onHoverChange?.(index);
+	}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div class={cn("hr-legend", className)} class:horizontal={layout === "horizontal"}>
+	{#if title}
+		<p class="hr-legend-title">{title}</p>
+	{/if}
+	<ul class="hr-legend-items">
+		{#each items as item, i (item.label + i)}
+			{@const dimmed = hoveredIndex !== null && hoveredIndex !== i}
+			<li>
+				<button
+					type="button"
+					class="hr-legend-item"
+					class:dimmed
+					onmouseenter={() => setHover(i)}
+					onmouseleave={() => setHover(null)}
+					onfocus={() => setHover(i)}
+					onblur={() => setHover(null)}
+				>
+					<span class="hr-legend-marker" style:background={item.color}></span>
+					<span class="hr-legend-label">{item.label}</span>
+					{#if showValue}
+						<span class="hr-legend-value">
+							{formatValue(item.value)}{#if showPercentage && item.maxValue}<span
+									class="hr-legend-pct">{formatPercentage(pct(item))}</span
+								>{/if}
+						</span>
+					{/if}
+					{#if showProgress && item.maxValue}
+						<span class="hr-legend-track">
+							<span
+								class="hr-legend-bar"
+								style:--hr-bar-scale={pct(item) / 100}
+								style:background={item.color}
+								style:animation-delay="{160 + i * 120}ms"
+							></span>
+						</span>
+					{/if}
+				</button>
+			</li>
+		{/each}
+	</ul>
+</div>

package/src/charts/line-chart.css

@@ -0,0 +1,26 @@
+/* Styles for LineChart. Plain stylesheet (see area-chart.css for why). Selectors
+   are namespaced under `.hr-line-chart`. */
+
+.hr-line-chart {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.hr-line-chart .hr-chart-body {
+  width: 100%;
+}
+
+.hr-line-chart .empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  border: 1px dashed var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
+  border-radius: 0.5rem;
+}
+.hr-line-chart .empty p {
+  font-size: 0.8125rem;
+  color: var(--chart-label, oklch(0.5 0.01 286));
+  margin: 0;
+}

package/src/charts/line-chart.svelte

@@ -0,0 +1,256 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	// =========================
+	// IMPORTS
+	// =========================
+	import "./line-chart.css";
+	import {
+		Area,
+		Axis,
+		Chart,
+		Highlight,
+		LinearGradient,
+		Points,
+		Spline,
+		Svg,
+		Tooltip,
+	} from "layerchart";
+	import { curveMonotoneX } from "d3-shape";
+	import Crosshair from "./crosshair.svelte";
+	import EdgeFade from "./edge-fade.svelte";
+	import { resolveEdgeFade } from "./edge-fade.js";
+	import Figure from "./figure.svelte";
+	import HoverFocus from "./hover-focus.svelte";
+	import { DOMAIN_MOTION, TOOLTIP_GAP, TOOLTIP_TOP } from "./motion.js";
+	import Reveal from "./reveal.svelte";
+
+	// =========================
+	// TYPES
+	// =========================
+	type Series = {
+		key: keyof TData & string;
+		label?: string;
+		color?: string;
+	};
+
+	interface Props {
+		data: TData[];
+		xKey: keyof TData & string;
+		yKey?: keyof TData & string;
+		series?: Series[];
+		color?: string;
+		height?: number;
+		smooth?: boolean;
+		/**
+		 * Softens the left and right ends of the gradient fill instead of cutting them off at the plot edge.
+		 */
+
+		/*
+		 * `true` fades 8% of the width per side, a number sets the fraction (0-0.45), `false` keeps the hard edges.
+		 */
+		edgeFade?: boolean | number;
+		/** Draw a ring marker at every data point. */
+		showMarkers?: boolean;
+		/** Inclusive index where a dashed "in progress" tail begins (e.g. the latest, still-open period). */
+		dashFromIndex?: number;
+		/** Dash pattern for the tail segment. */
+		dashArray?: string;
+		formatValue?: (v: number) => string;
+		formatX?: (v: unknown) => string;
+		class?: string;
+	};
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		data,
+		xKey,
+		yKey,
+		series: seriesInput,
+		color = "var(--chart-1)",
+		height = 240,
+		smooth = true,
+		edgeFade = true,
+		showMarkers = false,
+		dashFromIndex,
+		dashArray = "5 4",
+		formatValue = (v) => v.toLocaleString(),
+		formatX = (v) => String(v),
+		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 formatX(d[xKey]);
+	}
+
+	// =========================
+	// DERIVED
+	// =========================
+	const uid = `hr-line-${Math.random().toString(36).slice(2, 8)}`;
+	const series = $derived(
+		seriesInput && seriesInput.length > 0
+			? seriesInput.map((s, i) => ({
+					key: s.key,
+					label: s.label ?? s.key,
+					color: s.color ?? `var(--chart-${(i % 5) + 1})`,
+				}))
+			: yKey
+				? [{ key: yKey, label: yKey, color }]
+				: [],
+	);
+	const yMax = $derived(
+		Math.max(0, ...data.flatMap((d) => series.map((s) => Number(d[s.key] ?? 0)))),
+	);
+	const curve = $derived(smooth ? curveMonotoneX : undefined);
+	const fade = $derived(resolveEdgeFade(edgeFade));
+	const fadeMask = $derived(fade > 0 ? `url(#${uid}-fade)` : undefined);
+	const fallback = $derived(data.length > 0 ? data[data.length - 1] : null);
+	const display = $derived(active ?? fallback);
+	// WHY: a dashed tail is two splines sharing the boundary point so the solid
+	// and dashed segments meet without a gap.
+	const hasTail = $derived(
+		dashFromIndex != null && dashFromIndex >= 0 && dashFromIndex < data.length - 1,
+	);
+	const solidData = $derived(hasTail ? data.slice(0, (dashFromIndex as number) + 1) : data);
+	const tailData = $derived(hasTail ? data.slice(dashFromIndex as number) : []);
+	const figureRows = $derived(
+		display
+			? series.map((s) => ({ value: Number(display[s.key]), label: s.label, color: s.color }))
+			: null,
+	);
+</script>
+
+<!-- =========================== -->
+<!-- LINE CHART -->
+<!-- =========================== -->
+<div
+	class="hr-line-chart {className ?? ''}"
+	role="img"
+	aria-label="Line chart"
+	onpointerleave={() => (active = null)}
+>
+	{#if figureRows && display}
+		<Figure series={figureRows} eyebrow={formatX(display[xKey])} format={formatValue} size="md" />
+	{:else}
+		<Figure value="—" eyebrow="Latest" size="md" />
+	{/if}
+
+	<div class="hr-chart-body" style:height="{height}px">
+		{#snippet strokes(s: (typeof series)[number])}
+			{#if hasTail}
+				<Spline
+					data={solidData}
+					y={s.key}
+					{curve}
+					style="stroke: {s.color}; fill: none"
+					stroke-width="2"
+					stroke-linecap="round"
+				/>
+				<Spline
+					data={tailData}
+					y={s.key}
+					{curve}
+					style="stroke: {s.color}; fill: none"
+					stroke-width="2"
+					stroke-dasharray={dashArray}
+				/>
+			{:else}
+				<Spline
+					y={s.key}
+					{curve}
+					style="stroke: {s.color}; fill: none"
+					stroke-width="2"
+					stroke-linecap="round"
+				/>
+			{/if}
+		{/snippet}
+		{#if data.length === 0}
+			<div class="empty"><p>No data</p></div>
+		{:else}
+			<Chart
+				{data}
+				x={xKey}
+				y={series[0]?.key}
+				yDomain={[0, yMax || 1]}
+				yNice
+				padding={{ left: 48, bottom: 28, top: 8, right: 12 }}
+				tooltipContext={{ mode: "bisect-x" }}
+				motion={DOMAIN_MOTION}
+			>
+				<Svg>
+					<Axis placement="left" format={(v) => formatValue(Number(v))} ticks={4} />
+					<Axis placement="bottom" format={(v) => formatX(v)} />
+					<g class="hr-line-grid">
+						<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />
+					</g>
+					{#if fade > 0}
+						<EdgeFade id="{uid}-fade" amount={fade} />
+					{/if}
+					<Crosshair id="{uid}-cross" />
+					<HoverFocus>
+						<Reveal>
+							{#each series as s, i (s.key)}
+								<LinearGradient id="{uid}-{i}" vertical>
+									{#snippet stopsContent()}
+										<stop offset="0%" stop-color={s.color} stop-opacity="0.22" />
+										<stop offset="100%" stop-color={s.color} stop-opacity="0.01" />
+									{/snippet}
+								</LinearGradient>
+								<Area
+									y1={s.key}
+									{curve}
+									fill="url(#{uid}-{i})"
+									mask={fadeMask}
+									line={false}
+									class="hr-line-area"
+								/>
+								{@render strokes(s)}
+								{#if showMarkers}
+									<Points
+										y={s.key}
+										r={3}
+										fill="var(--background, white)"
+										stroke={s.color}
+										stroke-width={2}
+										class="hr-line-marker"
+									/>
+								{/if}
+							{/each}
+						</Reveal>
+						{#snippet segment()}
+							{#each series as s (s.key)}
+								{@render strokes(s)}
+							{/each}
+						{/snippet}
+					</HoverFocus>
+					<Highlight points lines={{ style: `stroke: url(#${uid}-cross)` }} />
+				</Svg>
+				<Tooltip.Root x="data" y={TOOLTIP_TOP} xOffset={TOOLTIP_GAP}>
+					{#snippet children({ data: d })}
+						<Tooltip.Header value={trackActive(d as TData)} />
+						<Tooltip.List>
+							{#each series as s (s.key)}
+								<Tooltip.Item
+									label={s.label}
+									value={formatValue(Number(d[s.key]))}
+									color={s.color}
+								/>
+							{/each}
+						</Tooltip.List>
+					{/snippet}
+				</Tooltip.Root>
+			</Chart>
+		{/if}
+	</div>
+</div>

package/src/charts/motion.ts

@@ -0,0 +1,19 @@
+import { cubicInOut } from "svelte/easing";
+
+/** Mirrors `--chart-motion-reveal` in charts.css, for when no element is mounted to read it from. */
+export const REVEAL_MS = 1100;
+
+/** Rescales the axes when the data changes; the first render never animates. */
+export const DOMAIN_MOTION = { type: "tween", duration: 500, easing: cubicInOut } as const;
+
+/** The tooltip sits beside the hovered point at the top of the plot, so it never chases the cursor. */
+export const TOOLTIP_TOP = 8;
+export const TOOLTIP_GAP = 16;
+
+/** A chart duration token in ms, read off a mounted element; both `ms` and `s` parse. */
+export function tokenMs(el: Element, name: string, fallback: number): number {
+  const raw = getComputedStyle(el).getPropertyValue(name).trim();
+  const n = Number.parseFloat(raw);
+  if (Number.isNaN(n)) return fallback;
+  return raw.endsWith("ms") ? n : n * 1000;
+}

package/src/charts/number-chart.css

@@ -0,0 +1,179 @@
+/* Styles for NumberChart. Plain stylesheet (see area-chart.css for why). All
+   selectors are already namespaced under `.hr-number-chart`. */
+
+.hr-number-chart {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  min-width: 0;
+  padding: 1rem 1.25rem;
+  border: 1px solid var(--border, oklch(0.92 0.004 286));
+  border-radius: 0.75rem;
+  background: var(--card, white);
+  box-shadow: var(--chart-card-shadow);
+  transition: border-color var(--chart-motion, 250ms) var(--chart-ease-out, ease);
+}
+@media (hover: hover) and (pointer: fine) {
+  .hr-number-chart:hover {
+    border-color: color-mix(in srgb, var(--ring, var(--chart-1)) 28%, var(--border, transparent));
+  }
+}
+/* WHY a bare mode and not a second component: a band is one panel with
+   hairlines through it, so a figure inside it must bring no edge of its own.
+   Same object, one less border. */
+.hr-number-chart[data-bare] {
+  padding: 1rem;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+@media (hover: hover) and (pointer: fine) {
+  .hr-number-chart[data-bare]:hover {
+    border-color: transparent;
+  }
+}
+
+.hr-number-label {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--muted-foreground, oklch(0.5 0.01 286));
+}
+.hr-number-label-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.hr-number-icon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+}
+.hr-number-trailing {
+  margin-left: auto;
+  flex: none;
+  font-size: 0.625rem;
+}
+
+/* WHY the row is baseline-aligned and top-anchored: a band mixes figures that
+   carry a caption with figures that do not, and every value in the row has to
+   sit on one line. The slack falls to the bottom, where nothing reads it. */
+.hr-number-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+/* WHY the heading family and not the body one: a figure is structure, not
+   prose, and tabular digits are what makes a column of them scannable. */
+.hr-number-value {
+  font-family: var(--font-heading, inherit);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+  line-height: 1.15;
+  letter-spacing: -0.015em;
+  color: var(--foreground, oklch(0.2 0.01 286));
+  min-width: 0;
+}
+.hr-number-chart[data-size="md"] .hr-number-value {
+  font-size: 1.25rem;
+}
+/* WHY the lead figure is size and not colour: the accent is spent on actions,
+   active states, marks and links. A number is none of those. */
+.hr-number-chart[data-size="lg"] .hr-number-value {
+  font-size: 1.5rem;
+}
+/* A loss is the one case where the figure itself carries colour. */
+.hr-number-chart[data-negative] .hr-number-value {
+  color: var(--destructive);
+}
+
+.hr-number-delta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+  flex: none;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.2;
+  color: var(--muted-foreground, oklch(0.5 0.01 286));
+}
+.hr-number-delta-text {
+  font-variant-numeric: tabular-nums;
+}
+/* The readable form of a trend colour: a hue picked to read as a mark measures
+   about 3.5:1 as 12px text, so it is mixed toward the page foreground. One rule
+   serves both themes and the package needs to know nothing about which is on. */
+.hr-number-delta[data-tone="up"] {
+  color: color-mix(
+    in oklab,
+    var(--stat-up, var(--success, oklch(0.6 0.13 163))) 72%,
+    var(--foreground, oklch(0.2 0.01 286))
+  );
+}
+.hr-number-delta[data-tone="down"] {
+  color: color-mix(
+    in oklab,
+    var(--stat-down, var(--destructive, oklch(0.58 0.22 25))) 72%,
+    var(--foreground, oklch(0.2 0.01 286))
+  );
+}
+.hr-number-delta[data-tone="none"] {
+  color: color-mix(in srgb, var(--muted-foreground, oklch(0.5 0.01 286)) 40%, transparent);
+}
+.hr-number-chart .hr-number-arrow {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex: none;
+}
+
+.hr-number-track {
+  height: 0.25rem;
+  border-radius: 999px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--border, oklch(0.92 0.004 286)) 80%, transparent);
+}
+.hr-number-fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  /* The share is a scale, not a width, so a change never reflows the card. */
+  transform: scaleX(var(--hr-number-share, 0));
+  transform-origin: left center;
+  /* backwards, not both: once the fill-in ends, the transition owns transform. */
+  animation: hr-number-fill-in var(--chart-motion-slow, 800ms) var(--chart-ease-out, ease) backwards;
+  transition: transform var(--chart-motion, 250ms) var(--chart-ease-out, ease);
+}
+@keyframes hr-number-fill-in {
+  from {
+    transform: scaleX(0);
+  }
+}
+
+.hr-number-caption {
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--muted-foreground, oklch(0.5 0.01 286));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.hr-number-share {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  color: var(--foreground, oklch(0.2 0.01 286));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hr-number-fill {
+    animation: none;
+  }
+}