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-radar-label-custom",
|
|
"registryDependencies": [
|
|
"card",
|
|
"chart"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/new-york-v4/charts/chart-radar-label-custom.tsx",
|
|
"content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } 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 radar chart with a custom label\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\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 ChartRadarLabelCustom() {\n return (\n <Card>\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Custom Label</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent className=\"pb-0\">\n <ChartContainer\n config={chartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart\n data={chartData}\n margin={{\n top: 10,\n right: 10,\n bottom: 10,\n left: 10,\n }}\n >\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <PolarAngleAxis\n dataKey=\"month\"\n tick={({ x, y, textAnchor, index, ...props }) => {\n const data = chartData[index]\n const yValue = typeof y === \"number\" ? y : 0\n\n return (\n <text\n x={x}\n y={yValue + (index === 0 ? -10 : 0)}\n textAnchor={textAnchor}\n fontSize={13}\n fontWeight={500}\n {...props}\n >\n <tspan>{data.desktop}</tspan>\n <tspan className=\"fill-muted-foreground\">/</tspan>\n <tspan>{data.mobile}</tspan>\n <tspan\n x={x}\n dy={\"1rem\"}\n fontSize={12}\n className=\"fill-muted-foreground\"\n >\n {data.month}\n </tspan>\n </text>\n )\n }}\n />\n\n <PolarGrid />\n <Radar\n dataKey=\"desktop\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.6}\n />\n <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n </RadarChart>\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=\"flex items-center gap-2 leading-none text-muted-foreground\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n )\n}\n",
|
|
"type": "registry:block"
|
|
}
|
|
],
|
|
"categories": [
|
|
"charts",
|
|
"charts-radar"
|
|
],
|
|
"type": "registry:block"
|
|
} |