53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import { useTranslations } from 'next-intl';
|
|
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
|
|
|
|
export const PieChartComponent = ({ data }: {
|
|
data: {
|
|
name: string,
|
|
value: number,
|
|
color: string
|
|
}[]
|
|
}) => {
|
|
const t = useTranslations('Global');
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-col items-center"
|
|
>
|
|
<ResponsiveContainer width={200} height={200}>
|
|
<PieChart>
|
|
<text x={100} y={80} className="pie-char-text">
|
|
0
|
|
</text>
|
|
<text x={100} y={100} className="pie-char-text">
|
|
{t('out-of')}
|
|
</text>
|
|
<text x={100} y={120} className="pie-char-text">
|
|
0
|
|
</text>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={70}
|
|
outerRadius={90}
|
|
paddingAngle={0}
|
|
dataKey="value"
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
<div className="flex gap-6">
|
|
{data.map((entry, index) => (
|
|
<div key={`cell-${index}`} className="text-white">
|
|
<span className="w-2 h-2 rounded-full font-bold inline-block mr-1.5" style={{ backgroundColor: entry.color }}></span>
|
|
<span>{t(entry.name)}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}; |