{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "reliability-score-echarts-pie-chart",
  "description": "Banded score arc with a range scale, built from pie sectors",
  "dependencies": [
    "echarts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-pie-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/echarts/b-reliability-score-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 MAX = 1000;\nconst SCORE = 842;\nconst START_ANGLE = 210;\n\nconst chartData = [\n  { band: \"atrisk\", label: \"At risk\", from: 0, value: 450, bar: \"bg-[#e11d48] dark:bg-[#fb7185]\" },\n  { band: \"fair\", label: \"Fair\", from: 450, value: 200, bar: \"bg-[#f59e0b] dark:bg-[#fbbf24]\" },\n  { band: \"good\", label: \"Good\", from: 650, value: 170, bar: \"bg-[#84cc16] dark:bg-[#a3e635]\" },\n  {\n    band: \"excellent\",\n    label: \"Excellent\",\n    from: 820,\n    value: 180,\n    bar: \"bg-[#059669] dark:bg-[#34d399]\",\n  },\n];\n\nconst chartConfig = {\n  atrisk: { label: \"At risk\", colors: { light: [\"#e11d48\"], dark: [\"#fb7185\"] } },\n  fair: { label: \"Fair\", colors: { light: [\"#f59e0b\"], dark: [\"#fbbf24\"] } },\n  good: { label: \"Good\", colors: { light: [\"#84cc16\"], dark: [\"#a3e635\"] } },\n  excellent: { label: \"Excellent\", colors: { light: [\"#059669\"], dark: [\"#34d399\"] } },\n} satisfies ChartConfig;\n\nconst BAND = [...chartData].reverse().find(({ from }) => SCORE >= from) ?? chartData[0];\n\nexport function EChartsReliabilityScorePieChart() {\n  return (\n    <div className=\"flex h-full w-full flex-col p-4\">\n      <span className=\"text-primary text-base font-medium tracking-tight sm:text-lg\">\n        Delivery Reliability\n      </span>\n\n      <div className=\"relative mx-auto mt-1 aspect-square w-full max-w-50 shrink-0\">\n        <EChartsPieChart\n          data={[...chartData].reverse()}\n          config={chartConfig}\n          dataKey=\"value\"\n          nameKey=\"band\"\n          className=\"h-full w-full\"\n        >\n          <EChartsPieChart.Pie\n            innerRadius=\"74%\"\n            outerRadius=\"94%\"\n            paddingAngle={6}\n            cornerRadius={10}\n            startAngle={-30}\n            endAngle={START_ANGLE}\n          />\n        </EChartsPieChart>\n\n        <svg\n          viewBox=\"0 0 100 100\"\n          className=\"text-muted-foreground/50 pointer-events-none absolute inset-0\"\n          aria-hidden\n        >\n          <path\n            d=\"M 23.15 65.5 A 31 31 0 1 1 76.85 65.5\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1\"\n            strokeLinecap=\"round\"\n            strokeDasharray=\"0.1 5\"\n          />\n        </svg>\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <span className=\"text-primary text-3xl font-semibold tracking-tight sm:text-4xl\">\n            {SCORE}\n          </span>\n        </div>\n      </div>\n\n      <div className=\"-mt-6 text-center\">\n        <p className=\"text-primary text-xs font-medium sm:text-sm\">\n          Reliability is {BAND.label.toLowerCase()}\n        </p>\n        <p className=\"text-muted-foreground text-[10px] sm:text-xs\">Updated 12 Mar 2026</p>\n      </div>\n\n      <div className=\"mt-auto shrink-0 pt-2\">\n        <div className=\"text-muted-foreground flex text-[10px]\">\n          {chartData.map(({ band, from, value }) => (\n            <span key={band} style={{ flexGrow: value, flexBasis: 0 }}>\n              {from}\n            </span>\n          ))}\n          <span>{MAX}</span>\n        </div>\n        <div className=\"mt-1 flex gap-1\">\n          {chartData.map(({ band, bar, value }) => (\n            <span\n              key={band}\n              className={cn(\"h-1.5 rounded-full\", bar)}\n              style={{ flexGrow: value, flexBasis: 0 }}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/reliability-score-echarts-pie-chart.tsx"
    }
  ],
  "type": "registry:block"
}