mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-02-09 02:49:29 +08:00
47c47eaed2
* feat: add base and radix docs * feat: transform code for display * fix * fix * fix * fix * fix * chore: remove claude files * fix * fix * fix * chore: run format:write * fix * feat: add more examples * fix * feat: add aspect-ratio * feat: add avatar * feat: add badge * feat: add breadcrumb * fix * feat: add button * fix * fix * fix * feat: add calendar and card * feat: add carousel * fix: chart * feat: add checkbox * feat: add collapsible * feat: add combobox * feat: add command * feat: add context menu * feat: add data-table dialog and drawer * feat: dropdown-menu * feat: add date-picker * feat: add empty * feat: add field and hover-card * fix: input * feat: add input * feat: add input-group * feat: add input-otp * feat: add item * feat: add kbd and label * feat: add menubar * feat: add native-select * feat: add more components * feat: more components * feat: more components * feat: add skeleton, slider and sonner * feat: add spinner and switch * feat: add more components * fix: tabs * fix: tabs * feat: add docs for sidebar * fix * fix * fi * docs: update * fix: create page * fix * fix * chore: add changelog * fix
18 lines
18 KiB
JSON
18 lines
18 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "chart-example",
|
|
"title": "Chart",
|
|
"registryDependencies": [
|
|
"chart",
|
|
"card",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/radix-nova/examples/chart-example.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n Area,\n AreaChart,\n Bar,\n BarChart,\n CartesianGrid,\n Label,\n Line,\n LineChart,\n Pie,\n PieChart,\n PolarAngleAxis,\n PolarGrid,\n PolarRadiusAxis,\n Radar,\n RadarChart,\n RadialBar,\n RadialBarChart,\n XAxis,\n} from \"recharts\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-nova/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n return (\n <ExampleWrapper>\n <ChartAreaExample />\n <ChartBarExample />\n <ChartLineExample />\n <ChartRadialExample />\n <ChartRadarExample />\n </ExampleWrapper>\n )\n}\n\nfunction ChartAreaExample() {\n return (\n <Example title=\"Area Chart\">\n <Card className=\"w-full\">\n <CardHeader>\n <CardTitle>Area Chart</CardTitle>\n <CardDescription>\n Showing total visitors for the last 6 months\n </CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={areaChartConfig}>\n <AreaChart\n accessibilityLayer\n data={areaChartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <Area\n dataKey=\"desktop\"\n type=\"natural\"\n fill=\"var(--color-desktop)\"\n fillOpacity={0.4}\n stroke=\"var(--color-desktop)\"\n />\n </AreaChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 leading-none font-medium\">\n Trending up by 5.2% this month{\" \"}\n <IconPlaceholder\n lucide=\"TrendingUpIcon\"\n tabler=\"IconTrendingUp\"\n hugeicons=\"ChartUpIcon\"\n phosphor=\"TrendUpIcon\"\n remixicon=\"RiLineChartLine\"\n className=\"size-4\"\n />\n </div>\n <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n January - June 2024\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n </Example>\n )\n}\n\nconst barChartData = [\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 barChartConfig = {\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\nfunction ChartBarExample() {\n return (\n <Example title=\"Bar Chart\">\n <Card className=\"w-full\">\n <CardHeader>\n <CardTitle>Bar Chart - Multiple</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={barChartConfig}>\n <BarChart accessibilityLayer data={barChartData}>\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n tickMargin={10}\n axisLine={false}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"dashed\" />}\n />\n <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n </BarChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col items-start gap-2\">\n <div className=\"flex gap-2 leading-none font-medium\">\n Trending up by 5.2% this month{\" \"}\n <IconPlaceholder\n lucide=\"TrendingUpIcon\"\n tabler=\"IconTrendingUp\"\n hugeicons=\"ChartUpIcon\"\n phosphor=\"TrendUpIcon\"\n remixicon=\"RiLineChartLine\"\n className=\"size-4\"\n />\n </div>\n <div className=\"text-muted-foreground leading-none\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n </Example>\n )\n}\n\nconst lineChartData = [\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 lineChartConfig = {\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\nfunction ChartLineExample() {\n return (\n <Example title=\"Line Chart\">\n <Card className=\"w-full\">\n <CardHeader>\n <CardTitle>Line Chart - Multiple</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent>\n <ChartContainer config={lineChartConfig}>\n <LineChart\n accessibilityLayer\n data={lineChartData}\n margin={{\n left: 12,\n right: 12,\n }}\n >\n <CartesianGrid vertical={false} />\n <XAxis\n dataKey=\"month\"\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={(value) => value.slice(0, 3)}\n />\n <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n <Line\n dataKey=\"desktop\"\n type=\"monotone\"\n stroke=\"var(--color-desktop)\"\n strokeWidth={2}\n dot={false}\n />\n <Line\n dataKey=\"mobile\"\n type=\"monotone\"\n stroke=\"var(--color-mobile)\"\n strokeWidth={2}\n dot={false}\n />\n </LineChart>\n </ChartContainer>\n </CardContent>\n <CardFooter>\n <div className=\"flex w-full items-start gap-2\">\n <div className=\"grid gap-2\">\n <div className=\"flex items-center gap-2 leading-none font-medium\">\n Trending up by 5.2% this month{\" \"}\n <IconPlaceholder\n lucide=\"TrendingUpIcon\"\n tabler=\"IconTrendingUp\"\n hugeicons=\"ChartUpIcon\"\n phosphor=\"TrendUpIcon\"\n remixicon=\"RiLineChartLine\"\n className=\"size-4\"\n />\n </div>\n <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n Showing total visitors for the last 6 months\n </div>\n </div>\n </div>\n </CardFooter>\n </Card>\n </Example>\n )\n}\n\nconst pieChartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n const totalVisitors = React.useMemo(() => {\n return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n }, [])\n\n return (\n <Example title=\"Pie Chart\">\n <Card className=\"w-full\">\n <CardHeader className=\"items-center pb-0\">\n <CardTitle>Pie Chart - Donut with Text</CardTitle>\n <CardDescription>January - June 2024</CardDescription>\n </CardHeader>\n <CardContent className=\"flex-1 pb-0\">\n <ChartContainer\n config={pieChartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <PieChart>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent hideLabel />}\n />\n <Pie\n data={pieChartData}\n dataKey=\"visitors\"\n nameKey=\"browser\"\n innerRadius={60}\n strokeWidth={5}\n >\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-3xl font-bold\"\n >\n {totalVisitors.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 </Pie>\n </PieChart>\n </ChartContainer>\n </CardContent>\n <CardFooter className=\"flex-col gap-2\">\n <div className=\"flex items-center gap-2 leading-none font-medium\">\n Trending up by 5.2% this month{\" \"}\n <IconPlaceholder\n lucide=\"TrendingUpIcon\"\n tabler=\"IconTrendingUp\"\n hugeicons=\"ChartUpIcon\"\n phosphor=\"TrendUpIcon\"\n remixicon=\"RiLineChartLine\"\n className=\"size-4\"\n />\n </div>\n <div className=\"text-muted-foreground leading-none\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n </Example>\n )\n}\n\nconst radarChartData = [\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 radarChartConfig = {\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\nfunction ChartRadarExample() {\n return (\n <Example title=\"Radar Chart\">\n <Card className=\"w-full\">\n <CardHeader className=\"items-center pb-4\">\n <CardTitle>Radar Chart - Multiple</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={radarChartConfig}\n className=\"mx-auto aspect-square max-h-[250px]\"\n >\n <RadarChart data={radarChartData}>\n <ChartTooltip\n cursor={false}\n content={<ChartTooltipContent indicator=\"line\" />}\n />\n <PolarAngleAxis dataKey=\"month\" />\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\">\n <div className=\"flex items-center gap-2 leading-none font-medium\">\n Trending up by 5.2% this month{\" \"}\n <IconPlaceholder\n lucide=\"TrendingUpIcon\"\n tabler=\"IconTrendingUp\"\n hugeicons=\"ChartUpIcon\"\n phosphor=\"TrendUpIcon\"\n remixicon=\"RiLineChartLine\"\n className=\"size-4\"\n />\n </div>\n <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n January - June 2024\n </div>\n </CardFooter>\n </Card>\n </Example>\n )\n}\n\nconst radialChartData = [\n { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n return (\n <Example title=\"Radial Chart\">\n <Card className=\"w-full\">\n <CardHeader>\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={radialChartConfig}\n className=\"mx-auto aspect-square max-h-[210px]\"\n >\n <RadialBarChart\n data={radialChartData}\n endAngle={100}\n innerRadius={80}\n outerRadius={140}\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 {radialChartData[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\">\n <div className=\"flex items-center gap-2 leading-none font-medium\">\n Trending up by 5.2% this month{\" \"}\n <IconPlaceholder\n lucide=\"TrendingUpIcon\"\n tabler=\"IconTrendingUp\"\n hugeicons=\"ChartUpIcon\"\n phosphor=\"TrendUpIcon\"\n remixicon=\"RiLineChartLine\"\n className=\"size-4\"\n />\n </div>\n <div className=\"text-muted-foreground leading-none\">\n Showing total visitors for the last 6 months\n </div>\n </CardFooter>\n </Card>\n </Example>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |