import * as React from "react"

import { cn } from "@/lib/utils"

type PieChartTone =
  | "text-primary"
  | "text-foreground"
  | "text-muted-foreground"
  | "text-destructive"

type PieChartDatum = {
  label: string
  value: number
  tone?: PieChartTone
}

interface PieChartProps extends React.HTMLAttributes<HTMLDivElement> {
  data: PieChartDatum[]
  size?: number
  innerRadius?: number
  showLegend?: boolean
  centerLabel?: string
  centerValue?: string | number
  valueFormatter?: (value: number) => string
}

const defaultTones: PieChartTone[] = [
  "text-primary",
  "text-foreground",
  "text-muted-foreground",
  "text-destructive",
]

function polarToCartesian(cx: number, cy: number, radius: number, angleInDegrees: number) {
  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0

  return {
    x: cx + radius * Math.cos(angleInRadians),
    y: cy + radius * Math.sin(angleInRadians),
  }
}

function describeArc(
  cx: number,
  cy: number,
  radius: number,
  innerRadius: number,
  startAngle: number,
  endAngle: number
) {
  const start = polarToCartesian(cx, cy, radius, endAngle)
  const end = polarToCartesian(cx, cy, radius, startAngle)
  const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"

  if (innerRadius <= 0) {
    return [
      `M ${cx} ${cy}`,
      `L ${end.x} ${end.y}`,
      `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${start.x} ${start.y}`,
      "Z",
    ].join(" ")
  }

  const innerStart = polarToCartesian(cx, cy, innerRadius, endAngle)
  const innerEnd = polarToCartesian(cx, cy, innerRadius, startAngle)

  return [
    `M ${end.x} ${end.y}`,
    `A ${radius} ${radius} 0 ${largeArcFlag} 1 ${start.x} ${start.y}`,
    `L ${innerStart.x} ${innerStart.y}`,
    `A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${innerEnd.x} ${innerEnd.y}`,
    "Z",
  ].join(" ")
}

function PieChart({
  data,
  size = 180,
  innerRadius,
  showLegend = true,
  centerLabel,
  centerValue,
  valueFormatter,
  className,
  ...props
}: PieChartProps) {
  const total = data.reduce((sum, item) => sum + item.value, 0)
  const radius = size / 2 - 6
  const resolvedInner = innerRadius ?? size * 0.32
  const formatter = valueFormatter ?? ((value: number) => value.toString())

  const slices = data.map((item, index) => ({
    ...item,
    tone: item.tone ?? defaultTones[index % defaultTones.length],
  }))

  let currentAngle = -90

  return (
    <div
      className={cn("rounded-2xl border border-border bg-card p-4", className)}
      {...props}
    >
      <div className="flex flex-wrap items-center gap-6">
        <div className="relative">
          <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
            {total === 0 ? (
              <circle
                cx={size / 2}
                cy={size / 2}
                r={radius}
                className="text-muted-foreground"
                fill="currentColor"
                fillOpacity={0.2}
              />
            ) : (
              slices.map((item) => {
                const sliceAngle = (item.value / total) * 360
                const endAngle = currentAngle + sliceAngle
                const path = describeArc(
                  size / 2,
                  size / 2,
                  radius,
                  resolvedInner,
                  currentAngle,
                  endAngle
                )
                currentAngle = endAngle

                return (
                  <path
                    key={item.label}
                    d={path}
                    className={cn(item.tone)}
                    fill="currentColor"
                  />
                )
              })
            )}
          </svg>

          {resolvedInner > 0 && (centerLabel || centerValue) ? (
            <div className="absolute inset-0 flex flex-col items-center justify-center text-center">
              {centerLabel ? (
                <span className="text-xs text-muted-foreground">{centerLabel}</span>
              ) : null}
              {centerValue ? (
                <span className="text-lg font-semibold text-foreground">
                  {centerValue}
                </span>
              ) : null}
            </div>
          ) : null}
        </div>

        {showLegend ? (
          <div className="space-y-3">
            {slices.map((item) => (
              <div key={item.label} className="flex items-center gap-3">
                <svg
                  aria-hidden="true"
                  viewBox="0 0 8 8"
                  className={cn("h-2.5 w-2.5", item.tone)}
                >
                  <circle cx="4" cy="4" r="4" fill="currentColor" />
                </svg>
                <div className="flex flex-col">
                  <span className="text-sm text-foreground">{item.label}</span>
                  <span className="text-xs text-muted-foreground">
                    {formatter(item.value)}
                  </span>
                </div>
              </div>
            ))}
          </div>
        ) : null}
      </div>
    </div>
  )
}

export { PieChart }
export type { PieChartProps, PieChartDatum, PieChartTone }
Pie Chart

Dependencies

Files

Installation
