🎴 Anatomia de um Card de Dados
Estrutura e elementos fundamentais
Um Card de Dados e a unidade fundamental de informacao em dashboards. E um container visual que agrupa um valor principal, rotulo descritivo, indicador de tendencia e contexto adicional. Diferente de cards decorativos, cards de dados sao otimizados para leitura rapida e tomada de decisao instantanea.
Cards bem projetados permitem que usuarios compreendam metricas em menos de 3 segundos. Sao o primeiro elemento que executivos olham ao abrir um dashboard. Um card mal projetado causa confusao e desconfianca nos dados apresentados.
📋 Elementos de um Card de Dados
Identifica a metrica. Deve ser curto e claro (ex: "Receita Total").
O numero mais importante. Maior fonte, maximo destaque visual.
Mostra variacao (ex: ▲ 12.5%). Usa cores semanticas.
Informacao complementar (meta, periodo, comparacao).
🔍 Anatomia Visual
┌─────────────────────────────────────┐ │ 💰 Receita Total │ ← Rotulo + Icone │ │ │ R$ 1.234.567 │ ← Valor Principal (destaque) │ │ │ ▲ 12.5% vs mes anterior │ ← Tendencia (verde/vermelho) │ Meta: R$ 1.500.000 │ ← Contexto adicional └─────────────────────────────────────┘ Hierarquia Visual (do mais ao menos importante): 1. Valor Principal → maior fonte, mais contraste 2. Rotulo → menor, cor neutra 3. Tendencia → cor semantica (verde/vermelho) 4. Contexto → discreto, complementar
💻 Codigo: Card de Dados Basico
<div class="bg-dark-800 rounded-xl p-6 border border-dark-600">
<!-- Rotulo + Icone -->
<div class="flex items-center justify-between mb-2">
<span class="text-neutral-400 text-sm">Receita Total</span>
<span class="text-2xl">💰</span>
</div>
<!-- Valor Principal -->
<div class="text-3xl font-bold mb-2">R$ 1.234.567</div>
<!-- Tendencia -->
<div class="flex items-center text-sm">
<span class="text-emerald-400">▲ 12.5%</span>
<span class="text-neutral-500 ml-2">vs mes anterior</span>
</div>
</div>
💡 Dica Pratica
Regra dos 3 segundos: Se um usuario nao conseguir entender a metrica em 3 segundos, seu card precisa ser simplificado. Teste com pessoas de fora do projeto - se precisarem perguntar o que significa, redesenhe.
🎯 KPIs - Key Performance Indicators
Metricas que realmente importam
KPIs (Key Performance Indicators) sao metricas criticas que medem o sucesso de um objetivo especifico. Diferente de metricas comuns, KPIs estao sempre ligados a metas e sao usados para tomada de decisao estrategica.
Em dashboards, KPIs ocupam posicao de destaque e tem tratamento visual diferenciado. Saber distinguir KPIs de metricas secundarias e crucial - KPIs mal escolhidos levam a decisoes erradas.
📊 Tipos de KPIs em Dashboards
Mostram o que JA aconteceu. Exemplos: Receita, Lucro, Churn Rate.
Preveem resultados futuros. Exemplos: Leads gerados, Conversoes, NPS.
Medem saude do sistema. Exemplos: Tempo de resposta, Uptime, SLA.
📐 Layout Recomendado de KPIs
Regra: Maximo de 4-6 KPIs visiveis na tela principal Layout Desktop (4 colunas): ┌─────────┬─────────┬─────────┬─────────┐ │ KPI 1 │ KPI 2 │ KPI 3 │ KPI 4 │ │ RECEITA │ CLIENTES│ CHURN │ NPS │ │ R$1.2M │ 4.523 │ 2.3% │ 72 │ │ ▲12.5% │ ▲8.3% │ ▼0.5% │ ▲5pts │ └─────────┴─────────┴─────────┴─────────┘ Prioridade (esquerda → direita): Mais importante → Menos importante
💻 Codigo: KPI com Progress Ring
<!-- KPI com indicador circular de progresso -->
<div class="bg-dark-800 rounded-xl p-6 border border-dark-600">
<div class="flex items-center justify-between">
<div>
<p class="text-neutral-400 text-sm mb-1">Meta Mensal</p>
<p class="text-3xl font-bold">78%</p>
<p class="text-sm text-neutral-500">R$ 780k de R$ 1M</p>
</div>
<div class="relative w-16 h-16">
<svg class="w-16 h-16 -rotate-90">
<!-- Background circle -->
<circle cx="32" cy="32" r="28"
stroke="#374151" stroke-width="4" fill="none"/>
<!-- Progress circle -->
<circle cx="32" cy="32" r="28"
stroke="#3b82f6" stroke-width="4" fill="none"
stroke-dasharray="175.9" stroke-dashoffset="38.7"/>
</svg>
</div>
</div>
</div>
✅ Fazer vs ❌ Evitar
- • Limitar a 4-6 KPIs principais
- • Conectar KPIs a metas claras
- • Usar cores semanticas consistentes
- • Atualizar em tempo real ou quase
- • Exibir 10+ KPIs na mesma tela
- • KPIs sem meta definida
- • Cores aleatorias ou decorativas
- • Dados desatualizados sem aviso
🔢 Formatacao de Numeros e Valores
Legibilidade e contexto numerico
Formatacao de numeros e a arte de exibir valores de forma legivel e apropriada ao contexto. Inclui abreviacao de grandes numeros (1.2M ao inves de 1.234.567), formatacao de moeda, percentuais, datas e numeros negativos.
Numeros mal formatados causam confusao e erros de interpretacao. "1234567" e muito mais dificil de ler que "R$ 1.23M". A formatacao correta reduz a carga cognitiva e acelera a tomada de decisao.
📏 Regras de Formatacao
🔤 Padroes de Abreviacao
💻 Codigo: Funcao de Formatacao
// Funcao universal de formatacao
function formatNumber(value, type = 'number') {
// Moeda com abreviacao inteligente
if (type === 'currency') {
if (value >= 1e9) return `R$ ${(value/1e9).toFixed(1)}B`;
if (value >= 1e6) return `R$ ${(value/1e6).toFixed(1)}M`;
if (value >= 1e3) return `R$ ${(value/1e3).toFixed(1)}K`;
return new Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL'
}).format(value);
}
// Percentuais com 1 casa decimal
if (type === 'percent') {
return `${value.toFixed(1)}%`;
}
// Numeros com separador de milhar
return new Intl.NumberFormat('pt-BR').format(value);
}
// Exemplos de uso
formatNumber(1234567, 'currency') // "R$ 1.2M"
formatNumber(12.5678, 'percent') // "12.6%"
formatNumber(9876543) // "9.876.543"
💡 Dica Pratica
Consistencia e chave: Se voce usa "1.2M" em um card, use o mesmo formato em todos. Misturar "1.200.000" e "1.2M" na mesma tela confunde o usuario e dificulta comparacoes rapidas.
📈 Indicadores de Tendencia
Contexto temporal e direcao
Indicadores de tendencia mostram a direcao e magnitude da mudanca de uma metrica ao longo do tempo. Podem ser setas, percentuais de variacao, sparklines ou comparacoes com periodos anteriores.
Um numero sozinho nao tem significado. "R$ 100.000" e bom ou ruim? Depende se subiu 50% ou caiu 30%. Tendencias transformam dados estaticos em insights acionaveis.
🔄 Tipos de Indicadores
🎨 Cores Semanticas
⚠️ Cuidado: Nem sempre "subiu" = bom!
💻 Codigo: Indicador de Tendencia
<!-- Componente de Tendencia -->
<div class="flex items-center space-x-2">
<!-- Positivo (verde) -->
<span class="flex items-center text-emerald-400">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path d="M5.293 9.707l4-4a1 1 0 011.414 0l4 4"/>
</svg>
12.5%
</span>
<span class="text-neutral-500 text-sm">vs mes anterior</span>
</div>
<!-- Negativo (vermelho) -->
<div class="flex items-center text-red-400">
<svg class="w-4 h-4 mr-1 rotate-180" fill="currentColor" viewBox="0 0 20 20">
<path d="M5.293 9.707l4-4a1 1 0 011.414 0l4 4"/>
</svg>
8.3%
</div>
📱 Stat Cards e Metric Grids
Layouts padronizados e responsivos
Stat Cards sao componentes padronizados para exibir metricas. Metric Grids sao layouts que organizam multiplos cards de forma consistente.
Juntos, formam a "area de resumo executivo" do dashboard, geralmente no topo da pagina. Padronizacao e crucial - cards com tamanhos e estilos diferentes confundem o usuario.
📐 Layouts Responsivos
Desktop (4 colunas) - lg:grid-cols-4 ┌─────────┬─────────┬─────────┬─────────┐ │ Receita │ Clientes│ Pedidos │ Ticket │ │ R$1.2M │ 4.523 │ 1.234 │ R$ 890 │ └─────────┴─────────┴─────────┴─────────┘ Tablet (2 colunas) - sm:grid-cols-2 ┌─────────┬─────────┐ │ Receita │ Clientes│ ├─────────┼─────────┤ │ Pedidos │ Ticket │ └─────────┴─────────┘ Mobile (1 coluna) - grid-cols-1 ┌─────────┐ │ Receita │ ├─────────┤ │ Clientes│ ├─────────┤ │ Pedidos │ ├─────────┤ │ Ticket │ └─────────┘
👁️ Exemplo Visual (ao vivo)
💻 Codigo: Metric Grid Responsivo
<!-- Grid responsivo: 1 col mobile, 2 tablet, 4 desktop -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Card padrao -->
<div class="bg-dark-800 rounded-xl p-5 border border-dark-600">
<div class="flex items-center justify-between mb-3">
<span class="text-neutral-400 text-sm">Receita</span>
<span class="w-8 h-8 rounded-lg bg-blue-500/20
flex items-center justify-center">💰</span>
</div>
<p class="text-2xl font-bold mb-1">R$ 1.2M</p>
<p class="text-emerald-400 text-sm">▲ 12.5%</p>
</div>
<!-- Repetir para outros cards... -->
</div>
💡 Dica Pratica
Ordem importa: Coloque os KPIs mais importantes a esquerda (ou no topo no mobile). Usuarios leem da esquerda para direita - o primeiro card recebe mais atencao.
⚖️ Componentes de Comparacao
Barras de progresso, gauges e bullet charts
Componentes de Comparacao permitem visualizar dados lado a lado: atual vs meta, este mes vs mes anterior, produto A vs produto B.
Comparacao e fundamental para decisoes. Sem contexto comparativo, numeros sao apenas numeros. "Vendemos R$ 100k" so faz sentido comparando com a meta ou periodo anterior.
🧩 Tipos de Componentes Comparativos
💻 Codigo: Barra de Progresso com Meta
<!-- Barra de Progresso com Meta -->
<div class="bg-dark-800 rounded-xl p-6 border border-dark-600">
<div class="flex justify-between text-sm mb-2">
<span class="text-neutral-400">Progresso da Meta</span>
<span class="text-neutral-300">78% (R$ 780k / R$ 1M)</span>
</div>
<!-- Barra -->
<div class="h-3 bg-dark-700 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-blue-600 to-blue-400
rounded-full transition-all duration-500"
style="width: 78%"></div>
</div>
<!-- Legenda -->
<div class="flex justify-between text-xs mt-2 text-neutral-500">
<span>0</span>
<span>Meta: R$ 1M</span>
</div>
</div>
✅ Fazer vs ❌ Evitar
- • Mostrar claramente o que esta sendo comparado
- • Usar a mesma escala para comparacoes
- • Indicar unidades e periodo
- • Highlight na diferenca, nao nos valores
- • Escalas diferentes na mesma comparacao
- • Comparar metricas incompativeis
- • Omitir periodo ou contexto
- • Cores que nao indicam significado