diff --git a/src/components/dashboard/MonthlyChart.tsx b/src/components/dashboard/MonthlyChart.tsx index 2e6f999..66d590c 100644 --- a/src/components/dashboard/MonthlyChart.tsx +++ b/src/components/dashboard/MonthlyChart.tsx @@ -11,7 +11,6 @@ import { Legend, ResponsiveContainer, Cell, - LabelList, } from 'recharts'; import { MonthlyData } from '@/types/financialTypes'; @@ -29,10 +28,24 @@ const MonthlyChart: React.FC = ({ data, isLoading = false }) maximumFractionDigits: 0, }).format(value); }; - - // Adicionar formatação condicional para os barras - const getBarColor = (dataPoint: MonthlyData) => { - return dataPoint.receitas > dataPoint.despesas ? '#10B981' : '#EF4444'; + + const formatCompactCurrency = (value: number) => { + if (value === 0) return ''; + if (value >= 1000) { + return new Intl.NumberFormat('pt-BR', { + style: 'currency', + currency: 'BRL', + minimumFractionDigits: 0, + maximumFractionDigits: 1, + notation: 'compact' + }).format(value); + } + return new Intl.NumberFormat('pt-BR', { + style: 'currency', + currency: 'BRL', + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }).format(value); }; const customTooltip = ({ active, payload, label }: any) => { @@ -55,6 +68,28 @@ const MonthlyChart: React.FC = ({ data, isLoading = false }) return null; }; + // 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 ( + + {formatCompactCurrency(value)} + + ); + }; + return ( @@ -74,8 +109,8 @@ const MonthlyChart: React.FC = ({ data, isLoading = false }) = ({ data, isLoading = false }) dy={10} /> = ({ data, isLoading = false }) dataKey="receitas" fill="#10B981" radius={[4, 4, 0, 0]} - barSize={30} + barSize={35} animationDuration={1000} + label={} > {data.map((entry, index) => ( = ({ data, isLoading = false }) style={{ filter: 'drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))' }} /> ))} - } > {data.map((entry, index) => ( = ({ data, isLoading = false }) style={{ filter: 'drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))' }} /> ))} -