Лепестковая диаграмма

"use client";

import {
  ChartContainer,
  type ChartConfig,
  ChartLegend,
  ChartLegendContent,
} from "denjs-ui";
import {
  PolarAngleAxis,
  PolarGrid,
  Radar,
  RadarChart,
} from "recharts";

const data = [
  { subject: "Speed", current: 120, previous: 98 },
  { subject: "Quality", current: 98, previous: 110 },
  { subject: "Reach", current: 86, previous: 72 },
];

const config = {
  current: { label: "Current", color: "var(--chart-1)" },
  previous: { label: "Previous", color: "var(--chart-2)" },
} satisfies ChartConfig;

export function Example() {
  return (
    <ChartContainer config={config} className="mx-auto aspect-square h-72">
      <RadarChart accessibilityLayer data={data}>
        <PolarGrid />
        <PolarAngleAxis dataKey="subject" />
        <Radar
          dataKey="current"
          fill="var(--color-current)"
          stroke="var(--color-current)"
        />
        <Radar
          dataKey="previous"
          fill="var(--color-previous)"
          stroke="var(--color-previous)"
        />
        <ChartLegend content={<ChartLegendContent />} />
      </RadarChart>
    </ChartContainer>
  );
}