57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
|
|
|
|
export const PieChartComponent = ({ data, show }: {
|
|
data: {
|
|
name: string,
|
|
value: number,
|
|
color: string
|
|
}[],
|
|
show: number | string
|
|
}) => {
|
|
const t = useTranslations('Global');
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-col items-center"
|
|
>
|
|
<ResponsiveContainer width={200} height={200}>
|
|
<PieChart>
|
|
<text x={100} y={75} className="pie-char-text">
|
|
{show}
|
|
</text>
|
|
<text x={100} y={100} className="pie-char-text">
|
|
{t('out-of')}
|
|
</text>
|
|
<text x={100} y={125} className="pie-char-text">
|
|
0
|
|
</text>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={65}
|
|
outerRadius={100}
|
|
paddingAngle={0}
|
|
dataKey="value"
|
|
stroke="none"
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={entry.color} stroke="none" />
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
<div className="flex gap-6 mt-4">
|
|
{data.map((entry, index) => (
|
|
<div key={`cell-${index}`} className="">
|
|
<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>
|
|
)
|
|
}; |