@olympusoss/canvas 2.20.1 → 4.0.0

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";

package/src/components/charts/sparkline-area.tsx

@@ -1,80 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface SparklineAreaProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** Values to plot. Each entry maps to a point on the area line. Needs at least 2 points. */
-	data: number[];
-	/** Pixel height of the chart area. */
-	height?: number;
-	/**
-	 * CSS variable name (without leading `--`) used for the stroke and fill.
-	 * Default `chart-1`. The variable should resolve to an HSL triplet.
-	 */
-	colorVar?: string;
-	/** Caption rendered below the chart. */
-	caption?: React.ReactNode;
-}
-
-/**
- * Pure-SVG area sparkline for inline embedding in `<StatCard>` /
- * `<SectionCard>`. Renders a filled area with a gradient fade, a stroke line,
- * and a dot on the last data point. Decorative only (no tooltips, no axes).
- */
-export const SparklineArea = React.forwardRef<HTMLDivElement, SparklineAreaProps>(
-	({ data, height = 48, colorVar = "chart-1", caption, className, ...props }, ref) => {
-		const fillId = React.useId();
-
-		if (data.length < 2) return null;
-
-		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 padding = 3; // vertical padding for the end-dot
-
-		const pts = data
-			.map((v, i) => {
-				const x = i * 10;
-				const y = h - padding - ((v - min) / range) * (h - padding * 2);
-				return `${x},${y}`;
-			})
-			.join(" ");
-
-		const area = `0,${h} ${pts} ${w},${h}`;
-		const last = data[data.length - 1];
-		const lastY = h - padding - ((last - min) / range) * (h - padding * 2);
-		const color = `hsl(var(--${colorVar}))`;
-
-		return (
-			<div ref={ref} className={cn("w-full", className)} {...props}>
-				<svg
-					viewBox={`0 0 ${w} ${h}`}
-					preserveAspectRatio="none"
-					className="h-full w-full overflow-visible"
-					style={{ height }}
-					aria-hidden
-				>
-					<defs>
-						<linearGradient id={fillId} x1="0" x2="0" y1="0" y2="1">
-							<stop offset="0%" stopColor={color} stopOpacity="0.25" />
-							<stop offset="100%" stopColor={color} stopOpacity="0" />
-						</linearGradient>
-					</defs>
-					<polygon points={area} fill={`url(#${fillId})`} />
-					<polyline
-						points={pts}
-						fill="none"
-						stroke={color}
-						strokeWidth="1.5"
-						vectorEffect="non-scaling-stroke"
-					/>
-					<circle cx={w} cy={lastY} r="2.5" fill={color} />
-				</svg>
-				{caption && <p className="mt-2 text-xs text-muted-foreground">{caption}</p>}
-			</div>
-		);
-	},
-);
-SparklineArea.displayName = "SparklineArea";

package/src/components/charts/sparkline.tsx

@@ -1,52 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface SparklineProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** Values to plot. Each entry maps to a bar. */
-	data: number[];
-	/** Pixel height of the chart. */
-	height?: number;
-	/**
-	 * CSS variable name (without leading `--`) used for the bar fill. Default
-	 * `chart-1`. The variable should resolve to an HSL triplet for `hsl()`.
-	 */
-	colorVar?: string;
-	/** Pixel gap between bars. */
-	gap?: number;
-	/** Caption rendered below the bars. */
-	caption?: React.ReactNode;
-}
-
-/**
- * Pure-CSS mini bar chart for inline embedding in `<StatCard>` /
- * `<SectionCard>`. Decorative — for live data, use a `<BarChart>` from the
- * charts tier with proper axes and tooltips.
- */
-export const Sparkline = React.forwardRef<HTMLDivElement, SparklineProps>(
-	({ data, height = 160, colorVar = "chart-1", gap = 4, caption, className, ...props }, ref) => {
-		const max = Math.max(1, ...data);
-		return (
-			<div ref={ref} className={cn("w-full", className)} {...props}>
-				<div className="flex w-full items-end" style={{ height, gap }}>
-					{data.map((value, i) => {
-						const pct = Math.max(0, Math.min(100, (value / max) * 100));
-						return (
-							<div
-								key={`bar-${i}-${value}`}
-								className="flex-1 rounded-sm"
-								style={{
-									height: `${pct}%`,
-									background: `hsl(var(--${colorVar}))`,
-								}}
-								aria-hidden
-							/>
-						);
-					})}
-				</div>
-				{caption && <p className="mt-3 text-xs text-muted-foreground">{caption}</p>}
-			</div>
-		);
-	},
-);
-Sparkline.displayName = "Sparkline";

