updates

site/src/components/charts/cpu-chart.tsx

@@ -51,7 +51,7 @@ export default function CpuChart({ chartData }: { chartData: { time: string; cpu
 				/>
 				<Area
 					dataKey="cpu"
-					type="natural"
+					type="monotone"
 					fill="var(--color-cpu)"
 					fillOpacity={0.4}
 					stroke="var(--color-cpu)"

site/src/components/charts/radial.tsx

@@ -0,0 +1,93 @@
+import { TrendingUp } from 'lucide-react'
+import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from 'recharts'
+
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from '@/components/ui/card'
+import {
+	ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+} from '@/components/ui/chart'
+const chartData = [{ month: 'january', desktop: 1260, mobile: 570 }]
+
+const chartConfig = {
+	mobile: {
+		label: 'Mobile',
+		color: 'hsl(var(--chart-2))',
+	},
+} satisfies ChartConfig
+
+export function RadialChart() {
+	const totalVisitors = chartData[0].desktop + chartData[0].mobile
+
+	return (
+		<Card className="flex flex-col">
+			<CardHeader className="items-center pb-0">
+				<CardTitle>Radial Chart - Stacked</CardTitle>
+				<CardDescription>January - June 2024</CardDescription>
+			</CardHeader>
+			<CardContent className="flex flex-1 items-center pb-0">
+				<ChartContainer config={chartConfig} className="mx-auto aspect-square w-full max-w-[250px]">
+					<RadialBarChart data={chartData} endAngle={180} innerRadius={80} outerRadius={130}>
+						<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+						<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">
+												<tspan
+													x={viewBox.cx}
+													y={(viewBox.cy || 0) - 16}
+													className="fill-foreground text-2xl font-bold"
+												>
+													{totalVisitors.toLocaleString()}
+												</tspan>
+												<tspan
+													x={viewBox.cx}
+													y={(viewBox.cy || 0) + 4}
+													className="fill-muted-foreground"
+												>
+													Visitors
+												</tspan>
+											</text>
+										)
+									}
+								}}
+							/>
+						</PolarRadiusAxis>
+						<RadialBar
+							dataKey="desktop"
+							stackId="a"
+							cornerRadius={5}
+							fill="var(--color-desktop)"
+							className="stroke-transparent stroke-2"
+						/>
+						<RadialBar
+							dataKey="mobile"
+							fill="var(--color-mobile)"
+							stackId="a"
+							cornerRadius={5}
+							className="stroke-transparent stroke-2"
+						/>
+					</RadialBarChart>
+				</ChartContainer>
+			</CardContent>
+			<CardFooter className="flex-col gap-2 text-sm">
+				<div className="flex items-center gap-2 font-medium leading-none">
+					Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
+				</div>
+				<div className="leading-none text-muted-foreground">
+					Showing total visitors for the last 6 months
+				</div>
+			</CardFooter>
+		</Card>
+	)
+}