@olympusoss/canvas 2.20.2 → 3.1.0

package/src/components/charts/gauge.tsx

@@ -1,106 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface GaugeProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** Percentage to fill (0–100). Values outside the range are clamped. */
-	value: number;
-	/** Pixel size (width = height). Default `160`. */
-	size?: number;
-	/** Pixel stroke width of the ring. Default `14`. */
-	strokeWidth?: number;
-	/**
-	 * CSS variable name (without leading `--`) used for the filled arc. Default
-	 * `chart-1`.
-	 */
-	colorVar?: string;
-	/**
-	 * Center value text. Defaults to `"{value}%"`. Pass a custom node to render
-	 * something richer (e.g. a unit label).
-	 */
-	valueLabel?: React.ReactNode;
-	/** Small label rendered below the centre value. Optional. */
-	caption?: React.ReactNode;
-	/** Accessible label describing the gauge. Default `"Gauge"`. */
-	"aria-label"?: string;
-}
-
-/**
- * Single-arc circular gauge with a centered value. Useful for adoption
- * percentages, health scores, completion ratios, and similar 0–100 metrics.
- * Renders a complete background ring plus a filled arc; the arc is animated
- * via `transition-[stroke-dashoffset]` so consumers get smooth updates when
- * `value` changes.
- */
-export const Gauge = React.forwardRef<HTMLDivElement, GaugeProps>(
-	(
-		{
-			value,
-			size = 160,
-			strokeWidth = 14,
-			colorVar = "chart-1",
-			valueLabel,
-			caption,
-			className,
-			"aria-label": ariaLabel = "Gauge",
-			...props
-		},
-		ref,
-	) => {
-		const clamped = Math.max(0, Math.min(100, value));
-		const r = (size - strokeWidth) / 2;
-		const cx = size / 2;
-		const c = 2 * Math.PI * r;
-		const offset = c - (clamped / 100) * c;
-		const display = valueLabel ?? `${Math.round(clamped)}%`;
-		return (
-			<div
-				ref={ref}
-				role="meter"
-				aria-label={ariaLabel}
-				aria-valuenow={Math.round(clamped)}
-				aria-valuemin={0}
-				aria-valuemax={100}
-				className={cn("relative inline-flex flex-col items-center", className)}
-				style={{ width: size, height: caption ? "auto" : size }}
-				{...props}
-			>
-				<svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-hidden>
-					<circle
-						cx={cx}
-						cy={cx}
-						r={r}
-						fill="none"
-						stroke="hsl(var(--muted))"
-						strokeWidth={strokeWidth}
-					/>
-					<circle
-						cx={cx}
-						cy={cx}
-						r={r}
-						fill="none"
-						stroke={`hsl(var(--${colorVar}))`}
-						strokeWidth={strokeWidth}
-						strokeDasharray={c}
-						strokeDashoffset={offset}
-						strokeLinecap="round"
-						transform={`rotate(-90 ${cx} ${cx})`}
-						className="transition-[stroke-dashoffset] duration-500"
-					/>
-				</svg>
-				<div
-					className="pointer-events-none absolute inset-x-0 flex flex-col items-center justify-center"
-					style={{ top: 0, height: size }}
-				>
-					<span className="font-mono text-3xl font-bold tabular-nums">{display}</span>
-					{caption && (
-						<span className="mt-1 text-[11px] uppercase tracking-[0.04em] text-muted-foreground">
-							{caption}
-						</span>
-					)}
-				</div>
-			</div>
-		);
-	},
-);
-Gauge.displayName = "Gauge";

package/src/components/charts/grids.tsx

@@ -1,8 +0,0 @@
-"use client";
-
-/**
- * Grid re-exports — pure pass-throughs. Theming via CSS in `<ChartContainer>`
- * (`[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50` etc.).
- * Wrapping breaks Recharts' child-by-type detection.
- */
-export { CartesianGrid, PolarGrid } from "recharts";

package/src/components/charts/index.ts

