{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cache-tiers-echarts-radial-chart",
  "description": "Semi-circle multi-ring gauge with a stat grid and a share legend",
  "dependencies": [
    "echarts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-radial-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/echarts/b-cache-tiers-echarts-radial-chart.tsx",
      "content": "\"use client\";\n\nimport { EChartsRadialChart, type ChartConfig } from \"@/registry/charts/echarts-radial-chart\";\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst TOTAL = 1000;\n\nconst TIERS = [\n  {\n    name: \"memory\",\n    label: \"L1 Memory\",\n    count: 610,\n    swatch: \"bg-[#dc2626] dark:bg-[#ef4444]\",\n  },\n  {\n    name: \"regional\",\n    label: \"L2 Regional\",\n    count: 240,\n    swatch: \"bg-[#d97706] dark:bg-[#f59e0b]\",\n  },\n  {\n    name: \"overflow\",\n    label: \"Edge Overflow\",\n    count: 100,\n    swatch: \"bg-[#2563eb] dark:bg-[#3b82f6]\",\n  },\n  {\n    name: \"origin\",\n    label: \"Origin Fetch\",\n    count: 50,\n    swatch: \"bg-[#0f172a] dark:bg-white\",\n  },\n];\n\nconst STATS = [\n  { name: \"warm\", label: \"Served Warm\", value: 9150 },\n  { name: \"revalidated\", label: \"Revalidated\", value: 1280 },\n  { name: \"evictions\", label: \"Evictions\", value: 412 },\n  { name: \"purges\", label: \"Purges\", value: 96 },\n];\n\nconst chartConfig = {\n  memory: { label: \"L1 Memory\", colors: { light: [\"#dc2626\"], dark: [\"#ef4444\"] } },\n  regional: { label: \"L2 Regional\", colors: { light: [\"#d97706\"], dark: [\"#f59e0b\"] } },\n  overflow: { label: \"Edge Overflow\", colors: { light: [\"#2563eb\"], dark: [\"#3b82f6\"] } },\n  origin: { label: \"Origin Fetch\", colors: { light: [\"#0f172a\"], dark: [\"#ffffff\"] } },\n} satisfies ChartConfig;\n\nconst chartData = [...TIERS]\n  .reverse()\n  .map(({ name, count }) => ({ name, share: (count / TOTAL) * 100 }));\n\nconst count = (value: number) => value.toLocaleString(\"en-US\");\n\nfunction useCompactRings() {\n  const [compact, setCompact] = useState(false);\n\n  useEffect(() => {\n    const query = window.matchMedia(\"(max-width: 639px)\");\n    const sync = () => setCompact(query.matches);\n    sync();\n    query.addEventListener(\"change\", sync);\n    return () => query.removeEventListener(\"change\", sync);\n  }, []);\n\n  return compact;\n}\n\nexport function EChartsCacheTiersRadialChart() {\n  const compact = useCompactRings();\n\n  return (\n    <div className=\"flex h-full w-full flex-col gap-2 p-3 sm:gap-3 sm:p-4\">\n      <div className=\"flex min-h-0 flex-1 gap-3 sm:gap-4\">\n        <div className=\"relative min-h-0 flex-1 sm:-mb-10\">\n          <EChartsRadialChart\n            data={chartData}\n            config={chartConfig}\n            nameKey=\"name\"\n            variant=\"semi\"\n            max={100}\n            innerRadius=\"38%\"\n            outerRadius=\"96%\"\n            className=\"h-full w-full\"\n          >\n            <EChartsRadialChart.RadialBar\n              dataKey=\"share\"\n              barSize={compact ? 7 : 13}\n              cornerRadius={compact ? 4 : 7}\n            />\n          </EChartsRadialChart>\n        </div>\n\n        <div className=\"grid shrink-0 grid-cols-2 content-center gap-x-4 gap-y-5 sm:w-[40%] sm:max-w-64\">\n          {STATS.map(({ name, label, value }) => (\n            <div key={name} className=\"flex flex-col gap-1\">\n              <span className=\"text-muted-foreground truncate text-xs sm:text-sm\">{label}</span>\n              <span className=\"text-primary text-lg leading-none font-medium tabular-nums sm:text-xl\">\n                {count(value)}\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"grid shrink-0 grid-cols-2 gap-x-4 gap-y-2 border-t pt-2 sm:grid-cols-4 sm:gap-y-3 sm:pt-3\">\n        {TIERS.map(({ name, label, count: hits, swatch }) => (\n          <div key={name} className=\"flex flex-col gap-1\">\n            <div className=\"flex items-center gap-1.5\">\n              <span className={cn(\"size-2.5 shrink-0 rounded-[3px]\", swatch)} />\n              <span className=\"text-primary truncate text-xs\">{label}</span>\n            </div>\n            <span className=\"text-muted-foreground text-xs tabular-nums\">\n              {count(hits)}/{count(TOTAL)} ({Math.round((hits / TOTAL) * 100)}%)\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/cache-tiers-echarts-radial-chart.tsx"
    }
  ],
  "type": "registry:block"
}