mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 23:29:08 +03:00
71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { TrendingUp } from 'lucide-react'
|
|
import { Pie, PieChart } from 'recharts'
|
|
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from 'ui'
|
|
import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
|
|
|
|
export const description = 'A pie chart with no separator'
|
|
|
|
const chartData = [
|
|
{ browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
|
|
{ browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
|
|
{ browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
|
|
{ browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
|
|
{ browser: 'other', visitors: 90, fill: 'var(--color-other)' },
|
|
]
|
|
|
|
const chartConfig = {
|
|
visitors: {
|
|
label: 'Visitors',
|
|
},
|
|
chrome: {
|
|
label: 'Chrome',
|
|
color: 'hsl(var(--chart-1))',
|
|
},
|
|
safari: {
|
|
label: 'Safari',
|
|
color: 'hsl(var(--chart-2))',
|
|
},
|
|
firefox: {
|
|
label: 'Firefox',
|
|
color: 'hsl(var(--chart-3))',
|
|
},
|
|
edge: {
|
|
label: 'Edge',
|
|
color: 'hsl(var(--chart-4))',
|
|
},
|
|
other: {
|
|
label: 'Other',
|
|
color: 'hsl(var(--chart-5))',
|
|
},
|
|
} satisfies ChartConfig
|
|
|
|
export default function Component() {
|
|
return (
|
|
<Card className="flex flex-col">
|
|
<CardHeader className="items-center pb-0">
|
|
<CardTitle>Pie Chart - Separator None</CardTitle>
|
|
<CardDescription>January - June 2024</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 pb-0">
|
|
<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
|
|
<PieChart>
|
|
<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
|
|
<Pie data={chartData} dataKey="visitors" nameKey="browser" stroke="0" />
|
|
</PieChart>
|
|
</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>
|
|
)
|
|
}
|