Spaces:
Sleeping
Sleeping
File size: 2,326 Bytes
9ba465e | 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 59 60 61 62 63 64 65 66 67 68 69 70 | import React from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
const data = [
{ name: 'Mon', usage: 4000, cost: 2400 },
{ name: 'Tue', usage: 3000, cost: 1398 },
{ name: 'Wed', usage: 2000, cost: 9800 },
{ name: 'Thu', usage: 2780, cost: 3908 },
{ name: 'Fri', usage: 1890, cost: 4800 },
{ name: 'Sat', usage: 2390, cost: 3800 },
{ name: 'Sun', usage: 3490, cost: 4300 },
];
const AnalyticsChart = () => {
return (
<div className="w-full h-[300px] mt-8 glass-card">
<h3 className="text-sm font-semibold uppercase tracking-widest text-text-secondary mb-6">Agent Performance & Usage</h3>
<ResponsiveContainer width="100%" height="100%">
<AreaChart
data={data}
margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
>
<defs>
<linearGradient id="colorUsage" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#3B82F6" stopOpacity={0.3}/>
<stop offset="95%" stopColor="#3B82F6" stopOpacity={0}/>
</linearGradient>
<linearGradient id="colorCost" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#8B5CF6" stopOpacity={0.3}/>
<stop offset="95%" stopColor="#8B5CF6" stopOpacity={0}/>
</linearGradient>
</defs>
<XAxis
dataKey="name"
axisLine={false}
tickLine={false}
tick={{ fill: '#94A3B8', fontSize: 12 }}
/>
<Tooltip
contentStyle={{
backgroundColor: '#111827',
border: '1px solid rgba(255,255,255,0.1)',
borderRadius: '12px'
}}
itemStyle={{ color: '#fff' }}
/>
<Area
type="monotone"
dataKey="usage"
stroke="#3B82F6"
fillOpacity={1}
fill="url(#colorUsage)"
strokeWidth={2}
/>
<Area
type="monotone"
dataKey="cost"
stroke="#8B5CF6"
fillOpacity={1}
fill="url(#colorCost)"
strokeWidth={2}
/>
</AreaChart>
</ResponsiveContainer>
</div>
);
};
export default AnalyticsChart;
|