{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-rings-echarts-pie-chart",
  "description": "Dotted progress rings with a centered stat, built from per-dot pie sectors",
  "dependencies": [
    "echarts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-pie-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/echarts/b-progress-rings-echarts-pie-chart.tsx",
      "content": "\"use client\";\n\nimport { EChartsPieChart, type ChartConfig } from \"@/registry/charts/echarts-pie-chart\";\n\nconst DOT_COUNT = 40;\nconst SECTORS = DOT_COUNT * 2;\n\nconst STATS = [\n  { id: \"support\", value: 48, caption: \"Additional support requests from users.\" },\n  { id: \"forecast\", value: 67, caption: \"Inaccurate forecasts disrupt planning.\" },\n] as const;\n\nconst FILLED = { light: [\"#E43861\"], dark: [\"#E43861\"] };\nconst TRACK = { light: [\"#d4d4d4\"], dark: [\"#3f3f3f\"] };\nconst GAP = { light: [\"transparent\"], dark: [\"transparent\"] };\n\nconst dotsFor = (value: number) => Math.round((DOT_COUNT * value) / 100);\n\nconst chartData = (id: string) =>\n  Array.from({ length: SECTORS }, (_, i) => ({ dot: `${id}-${i}`, value: 1 }));\n\nconst chartConfig = (id: string, value: number): ChartConfig =>\n  Object.fromEntries(\n    Array.from({ length: SECTORS }, (_, i) => {\n      const colors = i % 2 ? GAP : i / 2 < dotsFor(value) ? FILLED : TRACK;\n      return [`${id}-${i}`, { label: \"\", colors }];\n    }),\n  );\n\nexport function EChartsProgressRingsPieChart() {\n  return (\n    <div className=\"flex h-full w-full flex-col p-4\">\n      <div className=\"flex items-start justify-between gap-4\">\n        <div className=\"flex flex-col gap-0.5\">\n          <span className=\"text-muted-foreground text-[10px] tracking-wide uppercase\">\n            User research\n          </span>\n          <span className=\"text-primary text-base leading-tight font-medium tracking-tight sm:text-xl\">\n            Where the workday leaks\n          </span>\n        </div>\n        <span className=\"text-muted-foreground shrink-0 text-[10px] sm:text-xs\">\n          1,240 responses\n        </span>\n      </div>\n\n      <div className=\"mt-3 grid min-h-0 flex-1 grid-cols-2 gap-4\">\n        {STATS.map(({ id, value, caption }) => (\n          <div key={id} className=\"relative min-h-0\">\n            <EChartsPieChart\n              data={chartData(id)}\n              config={chartConfig(id, value)}\n              dataKey=\"value\"\n              nameKey=\"dot\"\n              className=\"h-full w-full\"\n            >\n              <EChartsPieChart.Pie\n                innerRadius=\"85%\"\n                outerRadius=\"92%\"\n                paddingAngle={0}\n                cornerRadius={6}\n                startAngle={90}\n                endAngle={-270}\n              />\n            </EChartsPieChart>\n\n            <div className=\"pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-1 bg-[radial-gradient(circle_closest-side,rgba(0,0,0,0.04)_0_79%,transparent_79%)] px-[25%] text-center dark:bg-[radial-gradient(circle_closest-side,rgba(255,255,255,0.05)_0_79%,transparent_79%)]\">\n              <span className=\"text-primary text-2xl leading-none font-medium tracking-tight sm:text-4xl\">\n                {value}%\n              </span>\n              <span className=\"text-muted-foreground text-[10px] leading-snug text-balance sm:text-xs\">\n                {caption}\n              </span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/progress-rings-echarts-pie-chart.tsx"
    }
  ],
  "type": "registry:block"
}