Refactor: Improve dashboard chart layout and design
Stacked charts and improved styling for a modern look.
This commit is contained in:
gpt-engineer-app[bot]
parent
b0bbce2637
commit
f4f614e86b
@ -10,19 +10,15 @@ interface CategoryChartProps {
|
||||
}
|
||||
|
||||
const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = false }) => {
|
||||
// Filter out any categories with zero value to prevent rendering issues
|
||||
const validCategories = categories.filter(cat => cat.valor > 0);
|
||||
|
||||
// Calcular o valor total para exibir no centro do gráfico
|
||||
const totalValue = validCategories.reduce((sum, cat) => sum + cat.valor, 0);
|
||||
|
||||
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index, name }: any) => {
|
||||
if (percent < 0.05) return null; // Não mostrar texto para fatias muito pequenas
|
||||
|
||||
|
||||
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }: any) => {
|
||||
if (percent < 0.05) return null;
|
||||
const radius = innerRadius + (outerRadius - innerRadius) * 0.7;
|
||||
const x = cx + radius * Math.cos(-midAngle * Math.PI / 180);
|
||||
const y = cy + radius * Math.sin(-midAngle * Math.PI / 180);
|
||||
|
||||
|
||||
return (
|
||||
<text
|
||||
x={x}
|
||||
@ -30,7 +26,7 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
|
||||
fill="#fff"
|
||||
textAnchor={x > cx ? 'start' : 'end'}
|
||||
dominantBaseline="central"
|
||||
className="text-xs font-bold"
|
||||
className="text-xs font-bold drop-shadow-lg"
|
||||
>
|
||||
{`${(percent * 100).toFixed(0)}%`}
|
||||
</text>
|
||||
@ -46,16 +42,15 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
|
||||
|
||||
const renderCustomLegend = (props: any) => {
|
||||
const { payload } = props;
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-2 mt-3 text-xs">
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-2 mt-2 text-xs">
|
||||
{payload.map((entry: any, index: number) => (
|
||||
<div key={`item-${index}`} className="flex items-center">
|
||||
<div
|
||||
className="w-3 h-3 mr-2 rounded-sm"
|
||||
className="w-3 h-3 mr-2 rounded-full shadow"
|
||||
style={{ backgroundColor: entry.color }}
|
||||
/>
|
||||
<span className="truncate font-medium">{entry.value}</span>
|
||||
<span className="truncate font-semibold text-zinc-700 dark:text-white">{entry.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@ -65,58 +60,59 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
|
||||
const renderCustomTooltip = ({ active, payload }: any) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="bg-background border border-border p-2 rounded-lg shadow-lg">
|
||||
<p className="font-medium">{payload[0].name}</p>
|
||||
<div className="bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 p-2 rounded-xl shadow-lg transition-all duration-300">
|
||||
<p className="font-semibold text-sm text-zinc-800 dark:text-white">{payload[0].name}</p>
|
||||
<p className="font-bold">{formatCurrency(payload[0].value)}</p>
|
||||
<p className="text-sm">{`${(payload[0].payload.percentage * 100).toFixed(1)}%`}</p>
|
||||
<p className="text-xs">{`${(payload[0].payload.percentage * 100).toFixed(1)}%`}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="dashboard-card h-full shadow-md">
|
||||
<CardHeader className="pb-2 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900">
|
||||
<CardTitle className="text-lg flex items-center">
|
||||
Gastos por Categoria
|
||||
<Card className="dashboard-card h-full shadow-xl rounded-2xl animate-fade-in bg-gradient-to-br from-orange-50 via-white to-indigo-50 dark:from-zinc-900 dark:via-zinc-800 dark:to-zinc-900 border-0">
|
||||
<CardHeader className="pb-2 bg-gradient-to-r from-indigo-50/60 to-orange-50/0 dark:from-zinc-900 dark:to-zinc-900 rounded-t-2xl">
|
||||
<CardTitle className="text-lg font-bold tracking-tight text-zinc-700 dark:text-white flex items-center">
|
||||
<span className="mr-2">🧾</span> Gastos por Categoria
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-[250px]">
|
||||
<div className="flex items-center justify-center h-[260px]">
|
||||
<div className="h-32 w-32 rounded-full border-4 border-t-primary border-opacity-20 animate-spin" />
|
||||
</div>
|
||||
) : validCategories.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-[250px] text-muted-foreground">
|
||||
<p>Sem dados disponíveis</p>
|
||||
<p className="text-sm mt-2">Verifique se existem transações do tipo 'despesa' cadastradas</p>
|
||||
<div className="flex flex-col items-center justify-center h-[260px] text-muted-foreground">
|
||||
<span>Sem dados disponíveis</span>
|
||||
<span className="text-xs mt-2">Verifique se existem transações do tipo 'despesa' cadastradas</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-[300px] relative">
|
||||
<div className="h-[320px] relative">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={validCategories}
|
||||
cx="50%"
|
||||
cy="45%"
|
||||
cy="46%"
|
||||
labelLine={false}
|
||||
label={renderCustomizedLabel}
|
||||
outerRadius={100}
|
||||
innerRadius={60}
|
||||
outerRadius={105}
|
||||
innerRadius={65}
|
||||
fill="#8884d8"
|
||||
dataKey="valor"
|
||||
nameKey="categoria"
|
||||
paddingAngle={1}
|
||||
strokeWidth={1}
|
||||
paddingAngle={2}
|
||||
strokeWidth={2}
|
||||
stroke="#fff"
|
||||
isAnimationActive={true}
|
||||
animationDuration={1300}
|
||||
>
|
||||
{validCategories.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={entry.color}
|
||||
style={{ filter: 'drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))' }}
|
||||
style={{ filter: 'drop-shadow(0px 2px 3px rgba(0,0,0,0.08))' }}
|
||||
/>
|
||||
))}
|
||||
</Pie>
|
||||
@ -124,13 +120,12 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
|
||||
<Legend content={renderCustomLegend} layout="horizontal" verticalAlign="bottom" />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
{/* Valor total no centro do gráfico */}
|
||||
{/* Valor total no centro */}
|
||||
<div
|
||||
className="absolute top-[45%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center pointer-events-none"
|
||||
className="absolute top-[46%] left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center pointer-events-none"
|
||||
style={{ width: '120px' }}
|
||||
>
|
||||
<div className="font-bold text-lg">{formatCurrency(totalValue)}</div>
|
||||
<div className="font-bold text-lg text-zinc-800 dark:text-white">{formatCurrency(totalValue)}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -47,19 +47,15 @@ const MonthlyChart: React.FC<MonthlyChartProps> = ({ data, isLoading = false })
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
|
||||
const customTooltip = ({ active, payload, label }: any) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="bg-white p-3 border border-gray-200 rounded-md shadow-lg">
|
||||
<p className="font-bold mb-1">{`Mês: ${label}`}</p>
|
||||
<p className="text-green-600">
|
||||
{`Receitas: ${formatCurrency(payload[0].value)}`}
|
||||
</p>
|
||||
<p className="text-red-600">
|
||||
{`Despesas: ${formatCurrency(payload[1].value)}`}
|
||||
</p>
|
||||
<p className="text-gray-700 font-medium pt-1 border-t border-gray-200 mt-1">
|
||||
<div className="bg-white dark:bg-zinc-900 p-3 border border-gray-200 dark:border-zinc-700 rounded-xl shadow-lg font-sans min-w-[180px] transition-all duration-300">
|
||||
<p className="font-bold mb-1 text-[15px] text-zinc-800 dark:text-zinc-100">{label}</p>
|
||||
<p className="text-green-600">{`Receitas: ${formatCurrency(payload[0].value)}`}</p>
|
||||
<p className="text-red-600">{`Despesas: ${formatCurrency(payload[1].value)}`}</p>
|
||||
<p className="text-gray-700 dark:text-gray-300 font-medium pt-1 border-t border-gray-200 dark:border-zinc-700 mt-1">
|
||||
{`Saldo: ${formatCurrency(payload[0].value - payload[1].value)}`}
|
||||
</p>
|
||||
</div>
|
||||
@ -70,12 +66,9 @@ const MonthlyChart: React.FC<MonthlyChartProps> = ({ data, isLoading = false })
|
||||
|
||||
// Custom label component that only shows values above a threshold
|
||||
const CustomLabel = ({ x, y, width, value, dataKey }: any) => {
|
||||
// Only show label if value is significant (above 100)
|
||||
if (!value || value < 100) return null;
|
||||
|
||||
const isReceita = dataKey === 'receitas';
|
||||
const yPosition = isReceita ? y - 5 : y - 5;
|
||||
|
||||
return (
|
||||
<text
|
||||
x={x + width / 2}
|
||||
@ -83,7 +76,7 @@ const MonthlyChart: React.FC<MonthlyChartProps> = ({ data, isLoading = false })
|
||||
fill={isReceita ? '#10B981' : '#EF4444'}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
className="text-xs font-semibold"
|
||||
className="text-xs font-semibold drop-shadow-lg"
|
||||
>
|
||||
{formatCompactCurrency(value)}
|
||||
</text>
|
||||
@ -91,66 +84,69 @@ const MonthlyChart: React.FC<MonthlyChartProps> = ({ data, isLoading = false })
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="dashboard-card h-full shadow-md">
|
||||
<CardHeader className="pb-2 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900">
|
||||
<CardTitle className="text-lg">Receitas vs Despesas</CardTitle>
|
||||
<Card className="dashboard-card h-full shadow-xl rounded-2xl animate-fade-in bg-gradient-to-br from-slate-50 via-white to-blue-50 dark:from-zinc-900 dark:via-zinc-800 dark:to-zinc-900 border-0">
|
||||
<CardHeader className="pb-2 bg-gradient-to-r from-blue-50/50 to-blue-100/0 dark:from-zinc-900 dark:to-zinc-900 rounded-t-2xl">
|
||||
<CardTitle className="text-lg font-bold tracking-tight text-zinc-700 dark:text-white flex items-center">
|
||||
<span className="mr-2">📈</span> Receitas vs Despesas
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center h-[250px]">
|
||||
<div className="flex items-center justify-center h-[260px]">
|
||||
<div className="h-32 w-32 rounded-full border-4 border-t-primary border-opacity-20 animate-spin" />
|
||||
</div>
|
||||
) : data.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-[250px] text-muted-foreground">
|
||||
Sem dados disponíveis
|
||||
<div className="flex flex-col items-center justify-center h-[260px] text-muted-foreground">
|
||||
<span>Sem dados disponíveis</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-[300px]">
|
||||
<div className="h-[320px] relative">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={data}
|
||||
margin={{ top: 30, right: 30, left: 20, bottom: 15 }}
|
||||
barGap={8}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} opacity={0.4} />
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} opacity={0.20} />
|
||||
<XAxis
|
||||
dataKey="month"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fontSize: 12, fontWeight: 500 }}
|
||||
tick={{ fontSize: 13, fontWeight: 500, fill: "#334155" }}
|
||||
dy={10}
|
||||
/>
|
||||
<YAxis
|
||||
tickFormatter={formatCompactCurrency}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fontSize: 12 }}
|
||||
tick={{ fontSize: 13, fill: "#64748b" }}
|
||||
width={80}
|
||||
/>
|
||||
<Tooltip
|
||||
cursor={{ fill: 'rgba(0, 0, 0, 0.05)' }}
|
||||
cursor={{ fill: 'rgba(16, 185, 129, 0.07)' }}
|
||||
content={customTooltip}
|
||||
/>
|
||||
<Legend
|
||||
verticalAlign="top"
|
||||
height={36}
|
||||
iconType="circle"
|
||||
iconSize={10}
|
||||
iconSize={12}
|
||||
wrapperStyle={{ fontWeight: 600, fontSize: 13, color: "#52525b" }}
|
||||
/>
|
||||
<Bar
|
||||
name="Receitas"
|
||||
dataKey="receitas"
|
||||
fill="#10B981"
|
||||
radius={[4, 4, 0, 0]}
|
||||
barSize={35}
|
||||
animationDuration={1000}
|
||||
radius={[8, 8, 0, 0]}
|
||||
barSize={36}
|
||||
animationDuration={1200}
|
||||
label={<CustomLabel dataKey="receitas" />}
|
||||
>
|
||||
{data.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-receitas-${index}`}
|
||||
fill="#10B981"
|
||||
style={{ filter: 'drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))' }}
|
||||
fill="url(#receitaBar)"
|
||||
style={{ filter: 'drop-shadow(0px 2px 2px rgba(16,185,129,0.10))' }}
|
||||
/>
|
||||
))}
|
||||
</Bar>
|
||||
@ -158,19 +154,29 @@ const MonthlyChart: React.FC<MonthlyChartProps> = ({ data, isLoading = false })
|
||||
name="Despesas"
|
||||
dataKey="despesas"
|
||||
fill="#EF4444"
|
||||
radius={[4, 4, 0, 0]}
|
||||
barSize={35}
|
||||
animationDuration={1000}
|
||||
radius={[8, 8, 0, 0]}
|
||||
barSize={36}
|
||||
animationDuration={1200}
|
||||
label={<CustomLabel dataKey="despesas" />}
|
||||
>
|
||||
{data.map((entry, index) => (
|
||||
<Cell
|
||||
key={`cell-despesas-${index}`}
|
||||
fill="#EF4444"
|
||||
style={{ filter: 'drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))' }}
|
||||
fill="url(#despesaBar)"
|
||||
style={{ filter: 'drop-shadow(0px 2px 2px rgba(239,68,68,0.08))' }}
|
||||
/>
|
||||
))}
|
||||
</Bar>
|
||||
<defs>
|
||||
<linearGradient id="receitaBar" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#17ead9" />
|
||||
<stop offset="100%" stopColor="#10B981" />
|
||||
</linearGradient>
|
||||
<linearGradient id="despesaBar" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#fbc2eb" />
|
||||
<stop offset="100%" stopColor="#EF4444" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
@ -126,6 +126,7 @@ const Dashboard = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Resumo em cards */}
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<SummaryCard
|
||||
title="Receitas"
|
||||
@ -161,9 +162,10 @@ const Dashboard = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<CategoryChart categories={categories} isLoading={isLoading} />
|
||||
{/* ---- GRÁFICOS EM COLUNA ---- */}
|
||||
<div className="flex flex-col gap-6 w-full">
|
||||
<MonthlyChart data={monthlyData} isLoading={isLoading} />
|
||||
<CategoryChart categories={categories} isLoading={isLoading} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user