@olympusoss/canvas 2.20.1 → 4.0.0

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

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

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

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

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

@@ -1,25 +0,0 @@
-"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/dot-pulse.tsx

@@ -1,61 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface DotPulseProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** Number of active (pulsing) dots. Clamped to `[0, total]`. */
-	count: number;
-	/** Total number of dots rendered. Default `5`. */
-	total?: number;
-	/**
-	 * CSS variable name (without leading `--`) used for active dot fill.
-	 * Default `chart-1`. The variable should resolve to an HSL triplet.
-	 */
-	colorVar?: string;
-}
-
-/**
- * Pure-CSS severity indicator: a row of small circles where the first `count`
- * dots pulse with color and the rest are muted. Designed for `<StatCard>`
- * slots where no time-series data exists (e.g. lockout counts).
- */
-export const DotPulse = React.forwardRef<HTMLDivElement, DotPulseProps>(
-	({ count, total = 5, colorVar = "chart-1", className, ...props }, ref) => {
-		const active = Math.max(0, Math.min(total, count));
-		const color = `hsl(var(--${colorVar}))`;
-
-		return (
-			<div
-				ref={ref}
-				className={cn("flex items-center gap-2", className)}
-				role="presentation"
-				{...props}
-			>
-				{Array.from({ length: total }, (_, i) => {
-					const isActive = i < active;
-					return (
-						<span
-							key={i}
-							className={cn("inline-block size-2 rounded-full", !isActive && "bg-muted")}
-							style={
-								isActive
-									? {
-											background: color,
-											animation: `canvas-dot-pulse 1.5s ease-in-out infinite`,
-											animationDelay: `${i * 0.15}s`,
-										}
-									: undefined
-							}
-							aria-hidden
-						/>
-					);
-				})}
-				<style>{`@keyframes canvas-dot-pulse {
-  0%, 100% { transform: scale(1); opacity: 1; }
-  50% { transform: scale(1.4); opacity: 0.5; }
-}`}</style>
-			</div>
-		);
-	},
-);
-DotPulse.displayName = "DotPulse";

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