45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts"
|
|
import { useTranslation } from "@/lib/i18n"
|
|
|
|
export function Overview() {
|
|
const { t, locale } = useTranslation()
|
|
|
|
const months = locale === "zh"
|
|
? ["1月", "2月", "3月", "4月", "5月", "6月"]
|
|
: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
|
|
|
|
const data = [
|
|
{ name: months[0], total: 42000, deals: 8 },
|
|
{ name: months[1], total: 38000, deals: 12 },
|
|
{ name: months[2], total: 45000, deals: 10 },
|
|
{ name: months[3], total: 52000, deals: 15 },
|
|
{ name: months[4], total: 48500, deals: 12 },
|
|
{ name: months[5], total: 55000, deals: 18 },
|
|
]
|
|
|
|
return (
|
|
<ResponsiveContainer width="100%" height={350}>
|
|
<BarChart data={data}>
|
|
<XAxis dataKey="name" stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
|
|
<YAxis
|
|
stroke="#888888"
|
|
fontSize={12}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickFormatter={(value) => `$${value / 1000}k`}
|
|
/>
|
|
<CartesianGrid vertical={false} strokeDasharray="3 3" />
|
|
<Tooltip
|
|
formatter={(value, name) => {
|
|
if (name === "total") return [`$${value}`, t("chart.revenue")]
|
|
return [value, t("chart.deals")]
|
|
}}
|
|
/>
|
|
<Bar dataKey="total" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} name={t("chart.revenue")} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
)
|
|
}
|