{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "budget-echarts-radial-chart",
  "description": "Budget breakdown card with four gauges and a value list, on the radial chart",
  "dependencies": [
    "echarts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-radial-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/echarts/b-budget-echarts-radial-chart.tsx",
      "content": "\"use client\";\n\nimport { EChartsRadialChart, type ChartConfig } from \"@/registry/charts/echarts-radial-chart\";\nimport { cn } from \"@/lib/utils\";\n\nconst chartData = [\n  {\n    name: \"payroll\",\n    label: \"Payroll\",\n    value: 46,\n    amount: 920000,\n    swatch: \"bg-[#d97706] dark:bg-[#fbbf24]\",\n  },\n  {\n    name: \"infrastructure\",\n    label: \"Infrastructure\",\n    value: 21,\n    amount: 420000,\n    swatch: \"bg-[#2563eb] dark:bg-[#60a5fa]\",\n  },\n  {\n    name: \"marketing\",\n    label: \"Marketing\",\n    value: 14,\n    amount: 280000,\n    swatch: \"bg-[#e11d48] dark:bg-[#fb7185]\",\n  },\n  {\n    name: \"tooling\",\n    label: \"Tooling\",\n    value: 10,\n    amount: 200000,\n    swatch: \"bg-[#475569] dark:bg-[#94a3b8]\",\n  },\n  {\n    name: \"support\",\n    label: \"Support\",\n    value: 9,\n    amount: 180000,\n    swatch: \"bg-[#0d9488] dark:bg-[#2dd4bf]\",\n  },\n];\n\nconst chartConfig = {\n  payroll: { label: \"Payroll\", colors: { light: [\"#d97706\"], dark: [\"#fbbf24\"] } },\n  infrastructure: { label: \"Infrastructure\", colors: { light: [\"#2563eb\"], dark: [\"#60a5fa\"] } },\n  marketing: { label: \"Marketing\", colors: { light: [\"#e11d48\"], dark: [\"#fb7185\"] } },\n  tooling: { label: \"Tooling\", colors: { light: [\"#475569\"], dark: [\"#94a3b8\"] } },\n  support: { label: \"Support\", colors: { light: [\"#0d9488\"], dark: [\"#2dd4bf\"] } },\n} satisfies ChartConfig;\n\nconst TOTAL = chartData.reduce((sum, { amount }) => sum + amount, 0);\n\nconst money = (value: number) => value.toLocaleString(\"en-US\");\n\nexport function EChartsBudgetRadialChart() {\n  return (\n    <div className=\"flex h-full w-full flex-col gap-6 p-4\">\n      <div className=\"flex items-baseline justify-between gap-4\">\n        <span className=\"text-primary text-base font-medium tracking-tight sm:text-lg\">\n          Quarterly Spend\n        </span>\n        <span className=\"text-muted-foreground text-xs\">${money(TOTAL)}</span>\n      </div>\n\n      <div className=\"grid shrink-0 grid-cols-5 gap-2\">\n        {chartData.map((row) => (\n          <div key={row.name} className=\"flex flex-col items-center gap-1\">\n            <div className=\"aspect-square w-full max-w-14\">\n              <EChartsRadialChart\n                data={[row]}\n                config={chartConfig}\n                nameKey=\"name\"\n                max={100}\n                innerRadius=\"66%\"\n                outerRadius=\"100%\"\n                className=\"h-full w-full\"\n              >\n                <EChartsRadialChart.RadialBar dataKey=\"value\" barSize={8} cornerRadius={6} />\n              </EChartsRadialChart>\n            </div>\n            <span className=\"text-muted-foreground w-full truncate text-center text-[10px] sm:text-[11px]\">\n              {row.label}\n            </span>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"flex min-h-0 flex-1 flex-col\">\n        {chartData.map(({ name, label, value, amount, swatch }) => (\n          <div\n            key={name}\n            className=\"odd:bg-muted/30 flex flex-1 items-center gap-2 rounded-md px-3\"\n          >\n            <span className={cn(\"size-2.5 shrink-0 rounded-[3px]\", swatch)} />\n            <span className=\"text-primary text-xs font-medium tabular-nums\">{value}%</span>\n            <span className=\"text-muted-foreground truncate text-xs\">{label}</span>\n            <span className=\"text-primary ml-auto text-xs font-medium\">${money(amount)}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/budget-echarts-radial-chart.tsx"
    }
  ],
  "type": "registry:block"
}