@glyphui/ui 0.3.0 → 0.5.0

package/dist/patterns/chart/cartesian.d.ts

@@ -0,0 +1,128 @@
+import { ChartColorValue, ChartStateProps, Key } from "./chart-parts.js";
+import { ReactNode } from "react";
+//#region src/patterns/chart/cartesian.d.ts
+export interface ChartSeries<T> {
+  /** Field of each data row holding this series' value. */
+  key: Key<T>;
+  /** Name shown in the legend, tooltip and accessible table. Defaults to `key`. */
+  label?: string;
+  /** A theme color name (`chart-2`, `primary`, ...) or any CSS color. Defaults follow the theme palette. */
+  color?: ChartColorValue;
+}
+type AxisBound = number | 'auto' | 'dataMin' | 'dataMax';
+export interface ChartAxisOptions {
+  hide?: boolean;
+  /** Formats tick labels. The y axis defaults to `valueFormatter`. */
+  formatter?: (value: never) => string;
+  /** Axis title. */
+  label?: string;
+  /** Y axis only: width reserved for tick labels, in pixels. Default 48. */
+  width?: number;
+  /** Y axis only: fixed range, e.g. `[0, 100]` or `[0, 'auto']`. */
+  domain?: readonly [AxisBound, AxisBound];
+  allowDecimals?: boolean;
+  tickCount?: number;
+}
+export interface ChartReferenceLine {
+  /** Horizontal line at this value. */
+  y?: number;
+  /** Vertical line at this category (x value). */
+  x?: string | number;
+  label?: string;
+  color?: ChartColorValue;
+  /** Default true. */
+  dashed?: boolean;
+}
+export interface ChartReferenceArea {
+  x1?: string | number;
+  x2?: string | number;
+  y1?: number;
+  y2?: number;
+  label?: string;
+  color?: ChartColorValue;
+}
+export interface ChartBrushOptions {
+  /** First and last visible row when the chart mounts. */
+  startIndex?: number;
+  endIndex?: number;
+  /** Height of the brush in pixels. Default 28. */
+  height?: number;
+}
+export interface CartesianChartProps<T extends object> extends ChartStateProps {
+  data: readonly T[];
+  /** Field used for the x axis, e.g. `"month"`. */
+  index: Key<T>;
+  series: readonly ChartSeries<T>[];
+  /** Accessible name; also shown as the caption unless `hideTitle` is set. */
+  title: string;
+  description?: ReactNode;
+  hideTitle?: boolean;
+  /** Formats values on the y axis, in tooltips and in the accessible table. */
+  valueFormatter?: (value: number) => string;
+  /** Formats the x value at the top of the tooltip. */
+  labelFormatter?: (label: ReactNode) => ReactNode;
+  /** Plot height in pixels. Default 240. */
+  height?: number;
+  showGrid?: boolean;
+  /** Defaults to true when there is more than one series. */
+  showLegend?: boolean;
+  /** Shorthand for `yAxis={{ hide: !showYAxis }}`. */
+  showYAxis?: boolean;
+  xAxis?: ChartAxisOptions;
+  yAxis?: ChartAxisOptions;
+  /** Adds a range slider under the plot to zoom into part of the data. */
+  brush?: boolean | ChartBrushOptions;
+  /** Targets, limits, averages... drawn across the plot. */
+  referenceLines?: readonly ChartReferenceLine[];
+  /** Shaded ranges, e.g. a launch window or an incident. */
+  referenceAreas?: readonly ChartReferenceArea[];
+  /** Series hidden through the legend (controlled). */
+  hiddenSeries?: readonly Key<T>[];
+  defaultHiddenSeries?: readonly Key<T>[];
+  onHiddenSeriesChange?: (hidden: Key<T>[]) => void;
+  /** Charts with the same `syncId` share their tooltip and brush position. */
+  syncId?: string;
+  /** Called with the row (and series, when known) the user clicked. */
+  onPointClick?: (row: T, seriesKey?: Key<T>) => void;
+  className?: string;
+}
+/** Trends over time, one line per series. */
+export declare function LineChart<T extends object>(props: CartesianChartProps<T> & {
+  curve?: 'monotone' | 'linear' | 'step';
+  /** Show a dot on every data point. Default false. */
+  dots?: boolean;
+}): import("react").JSX.Element;
+/** Trends with filled areas. `stacked` shows how series add up to a total. */
+export declare function AreaChart<T extends object>(props: CartesianChartProps<T> & {
+  stacked?: boolean;
+  /** Stack to 100% to compare shares over time. */
+  expand?: boolean;
+  curve?: 'monotone' | 'linear' | 'step';
+}): import("react").JSX.Element;
+/** Compare values across categories. `stacked` puts series on top of each other. */
+export declare function BarChart<T extends object>(props: CartesianChartProps<T> & {
+  stacked?: boolean;
+  /** Bars run left to right, categories down the side. Good for long labels. */
+  layout?: 'vertical' | 'horizontal';
+  /** Corner radius of bar ends. Default 4. */
+  barRadius?: number;
+}): import("react").JSX.Element;
+export interface ComposedSeries<T> extends ChartSeries<T> {
+  /** How this series is drawn. Default `bar`. */
+  type?: 'bar' | 'line' | 'area';
+  /**
+   * Which y axis this series uses. Use the right axis sparingly: two scales on one plot
+   * are easy to misread. Prefer two charts with a shared `syncId` when you can.
+   */
+  axis?: 'left' | 'right';
+}
+export interface ComposedChartProps<T extends object> extends Omit<CartesianChartProps<T>, 'series'> {
+  series: readonly ComposedSeries<T>[];
+  /** Options for the right y axis, used by series with `axis: "right"`. */
+  rightAxis?: ChartAxisOptions;
+  /** Stack the bar series. */
+  stacked?: boolean;
+}
+/** Bars, lines and areas on one plot, e.g. revenue bars with a target line. */
+export declare function ComposedChart<T extends object>(props: ComposedChartProps<T>): import("react").JSX.Element;
+//#endregion

