Spaces:
Sleeping
Sleeping
| import React, { useState } from 'react'; | |
| import { | |
| LineChart, | |
| Line, | |
| XAxis, | |
| YAxis, | |
| CartesianGrid, | |
| Tooltip, | |
| Legend, | |
| ResponsiveContainer, | |
| AreaChart, | |
| Area | |
| } from 'recharts'; | |
| const PerformanceChart = ({ data }) => { | |
| const [toggle, setToggle] = useState('daily'); | |
| if (!data || !data.data) return null; | |
| const chartData = data.data; | |
| const CustomTooltip = ({ active, payload, label }) => { | |
| if (active && payload && payload.length) { | |
| return ( | |
| <div className="bg-white p-4 border border-enterprise-100 shadow-soft rounded-enterprise"> | |
| <p className="text-sm font-semibold text-enterprise-900 mb-2">{label}</p> | |
| <div className="space-y-1"> | |
| <p className="text-xs text-blue-600 flex justify-between gap-4"> | |
| <span>Revenue:</span> | |
| <span className="font-bold">${payload[0].value.toLocaleString()}</span> | |
| </p> | |
| <p className="text-xs text-enterprise-400 flex justify-between gap-4"> | |
| <span>Spend:</span> | |
| <span className="font-bold">${payload[1].value.toLocaleString()}</span> | |
| </p> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| return null; | |
| }; | |
| return ( | |
| <div className="bg-white p-6 rounded-enterprise shadow-enterprise border border-enterprise-100 flex flex-col h-full"> | |
| <div className="flex items-center justify-between mb-6"> | |
| <div> | |
| <h3 className="text-lg font-bold text-enterprise-900">Revenue vs Spend</h3> | |
| <p className="text-sm text-enterprise-400">Time-series performance overview</p> | |
| </div> | |
| <div className="flex bg-enterprise-50 p-1 rounded-lg"> | |
| {['daily', 'weekly', 'monthly'].map((period) => ( | |
| <button | |
| key={period} | |
| onClick={() => setToggle(period)} | |
| className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${toggle === period | |
| ? 'bg-white text-accent-brand shadow-sm' | |
| : 'text-enterprise-500 hover:text-enterprise-700' | |
| }`} | |
| > | |
| {period.charAt(0).toUpperCase() + period.slice(1)} | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| <div className="flex-1 min-h-[300px]"> | |
| <ResponsiveContainer width="100%" height="100%"> | |
| <LineChart data={chartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}> | |
| <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" /> | |
| <XAxis | |
| dataKey="date" | |
| axisLine={false} | |
| tickLine={false} | |
| tick={{ fill: '#94a3b8', fontSize: 12 }} | |
| dy={10} | |
| /> | |
| <YAxis | |
| axisLine={false} | |
| tickLine={false} | |
| tick={{ fill: '#94a3b8', fontSize: 12 }} | |
| tickFormatter={(value) => `$${value}`} | |
| /> | |
| <Tooltip content={<CustomTooltip />} /> | |
| <Legend verticalAlign="top" align="right" iconType="circle" wrapperStyle={{ paddingBottom: '20px' }} /> | |
| <Line | |
| type="monotone" | |
| dataKey="revenue" | |
| stroke="#3b82f6" | |
| strokeWidth={3} | |
| dot={false} | |
| activeDot={{ r: 6, strokeWidth: 0 }} | |
| name="Revenue" | |
| /> | |
| <Line | |
| type="monotone" | |
| dataKey="spend" | |
| stroke="#94a3b8" | |
| strokeWidth={2} | |
| strokeDasharray="5 5" | |
| dot={false} | |
| activeDot={{ r: 4, strokeWidth: 0 }} | |
| name="Spend" | |
| /> | |
| </LineChart> | |
| </ResponsiveContainer> | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| export default PerformanceChart; | |