@@ -1,62 +0,0 @@
-// Container + style emitter (canvas-specific)
-
-// Chrome — canvas-token defaults
-export {
-	CartesianAxis,
-	PolarAngleAxis,
-	PolarRadiusAxis,
-	XAxis,
-	YAxis,
-	ZAxis,
-} from "./axes";
-export {
-	type ChartConfig,
-	ChartContainer,
-	ChartStyle,
-	useChart,
-} from "./chart-container";
-export { ChartLegend, ChartLegendContent } from "./chart-legend";
-export { ChartTooltip, ChartTooltipContent } from "./chart-tooltip";
-// Chart-type wrappers (`margin` defaults; auto-palette runs in ChartContainer)
-export {
-	AreaChart,
-	BarChart,
-	ComposedChart,
-	FunnelChart,
-	LineChart,
-	PieChart,
-	RadarChart,
-	RadialBarChart,
-	Sankey,
-	ScatterChart,
-	SunburstChart,
-	Treemap,
-} from "./chart-types";
-// Container-level — pure pass-through
-export { Brush, Layer, ResponsiveContainer, Surface } from "./containers";
-// Data primitives (auto-cycle palette)
-export { Area, Bar, Funnel, Line, Pie, Radar, RadialBar, Scatter } from "./data";
-// Detail primitives — pure pass-through
-export {
-	ChartCell,
-	ChartCustomized,
-	Cross,
-	Curve,
-	Dot,
-	ErrorBar,
-	Polygon,
-	Rectangle,
-	Sector,
-	Trapezoid,
-} from "./details";
-export { CartesianGrid, PolarGrid } from "./grids";
-export { ReferenceArea, ReferenceDot, ReferenceLine } from "./references";
-// Text + labels (Label aliased to avoid collision with canvas form Label)
-export { ChartLabel, LabelList, Text } from "./text";
-
-// Geographic — Leaflet-based heat-map (peer-optional `leaflet` + `react-leaflet`)
-export {
-	WorldHeatMap,
-	type WorldHeatMapPoint,
-	type WorldHeatMapProps,
-} from "./world-heat-map";

package/src/components/charts/labeled-bar-list.tsx

@@ -1,85 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface LabeledBarListItem {
-	/** Row label. Used as the React key. */
-	label: React.ReactNode;
-	/** Numeric value rendered in the right cap; bar fill scales against the max. */
-	value: number;
-	/** Optional leading element — e.g. a flag, avatar, or `<Icon />`. */
-	leading?: React.ReactNode;
-}
-
-export interface LabeledBarListProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** Rows rendered top-to-bottom. */
-	items: LabeledBarListItem[];
-	/**
-	 * CSS variable name (without leading `--`) used for the bar fill. Default
-	 * `chart-1`.
-	 */
-	colorVar?: string;
-	/** Format the value rendered to the right of each label. Default `toLocaleString`. */
-	valueFormatter?: (value: number) => string;
-	/** Pixel height of the row's bar track. Default `4`. */
-	barHeight?: number;
-	/** Caption rendered below the list. */
-	caption?: React.ReactNode;
-}
-
-/**
- * Vertical list of labeled rows with a horizontal progress bar per row. Useful
- * for "top regions", "schema usage", "provider connections" — anywhere a small
- * set of named values needs proportional comparison without a full chart.
- */
-export const LabeledBarList = React.forwardRef<HTMLDivElement, LabeledBarListProps>(
-	(
-		{
-			items,
-			colorVar = "chart-1",
-			valueFormatter = (v) => v.toLocaleString(),
-			barHeight = 4,
-			caption,
-			className,
-			...props
-		},
-		ref,
-	) => {
-		const max = Math.max(1, ...items.map((it) => it.value));
-		return (
-			<div ref={ref} className={cn("w-full", className)} {...props}>
-				<ul className="flex flex-col gap-2.5">
-					{items.map((item, i) => {
-						const pct = Math.max(0, Math.min(100, (item.value / max) * 100));
-						return (
-							<li key={`${i}-${item.value}`} className="flex flex-col gap-1.5">
-								<div className="flex items-center gap-2 text-[13px]">
-									{item.leading && <span className="shrink-0">{item.leading}</span>}
-									<span className="flex-1 truncate">{item.label}</span>
-									<span className="font-mono text-xs text-muted-foreground tabular-nums">
-										{valueFormatter(item.value)}
-									</span>
-								</div>
-								<div
-									className="overflow-hidden rounded-full bg-muted"
-									style={{ height: barHeight }}
-									aria-hidden
-								>
-									<div
-										className="h-full rounded-full"
-										style={{
-											width: `${pct}%`,
-											background: `hsl(var(--${colorVar}))`,
-										}}
-									/>
-								</div>
-							</li>
-						);
-					})}
-				</ul>
-				{caption && <p className="mt-3 text-xs text-muted-foreground">{caption}</p>}
-			</div>
-		);
-	},
-);
-LabeledBarList.displayName = "LabeledBarList";

