2408d50cb0
Redesign navigation, home overview, user portrait, and valuation pages with improved functionality and responsive design. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts"
|
|
|
|
export function UserGrowthChart() {
|
|
// 这里应该从API获取实际数据
|
|
const data = [
|
|
{ date: "1月", users: 4000 },
|
|
{ date: "2月", users: 5000 },
|
|
{ date: "3月", users: 6000 },
|
|
{ date: "4月", users: 7000 },
|
|
{ date: "5月", users: 9000 },
|
|
{ date: "6月", users: 12000 },
|
|
{ date: "7月", users: 15000 },
|
|
]
|
|
|
|
return (
|
|
<Card className="col-span-2">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-base font-medium">用户增长趋势</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="h-[200px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={data}>
|
|
<XAxis dataKey="date" />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Line type="monotone" dataKey="users" stroke="hsl(var(--primary))" strokeWidth={2} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|