{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gauge-chart",
  "type": "registry:ui",
  "title": "Gauge chart",
  "description": "A semicircle SVG gauge that fills to a value against a max and prints the percentage in the center. Exposed as an image with an accessible label for dashboards.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/gauge-chart.tsx",
      "type": "registry:ui",
      "target": "components/ui/gauge-chart.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction GaugeChart({\n  value,\n  max = 100,\n  label = \"Gauge\",\n  className,\n}: {\n  value: number\n  max?: number\n  label?: string\n  className?: string\n}) {\n  const pct = Math.max(0, Math.min(1, value / max))\n  const r = 40\n  const c = Math.PI * r\n  const dash = pct * c\n  return (\n    <div data-slot=\"gauge-chart\" className={cn(\"inline-flex flex-col items-center\", className)}>\n      <svg role=\"img\" aria-label={`${label}: ${Math.round(pct * 100)}%`} viewBox=\"0 0 100 60\" className=\"h-20 w-36\">\n        <path d=\"M10 50 A40 40 0 0 1 90 50\" fill=\"none\" stroke=\"var(--sunken)\" strokeWidth=\"8\" strokeLinecap=\"round\" />\n        <path\n          d=\"M10 50 A40 40 0 0 1 90 50\"\n          fill=\"none\"\n          stroke=\"var(--accent)\"\n          strokeWidth=\"8\"\n          strokeLinecap=\"round\"\n          strokeDasharray={`${dash} ${c - dash}`}\n        />\n        <text x=\"50\" y=\"48\" textAnchor=\"middle\" className=\"fill-fg\" style={{ fontSize: 14, fontWeight: 500 }}>\n          {Math.round(pct * 100)}%\n        </text>\n      </svg>\n      <span className=\"text-xs text-fg-muted\">{label}</span>\n    </div>\n  )\n}\nexport { GaugeChart }\n"
    }
  ]
}