@glyphui/ui 0.4.0 → 0.5.0

package/dist/patterns/chart/heatmap.js

@@ -0,0 +1,258 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { ChartFrame, defaultFormatter, resolveColor, useChartParts } from "./chart-parts.js";
+import { useElementWidth } from "./use-element-width.js";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/patterns/chart/heatmap.tsx
+const CELL = 12;
+const LEFT = 30;
+const TOP = 18;
+const DAY = 864e5;
+function toDate(input) {
+	if (input instanceof Date) return input;
+	if (typeof input === "number") return new Date(input);
+	if (typeof input === "string") {
+		const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(input);
+		if (m) return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+		const parsed = new Date(input);
+		return Number.isNaN(parsed.getTime()) ? void 0 : parsed;
+	}
+}
+const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+const dayKey = (d) => `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+/**
+* Activity per day over months, like a contribution calendar. Each day is a keyboard
+* reachable cell: Tab into the grid, then use the arrow keys, Home and End.
+*/
+function Heatmap(props) {
+	const { data, date, value, weekStart = 0, levels = 4, valueFormatter = defaultFormatter, unit, locale } = props;
+	const { s, slots } = useChartParts();
+	const [ref, renderedWidth] = useElementWidth(0);
+	const gridRef = useRef(null);
+	const { cells, weeks, months, max, byKey, first, last } = useMemo(() => {
+		const values = /* @__PURE__ */ new Map();
+		let latest;
+		for (const row of data) {
+			const day = toDate(row[date]);
+			if (!day) continue;
+			const k = dayKey(day);
+			values.set(k, (values.get(k) ?? 0) + (Number(row[value]) || 0));
+			if (!latest || day > latest) latest = day;
+		}
+		const end = startOfDay(props.to ?? latest ?? /* @__PURE__ */ new Date());
+		const start = startOfDay(props.from ?? addDays(end, -363));
+		const offset = (start.getDay() - weekStart + 7) % 7;
+		const gridStart = addDays(start, -offset);
+		const top = Math.max(0, ...values.values());
+		const list = [];
+		const index = /* @__PURE__ */ new Map();
+		for (let d = start; d <= end; d = addDays(d, 1)) {
+			const k = dayKey(d);
+			const v = values.get(k) ?? 0;
+			const days = Math.round((d.getTime() - gridStart.getTime()) / DAY);
+			const cell = {
+				key: k,
+				date: d,
+				value: v,
+				level: v <= 0 || top === 0 ? 0 : Math.min(levels, Math.ceil(v / top * levels)),
+				week: Math.floor(days / 7),
+				weekday: days % 7
+			};
+			list.push(cell);
+			index.set(k, cell);
+		}
+		const monthLabels = [];
+		const monthFormat = new Intl.DateTimeFormat(locale, { month: "short" });
+		let lastMonth = -1;
+		for (const cell of list) if (cell.date.getDate() <= 7 && cell.weekday === 0 && cell.date.getMonth() !== lastMonth) {
+			const previous = monthLabels[monthLabels.length - 1];
+			if (!previous || cell.week - previous.week >= 3) monthLabels.push({
+				week: cell.week,
+				label: monthFormat.format(cell.date)
+			});
+			lastMonth = cell.date.getMonth();
+		}
+		return {
+			cells: list,
+			weeks: (list[list.length - 1]?.week ?? 0) + 1,
+			months: monthLabels,
+			max: top,
+			byKey: index,
+			first: list[0],
+			last: list[list.length - 1]
+		};
+	}, [
+		data,
+		date,
+		value,
+		props.from,
+		props.to,
+		weekStart,
+		levels,
+		locale
+	]);
+	const [focused, setFocused] = useState();
+	const [hovered, setHovered] = useState();
+	const activeKey = focused && byKey.has(focused) ? focused : last?.key;
+	const base = resolveColor(props.color ?? "chart-1", 0);
+	const tint = (level) => {
+		if (level === 0) return "var(--glyph-muted)";
+		const share = levels === 1 ? 100 : Math.round(30 + 70 * (level - 1) / (levels - 1));
+		return share >= 100 ? base : `color-mix(in oklab, ${base} ${share}%, var(--glyph-muted))`;
+	};
+	const width = LEFT + weeks * 15;
+	const height = 123;
+	const dayFormat = new Intl.DateTimeFormat(locale, {
+		weekday: "short",
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+	const weekdayFormat = new Intl.DateTimeFormat(locale, { weekday: "short" });
+	const describe = (cell) => `${valueFormatter(cell.value)}${unit ? ` ${unit}` : ""} on ${dayFormat.format(cell.date)}`;
+	const move = (event, cell) => {
+		const steps = {
+			ArrowLeft: -7,
+			ArrowRight: 7,
+			ArrowUp: -1,
+			ArrowDown: 1,
+			PageUp: -28,
+			PageDown: 28
+		};
+		let target;
+		if (event.key in steps) target = byKey.get(dayKey(addDays(cell.date, steps[event.key]))) ?? cell;
+		else if (event.key === "Home") target = first;
+		else if (event.key === "End") target = last;
+		else if ((event.key === "Enter" || event.key === " ") && props.onCellClick) {
+			event.preventDefault();
+			props.onCellClick(cell.date, cell.value);
+			return;
+		} else return;
+		event.preventDefault();
+		if (!target) return;
+		setFocused(target.key);
+		gridRef.current?.querySelector(`[data-day="${target.key}"]`)?.focus();
+	};
+	const tooltipCell = byKey.get(hovered ?? "") ?? (focused ? byKey.get(focused) : void 0);
+	const scale = renderedWidth > 0 ? Math.min(renderedWidth, width) / width : 1;
+	const table = {
+		columns: ["Date", String(value)],
+		rows: cells.map((cell) => [dayFormat.format(cell.date), valueFormatter(cell.value)])
+	};
+	return /* @__PURE__ */ jsxs(ChartFrame, {
+		title: props.title,
+		description: props.description,
+		hideTitle: props.hideTitle,
+		className: props.className,
+		table,
+		height,
+		isEmpty: data.length === 0,
+		loading: props.loading,
+		error: props.error,
+		onRetry: props.onRetry,
+		empty: props.empty,
+		accessiblePlot: true,
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref,
+			role: "grid",
+			"aria-label": props.title,
+			"aria-rowcount": 7,
+			className: "relative w-full",
+			onMouseLeave: () => setHovered(void 0),
+			children: [/* @__PURE__ */ jsxs("svg", {
+				ref: gridRef,
+				role: "presentation",
+				viewBox: `0 0 ${width} ${height}`,
+				width: "100%",
+				style: { maxWidth: width },
+				className: "block h-auto overflow-visible",
+				children: [/* @__PURE__ */ jsxs("g", {
+					"aria-hidden": "true",
+					fontSize: 10,
+					fill: "var(--glyph-muted-foreground)",
+					children: [months.map((month) => /* @__PURE__ */ jsx("text", {
+						x: LEFT + month.week * 15,
+						y: 10,
+						children: month.label
+					}, `${month.week}-${month.label}`)), [
+						1,
+						3,
+						5
+					].map((day) => {
+						const row = (day - weekStart + 7) % 7;
+						return /* @__PURE__ */ jsx("text", {
+							x: 0,
+							y: TOP + row * 15 + CELL - 2,
+							children: weekdayFormat.format(addDays(new Date(2023, 0, 1), day))
+						}, day);
+					})]
+				}), Array.from({ length: 7 }, (_, weekday) => /* @__PURE__ */ jsx("g", {
+					role: "row",
+					"aria-rowindex": weekday + 1,
+					children: cells.filter((cell) => cell.weekday === weekday).map((cell) => /* @__PURE__ */ jsx("rect", {
+						role: "gridcell",
+						"data-day": cell.key,
+						"data-level": cell.level,
+						"aria-label": describe(cell),
+						"aria-colindex": cell.week + 1,
+						tabIndex: cell.key === activeKey ? 0 : -1,
+						x: LEFT + cell.week * 15,
+						y: TOP + weekday * 15,
+						width: CELL,
+						height: CELL,
+						rx: 2.5,
+						fill: tint(cell.level),
+						className: cn("outline-none focus-visible:stroke-ring focus-visible:[stroke-width:2]", props.onCellClick && "cursor-pointer"),
+						onMouseEnter: () => setHovered(cell.key),
+						onFocus: () => setFocused(cell.key),
+						onBlur: () => setFocused((current) => current === cell.key ? void 0 : current),
+						onKeyDown: (event) => move(event, cell),
+						onClick: () => props.onCellClick?.(cell.date, cell.value)
+					}, cell.key))
+				}, weekday))]
+			}), tooltipCell && /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				"data-slot": "chart-tooltip",
+				className: s.tooltip({ class: [slots.tooltip, "pointer-events-none absolute z-10 min-w-0 -translate-x-1/2 -translate-y-full whitespace-nowrap"] }),
+				style: {
+					left: (LEFT + tooltipCell.week * 15 + CELL / 2) * scale,
+					top: (TOP + tooltipCell.weekday * 15) * scale - 6
+				},
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: s.tooltipValue({ class: slots.tooltipValue }),
+						children: [valueFormatter(tooltipCell.value), unit ? ` ${unit}` : ""]
+					}),
+					" ",
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: dayFormat.format(tooltipCell.date)
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			"aria-hidden": "true",
+			className: "mt-2 flex items-center justify-end gap-1 text-caption text-muted-foreground",
+			style: { maxWidth: width },
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "mr-1",
+					children: "Less"
+				}),
+				Array.from({ length: levels + 1 }, (_, level) => /* @__PURE__ */ jsx("span", {
+					className: "size-2.5 rounded-[2px]",
+					style: { background: tint(level) },
+					title: level === levels && max > 0 ? `${valueFormatter(max)}` : void 0
+				}, level)),
+				/* @__PURE__ */ jsx("span", {
+					className: "ml-1",
+					children: "More"
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { Heatmap };

package/dist/patterns/chart/icons.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/patterns/chart/icons.tsx
+function Icon({ children, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children
+	});
+}
+const TableIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("rect", {
+		x: "3",
+		y: "4",
+		width: "18",
+		height: "16",
+		rx: "2"
+	}), /* @__PURE__ */ jsx("path", { d: "M3 10h18M3 15h18M9 10v10" })]
+});
+const ChartIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("path", { d: "M3 3v18h18" }), /* @__PURE__ */ jsx("path", { d: "m7 15 4-4 3 3 5-6" })]
+});
+const DownloadIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("path", { d: "M12 4v11m0 0-4-4m4 4 4-4" }), /* @__PURE__ */ jsx("path", { d: "M4 19h16" })]
+});
+//#endregion
+export { ChartIcon, DownloadIcon, TableIcon };

package/dist/patterns/chart/pie.d.ts

@@ -0,0 +1,36 @@
+import { ChartColorValue, ChartStateProps, Key } from "./chart-parts.js";
+import { ReactNode } from "react";
+//#region src/patterns/chart/pie.d.ts
+export interface PieChartProps<T extends object> extends ChartStateProps {
+  data: readonly T[];
+  /** Field naming each slice. */
+  category: Key<T>;
+  /** Field holding each slice's value. */
+  value: Key<T>;
+  title: string;
+  description?: ReactNode;
+  hideTitle?: boolean;
+  /** One color per slice, in order. Defaults follow the theme palette. */
+  colors?: readonly ChartColorValue[];
+  /** Content in the middle of a donut, e.g. the total. */
+  centerLabel?: ReactNode;
+  valueFormatter?: (value: number) => string;
+  /** Diameter in pixels. Default 200. */
+  size?: number;
+  /** Hole size as a share of the radius, from 0 (pie) to 0.9. Default 0 for PieChart. */
+  innerRadius?: number;
+  /** Text drawn next to each slice. Default `none`. */
+  labels?: 'none' | 'percent' | 'value' | 'name';
+  showLegend?: boolean;
+  /** Slices hidden through the legend (controlled), by category name. */
+  hiddenSlices?: readonly string[];
+  onHiddenSlicesChange?: (hidden: string[]) => void;
+  onSliceClick?: (row: T) => void;
+  className?: string;
+}
+export type DonutChartProps<T extends object> = PieChartProps<T>;
+/** Parts of a whole. Best with five or fewer slices; fold the rest into "Other". */
+export declare function PieChart<T extends object>(props: PieChartProps<T>): import("react").JSX.Element;
+/** A pie with a hole for a headline number. Same props as PieChart; `innerRadius` defaults to 0.68. */
+export declare function DonutChart<T extends object>(props: DonutChartProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/patterns/chart/pie.js

@@ -0,0 +1,120 @@
+"use client";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { ChartFrame, categoryColor, defaultFormatter, toggleIn, useChartAnimation, useChartParts } from "./chart-parts.js";
+import { chartTooltip } from "./cartesian.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as R from "recharts";
+//#region src/patterns/chart/pie.tsx
+/** Parts of a whole. Best with five or fewer slices; fold the rest into "Other". */
+function PieChart(props) {
+	const { data, category, value, valueFormatter = defaultFormatter, size = 200, innerRadius = 0, labels = "none" } = props;
+	const { s, slots } = useChartParts();
+	const animation = useChartAnimation();
+	const [hidden, setHidden] = useControllableState({
+		value: props.hiddenSlices,
+		defaultValue: [],
+		onChange: props.onHiddenSlicesChange
+	});
+	const rows = data.map((row) => row);
+	const colored = rows.map((row, i) => ({
+		row,
+		name: String(row[category]),
+		color: categoryColor(props.colors?.[i], i)
+	}));
+	const visible = colored.filter((item) => !hidden.includes(item.name));
+	const total = visible.reduce((sum, item) => sum + (Number(item.row[value]) || 0), 0);
+	const table = {
+		columns: [String(category), String(value)],
+		rows: rows.map((row) => [String(row[category]), valueFormatter(Number(row[value]))])
+	};
+	const legend = props.showLegend ?? true ? colored.map((item) => ({
+		key: item.name,
+		label: item.name,
+		color: item.color,
+		hidden: hidden.includes(item.name)
+	})) : void 0;
+	const ring = Math.min(Math.max(innerRadius, 0), .9);
+	const labelText = (entry) => {
+		if (labels === "percent") return `${Math.round((entry.percent ?? 0) * 100)}%`;
+		if (labels === "value") return valueFormatter(Number(entry.value));
+		if (labels === "name") return String(entry.name ?? "");
+		return "";
+	};
+	const outer = labels === "none" ? "100%" : "78%";
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		title: props.title,
+		description: props.description,
+		hideTitle: props.hideTitle,
+		className: props.className,
+		legend,
+		onLegendToggle: rows.length > 1 ? (key) => setHidden(toggleIn(hidden, key, rows.length)) : void 0,
+		table,
+		height: size,
+		isEmpty: data.length === 0 || total === 0,
+		loading: props.loading,
+		error: props.error,
+		onRetry: props.onRetry,
+		empty: props.empty,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative mx-auto",
+			style: {
+				width: "100%",
+				maxWidth: labels === "none" ? size : size * 1.6,
+				height: size
+			},
+			children: [/* @__PURE__ */ jsx(R.ResponsiveContainer, {
+				width: "100%",
+				height: "100%",
+				children: /* @__PURE__ */ jsxs(R.PieChart, {
+					accessibilityLayer: false,
+					children: [chartTooltip(valueFormatter, false), /* @__PURE__ */ jsx(R.Pie, {
+						rootTabIndex: -1,
+						data: visible.map((item) => ({
+							...item.row,
+							fill: item.color
+						})),
+						dataKey: value,
+						nameKey: category,
+						innerRadius: `${Math.round(ring * 100)}%`,
+						outerRadius: outer,
+						paddingAngle: ring > 0 ? 2 : 0,
+						cornerRadius: ring > 0 ? 3 : 0,
+						stroke: "var(--glyph-surface)",
+						strokeWidth: 2,
+						startAngle: 90,
+						endAngle: -270,
+						activeShape: (shape) => /* @__PURE__ */ jsx(R.Sector, {
+							...shape,
+							outerRadius: Number(shape.outerRadius ?? 0) + 5
+						}),
+						...props.onSliceClick && {
+							onClick: (_, i) => {
+								const item = visible[i];
+								if (item) props.onSliceClick?.(item.row);
+							},
+							style: { cursor: "pointer" }
+						},
+						...labels !== "none" && {
+							label: (entry) => labelText(entry),
+							labelLine: { stroke: "var(--glyph-border-strong)" }
+						},
+						...animation,
+						children: visible.map((item) => /* @__PURE__ */ jsx(R.Cell, { fill: item.color }, item.name))
+					})]
+				})
+			}), props.centerLabel && ring > 0 && /* @__PURE__ */ jsx("div", {
+				className: s.center({ class: slots.center }),
+				children: props.centerLabel
+			})]
+		})
+	});
+}
+/** A pie with a hole for a headline number. Same props as PieChart; `innerRadius` defaults to 0.68. */
+function DonutChart(props) {
+	return /* @__PURE__ */ jsx(PieChart, {
+		...props,
+		innerRadius: props.innerRadius ?? .68
+	});
+}
+//#endregion
+export { DonutChart, PieChart };

package/dist/patterns/chart/radial.d.ts

@@ -0,0 +1,75 @@
+import { ChartColorValue, ChartStateProps, Key } from "./chart-parts.js";
+import { ChartSeries } from "./cartesian.js";
+import { ReactNode } from "react";
+//#region src/patterns/chart/radial.d.ts
+export interface RadarChartProps<T extends object> extends ChartStateProps {
+  data: readonly T[];
+  /** Field naming each spoke, e.g. `"skill"`. */
+  index: Key<T>;
+  series: readonly ChartSeries<T>[];
+  title: string;
+  description?: ReactNode;
+  hideTitle?: boolean;
+  valueFormatter?: (value: number) => string;
+  /** Plot height in pixels. Default 280. */
+  height?: number;
+  /** Upper bound of the radial axis. Defaults to the largest value. */
+  max?: number;
+  showLegend?: boolean;
+  hiddenSeries?: readonly Key<T>[];
+  defaultHiddenSeries?: readonly Key<T>[];
+  onHiddenSeriesChange?: (hidden: Key<T>[]) => void;
+  className?: string;
+}
+/** Compare a few items across several measures, e.g. plans by feature score. */
+export declare function RadarChart<T extends object>(props: RadarChartProps<T>): import("react").JSX.Element;
+export interface RadialBarChartProps<T extends object> extends ChartStateProps {
+  data: readonly T[];
+  /** Field naming each ring. */
+  category: Key<T>;
+  /** Field holding each ring's value. */
+  value: Key<T>;
+  title: string;
+  description?: ReactNode;
+  hideTitle?: boolean;
+  colors?: readonly ChartColorValue[];
+  /** Value of a full ring. Defaults to the largest value. */
+  max?: number;
+  valueFormatter?: (value: number) => string;
+  /** Diameter in pixels. Default 220. */
+  size?: number;
+  centerLabel?: ReactNode;
+  showLegend?: boolean;
+  className?: string;
+}
+/** Progress of a few items toward the same goal, as concentric rings. */
+export declare function RadialBarChart<T extends object>(props: RadialBarChartProps<T>): import("react").JSX.Element;
+export interface GaugeBand {
+  /** Upper bound of this band. The last band runs to `max`. */
+  to: number;
+  color: ChartColorValue;
+  /** Read out with the value, e.g. "Healthy". */
+  label?: string;
+}
+export interface GaugeProps {
+  value: number;
+  min?: number;
+  max?: number;
+  /** Accessible name, also the caption. */
+  title: string;
+  description?: ReactNode;
+  hideTitle?: boolean;
+  /** Colored ranges, e.g. healthy / slow / failing. The value arc takes its band's color. */
+  bands?: readonly GaugeBand[];
+  /** Color of the value arc when there are no bands. Default `chart-1`. */
+  color?: ChartColorValue;
+  valueFormatter?: (value: number) => string;
+  /** Small text under the value, e.g. "p95 latency". */
+  label?: ReactNode;
+  /** Width in pixels. Default 220. */
+  size?: number;
+  className?: string;
+}
+/** A single value against a range, e.g. latency, quota used or a health score. */
+export declare function Gauge({ value, min, max, title, description, hideTitle, bands, color, valueFormatter, label, size, className }: GaugeProps): import("react").JSX.Element;
+//#endregion