@olympusoss/canvas 2.20.2 → 3.2.0

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

@@ -1,254 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-
-import { cn } from "../../lib/utils";
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const;
-
-/**
- * Recharts data primitives that should auto-cycle through `--chart-N`
- * colours when the consumer didn't pass an explicit `fill` / `stroke`.
- *
- * We compare by reference (the actual class component from `recharts`) — the
- * deep-clone walker uses `child.type === T` to detect them. This works because
- * canvas re-exports these symbols from `recharts` directly (see `data.tsx`).
- */
-const PALETTE_TARGETS = new Set<unknown>([
-	RechartsPrimitive.Line,
-	RechartsPrimitive.Bar,
-	RechartsPrimitive.Area,
-	RechartsPrimitive.Pie,
-	RechartsPrimitive.Scatter,
-	RechartsPrimitive.Radar,
-	RechartsPrimitive.RadialBar,
-	RechartsPrimitive.Funnel,
-]);
-
-const PALETTE_SIZE = 5;
-
-function nextColour(counter: { i: number }) {
-	const idx = counter.i++ % PALETTE_SIZE;
-	return `hsl(var(--chart-${idx + 1}))`;
-}
-
-/**
- * Walk a Pie's `<Cell>` children and inject per-cell palette fills when none
- * is set, so each slice gets a distinct hue without requiring the consumer to
- * write `<Cell fill={...} />` for every entry.
- */
-function paintPieCells(children: React.ReactNode, counter: { i: number }): React.ReactNode {
-	return React.Children.map(children, (child) => {
-		if (!React.isValidElement(child)) return child;
-		const cellProps = child.props as { fill?: unknown };
-		if (child.type === RechartsPrimitive.Cell && cellProps.fill === undefined) {
-			return React.cloneElement(child, { fill: nextColour(counter) } as Partial<typeof cellProps>);
-		}
-		return child;
-	});
-}
-
-/**
- * Inject per-row `fill` on Funnel data when the consumer didn't supply one.
- * Recharts Funnel reads each datum's `fill` to colour the stage, so we map
- * the array and assign palette colours in order.
- */
-function paintFunnelData<T extends { fill?: unknown }>(data: T[], counter: { i: number }): T[] {
-	return data.map((row) => (row.fill === undefined ? { ...row, fill: nextColour(counter) } : row));
-}
-
-/**
- * Recursively walk the children, cloning any data primitive that's missing
- * `fill`/`stroke` and injecting an `hsl(var(--chart-N))` default. Counter is
- * passed by reference so order is deterministic across the entire tree.
- */
-function applyPalette(children: React.ReactNode, counter: { i: number }): React.ReactNode {
-	return React.Children.map(children, (child) => {
-		if (!React.isValidElement(child)) return child;
-		const props = child.props as {
-			fill?: unknown;
-			stroke?: unknown;
-			children?: React.ReactNode;
-			data?: unknown;
-			label?: unknown;
-		};
-
-		// Pie: walk Cell children and assign per-slice palette colours so each
-		// slice is distinct. Also default `label={true}` so slices render their
-		// data-key value at the perimeter without needing a `<LabelList>`.
-		if (child.type === RechartsPrimitive.Pie) {
-			const next: Record<string, unknown> = {};
-			if (props.children !== undefined) {
-				next.children = paintPieCells(props.children, counter);
-			} else if (props.fill === undefined && props.stroke === undefined) {
-				const colour = nextColour(counter);
-				next.fill = colour;
-				next.stroke = colour;
-			}
-			if (props.label === undefined) next.label = true;
-			return React.cloneElement(child, next as Partial<typeof props>);
-		}
-
-		// Funnel: distribute palette colours across the data array (Recharts
-		// reads `fill` from each datum, not from the <Funnel> element).
-		if (child.type === RechartsPrimitive.Funnel && Array.isArray(props.data)) {
-			return React.cloneElement(child, {
-				data: paintFunnelData(props.data as { fill?: unknown }[], counter),
-			} as Partial<typeof props>);
-		}
-
-		if (PALETTE_TARGETS.has(child.type)) {
-			if (props.fill === undefined && props.stroke === undefined) {
-				const colour = nextColour(counter);
-				// Pie/Radar/Area also benefit from a matching stroke; the
-				// component decides which one applies (Bar reads fill, Line
-				// reads stroke, etc.).
-				return React.cloneElement(child, {
-					fill: colour,
-					stroke: colour,
-				} as Partial<typeof props>);
-			}
-			return child;
-		}
-
-		// Recurse into children of layout / chart-type / fragment elements so
-		// data primitives nested inside (e.g. <BarChart><Bar/></BarChart>)
-		// still get assigned a palette colour.
-		if (props.children !== undefined) {
-			return React.cloneElement(
-				child,
-				{} as Partial<typeof props>,
-				applyPalette(props.children, counter),
-			);
-		}
-		return child;
-	});
-}
-
-export type ChartConfig = {
-	[k in string]: {
-		label?: React.ReactNode;
-		icon?: React.ComponentType;
-	} & (
-		| { color?: string; theme?: never }
-		| { color?: never; theme: Record<keyof typeof THEMES, string> }
-	);
-};
-
-interface ChartContextProps {
-	config: ChartConfig;
-}
-
-const ChartContext = React.createContext<ChartContextProps | null>(null);
-
-export function useChart() {
-	const context = React.useContext(ChartContext);
-
-	if (!context) {
-		throw new Error("useChart must be used within a <ChartContainer />");
-	}
-
-	return context;
-}
-
-const ChartContainer = React.forwardRef<
-	HTMLDivElement,
-	React.ComponentProps<"div"> & {
-		config: ChartConfig;
-		children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
-	}
->(({ id, className, children, config, ...props }, ref) => {
-	const uniqueId = React.useId();
-	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-
-	const themedChildren = React.useMemo(
-		() => applyPalette(children, { i: 0 }) as typeof children,
-		[children],
-	);
-
-	return (
-		<ChartContext.Provider value={{ config }}>
-			<div
-				data-chart={chartId}
-				ref={ref}
-				className={cn(
-					"flex aspect-video w-full justify-center text-xs [&_.recharts-cartesian-axis-line]:stroke-border [&_.recharts-cartesian-axis-tick-line]:stroke-transparent [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-					className,
-				)}
-				{...props}
-			>
-				<ChartStyle id={chartId} config={config} />
-				<RechartsPrimitive.ResponsiveContainer>
-					{themedChildren}
-				</RechartsPrimitive.ResponsiveContainer>
-			</div>
-		</ChartContext.Provider>
-	);
-});
-ChartContainer.displayName = "Chart";
-
-export const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-	const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
-
-	if (!colorConfig.length) {
-		return null;
-	}
-
-	return (
-		<style
-			dangerouslySetInnerHTML={{
-				__html: Object.entries(THEMES)
-					.map(
-						([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-	.map(([key, itemConfig]) => {
-		const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
-		return color ? `  --color-${key}: ${color};` : null;
-	})
-	.join("\n")}
-}
-`,
-					)
-					.join("\n"),
-			}}
-		/>
-	);
-};
-
-/**
- * Look up the canvas config entry that matches a Recharts payload item.
- * Used by tooltip and legend components to resolve labels / icons / colours
- * from the ChartConfig prop.
- */
-export function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
-	/* c8 ignore next 3 -- defensive guard: payload is always a recharts item object at call sites */
-	if (typeof payload !== "object" || payload === null) {
-		return undefined;
-	}
-
-	const payloadPayload =
-		"payload" in payload && typeof payload.payload === "object" && payload.payload !== null
-			? payload.payload
-			: undefined;
-
-	let configLabelKey: string = key;
-
-	/* c8 ignore next 3 -- defensive name-key lookup: real recharts payloads don't carry this shape */
-	if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
-		configLabelKey = payload[key as keyof typeof payload] as string;
-	} else if (
-		/* c8 ignore next 3 -- defensive nested-name lookup: only reachable with custom dataset shape */
-		payloadPayload &&
-		key in payloadPayload &&
-		typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-	) {
-		configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
-	}
-
-	return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
-}
-
-export { ChartContainer };

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

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

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