import * as React from "react"

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

interface DonutChartProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string
  value: number
  total?: number
  size?: number
  strokeWidth?: number
  valueFormatter?: (value: number, percent: number) => string
}

function DonutChart({
  label,
  value,
  total = 100,
  size = 144,
  strokeWidth = 12,
  valueFormatter,
  className,
  ...props
}: DonutChartProps) {
  const safeTotal = total > 0 ? total : 1
  const percent = Math.min(Math.max((value / safeTotal) * 100, 0), 100)
  const radius = (size - strokeWidth) / 2
  const circumference = 2 * Math.PI * radius
  const offset = circumference - (percent / 100) * circumference
  const displayValue = valueFormatter
    ? valueFormatter(value, percent)
    : `${Math.round(percent)}%`

  return (
    <div
      className={cn(
        "flex flex-col items-center gap-3 rounded-2xl border border-border bg-card p-6 text-center",
        className
      )}
      {...props}
    >
      <div
        className="relative flex items-center justify-center"
        style={{ width: size, height: size }}
        role="img"
        aria-label={`${label} ${displayValue}`}
      >
        <svg
          viewBox={`0 0 ${size} ${size}`}
          className="h-full w-full -rotate-90"
        >
          <circle
            className="text-muted-foreground/30"
            stroke="currentColor"
            strokeWidth={strokeWidth}
            fill="transparent"
            r={radius}
            cx={size / 2}
            cy={size / 2}
          />
          <circle
            className="text-primary"
            stroke="currentColor"
            strokeWidth={strokeWidth}
            fill="transparent"
            r={radius}
            cx={size / 2}
            cy={size / 2}
            strokeLinecap="round"
            strokeDasharray={circumference}
            strokeDashoffset={offset}
          />
        </svg>
        <div className="absolute flex flex-col items-center gap-1">
          <span className="text-2xl font-semibold text-foreground tabular-nums">
            {displayValue}
          </span>
          <span className="text-xs font-medium text-muted-foreground">
            {label}
          </span>
        </div>
      </div>
    </div>
  )
}

export { DonutChart }
export type { DonutChartProps }
Donut Chart

Dependencies

Files

Installation
