-
Notifications
You must be signed in to change notification settings - Fork 5.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat(v4): update colors * fix: sonner button * feat(shadcn): update base colors to oklch * fix: button gaps * fix: sidebar and chart * feat: update ring colors * feat(v4): neutral color and fixes * fix: fonts * chore: changeset * fix: revert utils
- Loading branch information
Showing
101 changed files
with
1,431 additions
and
599 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"shadcn": minor | ||
--- | ||
|
||
add oklch base color |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,103 @@ | ||
"use client" | ||
|
||
import { TrendingUp } from "lucide-react" | ||
import { Bar, BarChart, XAxis, YAxis } from "recharts" | ||
|
||
import { | ||
Card, | ||
CardContent, | ||
CardDescription, | ||
CardFooter, | ||
CardHeader, | ||
CardTitle, | ||
} from "@/registry/new-york-v4/ui/card" | ||
import { | ||
ChartConfig, | ||
ChartContainer, | ||
ChartTooltip, | ||
ChartTooltipContent, | ||
} from "@/registry/new-york-v4/ui/chart" | ||
|
||
export const description = "A mixed bar chart" | ||
|
||
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 ChartBarMixed() { | ||
return ( | ||
<Card> | ||
<CardHeader> | ||
<CardTitle>Bar Chart - Mixed</CardTitle> | ||
<CardDescription>January - June 2024</CardDescription> | ||
</CardHeader> | ||
<CardContent> | ||
<ChartContainer config={chartConfig}> | ||
<BarChart | ||
accessibilityLayer | ||
data={chartData} | ||
layout="vertical" | ||
margin={{ | ||
left: 0, | ||
}} | ||
> | ||
<YAxis | ||
dataKey="browser" | ||
type="category" | ||
tickLine={false} | ||
tickMargin={10} | ||
axisLine={false} | ||
tickFormatter={(value) => | ||
chartConfig[value as keyof typeof chartConfig]?.label | ||
} | ||
/> | ||
<XAxis dataKey="visitors" type="number" hide /> | ||
<ChartTooltip | ||
cursor={false} | ||
content={<ChartTooltipContent hideLabel />} | ||
/> | ||
<Bar dataKey="visitors" layout="vertical" radius={5} /> | ||
</BarChart> | ||
</ChartContainer> | ||
</CardContent> | ||
<CardFooter className="flex-col items-start gap-2 text-sm"> | ||
<div className="flex gap-2 leading-none font-medium"> | ||
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" /> | ||
</div> | ||
<div className="text-muted-foreground leading-none"> | ||
Showing total visitors for the last 6 months | ||
</div> | ||
</CardFooter> | ||
</Card> | ||
) | ||
} |
Oops, something went wrong.