{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-chart-22","type":"registry:block","title":"Active segment donut with center label","description":"Active segment donut with center label","dependencies":["recharts"],"registryDependencies":["card","chart"],"files":[{"path":"c-chart-22.tsx","type":"registry:block","content":"\"use client\"\n\nimport { CSSProperties } from \"react\"\nimport { Label, Pie, PieChart, Sector, type PieSectorDataItem } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\nconst chartData = [\n  { plan: \"free\", users: 12800, fill: \"var(--color-free)\" },\n  { plan: \"starter\", users: 5400, fill: \"var(--color-starter)\" },\n  { plan: \"pro\", users: 3600, fill: \"var(--color-pro)\" },\n  { plan: \"enterprise\", users: 1200, fill: \"var(--color-enterprise)\" },\n]\n\nconst totalUsers = chartData.reduce((sum, d) => sum + d.users, 0)\nconst paidUsers = totalUsers - chartData[0].users\nconst conversionRate = ((paidUsers / totalUsers) * 100).toFixed(1)\n\nconst chartConfig = {\n  users: { label: \"Users\" },\n  free: { label: \"Free\", color: \"var(--chart-5)\" },\n  starter: { label: \"Starter\", color: \"var(--chart-3)\" },\n  pro: { label: \"Pro\", color: \"var(--chart-2)\" },\n  enterprise: { label: \"Enterprise\", color: \"var(--chart-1)\" },\n} satisfies ChartConfig\n\nexport function Pattern() {\n  return (\n    <Card className=\"w-full max-w-xs\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Conversion Funnel</CardTitle>\n        <CardDescription>\n          {conversionRate}% of users are on paid plans\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[300px]\"\n        >\n          <PieChart accessibilityLayer>\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"min-w-40 gap-2.5\"\n                  formatter={(value, name) => (\n                    <div className=\"flex w-full items-center justify-between gap-2\">\n                      <div className=\"flex items-center gap-1.5\">\n                        <div\n                          className=\"h-2.5 w-2.5 shrink-0 rounded-xs bg-(--color-bg)\"\n                          style={\n                            {\n                              \"--color-bg\": `var(--color-${name})`,\n                            } as CSSProperties\n                          }\n                        />\n                        <span className=\"text-muted-foreground\">\n                          {chartConfig[name as keyof typeof chartConfig]\n                            ?.label || name}\n                        </span>\n                      </div>\n                      <span className=\"text-foreground font-semibold tabular-nums\">\n                        {Number(value).toLocaleString()}\n                      </span>\n                    </div>\n                  )}\n                />\n              }\n            />\n            <ChartLegend\n              content={<ChartLegendContent nameKey=\"plan\" />}\n              className=\"-translate-y-2\"\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"users\"\n              nameKey=\"plan\"\n              innerRadius={55}\n              cornerRadius={5}\n              paddingAngle={3}\n              stroke=\"var(--background)\"\n              strokeWidth={3}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <Sector {...props} outerRadius={outerRadius + 10} />\n              )}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-2xl font-bold tabular-nums\"\n                        >\n                          {paidUsers.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 20}\n                          className=\"fill-muted-foreground text-xs\"\n                        >\n                          Paid Users\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}","target":"components/examples/c-chart-22.tsx"}],"meta":{"order":22}}