22e725887a
Organize project by 5 core modules based on requirement docs. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
73 lines
1.5 KiB
TypeScript
73 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts"
|
|
|
|
const data = [
|
|
{
|
|
name: "1月",
|
|
total: Math.floor(Math.random() * 5000) + 1000,
|
|
},
|
|
{
|
|
name: "2月",
|
|
total: Math.floor(Math.random() * 5000) + 1000,
|
|
},
|
|
{
|
|
name: "3月",
|
|
total: Math.floor(Math.random() * 5000) + 1000,
|
|
},
|
|
{
|
|
name: "4月",
|
|
total: Math.floor(Math.random() * 5000) + 1000,
|
|
},
|
|
{
|
|
name: "5月",
|
|
total: Math.floor(Math.random() * 5000) + 1000,
|
|
},
|
|
{
|
|
name: "6月",
|
|
total: Math.floor(Math.random() * 5000) + 1000,
|
|
},
|
|
{
|
|
name: "7月",
|
|
total: Math.floor(Math.random() * 5000) + 1000,
|
|
},
|
|
{
|
|
name: "8月",
|
|
total: Math.floor(Math.random() * 5000) + 1000,
|
|
},
|
|
{
|
|
name: "9月",
|
|
total: Math.floor(Math.random() * 5000) + 1000,
|
|
},
|
|
{
|
|
name: "10月",
|
|
total: Math.floor(Math.random() * 5000) + 1000,
|
|
},
|
|
{
|
|
name: "11月",
|
|
total: Math.floor(Math.random() * 5000) + 1000,
|
|
},
|
|
{
|
|
name: "12月",
|
|
total: Math.floor(Math.random() * 5000) + 1000,
|
|
},
|
|
]
|
|
|
|
export function Overview() {
|
|
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}`}
|
|
/>
|
|
<Bar dataKey="total" fill="#adfa1d" radius={[4, 4, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
)
|
|
}
|