Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 3x 31x 31x 31x 31x 31x 62x | import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
interface DataItem {
name?: string;
value?: string | number;
}
interface CustomActiveShapePieChartProps {
data: DataItem[];
size?: number;
colors?: string[];
}
export const CustomActiveShapePieChart = ({
data,
size = 89,
colors = ['bg-gradient-vertical', 'var(--bg-pie-chart)'],
}: CustomActiveShapePieChartProps) => {
const displayValue = data[0]?.value || 0;
const valueInt =
typeof displayValue === 'string'
? parseInt(displayValue, 10)
: Number(displayValue);
const pieData = [
{ name: 'segment1', value: valueInt },
{ name: 'segment2', value: 100 - valueInt },
];
// Define a gradient id for the pie
const gradientId = 'pie-gradient';
return (
<div className="relative" style={{ width: size, height: size }}>
{/* The chart */}
<div style={{ width: size, height: size, position: 'relative' }}>
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<defs>
<linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="var(--gradient-start)" />
<stop offset="100%" stopColor="var(--gradient-end)" />
</linearGradient>
</defs>
<Pie
data={pieData}
cx="50%"
cy="50%"
innerRadius={size * 0.38}
outerRadius={size * 0.48}
dataKey="value"
startAngle={90}
endAngle={-270}
strokeWidth={0}
>
{pieData.map((entry, index: number) => (
<Cell
key={`cell-${index}`}
fill={
index === 0 && colors[0].startsWith('bg-gradient-vertical')
? `url(#${gradientId})`
: colors[index % colors.length]
}
/>
))}
</Pie>
</PieChart>
</ResponsiveContainer>
{/* Center white background */}
<div
className="absolute rounded-full bg-white"
style={{
top: size * 0.1,
left: size * 0.1,
width: size * 0.8,
height: size * 0.8,
}}
/>
{/* Center text */}
<div
className="absolute flex items-center justify-center"
style={{
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
>
<span className="text-sm font-bold text-pink-500">
{displayValue}
</span>
</div>
</div>
</div>
);
};
|