884054fb
 “wangming”
项目初始化
|
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
|
import React from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Apple } from 'lucide-react';
const data = [
{ name: 'Expired', value: 30 },
{ name: 'Preparation', value: 45 },
{ name: 'Packaging', value: 25 },
];
const COLORS = ['#ef4444', '#f97316', '#eab308'];
export function FoodWasteChart() {
return (
<Card className="col-span-1 shadow-sm">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<div className="flex items-center gap-2">
<Apple className="w-5 h-5 text-green-600" />
<CardTitle className="text-base font-semibold">Food Waste</CardTitle>
</div>
</CardHeader>
<CardContent>
<div className="text-xs text-muted-foreground mb-2">Reduction metrics and analysis</div>
<div className="h-[140px] w-full flex items-center justify-center relative">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={data}
cx="50%"
cy="50%"
innerRadius={30}
outerRadius={50}
fill="#8884d8"
paddingAngle={5}
dataKey="value"
>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip />
</PieChart>
</ResponsiveContainer>
<div className="absolute right-0 top-1/2 -translate-y-1/2 text-xs text-right pr-2 space-y-1">
<div className="flex items-center justify-end gap-1"><span className="w-2 h-2 rounded-full bg-red-500"></span>Expired</div>
<div className="flex items-center justify-end gap-1"><span className="w-2 h-2 rounded-full bg-orange-500"></span>Prep</div>
<div className="flex items-center justify-end gap-1"><span className="w-2 h-2 rounded-full bg-yellow-500"></span>Pack</div>
</div>
</div>
</CardContent>
</Card>
);
}
|
