mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
16c4453cc1
Squash merge of shadcn-ui/ui main branch into hanzo/ui, bringing in: - [email protected] through [email protected] releases - New apps/v4 directory structure - Registry system improvements and MCP server - Framework support (Vue, Svelte, React Native) - New templates (vite-app, monorepo-next, laravel) - Zod 4 compatibility (scoped override for zod@>4) - Test fixture corrections for alias resolution All 867 merge conflicts resolved preserving Hanzo customizations. 1020/1020 shadcn tests pass.
79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { Pie, PieChart } from "recharts"
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/registry/new-york-v4/ui/card"
|
|
import {
|
|
ChartContainer,
|
|
ChartLegend,
|
|
ChartLegendContent,
|
|
type ChartConfig,
|
|
} from "@/registry/new-york-v4/ui/chart"
|
|
|
|
export const description = "A pie chart with a legend"
|
|
|
|
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: "var(--chart-1)",
|
|
},
|
|
safari: {
|
|
label: "Safari",
|
|
color: "var(--chart-2)",
|
|
},
|
|
firefox: {
|
|
label: "Firefox",
|
|
color: "var(--chart-3)",
|
|
},
|
|
edge: {
|
|
label: "Edge",
|
|
color: "var(--chart-4)",
|
|
},
|
|
other: {
|
|
label: "Other",
|
|
color: "var(--chart-5)",
|
|
},
|
|
} satisfies ChartConfig
|
|
|
|
export function ChartPieLegend() {
|
|
return (
|
|
<Card className="flex flex-col">
|
|
<CardHeader className="items-center pb-0">
|
|
<CardTitle>Pie Chart - Legend</CardTitle>
|
|
<CardDescription>January - June 2024</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 pb-0">
|
|
<ChartContainer
|
|
config={chartConfig}
|
|
className="mx-auto aspect-square max-h-[300px]"
|
|
>
|
|
<PieChart>
|
|
<Pie data={chartData} dataKey="visitors" />
|
|
<ChartLegend
|
|
content={<ChartLegendContent nameKey="browser" />}
|
|
className="-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center"
|
|
/>
|
|
</PieChart>
|
|
</ChartContainer>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|