Radar Chart

1"use client";
2 
3import type * as React from "react";
4import {
5	PolarAngleAxis,
6	PolarGrid,
7	Radar,
8	RadarChart as RechartsRadarChart,
9} from "recharts";
10import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
11import {
12	type ChartConfig,
13	ChartContainer,
14	ChartLegend,
15	ChartLegendContent,
16	ChartTooltip,
17	ChartTooltipContent,
18} from "@/components/ui/chart";
19 
20const CHART_COLORS = ["#00bbff", "#34d399", "#60a5fa", "#f472b6", "#fb923c"];
21 
22function toKeys(v: string | string[]): string[] {
23	return Array.isArray(v) ? v : [v];
24}
25 
26function ChartCard({
27	title,
28	description,
29	footer,
30	children,
31	dataPoints = 0,
32}: {
33	title?: string;
34	description?: string;
35	footer?: string;
36	children: React.ReactNode;
37	dataPoints?: number;
38}) {
39	const maxWidth =
40		dataPoints > 0 ? Math.min(768, Math.max(300, dataPoints * 80)) : undefined;
41	return (
42		<Card
43			className="w-full max-w-3xl"
44			style={maxWidth ? { maxWidth } : undefined}
45		>
46			{(title || description) && (
47				<CardHeader className="pb-0">
48					{title && (
49						<p className="text-sm font-semibold text-card-foreground">
50							{title}
51						</p>
52					)}
53					{description && (
54						<p className="text-xs text-muted-foreground">{description}</p>
55					)}
56				</CardHeader>
57			)}
58			<CardContent>{children}</CardContent>
59			{footer && (
60				<CardFooter>
61					<p className="text-xs text-muted-foreground">{footer}</p>
62				</CardFooter>
63			)}
64		</Card>
65	);
66}
67 
68export type RadarChartProps = {
69	data: Array<Record<string, string | number>>;
70	angleKey: string;
71	valueKeys: string | string[];
72	title?: string;
73	description?: string;
74	footer?: string;
75	colors?: string[];
76};
77 
78export function RadarChart(props: RadarChartProps) {
79	const keys = toKeys(props.valueKeys);
80	const colors = props.colors ?? CHART_COLORS;
81	const chartConfig: ChartConfig = Object.fromEntries(
82		keys.map((key, i) => [
83			key,
84			{ label: key, color: colors[i % colors.length] },
85		]),
86	);
87	const showLegend = keys.length > 1;
88	return (
89		<ChartCard
90			title={props.title}
91			description={props.description}
92			footer={props.footer}
93			dataPoints={props.data.length}
94		>
95			<ChartContainer config={chartConfig} className="h-55 w-full">
96				<RechartsRadarChart data={props.data}>
97					<PolarGrid stroke="#3f3f46" />
98					<PolarAngleAxis
99						dataKey={props.angleKey}
100						tick={({ x, y, textAnchor, index, ...tickProps }) => {
101							const d = props.data[index] as Record<string, string | number>;
102							const yNum = typeof y === "number" ? y : 0;
103// … truncated