package/src/components/charts/metric-breakdown.tsx

@@ -1,316 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export type MetricBreakdownTone = "success" | "warning" | "error" | "neutral";
-
-const TONE_HSL: Record<MetricBreakdownTone, string> = {
-	success: "143 70% 40%",
-	warning: "38 92% 50%",
-	error: "0 80% 60%",
-	neutral: "var(--muted-foreground)",
-};
-
-export interface MetricBreakdownRow {
-	/** Row label (often a code or category key). Used as the React key. */
-	label: React.ReactNode;
-	/** Numeric value rendered to the right of the label. */
-	value: number;
-	/**
-	 * Period-over-period change as a percentage. Positive renders as `▲ N%` in
-	 * the success hue, negative as `▼ N%` in the error hue. Omit to hide the
-	 * delta column for that row.
-	 */
-	delta?: number;
-	/**
-	 * CSS variable name (without leading `--`) used for the row's swatch and
-	 * bar fill. Falls back to the wrapper's `defaultColorVar`.
-	 */
-	colorVar?: string;
-}
-
-export interface MetricBreakdownChip {
-	/** Chip label, typically a code or short tag. Used as the React key. */
-	label: React.ReactNode;
-	/** Optional count rendered after a thin separator. */
-	count?: number;
-	/** Visual tone. Default `error`. */
-	tone?: MetricBreakdownTone;
-}
-
-export interface MetricBreakdownProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** Primary metric value rendered as the headline number. */
-	value: React.ReactNode;
-	/** Caption rendered below the headline value (uppercase muted). */
-	label: React.ReactNode;
-	/** Secondary metric rendered top-right (e.g. an error rate). */
-	rate?: React.ReactNode;
-	/** Caption for the secondary metric (uppercase muted). */
-	rateLabel?: React.ReactNode;
-	/** Tone driving the secondary metric color. Default `neutral`. */
-	rateTone?: MetricBreakdownTone;
-	/** Sparkline data points. Rendered as an SVG line + area-fill ramp. */
-	spark?: number[];
-	/** Unit suffix rendered next to the last value of the sparkline, e.g. `req/s`. */
-	sparkUnit?: React.ReactNode;
-	/**
-	 * CSS variable name (without leading `--`) for the sparkline color. Default
-	 * `chart-1`. Also used as the fallback for breakdown rows that omit `colorVar`.
-	 */
-	defaultColorVar?: string;
-	/** Pixel height of the sparkline. Default `36`. */
-	sparkHeight?: number;
-	/** Category breakdown rows. */
-	breakdown?: MetricBreakdownRow[];
-	/** Format breakdown row values. Default `toLocaleString`. */
-	valueFormatter?: (value: number) => string;
-	/** Trailing chip row (e.g. recent error codes). */
-	chips?: MetricBreakdownChip[];
-	/**
-	 * Label rendered before the chip row (uppercase muted). Default `"Errors"`.
-	 * Pass `null` to hide.
-	 */
-	chipsLabel?: React.ReactNode;
-}
-
-/**
- * Multi-section metric card: a headline value with an optional rate, a small
- * inline trend sparkline, a per-category breakdown with delta arrows, and a
- * trailing chip row for recent issues.
- *
- * Designed for "throughput-style" dashboards (token issuance, API request
- * volume, job throughput, sign-ups by source): anywhere a single metric needs
- * to be decomposed by category and contextualized by trend and notable issues
- * in one card. Identity-agnostic; bring your own labels and color tokens.
- */
-export const MetricBreakdown = React.forwardRef<HTMLDivElement, MetricBreakdownProps>(
-	(
-		{
-			value,
-			label,
-			rate,
-			rateLabel,
-			rateTone = "neutral",
-			spark,
-			sparkUnit,
-			defaultColorVar = "chart-1",
-			sparkHeight = 36,
-			breakdown,
-			valueFormatter = (v) => v.toLocaleString(),
-			chips,
-			chipsLabel = "Errors",
-			className,
-			...props
-		},
-		ref,
-	) => {
-		const rateColor =
-			rateTone === "neutral" ? "hsl(var(--muted-foreground))" : `hsl(${TONE_HSL[rateTone]})`;
-		const showChipsLabel = chipsLabel !== null && chipsLabel !== undefined && chipsLabel !== "";
-		return (
-			<div ref={ref} className={cn("w-full", className)} {...props}>
-				<div className="mb-2.5 flex items-baseline justify-between gap-3">
-					<div>
-						<div className="font-mono text-[22px] font-semibold leading-[1.1] tabular-nums">
-							{value}
-						</div>
-						<div className="text-[11px] uppercase tracking-[0.04em] text-muted-foreground">
-							{label}
-						</div>
-					</div>
-					{(rate !== undefined || rateLabel) && (
-						<div className="text-right">
-							<div
-								className="font-mono text-[13px] font-medium tabular-nums"
-								style={{ color: rateColor }}
-							>
-								{rate}
-							</div>
-							{rateLabel && (
-								<div className="text-[11px] uppercase tracking-[0.04em] text-muted-foreground">
-									{rateLabel}
-								</div>
-							)}
-						</div>
-					)}
-				</div>
-
-				{spark && spark.length > 1 && (
-					<MetricBreakdownSpark
-						data={spark}
-						height={sparkHeight}
-						colorVar={defaultColorVar}
-						unit={sparkUnit}
-					/>
-				)}
-
-				{breakdown && breakdown.length > 0 && (
-					<MetricBreakdownRows
-						rows={breakdown}
-						defaultColorVar={defaultColorVar}
-						valueFormatter={valueFormatter}
-					/>
-				)}
-
-				{chips && chips.length > 0 && (
-					<div
-						className={cn(
-							"flex flex-wrap items-center gap-1.5",
-							(breakdown && breakdown.length > 0) || spark
-								? "mt-3 border-t border-border pt-2.5"
-								: "",
-						)}
-					>
-						{showChipsLabel && (
-							<span className="mr-0.5 text-[10.5px] uppercase tracking-[0.04em] text-muted-foreground">
-								{chipsLabel}
-							</span>
-						)}
-						{chips.map((chip, i) => {
-							const tone = chip.tone ?? "error";
-							const hsl = TONE_HSL[tone];
-							return (
-								<span
-									key={`${i}-${typeof chip.label === "string" ? chip.label : i}`}
-									className="inline-flex items-center gap-1 rounded font-mono text-[10.5px]"
-									style={{
-										padding: "2px 6px",
-										background: `hsl(${hsl} / 0.1)`,
-										color: `hsl(${hsl})`,
-									}}
-								>
-									{chip.label}
-									{chip.count !== undefined && <span className="opacity-70">·{chip.count}</span>}
-								</span>
-							);
-						})}
-					</div>
-				)}
-			</div>
-		);
-	},
-);
-MetricBreakdown.displayName = "MetricBreakdown";
-
-interface MetricBreakdownSparkProps {
-	data: number[];
-	height: number;
-	colorVar: string;
-	unit?: React.ReactNode;
-}
-
-function MetricBreakdownSpark({ data, height, colorVar, unit }: MetricBreakdownSparkProps) {
-	const max = Math.max(...data);
-	const min = Math.min(...data);
-	const range = max - min || 1;
-	const w = (data.length - 1) * 10;
-	const h = height;
-	const pts = data
-		.map((v, i) => {
-			const x = i * 10;
-			const y = h - 2 - ((v - min) / range) * (h - 6);
-			return `${x},${y}`;
-		})
-		.join(" ");
-	const area = `0,${h} ${pts} ${w},${h}`;
-	const last = data[data.length - 1];
-	const lastY = h - 2 - ((last - min) / range) * (h - 6);
-	const fillId = React.useId();
-	return (
-		<div className="relative mb-3.5" style={{ height }}>
-			<svg
-				viewBox={`0 0 ${w} ${h}`}
-				preserveAspectRatio="none"
-				className="h-full w-full overflow-visible"
-				aria-hidden
-			>
-				<defs>
-					<linearGradient id={fillId} x1="0" x2="0" y1="0" y2="1">
-						<stop offset="0%" stopColor={`hsl(var(--${colorVar}))`} stopOpacity="0.25" />
-						<stop offset="100%" stopColor={`hsl(var(--${colorVar}))`} stopOpacity="0" />
-					</linearGradient>
-				</defs>
-				<polygon points={area} fill={`url(#${fillId})`} />
-				<polyline
-					points={pts}
-					fill="none"
-					stroke={`hsl(var(--${colorVar}))`}
-					strokeWidth="1.5"
-					vectorEffect="non-scaling-stroke"
-				/>
-				<circle cx={w} cy={lastY} r="2.5" fill={`hsl(var(--${colorVar}))`} />
-			</svg>
-			{unit !== undefined && (
-				<div
-					className="absolute right-0 top-0 bg-card px-1 font-mono text-[11px]"
-					style={{ color: `hsl(var(--${colorVar}))` }}
-				>
-					{last}
-					{typeof unit === "string" ? ` ${unit}` : <> {unit}</>}
-				</div>
-			)}
-		</div>
-	);
-}
-
-interface MetricBreakdownRowsProps {
-	rows: MetricBreakdownRow[];
-	defaultColorVar: string;
-	valueFormatter: (value: number) => string;
-}
-
-function MetricBreakdownRows({ rows, defaultColorVar, valueFormatter }: MetricBreakdownRowsProps) {
-	const total = rows.reduce((sum, r) => sum + r.value, 0) || 1;
-	return (
-		<div className="flex flex-col gap-2">
-			{rows.map((row, i) => {
-				const colorVar = row.colorVar ?? defaultColorVar;
-				const pct = (row.value / total) * 100;
-				const hasDelta = row.delta !== undefined;
-				const up = hasDelta && (row.delta as number) >= 0;
-				const deltaHsl = up ? TONE_HSL.success : TONE_HSL.error;
-				return (
-					<div
-						key={`${i}-${typeof row.label === "string" ? row.label : i}`}
-						className="text-[12.5px]"
-					>
-						<div className="mb-1 flex items-center gap-2">
-							<span
-								className="size-2 shrink-0 rounded-sm"
-								style={{ background: `hsl(var(--${colorVar}))` }}
-								aria-hidden
-							/>
-							<span className="flex-1 truncate font-mono text-[11.5px] text-foreground">
-								{row.label}
-							</span>
-							<span className="font-mono text-[11.5px] tabular-nums">
-								{valueFormatter(row.value)}
-							</span>
-							{hasDelta && (
-								<span
-									className="min-w-[38px] text-right font-mono text-[10.5px] tabular-nums"
-									style={{ color: `hsl(${deltaHsl})` }}
-								>
-									{up ? "▲" : "▼"} {Math.abs(row.delta as number)}%
-								</span>
-							)}
-						</div>
-						<div
-							className="overflow-hidden rounded-full bg-muted"
-							style={{ height: 3 }}
-							aria-hidden
-						>
-							<div
-								className="h-full rounded-full"
-								style={{
-									width: `${pct}%`,
-									background: `hsl(var(--${colorVar}))`,
-								}}
-							/>
-						</div>
-					</div>
-				);
-			})}
-		</div>
-	);
-}

