"use client";

import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@countryclub/ui-react";
import { Label, Pie, PieChart } from "recharts";

const chartData = [
  { fill: "var(--color-platinum)", members: 275, tier: "platinum" },
  { fill: "var(--color-gold)", members: 200, tier: "gold" },
  { fill: "var(--color-silver)", members: 187, tier: "silver" },
  { fill: "var(--color-bronze)", members: 173, tier: "bronze" },
  { fill: "var(--color-social)", members: 90, tier: "social" },
];

const chartConfig = {
  bronze: {
    color: "var(--chart-4)",
    label: "Bronze",
  },
  gold: {
    color: "var(--chart-2)",
    label: "Gold",
  },
  members: {
    label: "Members",
  },
  platinum: {
    color: "var(--chart-1)",
    label: "Platinum",
  },
  silver: {
    color: "var(--chart-3)",
    label: "Silver",
  },
  social: {
    color: "var(--chart-5)",
    label: "Social",
  },
} satisfies ChartConfig;

const totalMembers = chartData.reduce((acc, curr) => acc + curr.members, 0);

export default function ChartPieDemo() {
  return (
    <ChartContainer className="mx-auto aspect-square h-64" config={chartConfig}>
      <PieChart>
        <ChartTooltip
          content={<ChartTooltipContent hideLabel />}
          cursor={false}
        />
        <Pie
          data={chartData}
          dataKey="members"
          innerRadius={60}
          nameKey="tier"
          strokeWidth={5}
        >
          <Label
            content={({ viewBox }) => {
              if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                return (
                  <text
                    dominantBaseline="middle"
                    textAnchor="middle"
                    x={viewBox.cx}
                    y={viewBox.cy}
                  >
                    <tspan
                      className="fill-foreground font-bold text-3xl"
                      x={viewBox.cx}
                      y={viewBox.cy}
                    >
                      {totalMembers.toLocaleString()}
                    </tspan>
                    <tspan
                      className="fill-muted-foreground"
                      x={viewBox.cx}
                      y={(viewBox.cy || 0) + 24}
                    >
                      Members
                    </tspan>
                  </text>
                );
              }
              return null;
            }}
          />
        </Pie>
      </PieChart>
    </ChartContainer>
  );
}
Chart

Import

Area Chart

Bar Chart

Line Chart

Pie Chart

Radar Chart

Radial Bar Chart
