feat: display revenue as currency in PieChart tooltip
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m12s

This commit is contained in:
Cauê Faleiros
2026-05-06 17:24:11 -03:00
parent 8f17f7b4fd
commit c15de19180

View File

@@ -11,13 +11,20 @@ const COLORS = [
'#06b6d4', '#ec4899', '#eab308', '#6366f1', '#14b8a6' '#06b6d4', '#ec4899', '#eab308', '#6366f1', '#14b8a6'
]; ];
const CustomTooltip = ({ active, payload, label }: any) => { const formatCurrency = (value: number) => {
return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value);
};
const CustomTooltip = ({ active, payload, label, isCurrency }: any) => {
if (active && payload && payload.length) { if (active && payload && payload.length) {
const color = payload[0].payload?.fill || payload[0].color || '#9ECAE1'; const color = payload[0].payload?.fill || payload[0].color || '#9ECAE1';
const displayLabel = label || payload[0].name;
const value = isCurrency ? formatCurrency(payload[0].value) : payload[0].value;
const valueLabel = isCurrency ? 'Receita:' : 'Vendas:';
return ( return (
<div className="bg-[#141414] p-3 rounded-xl shadow-lg border-none"> <div className="bg-[#141414] p-3 rounded-xl shadow-lg border-none">
<p className="font-bold mb-1" style={{ color }}>{label}</p> <p className="font-bold mb-1" style={{ color }}>{displayLabel}</p>
<p className="text-[#ededed] m-0">Vendas: {payload[0].value}</p> <p className="text-[#ededed] m-0">{valueLabel} {value}</p>
</div> </div>
); );
} }