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

feat: implement consistent color mapping for products across charts
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m4s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-05-06 17:44:49 -03:00
parent c15de19180
commit a7bdd07c09
1 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/Dashboard.tsx
View File

@@ -63,20 +63,26 @@ const Dashboard = () => {
} }
}); });
const uniqueProducts = Array.from(new Set(filteredData.map(order => order.Descricao_Produto.split(' TAMANHO')[0]))).sort();
const productColors: Record<string, string> = {};
uniqueProducts.forEach((productName, index) => {
productColors[productName] = COLORS[index % COLORS.length];
});
const productsData = Object.keys(productSalesMap).map(key => ({ const productsData = Object.keys(productSalesMap).map(key => ({
name: key, name: key,
value: productSalesMap[key] value: productSalesMap[key]
})).sort((a, b) => b.value - a.value).slice(0, 10).map((item, index) => ({ })).sort((a, b) => b.value - a.value).slice(0, 10).map(item => ({
...item, ...item,
fill: COLORS[index % COLORS.length] fill: productColors[item.name]
})); }));
const revenueData = Object.keys(productRevenueMap).map(key => ({ const revenueData = Object.keys(productRevenueMap).map(key => ({
name: key, name: key,
value: productRevenueMap[key] value: productRevenueMap[key]
})).sort((a, b) => b.value - a.value).slice(0, 10).map((item, index) => ({ })).sort((a, b) => b.value - a.value).slice(0, 10).map(item => ({
...item, ...item,
fill: COLORS[index % COLORS.length] fill: productColors[item.name]
})); }));
return { totalRevenue: revenue, totalOrders: totalItems, averageOrderValue: revenue / (filteredData.length || 1), salesByProduct: productsData, revenueByProduct: revenueData }; return { totalRevenue: revenue, totalOrders: totalItems, averageOrderValue: revenue / (filteredData.length || 1), salesByProduct: productsData, revenueByProduct: revenueData };
@@ -148,17 +154,17 @@ const Dashboard = () => {
<YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} /> <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
<Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} /> <Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} />
<Bar dataKey="value" radius={[4, 4, 0, 0]}> <Bar dataKey="value" radius={[4, 4, 0, 0]}>
{salesByProduct.map((_, index) => ( {salesByProduct.map((entry) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} /> <Cell key={`cell-${entry.name}`} fill={entry.fill} />
))} ))}
</Bar> </Bar>
</BarChart> </BarChart>
</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) => ( {salesByProduct.map((entry) => (
<div key={`bar-legend-${entry.name}`} className="flex items-center text-[10px]"> <div key={`bar-legend-${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: entry.fill }}></span>
<span className="text-dark-muted truncate font-semibold" title={entry.name}>{entry.name}</span> <span className="text-dark-muted truncate font-semibold" title={entry.name}>{entry.name}</span>
</div> </div>
))} ))}
@@ -171,8 +177,8 @@ const Dashboard = () => {
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<PieChart> <PieChart>
<Pie data={revenueByProduct} 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">
{revenueByProduct.map((_, index) => ( {revenueByProduct.map((entry) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} /> <Cell key={`cell-${entry.name}`} fill={entry.fill} />
))} ))}
</Pie> </Pie>
<Tooltip content={<CustomTooltip isCurrency={true} />} cursor={{ fill: '#222222' }} /> <Tooltip content={<CustomTooltip isCurrency={true} />} cursor={{ fill: '#222222' }} />
@@ -180,9 +186,9 @@ const Dashboard = () => {
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
<div className="mt-4 grid grid-cols-2 gap-2"> <div className="mt-4 grid grid-cols-2 gap-2">
{revenueByProduct.map((entry, index) => ( {revenueByProduct.map((entry) => (
<div key={entry.name} className="flex items-center text-[10px]"> <div key={`pie-legend-${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: entry.fill }}></span>
<span className="text-dark-muted truncate font-semibold">{entry.name}</span> <span className="text-dark-muted truncate font-semibold">{entry.name}</span>
</div> </div>
))} ))}