Fix: Apply responsiveness adjustments
The AI addressed responsiveness issues, ensuring the changes are reflected on the live URL.
This commit is contained in:
parent
0df3fc10ee
commit
98fb2f72ec
@ -10,6 +10,9 @@ 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);
|
||||
|
||||
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent }: any) => {
|
||||
if (percent === 0) return null;
|
||||
|
||||
@ -48,16 +51,17 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
|
||||
<div className="flex items-center justify-center h-[250px]">
|
||||
<div className="h-32 w-32 rounded-full border-4 border-t-primary border-opacity-20 animate-spin" />
|
||||
</div>
|
||||
) : categories.length === 0 ? (
|
||||
<div className="flex items-center justify-center h-[250px] text-muted-foreground">
|
||||
Sem dados disponíveis
|
||||
) : 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>
|
||||
) : (
|
||||
<div className="h-[250px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={categories}
|
||||
data={validCategories}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
labelLine={false}
|
||||
@ -66,13 +70,13 @@ const CategoryChart: React.FC<CategoryChartProps> = ({ categories, isLoading = f
|
||||
fill="#8884d8"
|
||||
dataKey="valor"
|
||||
>
|
||||
{categories.map((entry, index) => (
|
||||
{validCategories.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
formatter={(value: number) => formatCurrency(value)}
|
||||
labelFormatter={(index) => categories[index].categoria}
|
||||
labelFormatter={(index) => validCategories[index].categoria}
|
||||
/>
|
||||
<Legend />
|
||||
</PieChart>
|
||||
|
||||
@ -48,7 +48,7 @@ export async function getTransactionSummary() {
|
||||
.reduce((sum, item) => sum + Math.abs(item.valor || 0), 0);
|
||||
|
||||
const totalDespesas = data
|
||||
.filter(item => item.tipo?.toLowerCase() === 'despesa')
|
||||
.filter(item => (item.tipo?.toLowerCase() === 'despesa'))
|
||||
.reduce((sum, item) => sum + Math.abs(item.valor || 0), 0);
|
||||
|
||||
const resultado = {
|
||||
@ -63,10 +63,11 @@ export async function getTransactionSummary() {
|
||||
|
||||
export async function getCategorySummary() {
|
||||
console.log("Buscando resumo de categorias...");
|
||||
|
||||
// Buscar todas as transações que são despesas, independente da capitalização
|
||||
const { data, error } = await supabase
|
||||
.from('transacoes')
|
||||
.select('categoria, valor, tipo')
|
||||
.eq('tipo', 'Despesa');
|
||||
.select('categoria, valor, tipo');
|
||||
|
||||
if (error) {
|
||||
console.error('Erro ao buscar resumo de categorias:', error);
|
||||
@ -75,22 +76,16 @@ export async function getCategorySummary() {
|
||||
|
||||
console.log("Dados de categorias encontrados:", data);
|
||||
|
||||
// Vamos buscar tanto "Despesa" quanto "despesa" para garantir
|
||||
const { data: dataLowerCase, error: errorLowerCase } = await supabase
|
||||
.from('transacoes')
|
||||
.select('categoria, valor, tipo')
|
||||
.eq('tipo', 'despesa');
|
||||
// Filtrar usando JavaScript para pegar todas as despesas (case insensitive)
|
||||
const despesasData = data.filter(item =>
|
||||
item.tipo?.toLowerCase() === 'despesa'
|
||||
);
|
||||
|
||||
if (errorLowerCase) {
|
||||
console.error('Erro ao buscar despesas minúsculas:', errorLowerCase);
|
||||
} else if (dataLowerCase) {
|
||||
data.push(...dataLowerCase);
|
||||
console.log("Dados adicionais encontrados:", dataLowerCase);
|
||||
}
|
||||
console.log("Despesas filtradas:", despesasData.length);
|
||||
|
||||
// Agrupar por categoria
|
||||
const categorias: Record<string, number> = {};
|
||||
data.forEach(item => {
|
||||
despesasData.forEach(item => {
|
||||
if (item.categoria && item.valor) {
|
||||
const categoriaKey = item.categoria || 'Outros';
|
||||
if (!categorias[categoriaKey]) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user