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/
130 lines
3.9 KiB
TypeScript
130 lines
3.9 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
|
|
|
|
import { Button } from "@/registry/bases/radix/ui/button"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/registry/bases/radix/ui/card"
|
|
import {
|
|
ChartContainer,
|
|
ChartLegend,
|
|
ChartLegendContent,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
type ChartConfig,
|
|
} from "@/registry/bases/radix/ui/chart"
|
|
|
|
const barChartData = [
|
|
{ month: "January", desktop: 186, mobile: 80 },
|
|
{ month: "February", desktop: 305, mobile: 200 },
|
|
{ month: "March", desktop: 237, mobile: 120 },
|
|
{ month: "April", desktop: 73, mobile: 190 },
|
|
{ month: "May", desktop: 209, mobile: 130 },
|
|
{ month: "June", desktop: 214, mobile: 140 },
|
|
]
|
|
|
|
const barChartConfig = {
|
|
desktop: {
|
|
label: "Desktop",
|
|
color: "var(--chart-1)",
|
|
},
|
|
mobile: {
|
|
label: "Mobile",
|
|
color: "var(--chart-2)",
|
|
},
|
|
} satisfies ChartConfig
|
|
|
|
const desktopTotal = barChartData.reduce((sum, item) => sum + item.desktop, 0)
|
|
const mobileTotal = barChartData.reduce((sum, item) => sum + item.mobile, 0)
|
|
const desktopDelta = Math.round(
|
|
((desktopTotal - mobileTotal) / mobileTotal) * 100
|
|
)
|
|
const desktopDeltaPrefix = desktopDelta > 0 ? "+" : ""
|
|
|
|
export function BarChartCard() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg">Traffic channels</CardTitle>
|
|
<CardDescription className="line-clamp-2 text-sm leading-snug">
|
|
Monthly desktop and mobile traffic for the last six months—compare
|
|
volume and mix across platforms and devices at a glance.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col gap-4 pt-0">
|
|
<ChartContainer
|
|
config={barChartConfig}
|
|
className="max-h-[180px] w-full"
|
|
>
|
|
<BarChart
|
|
accessibilityLayer
|
|
data={barChartData}
|
|
margin={{ left: 0, right: 0, top: 8, bottom: 0 }}
|
|
>
|
|
<CartesianGrid vertical={false} strokeDasharray="3 3" />
|
|
<XAxis
|
|
dataKey="month"
|
|
tickLine={false}
|
|
tickMargin={8}
|
|
axisLine={false}
|
|
tickFormatter={(value) => String(value).slice(0, 3)}
|
|
/>
|
|
<ChartTooltip
|
|
cursor={false}
|
|
content={<ChartTooltipContent indicator="dashed" />}
|
|
/>
|
|
<ChartLegend content={<ChartLegendContent />} />
|
|
<Bar
|
|
dataKey="desktop"
|
|
fill="var(--color-desktop)"
|
|
radius={[6, 6, 0, 0]}
|
|
/>
|
|
<Bar
|
|
dataKey="mobile"
|
|
fill="var(--color-mobile)"
|
|
radius={[6, 6, 0, 0]}
|
|
/>
|
|
</BarChart>
|
|
</ChartContainer>
|
|
<div className="grid w-full grid-cols-3 divide-x divide-border/60">
|
|
<div className="px-2 text-center">
|
|
<div className="text-[0.65rem] text-muted-foreground uppercase">
|
|
Desktop
|
|
</div>
|
|
<div className="text-sm font-medium tabular-nums">
|
|
{desktopTotal.toLocaleString()}
|
|
</div>
|
|
</div>
|
|
<div className="px-2 text-center">
|
|
<div className="text-[0.65rem] text-muted-foreground uppercase">
|
|
Mobile
|
|
</div>
|
|
<div className="text-sm font-medium tabular-nums">
|
|
{mobileTotal.toLocaleString()}
|
|
</div>
|
|
</div>
|
|
<div className="px-2 text-center">
|
|
<div className="text-[0.65rem] text-muted-foreground uppercase">
|
|
Mix Delta
|
|
</div>
|
|
<div className="text-sm font-medium tabular-nums">
|
|
{desktopDeltaPrefix}
|
|
{desktopDelta}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button className="w-full">View report</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
)
|
|
}
|