mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
16c4453cc1
Squash merge of shadcn-ui/ui main branch into hanzo/ui, bringing in: - [email protected] through [email protected] releases - New apps/v4 directory structure - Registry system improvements and MCP server - Framework support (Vue, Svelte, React Native) - New templates (vite-app, monorepo-next, laravel) - Zod 4 compatibility (scoped override for zod@>4) - Test fixture corrections for alias resolution All 867 merge conflicts resolved preserving Hanzo customizations. 1020/1020 shadcn tests pass.
115 lines
2.7 KiB
TypeScript
115 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
ChartContainer,
|
|
ChartLegend,
|
|
ChartLegendContent,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
type ChartConfig,
|
|
} from "@/examples/base/ui-rtl/chart"
|
|
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
|
|
|
|
import {
|
|
useTranslation,
|
|
type Translations,
|
|
} from "@/components/language-selector"
|
|
|
|
const translations: Translations = {
|
|
en: {
|
|
dir: "ltr",
|
|
values: {
|
|
january: "January",
|
|
february: "February",
|
|
march: "March",
|
|
april: "April",
|
|
may: "May",
|
|
june: "June",
|
|
desktop: "Desktop",
|
|
mobile: "Mobile",
|
|
},
|
|
},
|
|
ar: {
|
|
dir: "rtl",
|
|
values: {
|
|
january: "يناير",
|
|
february: "فبراير",
|
|
march: "مارس",
|
|
april: "أبريل",
|
|
may: "مايو",
|
|
june: "يونيو",
|
|
desktop: "سطح المكتب",
|
|
mobile: "الجوال",
|
|
},
|
|
},
|
|
he: {
|
|
dir: "rtl",
|
|
values: {
|
|
january: "ינואר",
|
|
february: "פברואר",
|
|
march: "מרץ",
|
|
april: "אפריל",
|
|
may: "מאי",
|
|
june: "יוני",
|
|
desktop: "מחשב",
|
|
mobile: "נייד",
|
|
},
|
|
},
|
|
}
|
|
|
|
const chartData = [
|
|
{ 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 },
|
|
]
|
|
|
|
export function ChartRtl() {
|
|
const { t, dir } = useTranslation(translations, "ar")
|
|
|
|
const chartConfig = {
|
|
desktop: {
|
|
label: t.desktop,
|
|
color: "var(--chart-2)",
|
|
},
|
|
mobile: {
|
|
label: t.mobile,
|
|
color: "var(--chart-1)",
|
|
},
|
|
} satisfies ChartConfig
|
|
|
|
return (
|
|
<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
|
|
<BarChart accessibilityLayer data={chartData}>
|
|
<CartesianGrid
|
|
vertical={false}
|
|
orientation={dir === "rtl" ? "right" : "left"}
|
|
/>
|
|
<XAxis
|
|
dataKey="month"
|
|
tickLine={false}
|
|
tickMargin={10}
|
|
axisLine={false}
|
|
tickFormatter={(value) =>
|
|
(t[value as keyof typeof t] as string).slice(0, 3)
|
|
}
|
|
reversed={dir === "rtl"}
|
|
/>
|
|
<ChartTooltip
|
|
content={
|
|
<ChartTooltipContent
|
|
labelFormatter={(value) => t[value as keyof typeof t] as string}
|
|
/>
|
|
}
|
|
labelClassName="w-32"
|
|
/>
|
|
<ChartLegend content={<ChartLegendContent />} />
|
|
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
|
|
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
|
|
</BarChart>
|
|
</ChartContainer>
|
|
)
|
|
}
|