{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "market-share-echarts-pie-chart",
  "description": "Grayscale donut with a center total and a two-column value legend",
  "dependencies": [
    "echarts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-pie-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/echarts/b-market-share-echarts-pie-chart.tsx",
      "content": "\"use client\";\n\nimport { EChartsPieChart, type ChartConfig } from \"@/registry/charts/echarts-pie-chart\";\nimport { cn } from \"@/lib/utils\";\nimport { useState } from \"react\";\n\nconst SERIES = [\n  { key: \"skyline\", label: \"Skyline\", value: 27, swatch: \"bg-[#0a0a0a] dark:bg-[#ffffff]\" },\n  { key: \"datawell\", label: \"Datawell\", value: 21, swatch: \"bg-[#262626] dark:bg-[#dedede]\" },\n  { key: \"cloudpeak\", label: \"Cloudpeak\", value: 13, swatch: \"bg-[#3d3d3d] dark:bg-[#bebebe]\" },\n  { key: \"taskbridge\", label: \"Taskbridge\", value: 21, swatch: \"bg-[#545454] dark:bg-[#a0a0a0]\" },\n  { key: \"insightloop\", label: \"Insightloop\", value: 6, swatch: \"bg-[#6b6b6b] dark:bg-[#868686]\" },\n  {\n    key: \"streamforge\",\n    label: \"Streamforge\",\n    value: 12,\n    swatch: \"bg-[#7d7d7d] dark:bg-[#6f6f6f]\",\n  },\n] as const;\n\nconst chartData = [...SERIES].reverse().map(({ key, value }) => ({\n  product: key,\n  value,\n  share: `${value}%`,\n}));\n\nconst chartConfig = {\n  skyline: { label: \"Skyline\", colors: { light: [\"#0a0a0a\"], dark: [\"#ffffff\"] } },\n  datawell: { label: \"Datawell\", colors: { light: [\"#262626\"], dark: [\"#dedede\"] } },\n  cloudpeak: { label: \"Cloudpeak\", colors: { light: [\"#3d3d3d\"], dark: [\"#bebebe\"] } },\n  taskbridge: { label: \"Taskbridge\", colors: { light: [\"#545454\"], dark: [\"#a0a0a0\"] } },\n  insightloop: { label: \"Insightloop\", colors: { light: [\"#6b6b6b\"], dark: [\"#868686\"] } },\n  streamforge: { label: \"Streamforge\", colors: { light: [\"#7d7d7d\"], dark: [\"#6f6f6f\"] } },\n} satisfies ChartConfig;\n\nconst TOTAL = SERIES.reduce((sum, { value }) => sum + value, 0);\n\nexport function EChartsMarketSharePieChart() {\n  const [selected, setSelected] = useState<string | null>(null);\n\n  return (\n    <div className=\"@container flex h-full w-full flex-col p-4\">\n      <div className=\"relative min-h-0 w-full flex-1\">\n        <EChartsPieChart\n          data={chartData}\n          config={chartConfig}\n          dataKey=\"value\"\n          nameKey=\"product\"\n          className=\"h-full w-full\"\n          selectedSector={selected}\n          onSelectionChange={(selection) => setSelected(selection?.dataKey ?? null)}\n        >\n          <EChartsPieChart.Tooltip />\n          <EChartsPieChart.Pie\n            isClickable\n            innerRadius=\"52%\"\n            outerRadius=\"94%\"\n            paddingAngle={3}\n            startAngle={90}\n            endAngle={-270}\n          >\n            <EChartsPieChart.Label dataKey=\"share\" />\n          </EChartsPieChart.Pie>\n        </EChartsPieChart>\n\n        <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-0.5\">\n          <span className=\"text-primary text-xl font-semibold tracking-tight @xl:text-3xl\">\n            ${TOTAL}B\n          </span>\n          <span className=\"text-muted-foreground text-[10px] @xl:text-xs\">Ecosystem value</span>\n        </div>\n      </div>\n\n      <div className=\"border-border mt-3 grid grid-flow-col grid-cols-2 grid-rows-3 gap-x-6 gap-y-1.5 border-t pt-3\">\n        {SERIES.map(({ key, label, value, swatch }) => (\n          <button\n            key={key}\n            type=\"button\"\n            aria-pressed={selected === key}\n            onClick={() => setSelected((prev) => (prev === key ? null : key))}\n            className={cn(\n              \"flex cursor-pointer items-center gap-2 text-left text-xs transition-opacity\",\n              selected !== null && selected !== key && \"opacity-40\",\n            )}\n          >\n            <span className={cn(\"size-3 shrink-0 rounded-[3px]\", swatch)} />\n            <span className=\"text-primary font-medium\">{label}</span>\n            <span className=\"text-muted-foreground\">${value}B</span>\n            <span className=\"text-muted-foreground/60\">({value}%)</span>\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/market-share-echarts-pie-chart.tsx"
    }
  ],
  "type": "registry:block"
}