{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-chart-21","type":"registry:block","title":"Bug priority pie with stripe patterns","description":"Bug priority pie with stripe patterns","dependencies":["recharts"],"registryDependencies":["card","chart"],"files":[{"path":"c-chart-21.tsx","type":"registry:block","content":"\"use client\"\n\nimport { CSSProperties } from \"react\"\nimport { Cell, 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  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/components/ui/chart\"\n\nconst chartData = [\n  { priority: \"critical\", bugs: 14, fill: \"url(#chart22-critical-pattern)\" },\n  { priority: \"high\", bugs: 28, fill: \"var(--color-high)\" },\n  { priority: \"medium\", bugs: 42, fill: \"url(#chart22-medium-pattern)\" },\n  { priority: \"low\", bugs: 36, fill: \"var(--color-low)\" },\n]\n\nconst chartConfig = {\n  bugs: { label: \"Bugs\" },\n  critical: { label: \"Critical\", color: \"var(--destructive)\" },\n  high: { label: \"High\", color: \"var(--chart-4)\" },\n  medium: { label: \"Medium\", color: \"var(--chart-3)\" },\n  low: { label: \"Low\", 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>Bug Priority</CardTitle>\n        <CardDescription>Open issues by severity level</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            <defs>\n              <pattern\n                id=\"chart22-critical-pattern\"\n                patternUnits=\"userSpaceOnUse\"\n                width=\"6\"\n                height=\"6\"\n              >\n                <rect\n                  width=\"6\"\n                  height=\"6\"\n                  fill=\"var(--destructive)\"\n                  opacity=\"0.3\"\n                />\n                <path\n                  d=\"M0,6 L6,0 M-2,2 L2,-2 M4,8 L8,4\"\n                  stroke=\"var(--destructive)\"\n                  strokeWidth=\"1.5\"\n                  opacity=\"0.9\"\n                />\n              </pattern>\n              <pattern\n                id=\"chart22-medium-pattern\"\n                patternUnits=\"userSpaceOnUse\"\n                width=\"5\"\n                height=\"5\"\n              >\n                <rect\n                  width=\"5\"\n                  height=\"5\"\n                  fill=\"var(--chart-3)\"\n                  opacity=\"0.2\"\n                />\n                <circle\n                  cx=\"2.5\"\n                  cy=\"2.5\"\n                  r=\"1.2\"\n                  fill=\"var(--chart-3)\"\n                  opacity=\"0.7\"\n                />\n              </pattern>\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            <ChartLegend\n              content={<ChartLegendContent nameKey=\"priority\" />}\n              className=\"-translate-y-2\"\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"bugs\"\n              nameKey=\"priority\"\n              innerRadius={40}\n              cornerRadius={4}\n              paddingAngle={3}\n              stroke=\"var(--background)\"\n              strokeWidth={3}\n            >\n              {chartData.map((entry) => (\n                <Cell key={entry.priority} fill={entry.fill} />\n              ))}\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}","target":"components/examples/c-chart-21.tsx"}],"meta":{"order":21}}