{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "revenue-mix-echarts-pie-chart",
  "description": "Gapped donut with a center total and a side legend of amounts",
  "dependencies": [
    "echarts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-pie-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/echarts/b-revenue-mix-echarts-pie-chart.tsx",
      "content": "\"use client\";\n\nimport { EChartsPieChart, type ChartConfig } from \"@/registry/charts/echarts-pie-chart\";\nimport { cn } from \"@/lib/utils\";\n\nconst chartData = [\n  {\n    channel: \"direct\",\n    label: \"Direct\",\n    value: 52400,\n    swatch: \"bg-[#7c3aed] dark:bg-[#a78bfa]\",\n  },\n  {\n    channel: \"marketplace\",\n    label: \"Marketplace\",\n    value: 38900,\n    swatch: \"bg-[#4f46e5] dark:bg-[#818cf8]\",\n  },\n  {\n    channel: \"wholesale\",\n    label: \"Wholesale\",\n    value: 24150,\n    swatch: \"bg-[#0284c7] dark:bg-[#38bdf8]\",\n  },\n  {\n    channel: \"affiliate\",\n    label: \"Affiliate\",\n    value: 16300,\n    swatch: \"bg-[#059669] dark:bg-[#34d399]\",\n  },\n];\n\nconst chartConfig = {\n  direct: {\n    label: \"Direct\",\n    colors: { light: [\"#7c3aed\", \"#a855f7\"], dark: [\"#a78bfa\", \"#c4b5fd\"] },\n  },\n  marketplace: {\n    label: \"Marketplace\",\n    colors: { light: [\"#4f46e5\", \"#6366f1\"], dark: [\"#818cf8\", \"#a5b4fc\"] },\n  },\n  wholesale: {\n    label: \"Wholesale\",\n    colors: { light: [\"#0284c7\", \"#0ea5e9\"], dark: [\"#38bdf8\", \"#7dd3fc\"] },\n  },\n  affiliate: {\n    label: \"Affiliate\",\n    colors: { light: [\"#059669\", \"#10b981\"], dark: [\"#34d399\", \"#6ee7b7\"] },\n  },\n} satisfies ChartConfig;\n\nconst ORDERS = 1284;\n\nconst money = (value: number) => value.toLocaleString(\"en-US\");\n\nexport function EChartsRevenueMixPieChart() {\n  return (\n    <div className=\"flex h-full w-full items-center gap-3 p-4 sm:gap-6\">\n      <div className=\"relative aspect-square w-[40%] max-w-72 shrink-0\">\n        <EChartsPieChart\n          data={chartData}\n          config={chartConfig}\n          dataKey=\"value\"\n          nameKey=\"channel\"\n          className=\"h-full w-full\"\n        >\n          <EChartsPieChart.Tooltip />\n          <EChartsPieChart.Pie\n            innerRadius=\"62%\"\n            outerRadius=\"92%\"\n            paddingAngle={6}\n            cornerRadius={12}\n            startAngle={90}\n            endAngle={-270}\n          />\n        </EChartsPieChart>\n\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"border-border flex aspect-square w-[56%] flex-col items-center justify-center rounded-full border border-dashed\">\n            <span className=\"text-primary text-lg leading-none font-semibold tracking-tight sm:text-2xl\">\n              {money(ORDERS)}\n            </span>\n            <span className=\"text-muted-foreground mt-1 text-[10px] sm:text-xs\">Total orders</span>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"flex min-h-0 min-w-0 flex-1 flex-col justify-center\">\n        {chartData.map(({ channel, label, value, swatch }) => (\n          <div key={channel} className=\"flex items-center gap-2 py-1.5 sm:py-2\">\n            <span className={cn(\"size-2.5 shrink-0 rounded-[3px]\", swatch)} />\n            <span className=\"text-muted-foreground truncate text-xs\">{label}</span>\n            <span className=\"text-primary ml-auto text-xs font-semibold\">${money(value)}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/revenue-mix-echarts-pie-chart.tsx"
    }
  ],
  "type": "registry:block"
}