package/dist/patterns/chart/cartesian.js

@@ -0,0 +1,552 @@
+"use client";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { ChartFrame, ChartTooltipCard, defaultFormatter, resolveColor, toggleIn, useChartAnimation } from "./chart-parts.js";
+import { useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as R from "recharts";
+//#region src/patterns/chart/cartesian.tsx
+const axisTick = {
+	fill: "var(--glyph-muted-foreground)",
+	fontSize: 12
+};
+const margin = {
+	top: 8,
+	right: 8,
+	bottom: 0,
+	left: 0
+};
+/** Reference labels sit on top of data: a surface-colored halo keeps them readable. */
+const halo = {
+	stroke: "var(--glyph-surface)",
+	strokeWidth: 3,
+	strokeLinejoin: "round",
+	paintOrder: "stroke"
+};
+/** Shared setup for every cartesian chart: colors, legend, table, hidden series. */
+function useCartesian(props) {
+	const { data, index, series, valueFormatter = defaultFormatter } = props;
+	const [hidden, setHidden] = useControllableState({
+		value: props.hiddenSeries,
+		defaultValue: props.defaultHiddenSeries ?? [],
+		onChange: props.onHiddenSeriesChange
+	});
+	const resolved = useMemo(() => series.map((item, i) => ({
+		...item,
+		label: item.label ?? item.key,
+		stroke: resolveColor(item.color, i),
+		hidden: hidden.includes(item.key)
+	})), [series, hidden]);
+	return {
+		resolved,
+		table: {
+			columns: [String(index), ...resolved.map((item) => item.label)],
+			rows: data.map((row) => [String(row[index]), ...resolved.map((item) => valueFormatter(Number(row[item.key])))])
+		},
+		legend: props.showLegend ?? series.length > 1 ? resolved.map((item) => ({
+			key: item.key,
+			label: item.label,
+			color: item.stroke,
+			hidden: item.hidden
+		})) : void 0,
+		onLegendToggle: series.length > 1 ? (key) => setHidden(toggleIn(hidden, key, series.length)) : void 0,
+		valueFormatter
+	};
+}
+function frameProps(props) {
+	return {
+		title: props.title,
+		description: props.description,
+		hideTitle: props.hideTitle,
+		className: props.className,
+		loading: props.loading,
+		error: props.error,
+		onRetry: props.onRetry,
+		empty: props.empty,
+		height: props.height ?? 240,
+		isEmpty: props.data.length === 0
+	};
+}
+/** recharts props that every cartesian chart root shares. */
+function rootProps(props) {
+	const { onPointClick, data, syncId } = props;
+	return {
+		accessibilityLayer: false,
+		data,
+		margin,
+		...syncId && { syncId },
+		...onPointClick && {
+			style: { cursor: "pointer" },
+			onClick: (state) => {
+				const i = Number(state?.activeTooltipIndex);
+				const row = Number.isInteger(i) ? data[i] : void 0;
+				if (!row) return;
+				const key = typeof state?.activeDataKey === "string" ? state.activeDataKey : void 0;
+				onPointClick(row, key);
+			}
+		}
+	};
+}
+/**
+* Width that fits the longest y tick label, estimated from the formatted data range, so
+* labels like "340 ms" or "$1.2M" never wrap.
+*/
+function axisWidth(data, keys, formatter, extra = 0) {
+	let min = 0;
+	let max = 0;
+	let stacked = 0;
+	for (const row of data) {
+		let sum = 0;
+		for (const key of keys) {
+			const value = Number(row[key]);
+			if (!Number.isFinite(value)) continue;
+			min = Math.min(min, value);
+			max = Math.max(max, value);
+			sum += Math.max(value, 0);
+		}
+		stacked = Math.max(stacked, sum);
+	}
+	const candidates = [
+		min,
+		max * 1.2,
+		stacked * 1.2
+	].map((value) => {
+		const magnitude = 10 ** Math.max(Math.floor(Math.log10(Math.abs(value) || 1)) - 1, 0);
+		return formatter(Math.ceil(value / magnitude) * magnitude);
+	});
+	const widest = Math.max(...candidates.map((label) => textWidth(String(label))));
+	return Math.min(Math.max(Math.ceil(widest) + 16 + extra, 36), 128);
+}
+let measureContext;
+/** Width of a 12px tick label in the page's font; an estimate where canvas is unavailable. */
+function textWidth(text) {
+	if (measureContext === void 0) measureContext = typeof document !== "undefined" && typeof CanvasRenderingContext2D !== "undefined" ? document.createElement("canvas").getContext("2d") : null;
+	if (!measureContext) return text.length * 7;
+	measureContext.font = `12px ${getComputedStyle(document.body).fontFamily}`;
+	return measureContext.measureText(text).width;
+}
+/** Grid and axes. Rendered as an array so recharts sees its own components as direct children. */
+function axes(props, valueFormatter, { rightAxis } = {}) {
+	const { xAxis = {}, yAxis = {} } = props;
+	const hideY = yAxis.hide ?? props.showYAxis === false;
+	const nodes = [];
+	if (props.showGrid ?? true) nodes.push(/* @__PURE__ */ jsx(R.CartesianGrid, {
+		vertical: false,
+		stroke: "var(--glyph-border)",
+		strokeDasharray: "3 3",
+		yAxisId: "left"
+	}, "grid"));
+	nodes.push(/* @__PURE__ */ jsx(R.XAxis, {
+		dataKey: props.index,
+		hide: xAxis.hide,
+		tick: axisTick,
+		tickLine: false,
+		axisLine: false,
+		tickMargin: 8,
+		minTickGap: 16,
+		...xAxis.formatter && { tickFormatter: xAxis.formatter },
+		...xAxis.label && {
+			label: {
+				value: xAxis.label,
+				position: "insideBottom",
+				offset: -4,
+				...axisTick
+			},
+			height: 44
+		}
+	}, "x"), /* @__PURE__ */ jsx(R.YAxis, {
+		yAxisId: "left",
+		hide: hideY,
+		tick: axisTick,
+		tickLine: false,
+		axisLine: false,
+		width: yAxis.width ?? axisWidth(props.data, props.series.filter((item) => item.axis !== "right").map((item) => item.key), yAxis.formatter ?? valueFormatter, yAxis.label ? 18 : 0),
+		tickFormatter: yAxis.formatter ?? valueFormatter,
+		...yAxis.domain && { domain: yAxis.domain },
+		...yAxis.allowDecimals !== void 0 && { allowDecimals: yAxis.allowDecimals },
+		...yAxis.tickCount !== void 0 && { tickCount: yAxis.tickCount },
+		...yAxis.label && { label: {
+			value: yAxis.label,
+			angle: -90,
+			position: "insideLeft",
+			...axisTick
+		} }
+	}, "y"));
+	if (rightAxis) nodes.push(/* @__PURE__ */ jsx(R.YAxis, {
+		yAxisId: "right",
+		orientation: "right",
+		hide: rightAxis.hide,
+		tick: axisTick,
+		tickLine: false,
+		axisLine: false,
+		width: rightAxis.width ?? axisWidth(props.data, props.series.filter((item) => item.axis === "right").map((item) => item.key), rightAxis.formatter ?? valueFormatter, rightAxis.label ? 18 : 0),
+		tickFormatter: rightAxis.formatter ?? valueFormatter,
+		...rightAxis.domain && { domain: rightAxis.domain },
+		...rightAxis.label && { label: {
+			value: rightAxis.label,
+			angle: 90,
+			position: "insideRight",
+			...axisTick
+		} }
+	}, "y-right"));
+	return nodes;
+}
+/** Reference lines, areas and the brush. */
+function overlays(props) {
+	const nodes = [];
+	props.referenceAreas?.forEach((area, i) => {
+		const color = resolveColor(area.color ?? "muted-foreground", 0);
+		nodes.push(/* @__PURE__ */ jsx(R.ReferenceArea, {
+			yAxisId: "left",
+			...area.x1 !== void 0 && { x1: area.x1 },
+			...area.x2 !== void 0 && { x2: area.x2 },
+			...area.y1 !== void 0 && { y1: area.y1 },
+			...area.y2 !== void 0 && { y2: area.y2 },
+			fill: color,
+			fillOpacity: .08,
+			stroke: "none",
+			ifOverflow: "extendDomain",
+			...area.label && { label: {
+				value: area.label,
+				position: "insideTop",
+				...axisTick,
+				fontSize: 11,
+				...halo
+			} }
+		}, `area-${i}`));
+	});
+	props.referenceLines?.forEach((line, i) => {
+		const color = resolveColor(line.color ?? "muted-foreground", 0);
+		nodes.push(/* @__PURE__ */ jsx(R.ReferenceLine, {
+			yAxisId: "left",
+			...line.y !== void 0 && { y: line.y },
+			...line.x !== void 0 && { x: line.x },
+			stroke: color,
+			strokeWidth: 1.25,
+			strokeDasharray: line.dashed === false ? void 0 : "4 4",
+			ifOverflow: "extendDomain",
+			...line.label && { label: {
+				value: line.label,
+				position: line.y !== void 0 ? "insideTopRight" : "insideTopLeft",
+				fill: "var(--glyph-muted-foreground)",
+				fontSize: 11,
+				...halo
+			} }
+		}, `line-${i}`));
+	});
+	if (props.brush) {
+		const options = props.brush === true ? {} : props.brush;
+		nodes.push(/* @__PURE__ */ jsx(R.Brush, {
+			dataKey: props.index,
+			height: options.height ?? 28,
+			stroke: "var(--glyph-border-strong)",
+			fill: "var(--glyph-subtle)",
+			travellerWidth: 8,
+			tickFormatter: () => "",
+			...options.startIndex !== void 0 && { startIndex: options.startIndex },
+			...options.endIndex !== void 0 && { endIndex: options.endIndex }
+		}, "brush"));
+	}
+	return nodes;
+}
+function chartTooltip(valueFormatter, cursor, options = {}) {
+	return /* @__PURE__ */ jsx(R.Tooltip, {
+		cursor,
+		isAnimationActive: false,
+		content: (p) => /* @__PURE__ */ jsx(ChartTooltipCard, {
+			active: p.active,
+			payload: p.payload,
+			label: p.label,
+			formatter: valueFormatter,
+			labelFormatter: options.labelFormatter,
+			total: options.total
+		})
+	});
+}
+const lineCursor = { stroke: "var(--glyph-border-strong)" };
+const barCursor = {
+	fill: "var(--glyph-muted)",
+	opacity: .6
+};
+/** Trends over time, one line per series. */
+function LineChart(props) {
+	const { resolved, table, legend, onLegendToggle, valueFormatter } = useCartesian(props);
+	const animation = useChartAnimation();
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		...frameProps(props),
+		legend,
+		onLegendToggle,
+		table,
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height: props.height ?? 240,
+			children: /* @__PURE__ */ jsxs(R.LineChart, {
+				...rootProps(props),
+				children: [
+					axes(props, valueFormatter),
+					chartTooltip(valueFormatter, lineCursor, { labelFormatter: props.labelFormatter }),
+					overlays(props),
+					resolved.map((item) => /* @__PURE__ */ jsx(R.Line, {
+						yAxisId: "left",
+						dataKey: item.key,
+						name: item.label,
+						hide: item.hidden,
+						type: props.curve === "step" ? "stepAfter" : props.curve ?? "monotone",
+						stroke: item.stroke,
+						strokeWidth: 2,
+						dot: props.dots ? {
+							r: 3,
+							strokeWidth: 0,
+							fill: item.stroke
+						} : false,
+						activeDot: {
+							r: 4,
+							strokeWidth: 2,
+							stroke: "var(--glyph-surface)"
+						},
+						...animation
+					}, item.key))
+				]
+			})
+		})
+	});
+}
+/** Trends with filled areas. `stacked` shows how series add up to a total. */
+function AreaChart(props) {
+	const { resolved, table, legend, onLegendToggle, valueFormatter } = useCartesian(props);
+	const animation = useChartAnimation();
+	const id = useId().replace(/:/g, "");
+	const stacked = props.stacked || props.expand;
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		...frameProps(props),
+		legend,
+		onLegendToggle,
+		table,
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height: props.height ?? 240,
+			children: /* @__PURE__ */ jsxs(R.AreaChart, {
+				...rootProps(props),
+				...props.expand && { stackOffset: "expand" },
+				children: [
+					/* @__PURE__ */ jsx("defs", { children: resolved.map((item, i) => /* @__PURE__ */ jsxs("linearGradient", {
+						id: `${id}-${i}`,
+						x1: "0",
+						x2: "0",
+						y1: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: item.stroke,
+							stopOpacity: stacked ? .45 : .3
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "100%",
+							stopColor: item.stroke,
+							stopOpacity: stacked ? .12 : 0
+						})]
+					}, item.key)) }),
+					axes(props.expand ? {
+						...props,
+						yAxis: {
+							formatter: (v) => `${Math.round(v * 100)}%`,
+							...props.yAxis
+						}
+					} : props, valueFormatter),
+					chartTooltip(valueFormatter, lineCursor, {
+						total: stacked && !props.expand,
+						labelFormatter: props.labelFormatter
+					}),
+					overlays(props),
+					resolved.map((item, i) => /* @__PURE__ */ jsx(R.Area, {
+						yAxisId: "left",
+						dataKey: item.key,
+						name: item.label,
+						hide: item.hidden,
+						type: props.curve === "step" ? "stepAfter" : props.curve ?? "monotone",
+						stroke: item.stroke,
+						strokeWidth: 2,
+						fill: `url(#${id}-${i})`,
+						activeDot: {
+							r: 4,
+							strokeWidth: 2,
+							stroke: "var(--glyph-surface)"
+						},
+						...stacked && { stackId: "stack" },
+						...animation
+					}, item.key))
+				]
+			})
+		})
+	});
+}
+/** Compare values across categories. `stacked` puts series on top of each other. */
+function BarChart(props) {
+	const { resolved, table, legend, onLegendToggle, valueFormatter } = useCartesian(props);
+	const animation = useChartAnimation();
+	const radius = props.barRadius ?? 4;
+	const horizontal = props.layout === "vertical";
+	const visible = resolved.filter((item) => !item.hidden);
+	const top = visible[visible.length - 1]?.key;
+	const endRadius = (key) => {
+		if (props.stacked && key !== top) return 0;
+		return horizontal ? [
+			0,
+			radius,
+			radius,
+			0
+		] : [
+			radius,
+			radius,
+			0,
+			0
+		];
+	};
+	const { xAxis = {}, yAxis = {} } = props;
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		...frameProps(props),
+		legend,
+		onLegendToggle,
+		table,
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height: props.height ?? 240,
+			children: /* @__PURE__ */ jsxs(R.BarChart, {
+				...rootProps(props),
+				layout: horizontal ? "vertical" : "horizontal",
+				barGap: 2,
+				barCategoryGap: "24%",
+				children: [
+					horizontal ? [
+						(props.showGrid ?? true) && /* @__PURE__ */ jsx(R.CartesianGrid, {
+							horizontal: false,
+							stroke: "var(--glyph-border)",
+							strokeDasharray: "3 3",
+							yAxisId: "left"
+						}, "grid"),
+						/* @__PURE__ */ jsx(R.XAxis, {
+							type: "number",
+							hide: yAxis.hide ?? props.showYAxis === false,
+							tick: axisTick,
+							tickLine: false,
+							axisLine: false,
+							tickFormatter: yAxis.formatter ?? valueFormatter,
+							...yAxis.domain && { domain: yAxis.domain }
+						}, "x"),
+						/* @__PURE__ */ jsx(R.YAxis, {
+							yAxisId: "left",
+							type: "category",
+							dataKey: props.index,
+							hide: xAxis.hide,
+							tick: axisTick,
+							tickLine: false,
+							axisLine: false,
+							width: xAxis.width ?? yAxis.width ?? 96,
+							...xAxis.formatter && { tickFormatter: xAxis.formatter }
+						}, "y")
+					] : axes(props, valueFormatter),
+					chartTooltip(valueFormatter, barCursor, {
+						total: props.stacked,
+						labelFormatter: props.labelFormatter
+					}),
+					overlays(props),
+					resolved.map((item) => /* @__PURE__ */ jsx(R.Bar, {
+						yAxisId: "left",
+						dataKey: item.key,
+						name: item.label,
+						hide: item.hidden,
+						fill: item.stroke,
+						radius: endRadius(item.key),
+						maxBarSize: 48,
+						...props.stacked && { stackId: "stack" },
+						...animation
+					}, item.key))
+				]
+			})
+		})
+	});
+}
+/** Bars, lines and areas on one plot, e.g. revenue bars with a target line. */
+function ComposedChart(props) {
+	const { resolved, table, legend, onLegendToggle, valueFormatter } = useCartesian(props);
+	const animation = useChartAnimation();
+	const id = useId().replace(/:/g, "");
+	const hasRight = props.series.some((item) => item.axis === "right");
+	const cartesian = props;
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		...frameProps(props),
+		legend,
+		onLegendToggle,
+		table,
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height: props.height ?? 240,
+			children: /* @__PURE__ */ jsxs(R.ComposedChart, {
+				...rootProps(cartesian),
+				barGap: 2,
+				barCategoryGap: "24%",
+				children: [
+					/* @__PURE__ */ jsx("defs", { children: resolved.map((item, i) => /* @__PURE__ */ jsxs("linearGradient", {
+						id: `${id}-${i}`,
+						x1: "0",
+						x2: "0",
+						y1: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: item.stroke,
+							stopOpacity: .3
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "100%",
+							stopColor: item.stroke,
+							stopOpacity: 0
+						})]
+					}, item.key)) }),
+					axes(cartesian, valueFormatter, { rightAxis: hasRight ? props.rightAxis ?? {} : void 0 }),
+					chartTooltip(valueFormatter, barCursor, { labelFormatter: props.labelFormatter }),
+					overlays(cartesian),
+					resolved.map((item, i) => {
+						const common = {
+							yAxisId: item.axis === "right" ? "right" : "left",
+							dataKey: item.key,
+							name: item.label,
+							hide: item.hidden,
+							...animation
+						};
+						if (item.type === "line") return /* @__PURE__ */ jsx(R.Line, {
+							...common,
+							type: "monotone",
+							stroke: item.stroke,
+							strokeWidth: 2,
+							dot: false,
+							activeDot: {
+								r: 4,
+								strokeWidth: 2,
+								stroke: "var(--glyph-surface)"
+							}
+						}, item.key);
+						if (item.type === "area") return /* @__PURE__ */ jsx(R.Area, {
+							...common,
+							type: "monotone",
+							stroke: item.stroke,
+							strokeWidth: 2,
+							fill: `url(#${id}-${i})`
+						}, item.key);
+						return /* @__PURE__ */ jsx(R.Bar, {
+							...common,
+							fill: item.stroke,
+							radius: props.stacked ? 0 : [
+								4,
+								4,
+								0,
+								0
+							],
+							maxBarSize: 48,
+							...props.stacked && { stackId: "bars" }
+						}, item.key);
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { AreaChart, BarChart, ComposedChart, LineChart, axes, axisTick, axisWidth, chartTooltip, frameProps, overlays, rootProps, useCartesian };