{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-chart-19","type":"registry:block","title":"Donut chart with center total","description":"Donut chart with center total","dependencies":["recharts"],"registryDependencies":["card","chart"],"files":[{"path":"c-chart-19.tsx","type":"registry:block","content":"\"use client\"\n\nimport { CSSProperties } from \"react\"\nimport { Cell, Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\nconst chartData = [\n  { source: \"direct\", visits: 4200, fill: \"var(--color-direct)\" },\n  { source: \"search\", visits: 3600, fill: \"var(--color-search)\" },\n  { source: \"social\", visits: 2800, fill: \"var(--color-social)\" },\n  { source: \"email\", visits: 1900, fill: \"var(--color-email)\" },\n  { source: \"referral\", visits: 1400, fill: \"var(--color-referral)\" },\n]\n\nconst total = chartData.reduce((s, d) => s + d.visits, 0)\n\nconst chartConfig = {\n  visits: { label: \"Visits\" },\n  direct: { label: \"Direct\", color: \"var(--chart-1)\" },\n  search: { label: \"Search\", color: \"var(--chart-2)\" },\n  social: { label: \"Social\", color: \"var(--chart-3)\" },\n  email: { label: \"Email\", color: \"var(--chart-4)\" },\n  referral: { label: \"Referral\", color: \"var(--chart-5)\" },\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>Traffic Sources</CardTitle>\n        <CardDescription>Where your visitors come from</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[280px]\"\n        >\n          <PieChart accessibilityLayer>\n            <defs>\n              <filter\n                id=\"chart19-3d\"\n                x=\"-20%\"\n                y=\"-20%\"\n                width=\"140%\"\n                height=\"140%\"\n              >\n                <feDropShadow\n                  dx=\"0\"\n                  dy=\"8\"\n                  stdDeviation=\"5\"\n                  floodOpacity=\"0.2\"\n                />\n              </filter>\n              <linearGradient id=\"gradient-direct\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor=\"var(--chart-1)\" stopOpacity={1} />\n                <stop\n                  offset=\"100%\"\n                  stopColor=\"var(--chart-1)\"\n                  stopOpacity={0.8}\n                />\n              </linearGradient>\n              <linearGradient id=\"gradient-search\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor=\"var(--chart-2)\" stopOpacity={1} />\n                <stop\n                  offset=\"100%\"\n                  stopColor=\"var(--chart-2)\"\n                  stopOpacity={0.8}\n                />\n              </linearGradient>\n              <linearGradient id=\"gradient-social\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor=\"var(--chart-3)\" stopOpacity={1} />\n                <stop\n                  offset=\"100%\"\n                  stopColor=\"var(--chart-3)\"\n                  stopOpacity={0.8}\n                />\n              </linearGradient>\n              <linearGradient id=\"gradient-email\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stopColor=\"var(--chart-4)\" stopOpacity={1} />\n                <stop\n                  offset=\"100%\"\n                  stopColor=\"var(--chart-4)\"\n                  stopOpacity={0.8}\n                />\n              </linearGradient>\n              <linearGradient\n                id=\"gradient-referral\"\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"0\"\n                y2=\"1\"\n              >\n                <stop offset=\"0%\" stopColor=\"var(--chart-5)\" stopOpacity={1} />\n                <stop\n                  offset=\"100%\"\n                  stopColor=\"var(--chart-5)\"\n                  stopOpacity={0.8}\n                />\n              </linearGradient>\n            </defs>\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            <Pie\n              data={chartData}\n              dataKey=\"visits\"\n              nameKey=\"source\"\n              innerRadius={65}\n              outerRadius={95}\n              cornerRadius={8}\n              paddingAngle={4}\n              stroke=\"var(--background)\"\n              strokeWidth={4}\n              style={{ filter: \"url(#chart19-3d)\" }}\n            >\n              {chartData.map((entry, index) => (\n                <Cell\n                  key={`cell-${index}`}\n                  fill={`url(#gradient-${entry.source})`}\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-3xl font-bold tabular-nums\"\n                        >\n                          {(total / 1000).toFixed(1)}k\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 22}\n                          className=\"fill-muted-foreground text-xs\"\n                        >\n                          Total Visits\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-19.tsx"}],"meta":{"order":19}}