884054fb
 “wangming”
项目初始化
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
import React from 'react';
import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis } from 'recharts';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Info, Database } from 'lucide-react';
import { Button } from '../ui/button';
const data = [
{ name: 'Mon', value: 30 },
{ name: 'Tue', value: 45 },
{ name: 'Wed', value: 15 },
{ name: 'Thu', value: 25 },
{ name: 'Fri', value: 10 },
{ name: 'Sat', value: 35 },
{ name: 'Sun', value: 20 },
];
export function InfoChart() {
return (
<Card className="col-span-1 shadow-sm">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<div className="flex items-center gap-2">
<Info className="w-5 h-5 text-blue-600" />
<CardTitle className="text-base font-semibold">Information</CardTitle>
</div>
<Button variant="ghost" size="icon" className="h-8 w-8 bg-blue-50 text-blue-600 hover:bg-blue-100 rounded-lg">
<Database className="w-4 h-4" />
</Button>
</CardHeader>
<CardContent>
<div className="text-xs text-muted-foreground mb-4">System data overview and metrics</div>
<div className="h-[120px] w-full">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={data}>
<XAxis
dataKey="name"
stroke="#888888"
fontSize={10}
tickLine={false}
axisLine={false}
hide
/>
<Tooltip
contentStyle={{ background: '#1e3a8a', border: 'none', borderRadius: '8px', color: '#fff' }}
cursor={{ fill: '#f3f4f6' }}
/>
<Bar
dataKey="value"
fill="#3b82f6"
radius={[4, 4, 4, 4]}
barSize={6}
/>
</BarChart>
</ResponsiveContainer>
</div>
</CardContent>
</Card>
);
}
|
