Untitled
unknown
plain_text
5 months ago
4.5 kB
5
Indexable
import { useState, useEffect } from 'react'; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, BarChart, Bar } from 'recharts'; import { PieChart, Pie, Cell } from 'recharts'; export default function StatsPage() { const [stats, setStats] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const colors = { bio: '#8a6849', recycling: '#fec20c', paper: '#0d7dd4', residual: '#3a3a3c' }; useEffect(() => { fetch('/api/stats') .then(res => res.json()) .then(data => { setStats(data); setLoading(false); }) .catch(err => { setError(err.message); setLoading(false); }); }, []); if (loading) return <div className="flex items-center justify-center h-screen">Loading statistics...</div>; if (error) return <div className="flex items-center justify-center h-screen">Error: {error}</div>; if (!stats) return <div className="flex items-center justify-center h-screen">No data available</div>; // Prepare data for the pie chart const pieData = Object.entries(stats.wasteTypes).map(([type, data]) => ({ name: type.charAt(0).toUpperCase() + type.slice(1), value: data.total })); // Prepare monthly data for the line chart const monthlyData = Object.entries(stats.monthlyScans).map(([month, count]) => ({ month, scans: count })); // Prepare data for waste type distribution chart const wasteTypeData = Object.entries(stats.wasteTypes).map(([type, data]) => ({ name: type.charAt(0).toUpperCase() + type.slice(1), total: data.total })); return ( <div className="p-8"> <h1 className="text-4xl font-bold mb-8">Waste Classification Statistics</h1> {/* Summary Cards */} <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> <Card> <CardHeader> <CardTitle>Total Scans</CardTitle> </CardHeader> <CardContent> <p className="text-3xl font-bold">{stats.totalScans}</p> </CardContent> </Card> {Object.entries(stats.wasteTypes).map(([type, data]) => ( <Card key={type}> <CardHeader> <CardTitle>{type.charAt(0).toUpperCase() + type.slice(1)}</CardTitle> </CardHeader> <CardContent> <p className="text-3xl font-bold">{data.total}</p> </CardContent> </Card> ))} </div> {/* Charts */} <div className="grid grid-cols-1 md:grid-cols-2 gap-8"> {/* Monthly Scans Line Chart */} <Card> <CardHeader> <CardTitle>Monthly Scan Trends</CardTitle> </CardHeader> <CardContent> <div className="h-[400px]"> <ResponsiveContainer width="100%" height="100%"> <LineChart data={monthlyData}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="month" /> <YAxis /> <Tooltip /> <Legend /> <Line type="monotone" dataKey="scans" stroke="#8884d8" /> </LineChart> </ResponsiveContainer> </div> </CardContent> </Card> {/* Waste Type Distribution */} <Card> <CardHeader> <CardTitle>Waste Type Distribution</CardTitle> </CardHeader> <CardContent> <div className="h-[400px]"> <ResponsiveContainer width="100%" height="100%"> <PieChart> <Pie data={pieData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={150} label > {pieData.map((entry, index) => ( <Cell key={`cell-${index}`} fill={Object.values(colors)[index]} /> ))} </Pie> <Tooltip /> <Legend /> </PieChart> </ResponsiveContainer> </div> </CardContent> </Card> </div> </div> ); }
Editor is loading...
Leave a Comment