@olympusoss/canvas 2.6.19

package/src/components/charts/chart-legend.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "../../lib/utils";
+import { getPayloadConfigFromPayload, useChart } from "./chart-container";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> &
+		Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+			hideIcon?: boolean;
+			nameKey?: string;
+		}
+>(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+	const { config } = useChart();
+
+	if (!payload?.length) {
+		return null;
+	}
+
+	return (
+		<div
+			ref={ref}
+			className={cn(
+				"flex items-center justify-center gap-4",
+				verticalAlign === "top" ? "pb-3" : "pt-3",
+				className,
+			)}
+		>
+			{payload
+				.filter((item) => item.type !== "none")
+				.map((item) => {
+					/* c8 ignore next -- prefers nameKey when provided; remaining fallbacks are recharts-internal edge cases */
+					const key = `${nameKey || item.dataKey || "value"}`;
+					const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+					return (
+						<div
+							key={item.value}
+							className={cn(
+								"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+							)}
+						>
+							{itemConfig?.icon && !hideIcon ? (
+								<itemConfig.icon />
+							) : (
+								<div
+									className="h-2 w-2 shrink-0 rounded-[2px]"
+									style={{
+										backgroundColor: item.color,
+									}}
+								/>
+							)}
+							{itemConfig?.label}
+						</div>
+					);
+				})}
+		</div>
+	);
+});
+ChartLegendContent.displayName = "ChartLegend";
+
+export { ChartLegend, ChartLegendContent };

package/src/components/charts/chart-tooltip.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "../../lib/utils";
+import { getPayloadConfigFromPayload, useChart } from "./chart-container";
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+		React.ComponentProps<"div"> & {
+			hideLabel?: boolean;
+			hideIndicator?: boolean;
+			indicator?: "line" | "dot" | "dashed";
+			nameKey?: string;
+			labelKey?: string;
+		}
+>(
+	(
+		{
+			active,
+			payload,
+			className,
+			indicator = "dot",
+			hideLabel = false,
+			hideIndicator = false,
+			label,
+			labelFormatter,
+			labelClassName,
+			formatter,
+			color,
+			nameKey,
+			labelKey,
+		},
+		ref,
+	) => {
+		const { config } = useChart();
+
+		const tooltipLabel = React.useMemo(() => {
+			if (hideLabel || !payload?.length) {
+				return null;
+			}
+
+			const [item] = payload;
+			/* c8 ignore next -- the || chain prefers labelKey when set; the remaining fallbacks are recharts-internal edge cases */
+			const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+			const itemConfig = getPayloadConfigFromPayload(config, item, key);
+			const value =
+				!labelKey && typeof label === "string"
+					? config[label as keyof typeof config]?.label || label
+					: itemConfig?.label;
+
+			if (labelFormatter) {
+				return (
+					<div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
+				);
+			}
+
+			/* c8 ignore next 3 -- defensive fallback: value is always truthy when this branch is reached in practice */
+			if (!value) {
+				return null;
+			}
+
+			return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+		}, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+		if (!active || !payload?.length) {
+			return null;
+		}
+
+		const nestLabel = payload.length === 1 && indicator !== "dot";
+
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+					className,
+				)}
+			>
+				{!nestLabel ? tooltipLabel : null}
+				<div className="grid gap-1.5">
+					{payload
+						.filter((item) => item.type !== "none")
+						.map((item, index) => {
+							/* c8 ignore next -- prefers nameKey when provided; remaining fallbacks are recharts-internal edge cases */
+							const key = `${nameKey || item.name || item.dataKey || "value"}`;
+							const itemConfig = getPayloadConfigFromPayload(config, item, key);
+							/* c8 ignore next -- defers to explicit color prop; remaining fallbacks cover recharts-internal edge cases */
+							const indicatorColor = color || item.payload.fill || item.color;
+
+							return (
+								<div
+									key={item.dataKey}
+									className={cn(
+										"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+										indicator === "dot" && "items-center",
+									)}
+								>
+									{formatter && item?.value !== undefined && item.name ? (
+										formatter(item.value, item.name, item, index, item.payload)
+									) : (
+										<>
+											{itemConfig?.icon ? (
+												<itemConfig.icon />
+											) : (
+												!hideIndicator && (
+													<div
+														className={cn(
+															"shrink-0 rounded-[2px] border-[var(--color-border)] bg-[var(--color-bg)]",
+															{
+																"h-2.5 w-2.5": indicator === "dot",
+																"w-1": indicator === "line",
+																"w-0 border-[1.5px] border-dashed bg-transparent":
+																	indicator === "dashed",
+																"my-0.5": nestLabel && indicator === "dashed",
+															},
+														)}
+														style={
+															{
+																"--color-bg": indicatorColor,
+																"--color-border": indicatorColor,
+															} as React.CSSProperties
+														}
+													/>
+												)
+											)}
+											<div
+												className={cn(
+													"flex flex-1 justify-between leading-none",
+													nestLabel ? "items-end" : "items-center",
+												)}
+											>
+												<div className="grid gap-1.5">
+													{nestLabel ? tooltipLabel : null}
+													<span className="text-muted-foreground">
+														{itemConfig?.label || item.name}
+													</span>
+												</div>
+												{item.value && (
+													<span className="font-mono font-medium tabular-nums text-foreground">
+														{item.value.toLocaleString()}
+													</span>
+												)}
+											</div>
+										</>
+									)}
+								</div>
+							);
+						})}
+				</div>
+			</div>
+		);
+	},
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+export { ChartTooltip, ChartTooltipContent };

