{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ride-echarts-radial-chart",
  "description": "Activity summary card with a distance goal bar and three metric gauges",
  "dependencies": [
    "echarts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/echarts-radial-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/echarts/b-ride-echarts-radial-chart.tsx",
      "content": "\"use client\";\n\nimport { EChartsRadialChart, type ChartConfig } from \"@/registry/charts/echarts-radial-chart\";\nimport { cn } from \"@/lib/utils\";\n\nfunction BikeIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.7\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n    >\n      <circle cx=\"5.5\" cy=\"17.5\" r=\"3.5\" />\n      <circle cx=\"18.5\" cy=\"17.5\" r=\"3.5\" />\n      <circle cx=\"15.5\" cy=\"4.5\" r=\"1\" />\n      <path d=\"M12 17.5V14L9 11l4-3 2 3h2.5\" />\n    </svg>\n  );\n}\n\nfunction MountainIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.8\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n    >\n      <path d=\"M2.5 19h19L14 5.5l-3.5 6.5L8.5 9.5 2.5 19Z\" />\n    </svg>\n  );\n}\n\nfunction BoltIcon({ className }: { className?: string }) {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className={className}>\n      <path d=\"M13 2 5 13h6l-1 9 8-11h-6l1-9Z\" />\n    </svg>\n  );\n}\n\nfunction GaugeIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.8\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n    >\n      <path d=\"M3.5 17.5a8.5 8.5 0 1 1 17 0\" />\n      <path d=\"M12 17.5 15.5 10.5\" />\n      <circle cx=\"12\" cy=\"17.5\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\" />\n    </svg>\n  );\n}\n\nfunction SprintIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.9\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n    >\n      <path d=\"M6 14.5 12 8.5l6 6\" />\n      <path d=\"M6 19.5 12 13.5l6 6\" />\n    </svg>\n  );\n}\n\nfunction MoonIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.7\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n    >\n      <path d=\"M20 14.2A8.4 8.4 0 0 1 9.8 4a8.4 8.4 0 1 0 10.2 10.2Z\" />\n    </svg>\n  );\n}\n\nconst RIDE = { distance: 18.4, goal: 25, unit: \"km\" };\n\nconst METRICS = [\n  {\n    name: \"elevation\",\n    value: 312,\n    goal: 450,\n    unit: \"m\",\n    icon: MountainIcon,\n    tint: \"text-[#0284c7] dark:text-[#38bdf8]\",\n  },\n  {\n    name: \"energy\",\n    value: 684,\n    goal: 1200,\n    unit: \"kJ\",\n    icon: BoltIcon,\n    tint: \"text-[#d97706] dark:text-[#fbbf24]\",\n  },\n  {\n    name: \"cadence\",\n    value: 82,\n    goal: 95,\n    unit: \"rpm\",\n    icon: GaugeIcon,\n    tint: \"text-[#e11d48] dark:text-[#fb7185]\",\n  },\n];\n\nconst SPLITS = [\n  {\n    name: \"sprints\",\n    label: \"Sprints\",\n    value: \"7\",\n    unit: \"efforts\",\n    icon: SprintIcon,\n    tint: \"text-[#7c3aed] dark:text-[#a78bfa]\",\n  },\n  {\n    name: \"recovery\",\n    label: \"Recovery\",\n    value: \"46\",\n    unit: \"min\",\n    icon: MoonIcon,\n    tint: \"text-[#0284c7] dark:text-[#38bdf8]\",\n  },\n];\n\nconst chartConfig = {\n  elevation: {\n    label: \"Elevation\",\n    colors: { light: [\"#0ea5e9\", \"#0284c7\"], dark: [\"#38bdf8\", \"#0ea5e9\"] },\n  },\n  energy: {\n    label: \"Energy\",\n    colors: { light: [\"#f59e0b\", \"#d97706\"], dark: [\"#fbbf24\", \"#f59e0b\"] },\n  },\n  cadence: {\n    label: \"Cadence\",\n    colors: { light: [\"#f43f5e\", \"#e11d48\"], dark: [\"#fb7185\", \"#f43f5e\"] },\n  },\n} satisfies ChartConfig;\n\nconst share = (value: number, goal: number) => Math.round((value / goal) * 100);\n\nexport function EChartsRideRadialChart() {\n  return (\n    <div className=\"flex h-full w-full flex-col gap-2 p-2 sm:flex-row sm:gap-5 sm:p-4\">\n      <div className=\"flex min-h-0 flex-1 flex-col gap-2 sm:gap-4\">\n        <div className=\"flex shrink-0 flex-col items-center gap-1 sm:gap-2\">\n          <BikeIcon className=\"size-4 text-[#7c3aed] sm:size-7 dark:text-[#a78bfa]\" />\n\n          <div className=\"flex items-baseline gap-1.5\">\n            <span className=\"text-primary text-2xl leading-none font-semibold tracking-tight tabular-nums sm:text-4xl\">\n              {RIDE.distance}\n            </span>\n            <span className=\"text-muted-foreground text-sm font-medium\">{RIDE.unit} ridden</span>\n          </div>\n\n          <div className=\"bg-muted h-2 w-full overflow-hidden rounded-full sm:h-2.5\">\n            <div\n              className=\"h-full rounded-full bg-[#7c3aed] dark:bg-[#a78bfa]\"\n              style={{ width: `${share(RIDE.distance, RIDE.goal)}%` }}\n            />\n          </div>\n        </div>\n\n        <div className=\"grid min-h-0 flex-1 grid-cols-3 gap-2 border-t pt-1.5 sm:pt-3\">\n          {METRICS.map(({ name, value, goal, unit, icon: Icon, tint }) => (\n            <div\n              key={name}\n              className=\"flex min-h-0 flex-col items-center justify-center gap-1 sm:gap-2\"\n            >\n              <div className=\"relative min-h-0 w-full max-w-[104px] flex-1 sm:aspect-square sm:min-h-auto sm:flex-initial\">\n                <EChartsRadialChart\n                  data={[{ name, value: share(value, goal) }]}\n                  config={chartConfig}\n                  nameKey=\"name\"\n                  max={100}\n                  innerRadius=\"70%\"\n                  outerRadius=\"100%\"\n                  className=\"h-full w-full\"\n                >\n                  <EChartsRadialChart.RadialBar dataKey=\"value\" barSize={9} cornerRadius={6} />\n                </EChartsRadialChart>\n\n                <span\n                  className={cn(\n                    \"pointer-events-none absolute inset-0 flex items-center justify-center\",\n                    tint,\n                  )}\n                >\n                  <Icon className=\"size-5 sm:size-6\" />\n                </span>\n              </div>\n\n              <div className=\"flex shrink-0 items-baseline gap-1\">\n                <span className=\"text-primary text-xs font-semibold tabular-nums sm:text-base\">\n                  {value}\n                </span>\n                <span className=\"text-muted-foreground text-[11px]\">{unit}</span>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"flex shrink-0 gap-3 border-t pt-2 sm:w-[34%] sm:max-w-60 sm:border-t-0 sm:border-l sm:pt-0 sm:pl-5\">\n        {SPLITS.map(({ name, label, value, unit, icon: Icon, tint }, index) => (\n          <div\n            key={name}\n            className={cn(\n              \"flex flex-1 flex-col justify-between gap-1.5 sm:gap-3\",\n              index > 0 && \"border-l pl-3\",\n            )}\n          >\n            <Icon className={cn(\"size-4 shrink-0 sm:size-6\", tint)} />\n\n            <div className=\"flex flex-col gap-0.5\">\n              <span className=\"text-muted-foreground text-[10px] tracking-wider uppercase\">\n                {label}\n              </span>\n              <div className=\"flex items-baseline gap-1\">\n                <span className=\"text-primary text-xl leading-none font-semibold tabular-nums sm:text-2xl\">\n                  {value}\n                </span>\n                <span className=\"text-muted-foreground text-[11px]\">{unit}</span>\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/ride-echarts-radial-chart.tsx"
    }
  ],
  "type": "registry:block"
}