package/src/components/charts/stacked-bar.tsx

@@ -1,104 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface StackedBarSegment {
-	/** Label shown in the legend. Used as the React key. */
-	label: string;
-	/** Numeric value (raw count or percentage). Segments size proportionally to the sum. */
-	value: number;
-	/**
-	 * CSS variable name (without leading `--`) used for the segment fill. Default
-	 * `chart-1`. Each segment can override; unspecified segments fall through
-	 * to the wrapper's `defaultColorVar`.
-	 */
-	colorVar?: string;
-}
-
-export interface StackedBarProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** Segments rendered left-to-right with width proportional to `value`. */
-	segments: StackedBarSegment[];
-	/**
-	 * Fallback CSS variable name for segments that omit `colorVar`. Default
-	 * `chart-1`.
-	 */
-	defaultColorVar?: string;
-	/** Pixel height of the bar pill. Default `10`. */
-	height?: number;
-	/** Show the legend list below the bar. Default `true`. */
-	showLegend?: boolean;
-	/** Format the per-segment value in the legend. Default `(v) => `${v}%``. */
-	valueFormatter?: (value: number) => string;
-	/** Caption rendered below the legend. */
-	caption?: React.ReactNode;
-}
-
-/**
- * Horizontal stacked-percent bar with an optional swatch legend below. Segments
- * are sized proportionally to their value's share of the total — pass raw
- * counts or pre-computed percentages, the rendering is the same.
- */
-export const StackedBar = React.forwardRef<HTMLDivElement, StackedBarProps>(
-	(
-		{
-			segments,
-			defaultColorVar = "chart-1",
-			height = 10,
-			showLegend = true,
-			valueFormatter = (v) => `${v}%`,
-			caption,
-			className,
-			...props
-		},
-		ref,
-	) => {
-		const total = segments.reduce((sum, s) => sum + s.value, 0) || 1;
-		return (
-			<div ref={ref} className={cn("w-full", className)} {...props}>
-				<div
-					className="flex w-full overflow-hidden rounded-full bg-muted"
-					style={{ height }}
-					role="presentation"
-				>
-					{segments.map((seg) => {
-						const pct = (seg.value / total) * 100;
-						const colorVar = seg.colorVar ?? defaultColorVar;
-						return (
-							<div
-								key={seg.label}
-								style={{
-									width: `${pct}%`,
-									background: `hsl(var(--${colorVar}))`,
-								}}
-								title={`${seg.label}: ${valueFormatter(seg.value)}`}
-								aria-hidden
-							/>
-						);
-					})}
-				</div>
-				{showLegend && (
-					<ul className="mt-3 flex flex-col gap-2">
-						{segments.map((seg) => {
-							const colorVar = seg.colorVar ?? defaultColorVar;
-							return (
-								<li key={seg.label} className="flex items-center gap-2.5 text-[13px]">
-									<span
-										className="size-2 shrink-0 rounded-full"
-										style={{ background: `hsl(var(--${colorVar}))` }}
-										aria-hidden
-									/>
-									<span className="flex-1">{seg.label}</span>
-									<span className="font-mono text-xs text-muted-foreground">
-										{valueFormatter(seg.value)}
-									</span>
-								</li>
-							);
-						})}
-					</ul>
-				)}
-				{caption && <p className="mt-3 text-xs text-muted-foreground">{caption}</p>}
-			</div>
-		);
-	},
-);
-StackedBar.displayName = "StackedBar";

package/src/components/charts/text.tsx

@@ -1,10 +0,0 @@
-"use client";
-
-/**
- * Text-rendering primitives. `Label` is aliased to `ChartLabel` to avoid
- * collision with canvas's form `Label` atom.
- *
- * Re-exported via `export { … }` so TypeScript doesn't have to name internal
- * Recharts prop types in the d.ts emit.
- */
-export { Label as ChartLabel, LabelList, Text } from "recharts";