import { cn } from "./index3.js";
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./index46.js";
import { useReducedMotion } from "./index47.js";
import { useSeriesHighlight } from "./index48.js";
import { DEFAULT_CHART_COLORS, WrapperChartLegend, sanitizeKey } from "./index49.js";
import { cva } from "class-variance-authority";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart } from "recharts";
//#region src/components/molecules/charts/RadarChart/RadarChart.tsx
var radarChartVariants = cva("relative max-w-full", {
	variants: { size: {
		sm: "size-[280px]",
		default: "size-[392px]",
		lg: "size-[480px]",
		xl: "size-[560px]"
	} },
	defaultVariants: { size: "default" }
});
function RadarChart$1({ data, series, legendPosition = "none", showTooltip = true, showGrid = true, showAxisLabels = true, showRadiusTicks = true, domain, fillOpacity = .3, strokeWidth = 2, size, className, "aria-label": ariaLabel, ...props }) {
	const prefersReducedMotion = useReducedMotion();
	const { highlightedSeries, setHighlightedSeries, getOpacity, dimTransition } = useSeriesHighlight(prefersReducedMotion);
	const chartData = React.useMemo(() => data.map((d) => {
		const point = { label: d.label };
		for (const s of series) {
			const key = sanitizeKey(s.id);
			point[key] = d.values[s.id] ?? 0;
		}
		return point;
	}), [data, series]);
	const colors = React.useMemo(() => series.map((s, i) => s.color || DEFAULT_CHART_COLORS[i % DEFAULT_CHART_COLORS.length]), [series]);
	const chartConfig = React.useMemo(() => {
		const config = {};
		for (const [i, s] of series.entries()) {
			const key = sanitizeKey(s.id);
			config[key] = {
				label: s.label,
				color: colors[i]
			};
		}
		return config;
	}, [series, colors]);
	const calculatedDomain = domain || [0, Math.max(...data.flatMap((d) => Object.values(d.values)))];
	return /* @__PURE__ */ jsxs("div", {
		className: cn("flex", legendPosition === "right" ? "flex-row gap-4" : "flex-col gap-4", legendPosition === "bottom" && "items-center"),
		role: "img",
		"aria-label": ariaLabel || "Radar chart",
		...props,
		children: [/* @__PURE__ */ jsx("div", {
			className: cn(radarChartVariants({ size }), className),
			children: /* @__PURE__ */ jsx(ChartContainer, {
				config: chartConfig,
				className: "w-full h-full",
				children: /* @__PURE__ */ jsxs(RadarChart, {
					data: chartData,
					margin: {
						top: 24,
						right: 32,
						bottom: 24,
						left: 32
					},
					children: [
						showGrid && /* @__PURE__ */ jsx(PolarGrid, {
							className: "stroke-border",
							radialLines: true,
							gridType: "polygon"
						}),
						showAxisLabels && /* @__PURE__ */ jsx(PolarAngleAxis, {
							dataKey: "label",
							tick: {
								fill: "var(--muted-foreground)",
								fontSize: 14,
								fontWeight: 500
							},
							tickLine: false
						}),
						showRadiusTicks && /* @__PURE__ */ jsx(PolarRadiusAxis, {
							angle: 90,
							domain: calculatedDomain,
							tick: {
								fill: "var(--secondary-foreground)",
								fontSize: 12
							},
							tickCount: 6,
							axisLine: false,
							tickFormatter: (value) => value.toLocaleString()
						}),
						showTooltip && /* @__PURE__ */ jsx(ChartTooltip, { content: /* @__PURE__ */ jsx(ChartTooltipContent, { formatter: (value, name) => {
							const seriesConfig = chartConfig[name];
							return /* @__PURE__ */ jsxs("div", {
								className: "flex items-center gap-2",
								children: [
									/* @__PURE__ */ jsx("div", {
										className: "size-2 rounded-full",
										style: { backgroundColor: seriesConfig?.color }
									}),
									/* @__PURE__ */ jsx("span", { children: seriesConfig?.label || name }),
									/* @__PURE__ */ jsx("span", {
										className: "font-medium",
										children: Number(value).toLocaleString()
									})
								]
							});
						} }) }),
						series.map((s, i) => {
							const key = sanitizeKey(s.id);
							return /* @__PURE__ */ jsx(Radar, {
								name: key,
								dataKey: key,
								stroke: colors[i],
								fill: colors[i],
								fillOpacity,
								strokeWidth,
								opacity: getOpacity(s.id),
								style: dimTransition,
								isAnimationActive: !prefersReducedMotion,
								animationDuration: 300,
								animationEasing: "ease-in-out"
							}, key);
						})
					]
				})
			})
		}), legendPosition !== "none" && /* @__PURE__ */ jsx(WrapperChartLegend, {
			series,
			position: legendPosition === "bottom" ? "top" : "right",
			onSeriesHover: setHighlightedSeries,
			highlightedSeries
		})]
	});
}
RadarChart$1.displayName = "RadarChart";
//#endregion
export { RadarChart$1 as RadarChart, radarChartVariants };

//# sourceMappingURL=index54.js.map