ealmeida/DashDescomplicar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve expense category legend readability

Browse Source 
- Reduce pie chart height from 240px to 180px (less empty space)
- Increase legend text from text-xs to text-sm
- Larger color dots (w-3 h-3) and more spacing between items
- Bold values with tabular-nums for alignment

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Emanuel Almeida
2026-02-07 23:02:02 +00:00
parent 12e1552d02
commit 10f24615e1
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/Financial.tsx
View File

@@ -259,19 +259,19 @@ export default function Financial() {
{/* Pie Chart - Expense Distribution */} {/* Pie Chart - Expense Distribution */}
<motion.div variants={itemVariants} className="glass-card p-6"> <motion.div variants={itemVariants} className="glass-card p-6">
<h3 className="text-sm font-semibold text-white mb-6 uppercase tracking-wide flex items-center gap-2"> <h3 className="text-sm font-semibold text-white mb-4 uppercase tracking-wide flex items-center gap-2">
<Receipt className="w-4 h-4 text-brand-400" /> <Receipt className="w-4 h-4 text-brand-400" />
Despesas por Categoria Despesas por Categoria
</h3> </h3>
<div className="h-[240px]"> <div className="h-[180px]">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<PieChart> <PieChart>
<Pie <Pie
data={data.categorias.slice(0, 10)} data={data.categorias.slice(0, 10)}
cx="50%" cx="50%"
cy="50%" cy="50%"
innerRadius={50} innerRadius={40}
outerRadius={90} outerRadius={75}
dataKey="value" dataKey="value"
stroke="none" stroke="none"
> >
@@ -281,21 +281,21 @@ export default function Financial() {
</Pie> </Pie>
<Tooltip <Tooltip
formatter={(value: number | undefined) => formatEUR(value || 0)} formatter={(value: number | undefined) => formatEUR(value || 0)}
contentStyle={{ background: '#18181b', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 12, fontSize: 12 }} contentStyle={{ background: '#18181b', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 12, fontSize: 13 }}
itemStyle={{ color: '#e4e4e7' }} itemStyle={{ color: '#e4e4e7' }}
/> />
</PieChart> </PieChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
{/* Legend */} {/* Legend */}
<div className="space-y-1.5 mt-2 max-h-[160px] overflow-y-auto scrollbar-thin"> <div className="space-y-2.5 mt-3">
{data.categorias.slice(0, 10).map((cat, i) => ( {data.categorias.slice(0, 10).map((cat, i) => (
<div key={i} className="flex items-center justify-between text-xs"> <div key={i} className="flex items-center justify-between">
<div className="flex items-center gap-2 min-w-0"> <div className="flex items-center gap-2.5 min-w-0">
<div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ background: PIE_COLORS[i % PIE_COLORS.length] }} /> <div className="w-3 h-3 rounded-full flex-shrink-0" style={{ background: PIE_COLORS[i % PIE_COLORS.length] }} />
<span className="text-zinc-400 truncate">{cat.name}</span> <span className="text-sm text-zinc-300 truncate">{cat.name}</span>
</div> </div>
<span className="text-white font-medium ml-2">{formatEUR(cat.value)}</span> <span className="text-sm text-white font-semibold ml-3 tabular-nums">{formatEUR(cat.value)}</span>
</div> </div>
))} ))}
</div> </div>