{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "donut-chart",
  "type": "registry:ui",
  "title": "Donut chart",
  "description": "Single value donut chart in SVG that fills an accent ring to a percentage of max and prints the percent in the middle. Labelled as an image for screen readers.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/donut-chart.tsx",
      "type": "registry:ui",
      "target": "components/ui/donut-chart.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction DonutChart({\n  value,\n  max = 100,\n  className,\n  label = \"Donut\",\n}: {\n  value: number\n  max?: number\n  className?: string\n  label?: string\n}) {\n  const pct = Math.max(0, Math.min(1, value / max))\n  const r = 36\n  const c = 2 * Math.PI * r\n  const dash = pct * c\n  return (\n    <svg data-slot=\"donut-chart\" role=\"img\" aria-label={`${label}: ${Math.round(pct * 100)}%`} viewBox=\"0 0 96 96\" className={cn(\"size-24\", className)}>\n      <circle cx=\"48\" cy=\"48\" r={r} fill=\"none\" stroke=\"var(--sunken)\" strokeWidth=\"10\" />\n      <circle\n        cx=\"48\"\n        cy=\"48\"\n        r={r}\n        fill=\"none\"\n        stroke=\"var(--accent)\"\n        strokeWidth=\"10\"\n        strokeLinecap=\"round\"\n        strokeDasharray={`${dash} ${c - dash}`}\n        transform=\"rotate(-90 48 48)\"\n      />\n      <text x=\"48\" y=\"52\" textAnchor=\"middle\" className=\"fill-fg text-[14px] font-medium\" style={{ fontSize: 14 }}>\n        {Math.round(pct * 100)}%\n      </text>\n    </svg>\n  )\n}\nexport { DonutChart }\n"
    }
  ]
}