package/src/components/charts/chart-types.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import type * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+/**
+ * Chart-type wrappers. Each wraps a Recharts top-level chart component with
+ * sensible default `margin` so axis labels don't clip. Children pass through
+ * UNWRAPPED — Recharts uses `findAllByType` on its direct children to detect
+ * `<Line>` / `<XAxis>` / `<CartesianGrid>` etc., so any extra wrapper element
+ * (Context.Provider, fragment-only-on-render, etc.) breaks chart rendering.
+ *
+ * The auto-palette context is established by `<ChartContainer>` instead, so
+ * data primitives still cycle through `--chart-N` colours when no fill /
+ * stroke is supplied.
+ *
+ * Margin defaults are merged with any user-supplied margin (user wins on
+ * conflict). Everything else is straight pass-through.
+ */
+
+const DEFAULT_MARGIN = { top: 12, right: 12, bottom: 4, left: 0 } as const;
+
+function withDefaults<P extends { children?: React.ReactNode; margin?: object }>(
+	Comp: React.ComponentType<P>,
+): React.FC<P> {
+	const Wrapped = ({ children, margin, ...rest }: P) => {
+		const merged = { ...DEFAULT_MARGIN, ...(margin ?? {}) };
+		const props = { ...rest, margin: merged } as any;
+		return <Comp {...props}>{children}</Comp>;
+	};
+	/* c8 ignore next -- defensive: every recharts top-level chart component ships with a `displayName`; the `?? Comp.name ?? "Anonymous"` fallback chain only fires for hand-rolled non-recharts wrappers */
+	Wrapped.displayName = `Chart(${(Comp as { displayName?: string }).displayName ?? Comp.name ?? "Anonymous"})`;
+	return Wrapped;
+}
+
+export const LineChart = withDefaults(RechartsPrimitive.LineChart);
+export const BarChart = withDefaults(RechartsPrimitive.BarChart);
+export const AreaChart = withDefaults(RechartsPrimitive.AreaChart);
+export const ComposedChart = withDefaults(RechartsPrimitive.ComposedChart);
+export const PieChart = withDefaults(RechartsPrimitive.PieChart);
+export const ScatterChart = withDefaults(RechartsPrimitive.ScatterChart);
+export const RadarChart = withDefaults(RechartsPrimitive.RadarChart);
+export const RadialBarChart = withDefaults(RechartsPrimitive.RadialBarChart);
+export const FunnelChart = withDefaults(RechartsPrimitive.FunnelChart);
+export const SunburstChart = withDefaults(RechartsPrimitive.SunburstChart);
+
+// Treemap and Sankey have a different children shape — pure pass-throughs.
+export const Treemap = RechartsPrimitive.Treemap;
+export const Sankey = RechartsPrimitive.Sankey;

package/src/components/charts/containers.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+/**
+ * Container-level Recharts primitives. Pure pass-throughs.
+ * `ResponsiveContainer` is also re-rendered internally by `<ChartContainer>`,
+ * but consumers might want to use it directly for non-canvas-themed charts.
+ *
+ * NOTE: re-exported via `export { … }` (not `export const = …`) so TypeScript
+ * doesn't have to name internal Recharts prop types in the d.ts emit.
+ */
+export { Brush, Layer, ResponsiveContainer, Surface } from "recharts";

package/src/components/charts/data.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+/**
+ * Data-primitive re-exports. These are direct pass-throughs of the Recharts
+ * primitives — wrapping them in our own function components breaks Recharts'
+ * `findAllByType` introspection (it looks for `child.type === Bar` etc., and
+ * a wrapper's `type` is our function, not Bar). The earlier wrapped version
+ * crashed Recharts with "Cannot read properties of undefined (reading
+ * 'yAxisId')" because the chart-type couldn't find our axes / data.
+ *
+ * Auto-palette cycling happens inside `<ChartContainer>` via a deep
+ * `React.cloneElement` walk that injects `fill`/`stroke` defaults when the
+ * consumer didn't supply one. The wrapped types remain the real Recharts
+ * classes, so axis detection / chart-type child resolution keep working.
+ */
+export { Area, Bar, Funnel, Line, Pie, Radar, RadialBar, Scatter } from "recharts";

package/src/components/charts/details.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+/**
+ * Detail-level Recharts primitives. Pure pass-throughs — no theming
+ * opportunity, but re-exported here so consumers can import the entire
+ * Recharts surface from canvas.
+ *
+ * `Cell` and `Customized` are aliased to `ChartCell` / `ChartCustomized` to
+ * avoid likely future collisions with canvas-domain primitives.
+ *
+ * Re-exported via `export { … }` (not `export const = …`) so TypeScript
+ * doesn't have to name internal Recharts prop types in the d.ts emit.
+ */
+export {
+	Cell as ChartCell,
+	Cross,
+	Curve,
+	Customized as ChartCustomized,
+	Dot,
+	ErrorBar,
+	Polygon,
+	Rectangle,
+	Sector,
+	Trapezoid,
+} from "recharts";

package/src/components/charts/gauge.tsx

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,8 @@
+"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

@@ -0,0 +1,62 @@
+// 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

@@ -0,0 +1,85 @@
+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/references.tsx

@@ -0,0 +1,8 @@
+"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

@@ -0,0 +1,73 @@
+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];
+						return (
+							<li key={item.name} className="flex items-center gap-2.5 text-[13px]">
+								<span
+									role="img"
+									className="size-2 shrink-0 rounded-full"
+									style={{
+										background: `hsl(${hsl})`,
+										boxShadow: `0 0 0 3px hsl(${hsl} / 0.18)`,
+									}}
+									aria-label={`Status: ${item.status}`}
+								/>
+								<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";