blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: change PieChart to display Revenue by Product instead of quantity

Browse Source
This commit is contained in:
Cauê Faleiros
2026-05-06 17:07:56 -03:00
parent 8eb5d34247
commit 8f17f7b4fd
1 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/Dashboard.tsx
View File

@@ -35,19 +35,24 @@ const Dashboard = () => {
}); });
}, [dateRange, ordersData]); }, [dateRange, ordersData]);
const { totalRevenue, totalOrders, averageOrderValue, salesByProduct } = useMemo(() => { const { totalRevenue, totalOrders, averageOrderValue, salesByProduct, revenueByProduct } = useMemo(() => {
let revenue = 0; let revenue = 0;
let totalItems = 0; let totalItems = 0;
const productSalesMap: Record<string, number> = {}; const productSalesMap: Record<string, number> = {};
const productRevenueMap: Record<string, number> = {};
filteredData.forEach(order => { filteredData.forEach(order => {
revenue += (order.Quantidade * order.Valor_Unitario); const itemRevenue = order.Quantidade * order.Valor_Unitario;
revenue += itemRevenue;
totalItems += order.Quantidade; totalItems += order.Quantidade;
const productName = order.Descricao_Produto.split(' TAMANHO')[0]; const productName = order.Descricao_Produto.split(' TAMANHO')[0];
if (productSalesMap[productName]) { if (productSalesMap[productName]) {
productSalesMap[productName] += order.Quantidade; productSalesMap[productName] += order.Quantidade;
productRevenueMap[productName] += itemRevenue;
} else { } else {
productSalesMap[productName] = order.Quantidade; productSalesMap[productName] = order.Quantidade;
productRevenueMap[productName] = itemRevenue;
} }
}); });
@@ -59,7 +64,15 @@ const Dashboard = () => {
fill: COLORS[index % COLORS.length] fill: COLORS[index % COLORS.length]
})); }));
return { totalRevenue: revenue, totalOrders: totalItems, averageOrderValue: revenue / (filteredData.length || 1), salesByProduct: productsData }; const revenueData = Object.keys(productRevenueMap).map(key => ({
name: key,
value: productRevenueMap[key]
})).sort((a, b) => b.value - a.value).slice(0, 10).map((item, index) => ({
...item,
fill: COLORS[index % COLORS.length]
}));
return { totalRevenue: revenue, totalOrders: totalItems, averageOrderValue: revenue / (filteredData.length || 1), salesByProduct: productsData, revenueByProduct: revenueData };
}, [filteredData]); }, [filteredData]);
const formatCurrency = (value: number) => { const formatCurrency = (value: number) => {
@@ -146,26 +159,21 @@ const Dashboard = () => {
</div> </div>
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm flex flex-col"> <div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm flex flex-col">
<h3 className="text-lg font-bold mb-6 text-dark-text">Distribuição de Produtos</h3> <h3 className="text-lg font-bold mb-6 text-dark-text">Receita por Produto</h3>
<div className="h-80 w-full flex items-center justify-center"> <div className="h-80 w-full flex items-center justify-center">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<PieChart> <PieChart>
<Pie data={salesByProduct} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value" stroke="none"> <Pie data={revenueByProduct} cx="50%" cy="50%" innerRadius={80} outerRadius={110} paddingAngle={5} dataKey="value" stroke="none">
{salesByProduct.map((_, index) => ( {revenueByProduct.map((_, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} /> <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))} ))}
</Pie> </Pie>
<Tooltip <Tooltip content={<CustomTooltip isCurrency={true} />} cursor={{ fill: '#222222' }} />
contentStyle={{
backgroundColor: '#141414', borderColor: 'transparent', borderRadius: '12px',
boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.5)', border: 'none', color: '#ededed'
}}
/>
</PieChart> </PieChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
<div className="mt-4 grid grid-cols-2 gap-2"> <div className="mt-4 grid grid-cols-2 gap-2">
{salesByProduct.map((entry, index) => ( {revenueByProduct.map((entry, index) => (
<div key={entry.name} className="flex items-center text-[10px]"> <div key={entry.name} className="flex items-center text-[10px]">
<span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: COLORS[index % COLORS.length] }}></span> <span className="w-2.5 h-2.5 rounded-full mr-2 shrink-0" style={{ backgroundColor: COLORS[index % COLORS.length] }}></span>
<span className="text-dark-muted truncate font-semibold">{entry.name}</span> <span className="text-dark-muted truncate font-semibold">{entry.name}</span>