package/src/components/charts/references.tsx

@@ -1,8 +0,0 @@
-"use client";
-
-/**
- * Reference primitives — pure pass-throughs. Theming via CSS in
- * `<ChartContainer>` (`[&_.recharts-reference-line_[stroke='#ccc']]:stroke-border`).
- * Wrapping breaks Recharts' child-by-type detection.
- */
-export { ReferenceArea, ReferenceDot, ReferenceLine } from "recharts";

package/src/components/charts/service-health-list.tsx

@@ -1,85 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export type ServiceHealthStatus = "healthy" | "degraded" | "down";
-
-export interface ServiceHealthItem {
-	/** Service name shown in the row. Used as the React key. */
-	name: string;
-	/** Status — drives the dot color. */
-	status: ServiceHealthStatus;
-	/**
-	 * Right-aligned meta cells, monospace, muted-foreground. Pass an array of
-	 * primitives or React nodes — each renders as its own cell.
-	 */
-	meta?: React.ReactNode[];
-}
-
-export interface ServiceHealthListProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** Service rows rendered top-to-bottom. */
-	items: ServiceHealthItem[];
-	/** Caption rendered below the list. */
-	caption?: React.ReactNode;
-}
-
-const DOT_TOKENS: Record<ServiceHealthStatus, string> = {
-	healthy: "143 70% 45%",
-	degraded: "38 92% 50%",
-	down: "0 80% 60%",
-};
-
-/**
- * Vertical list of services with a colored status dot, name, and optional
- * monospace meta cells (latency, uptime, region, …). The dot has a 3-px halo
- * matching the status hue at 18% opacity to pull focus.
- */
-export const ServiceHealthList = React.forwardRef<HTMLDivElement, ServiceHealthListProps>(
-	({ items, caption, className, ...props }, ref) => {
-		return (
-			<div ref={ref} className={cn("w-full", className)} {...props}>
-				<ul className="flex flex-col gap-2.5">
-					{items.map((item) => {
-						const hsl = DOT_TOKENS[item.status];
-						const isHealthy = item.status === "healthy";
-						return (
-							<li key={item.name} className="flex items-center gap-2.5 text-[13px]">
-								<span className="relative flex size-2 shrink-0">
-									{isHealthy && (
-										<span
-											aria-hidden
-											className="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
-											style={{ background: `hsl(${hsl})` }}
-										/>
-									)}
-									<span
-										role="img"
-										aria-label={`Status: ${item.status}`}
-										className="relative inline-flex size-2 rounded-full"
-										style={{
-											background: `hsl(${hsl})`,
-											boxShadow: isHealthy
-												? `0 0 6px hsl(${hsl}), 0 0 0 3px hsl(${hsl} / 0.18)`
-												: `0 0 0 3px hsl(${hsl} / 0.18)`,
-										}}
-									/>
-								</span>
-								<span className="flex-1 font-medium">{item.name}</span>
-								{item.meta?.map((cell, i) => (
-									<span
-										key={`${item.name}-meta-${i}`}
-										className="font-mono text-[11.5px] text-muted-foreground"
-									>
-										{cell}
-									</span>
-								))}
-							</li>
-						);
-					})}
-				</ul>
-				{caption && <p className="mt-3 text-xs text-muted-foreground">{caption}</p>}
-			</div>
-		);
-	},
-);
-ServiceHealthList.displayName = "ServiceHealthList";