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
4.0 KiB
JSON
20 lines
4.0 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "chart-radial-stacked",
|
|
"registryDependencies": [
|
|
"card",
|
|
"chart"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/new-york-v4/charts/chart-radial-stacked.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 ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with stacked sections\"\n\nconst chartData = [{ month: \"january\", mobile: 570, desktop: 1260 }]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadialStacked() {\n const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n return (\n <Card className=\"flex flex-col\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Radial Chart - Stacked</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex flex-1 items-center pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square w-full max-w-[250px]\"\n >\n <RadialBarChart\n data={chartData}\n endAngle={180}\n innerRadius={80}\n outerRadius={110}\n >\n <RadialBar\n dataKey=\"mobile\"\n fill=\"var(--color-mobile)\"\n stackId=\"a\"\n cornerRadius={5}\n className=\"stroke-transparent stroke-2\"\n />\n <RadialBar\n dataKey=\"desktop\"\n stackId=\"a\"\n cornerRadius={5}\n fill=\"var(--color-desktop)\"\n className=\"stroke-transparent stroke-2\"\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\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 x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\">\n <tspan\n x={viewBox.cx}\n y={(viewBox.cy || 0) - 16}\n className=\"fill-foreground text-2xl font-bold\"\n >\n {totalVisitors.toLocaleString()}\n </tspan>\n <tspan\n x={viewBox.cx}\n y={(viewBox.cy || 0) + 4}\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"
|
|
} |