initial commit

app/(root)/(routes)/customize/_components/radial-chart-shape.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import { TrendingUp } from 'lucide-react'
+import {
+  Label,
+  PolarGrid,
+  PolarRadiusAxis,
+  RadialBar,
+  RadialBarChart
+} from 'recharts'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card'
+import { ChartConfig, ChartContainer } from '@/components/ui/chart'
+const chartData = [
+  { browser: 'safari', visitors: 1260, fill: 'var(--color-safari)' }
+]
+
+const chartConfig = {
+  visitors: {
+    label: 'Visitors'
+  },
+  safari: {
+    label: 'Safari',
+    color: 'hsl(var(--chart-2))'
+  }
+} satisfies ChartConfig
+
+export function RadialChartShape() {
+  return (
+    <ChartContainer
+      config={chartConfig}
+      className="aspect-square w-full h-[200px]"
+    >
+      <RadialBarChart
+        data={chartData}
+        endAngle={100}
+        innerRadius={80}
+        outerRadius={140}
+      >
+        <PolarGrid
+          gridType="circle"
+          radialLines={false}
+          stroke="none"
+          className="first:fill-muted last:fill-background"
+          polarRadius={[86, 74]}
+        />
+        <RadialBar dataKey="visitors" background />
+        <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+          <Label
+            content={({ viewBox }) => {
+              if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                return (
+                  <text
+                    x={viewBox.cx}
+                    y={viewBox.cy}
+                    textAnchor="middle"
+                    dominantBaseline="middle"
+                  >
+                    <tspan
+                      x={viewBox.cx}
+                      y={viewBox.cy}
+                      className="fill-foreground text-4xl font-bold"
+                    >
+                      {chartData[0].visitors.toLocaleString()}
+                    </tspan>
+                    <tspan
+                      x={viewBox.cx}
+                      y={(viewBox.cy || 0) + 24}
+                      className="fill-muted-foreground"
+                    >
+                      Visitors
+                    </tspan>
+                  </text>
+                )
+              }
+            }}
+          />
+        </PolarRadiusAxis>
+      </RadialBarChart>
+    </ChartContainer>
+  )
+}