mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
20 lines
3.7 KiB
JSON
20 lines
3.7 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "chart-radial-shape",
|
|
"registryDependencies": [
|
|
"card",
|
|
"chart"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/new-york-v4/charts/chart-radial-shape.tsx",
|
|
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n Label,\n PolarGrid,\n PolarRadiusAxis,\n RadialBar,\n RadialBarChart,\n} from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a custom shape\"\n\nconst chartData = [\n { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadialShape() {\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Radial Chart - Shape</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadialBarChart\n data={chartData}\n endAngle={100}\n innerRadius={65}\n outerRadius={95}\n >\n <PolarGrid\n gridType=\"circle\"\n radialLines={false}\n stroke=\"none\"\n className=\"first:fill-muted last:fill-background\"\n polarRadius={[86, 74]}\n />\n <RadialBar dataKey=\"visitors\" background />\n <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n <Label\n content={({ viewBox }) => {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n <text\n x={viewBox.cx}\n y={viewBox.cy}\n textAnchor=\"middle\"\n dominantBaseline=\"middle\"\n >\n <tspan\n x={viewBox.cx}\n y={viewBox.cy}\n className=\"fill-foreground text-4xl font-bold\"\n >\n {chartData[0].visitors.toLocaleString()}\n </tspan>\n <tspan\n x={viewBox.cx}\n y={(viewBox.cy || 0) + 24}\n className=\"fill-muted-foreground\"\n >\n Visitors\n </tspan>\n </text>\n )\n }\n }}\n />\n </PolarRadiusAxis>\n </RadialBarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2 text-sm\">\n <div className=\"flex items-center gap-2 leading-none font-medium\">\n Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n </div>\n <div className=\"leading-none text-muted-foreground\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
|
"type": "registry:block"
|
|
}
|
|
],
|
|
"categories": [
|
|
"charts",
|
|
"charts-radial"
|
|
],
|
|
"type": "registry:block"
|
|
} |