Donut chart

"use client";

import { DonutChart } from "@/components/beautiful-charts/themes/instrument/recharts/donut-chart";

const data = [
  { channel: "Organic", visits: 4120 },
  { channel: "Referral", visits: 1860 },
  { channel: "Paid search", visits: 1340 },
  { channel: "Social", visits: 720 },
  { channel: "Email", visits: 410 },
];

// Segments under 6% are grouped into one "Other" segment; its tooltip lists every member.
export function TrafficSources() {
  return (
    <DonutChart
      data={data}
      nameKey="channel"
      valueKey="visits"
      title="Traffic by source"
      groupBelow={0.06}
      center={{ label: "visits" }}
    />
  );
}

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 }[];
};