initial commit

app/(root)/(routes)/customize/_components/radar-chart-lines.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts'
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent
+} from '@/components/ui/chart'
+const chartData = [
+  { month: 'January', desktop: 186 },
+  { month: 'February', desktop: 285 },
+  { month: 'March', desktop: 237 },
+  { month: 'April', desktop: 203 },
+  { month: 'May', desktop: 209 },
+  { month: 'June', desktop: 264 }
+]
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'hsl(var(--chart-1))'
+  }
+} satisfies ChartConfig
+
+export function RadarChartLines() {
+  return (
+    <ChartContainer
+      config={chartConfig}
+      className="w-full aspect-square h-[200px]"
+    >
+      <RadarChart data={chartData}>
+        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+        <PolarGrid
+          className="fill-[--color-desktop] opacity-20"
+          gridType="circle"
+        />
+        <PolarAngleAxis dataKey="month" />
+        <Radar
+          dataKey="desktop"
+          fill="var(--color-desktop)"
+          fillOpacity={0.5}
+        />
+      </RadarChart>
+    </ChartContainer>
+  )
+}