| | 1 | 1 | | import React from 'react'; |
| | 1 | 2 | | import { |
| | 1 | 3 | | BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, |
| | 1 | 4 | | PieChart, Pie, Cell, Sector |
| | 1 | 5 | | } from 'recharts'; |
| | 1 | 6 | | import { useMaintenance } from '../context/MaintenanceContext.js'; |
| | 1 | 7 | | |
| | 1 | 8 | | const COLORS = ['#2ecc71', '#f1c40f', '#e74c3c', '#3498db']; |
| | 1 | 9 | | |
| | 1 | 10 | | export function AnalyticsPanel() { |
| | 17 | 11 | | const { machines, inventory } = useMaintenance(); |
| | 17 | 12 | | |
| | 17 | 13 | | // 1. Prepare Machine Status Data for Pie Chart |
| | 17 | 14 | | const statusCounts = machines.reduce((acc, m) => { |
| | 2 | 15 | | const status = m.status.charAt(0).toUpperCase() + m.status.slice(1); |
| | 2 | 16 | | acc[status] = (acc[status] || 0) + 1; |
| | 2 | 17 | | return acc; |
| | 17 | 18 | | }, {}); |
| | 17 | 19 | | |
| | 17 | 20 | | const pieData = Object.keys(statusCounts).map(status => ({ |
| | 2 | 21 | | name: status, |
| | 2 | 22 | | value: statusCounts[status] |
| | 17 | 23 | | })); |
| | 17 | 24 | | |
| | 17 | 25 | | // 2. Prepare Inventory Data for Bar Chart |
| | 17 | 26 | | const barData = inventory.map(item => ({ |
| | 1 | 27 | | name: item.part_name, |
| | 1 | 28 | | stock: item.quantity, |
| | 1 | 29 | | min: item.min_stock_level |
| | 17 | 30 | | })); |
| | 17 | 31 | | |
| | 17 | 32 | | return ( |
| | 17 | 33 | | <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginTop: '20px' }}> |
| | 17 | 34 | | {/* Machine Status Distribution */} |
| | 17 | 35 | | <div style={{ backgroundColor: 'white', padding: '20px', borderRadius: '12px', boxShadow: '0 4px 6px rgba(0, |
| | 17 | 36 | | <h4 style={{ margin: '0 0 20px 0', color: '#2c3e50' }}>Asset Status Distribution</h4> |
| | 17 | 37 | | <div style={{ width: '100%', height: 250 }}> |
| | 17 | 38 | | <ResponsiveContainer> |
| | 17 | 39 | | <PieChart> |
| | 17 | 40 | | <Pie |
| | 17 | 41 | | data={pieData} |
| | 17 | 42 | | cx="50%" |
| | 17 | 43 | | cy="50%" |
| | 17 | 44 | | innerRadius={60} |
| | 17 | 45 | | outerRadius={80} |
| | 17 | 46 | | paddingAngle={5} |
| | 17 | 47 | | dataKey="value" |
| | 17 | 48 | | > |
| | 17 | 49 | | {pieData.map((entry, index) => ( |
| | 2 | 50 | | <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} /> |
| | 17 | 51 | | ))} |
| | 17 | 52 | | </Pie> |
| | 17 | 53 | | <Tooltip /> |
| | 17 | 54 | | <Legend verticalAlign="bottom" height={36} /> |
| | 17 | 55 | | </PieChart> |
| | 17 | 56 | | </ResponsiveContainer> |
| | 17 | 57 | | </div> |
| | 17 | 58 | | </div> |
| | 17 | 59 | | |
| | 17 | 60 | | {/* Inventory Stock Levels */} |
| | 17 | 61 | | <div style={{ backgroundColor: 'white', padding: '20px', borderRadius: '12px', boxShadow: '0 4px 6px rgba(0, |
| | 17 | 62 | | <h4 style={{ margin: '0 0 20px 0', color: '#2c3e50' }}>Inventory Levels vs Min Stock</h4> |
| | 17 | 63 | | <div style={{ width: '100%', height: 250 }}> |
| | 17 | 64 | | <ResponsiveContainer> |
| | 17 | 65 | | <BarChart |
| | 17 | 66 | | data={barData} |
| | 17 | 67 | | layout="vertical" |
| | 17 | 68 | | margin={{ top: 5, right: 30, left: 40, bottom: 5 }} |
| | 17 | 69 | | > |
| | 17 | 70 | | <CartesianGrid strokeDasharray="3 3" /> |
| | 17 | 71 | | <XAxis type="number" /> |
| | 17 | 72 | | <YAxis dataKey="name" type="category" width={100} style={{ fontSize: '0.7rem' }} /> |
| | 17 | 73 | | <Tooltip /> |
| | 17 | 74 | | <Legend /> |
| | 17 | 75 | | <Bar dataKey="stock" fill="#3498db" name="Current Stock" /> |
| | 17 | 76 | | <Bar dataKey="min" fill="#e74c3c" name="Minimum Level" /> |
| | 17 | 77 | | </BarChart> |
| | 17 | 78 | | </ResponsiveContainer> |
| | 17 | 79 | | </div> |
| | 17 | 80 | | </div> |
| | 17 | 81 | | </div> |
| | 17 | 82 | | ); |
| | 17 | 83 | | } |