{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-chart-6","type":"registry:block","title":"3D gradient bar chart","description":"3D gradient bar chart","dependencies":["recharts"],"registryDependencies":["@reui/badge","card","chart"],"files":[{"path":"c-chart-6.tsx","type":"registry:block","content":"\"use client\"\n\nimport { SVGProps } from \"react\"\nimport { Badge } from \"@/components/reui/badge\"\nimport { Bar, BarChart, XAxis } 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\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst chartData = [\n  { month: \"Jan\", desktop: 340 },\n  { month: \"Feb\", desktop: 600 },\n  { month: \"Mar\", desktop: 510 },\n  { month: \"Apr\", desktop: 620 },\n  { month: \"May\", desktop: 450 },\n  { month: \"Jun\", desktop: 780 },\n  { month: \"Jul\", desktop: 390 },\n  { month: \"Aug\", desktop: 920 },\n  { month: \"Sep\", desktop: 640 },\n  { month: \"Oct\", desktop: 530 },\n  { month: \"Nov\", desktop: 800 },\n  { month: \"Dec\", desktop: 270 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nconst True3DBar = (\n  props: SVGProps<SVGRectElement> & {\n    dataKey?: string\n    payload?: any\n    index?: number\n  }\n) => {\n  const { fill, x, y, width, height } = props\n  const barX = x as number\n  const barY = y as number\n  const barWidth = width as number\n  const barHeight = height as number\n\n  // 3D perspective parameters\n  const depth = Math.min(barWidth * 0.3, 15) // Maximum depth of 15px\n  const angle = 30 // Isometric angle\n\n  return (\n    <g>\n      {/* Back face */}\n      <rect\n        x={barX + depth}\n        y={barY - depth}\n        width={barWidth}\n        height={barHeight}\n        fill=\"url(#bar-gradient-back)\"\n        rx=\"3\"\n      />\n\n      {/* Right side face */}\n      <polygon\n        points={`${barX + barWidth + 3},${barY - 3} ${barX + barWidth + depth - 3},${barY - depth + 3} ${barX + barWidth + depth - 3},${barY + barHeight - depth - 3} ${barX + barWidth + 3},${barY + barHeight - 3}`}\n        fill=\"url(#bar-gradient-side)\"\n      />\n\n      {/* Top face */}\n      <polygon\n        points={`${barX + 3},${barY - 3} ${barX + barWidth - 3},${barY - 3} ${barX + barWidth + depth - 3},${barY - depth + 3} ${barX + depth + 3},${barY - depth + 3}`}\n        fill=\"url(#bar-gradient-top)\"\n      />\n\n      {/* Front face */}\n      <rect\n        x={barX}\n        y={barY}\n        width={barWidth}\n        height={barHeight}\n        fill=\"url(#bar-gradient-front)\"\n        rx=\"3\"\n      />\n    </g>\n  )\n}\n\nexport function Chart3D() {\n  return (\n    <Card className=\"w-full max-w-md\">\n      <CardHeader>\n        <CardTitle>\n          Regional Performance\n          <Badge variant=\"success-light\" className=\"ml-2\">\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"TradeUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowRightUpLongLine\"\n              aria-hidden=\"true\"\n            />\n            +15.7%\n          </Badge>\n        </CardTitle>\n        <CardDescription>Global sales distribution by region</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 40,\n              right: 40,\n              bottom: 20,\n              left: 20,\n            }}\n            barCategoryGap=\"20%\"\n          >\n            <defs>\n              <linearGradient\n                id=\"bar-gradient-front\"\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"0\"\n                y2=\"1\"\n              >\n                <stop\n                  offset=\"0%\"\n                  stopColor=\"var(--chart-1)\"\n                  stopOpacity=\"0.9\"\n                />\n                <stop\n                  offset=\"100%\"\n                  stopColor=\"var(--chart-1)\"\n                  stopOpacity=\"0.7\"\n                />\n              </linearGradient>\n              <linearGradient\n                id=\"bar-gradient-back\"\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"0\"\n                y2=\"1\"\n              >\n                <stop\n                  offset=\"0%\"\n                  stopColor=\"var(--chart-1)\"\n                  stopOpacity=\"0.5\"\n                />\n                <stop\n                  offset=\"100%\"\n                  stopColor=\"var(--chart-1)\"\n                  stopOpacity=\"0.3\"\n                />\n              </linearGradient>\n              <linearGradient\n                id=\"bar-gradient-side\"\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"1\"\n                y2=\"0\"\n              >\n                <stop\n                  offset=\"0%\"\n                  stopColor=\"var(--chart-1)\"\n                  stopOpacity=\"0.6\"\n                />\n                <stop\n                  offset=\"100%\"\n                  stopColor=\"var(--chart-1)\"\n                  stopOpacity=\"0.4\"\n                />\n              </linearGradient>\n              <linearGradient id=\"bar-gradient-top\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n                <stop\n                  offset=\"0%\"\n                  stopColor=\"var(--chart-1)\"\n                  stopOpacity=\"0.7\"\n                />\n                <stop\n                  offset=\"100%\"\n                  stopColor=\"var(--chart-1)\"\n                  stopOpacity=\"0.5\"\n                />\n              </linearGradient>\n            </defs>\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={12}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"dot\"\n                  className=\"min-w-40 gap-2.5\"\n                  labelFormatter={(value) => {\n                    return (\n                      <div className=\"border-border/50 mb-0.5 flex flex-col gap-0.5 border-b pb-2\">\n                        <span className=\"text-xs font-medium\">\n                          {value} 2024\n                        </span>\n                      </div>\n                    )\n                  }}\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 className=\"bg-chart-1 h-2.5 w-2.5 shrink-0 rounded-xs\" />\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\">\n                        {Number(value).toLocaleString()}\n                      </span>\n                    </div>\n                  )}\n                />\n              }\n            />\n            <Bar\n              dataKey=\"desktop\"\n              fill=\"url(#bar-gradient-front)\"\n              shape={<True3DBar />}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}","target":"components/examples/c-chart-6.tsx"}],"meta":{"order":6}}