mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-08 22:45:47 +00:00
05145e66d3
* feat(www): add login blocks * chore(www): restructure for blocks * chore: build registry * chore: clean up chunks * fix(www): chart categories * feat(www): big registry refactor * feat(www): update blocks * feat: complex blocks * fix: update schema * feat: sync new-york and default * fix: lint * feat: move charts * fix(www): code * fix: src path * chore: rebuild registry * fix: screenshot * fix: set new-york as default
94 lines
2.4 KiB
TypeScript
94 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import { TrendingUp } from "lucide-react"
|
|
import { Pie, PieChart } from "recharts"
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/registry/default/ui/card"
|
|
import {
|
|
ChartConfig,
|
|
ChartContainer,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
} from "@/registry/default/ui/chart"
|
|
|
|
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>
|
|
)
|
|
}
|