| import React from 'react'; |
| import { |
| LineChart, |
| Line, |
| BarChart, |
| Bar, |
| PieChart, |
| Pie, |
| Cell, |
| XAxis, |
| YAxis, |
| CartesianGrid, |
| Tooltip, |
| Legend, |
| ResponsiveContainer |
| } from 'recharts'; |
|
|
| const COLORS = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899']; |
|
|
| export const TaskProgressChart = ({ data }) => { |
| return ( |
| <ResponsiveContainer width="100%" height={300}> |
| <LineChart data={data}> |
| <CartesianGrid strokeDasharray="3 3" className="opacity-30" /> |
| <XAxis dataKey="month" stroke="#6B7280" /> |
| <YAxis stroke="#6B7280" /> |
| <Tooltip |
| contentStyle={{ |
| backgroundColor: '#1F2937', |
| border: '1px solid #374151', |
| borderRadius: '8px' |
| }} |
| /> |
| <Legend /> |
| <Line |
| type="monotone" |
| dataKey="completed" |
| stroke="#10B981" |
| strokeWidth={2} |
| name="Completed" |
| /> |
| <Line |
| type="monotone" |
| dataKey="inProgress" |
| stroke="#3B82F6" |
| strokeWidth={2} |
| name="In Progress" |
| /> |
| <Line |
| type="monotone" |
| dataKey="pending" |
| stroke="#F59E0B" |
| strokeWidth={2} |
| name="Pending" |
| /> |
| </LineChart> |
| </ResponsiveContainer> |
| ); |
| }; |
|
|
| export const TaskDistributionChart = ({ data }) => { |
| return ( |
| <ResponsiveContainer width="100%" height={300}> |
| <PieChart> |
| <Pie |
| data={data} |
| cx="50%" |
| cy="50%" |
| labelLine={false} |
| label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`} |
| outerRadius={80} |
| fill="#8884d8" |
| dataKey="value" |
| > |
| {data.map((entry, index) => ( |
| <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} /> |
| ))} |
| </Pie> |
| <Tooltip |
| contentStyle={{ |
| backgroundColor: '#1F2937', |
| border: '1px solid #374151', |
| borderRadius: '8px' |
| }} |
| /> |
| </PieChart> |
| </ResponsiveContainer> |
| ); |
| }; |
|
|
| export const UserPerformanceChart = ({ data }) => { |
| return ( |
| <ResponsiveContainer width="100%" height={300}> |
| <BarChart data={data}> |
| <CartesianGrid strokeDasharray="3 3" className="opacity-30" /> |
| <XAxis dataKey="name" stroke="#6B7280" /> |
| <YAxis stroke="#6B7280" /> |
| <Tooltip |
| contentStyle={{ |
| backgroundColor: '#1F2937', |
| border: '1px solid #374151', |
| borderRadius: '8px' |
| }} |
| /> |
| <Legend /> |
| <Bar dataKey="tasks" fill="#3B82F6" name="Tasks Completed" /> |
| <Bar dataKey="efficiency" fill="#10B981" name="Efficiency %" /> |
| </BarChart> |
| </ResponsiveContainer> |
| ); |
| }; |
|
|
| export const ActivityChart = ({ data }) => { |
| return ( |
| <ResponsiveContainer width="100%" height={300}> |
| <LineChart data={data}> |
| <CartesianGrid strokeDasharray="3 3" className="opacity-30" /> |
| <XAxis dataKey="date" stroke="#6B7280" /> |
| <YAxis stroke="#6B7280" /> |
| <Tooltip |
| contentStyle={{ |
| backgroundColor: '#1F2937', |
| border: '1px solid #374151', |
| borderRadius: '8px' |
| }} |
| /> |
| <Legend /> |
| <Line |
| type="monotone" |
| dataKey="tasks" |
| stroke="#8B5CF6" |
| strokeWidth={2} |
| name="Tasks Created" |
| /> |
| <Line |
| type="monotone" |
| dataKey="comments" |
| stroke="#EC4899" |
| strokeWidth={2} |
| name="Comments" |
| /> |
| <Line |
| type="monotone" |
| dataKey="documents" |
| stroke="#F59E0B" |
| strokeWidth={2} |
| name="Documents Uploaded" |
| /> |
| </LineChart> |
| </ResponsiveContainer> |
| ); |
| }; |
