Radar chart

"use client";

import { RadarChart } from "@/components/beautiful-charts/themes/instrument/recharts/radar-chart";
import type { ChartConfig } from "@/components/beautiful-charts/core/contracts";

const data = [
  { skill: "Speed", us: 82, market: 64 },
  { skill: "Reliability", us: 90, market: 71 },
  { skill: "Support", us: 58, market: 66 },
  { skill: "Price", us: 70, market: 75 },
  { skill: "Docs", us: 88, market: 52 },
];

const config = {
  us: { label: "Our product", color: "var(--chart-1)" },
  market: { label: "Market median" },
} satisfies ChartConfig;

// The benchmark series is drawn as a quiet outline behind the others.
export function ProductProfile() {
  return <RadarChart data={data} axisKey="skill" config={config} benchmark="market" title="Product profile" />;
}

export type Selection<TDatum> = {
  /** Index into the data you passed in, even when a brush shows a subset. */
  dataIndex: number;
  datum: TDatum;
  seriesKey: string | null;
  source: "pointer" | "keyboard" | "table";
  /** For a grouped segment (a donut's "Other"): the indexes of every row it stands for. `dataIndex` is the largest. */
  members?: number[] | undefined;
};

export type TooltipContext<TDatum> = {
  datum: TDatum;
  /** Index into the data you passed in. */
  dataIndex: number;
  /** Visible series at this index. `value` is your raw value; `share` is its part of the row in 100% mode. */
  series: { key: string; label: ReactNode; value: number | null; share?: number | null | undefined; color: string; selected: boolean }[];
};