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

feat: unify chart legend styles and fix dynamic tooltip colors
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 48s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-05-06 15:45:24 -03:00
parent 2c1e75593c
commit c409276698
2 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/Dashboard.tsx
View File

@@ -54,7 +54,10 @@ const Dashboard = () => {
const productsData = Object.keys(productSalesMap).map(key => ({
name: key,
value: productSalesMap[key]
})).sort((a, b) => b.value - a.value).slice(0, 10);
})).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 };
}, [filteredData]);
@@ -112,18 +115,15 @@ const Dashboard = () => {
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
<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">Produtos Mais Vendidos</h3>
<div className="h-[450px] w-full">
<div className="h-80 w-full flex items-center justify-center">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={salesByProduct} margin={{ top: 5, right: 30, left: 20, bottom: 120 }}>
<BarChart data={salesByProduct} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
<XAxis
dataKey="name" stroke="#888888" fontSize={10} tickLine={false} axisLine={false}
interval={0}
angle={-45}
textAnchor="end"
height={120}
tick={false}
/>
<YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
<Tooltip content={<CustomTooltip />} cursor={{ fill: '#222222' }} />
@@ -135,9 +135,17 @@ const Dashboard = () => {
</BarChart>
</ResponsiveContainer>
</div>
<div className="mt-4 grid grid-cols-2 gap-2">
{salesByProduct.map((entry, index) => (
<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="text-dark-muted truncate font-semibold" title={entry.name}>{entry.name}</span>
</div>
))}
</div>
</div>
<div className="bg-dark-card p-6 rounded-2xl border border-dark-border shadow-sm">
<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>
<div className="h-80 w-full flex items-center justify-center">
<ResponsiveContainer width="100%" height="100%">

2
src/pages/ProductDetails.tsx
View File

@@ -118,7 +118,7 @@ const ProductDetails = () => {
<div className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl p-6 shadow-sm">
<h3 className="text-lg font-bold mb-8 text-zinc-900 dark:text-dark-text">Volume de Vendas por Data</h3>
<div className="h-[450px] w-full">
<div className="h-[400px] w-full">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 80 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />