Vox Mente
Navegação

Componentes

Stat Card

beta

Um número que importa, com rótulo e variação. O tom da variação é sobre a leitura do número, não sobre a direção da seta.

Ainda não é estável porque Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/stat-card

Orientação

Um número que importa, com rótulo e variação. O tom da variação é sobre a leitura do número, não sobre a direção da seta: faltas caindo é bom.

Quando usar

  • O número resume o estado de alguma coisa e cabe sozinho na decisão de quem olha.
  • A variação em relação a um período anterior muda o que a pessoa vai fazer.
  • São poucos indicadores, no topo de uma tela, antes do detalhe.

Quando não usar

  • Para a evolução ao longo do tempo. Isso é Chart — um cartão não mostra tendência.
  • Para empilhar dez métricas: acima de quatro ou cinco, ninguém lê nenhuma.
  • Para número que não leva a ação. Indicador sem consequência é ruído com borda.
Playground
Alunos ativos
122
+8 na semana
<StatCard>
  <StatCardLabel>Alunos ativos</StatCardLabel>
  <StatCardValue>122</StatCardValue>
  <StatCardDelta>+8 na semana</StatCardDelta>
</StatCard>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
StatCard
  └─ StatCardLabel
  └─ StatCardValue
  └─ StatCardDelta
StatCard
  └─ StatCardLabel
  └─ StatCardValue
  └─ StatCardDelta

Uso

Indicador agregado de dashboard. Uma métrica, um rótulo, e opcionalmente uma variação.
Alunos ativos
122

Em grade

O uso mais comum: uma fileira de cartões no topo de um painel. `tabular-nums` no valor evita que a fileira dance quando os números mudam de largura.
Alunos ativos
122
Sessões realizadas
47

Com variação

`StatCardDelta` diz como ler o número, não para onde ele foi. `tone="positive"` numa queda de inadimplência está certo — quem compõe decide o que é bom.
Evolução média
84,5%
+2,1 pontos
Inadimplência
3,2%
-1,4 pontos

Tons da variação

Quatro tons: `neutral`, `positive`, `negative`, `warning`. Nenhum deles é fixo à direção da seta — todos dependem do que o número significa no contexto.
Sessões realizadas
47
meta de 60
Correções pendentes
3
há mais de 2 dias
Evasão da turma
4
+2 na semana
Alunos ativos
122
+8 na semana

Acessibilidade

O que o componente já garante, e o que continua sendo responsabilidade da tela.
  • O rótulo precisa ser lido junto com o valor; número solto não significa nada fora do contexto visual.
  • A variação não pode depender só de cor e de seta — o sinal precisa estar no texto.
  • Se o número tem unidade, a unidade faz parte do valor anunciado.

Em contexto de produto

Onde isto aparece numa tela real da Vox Mente, e não numa vitrine.

Abrem o painel do professor: os indicadores da operação vêm antes da tabela, porque respondem a pergunta mais rápida.

Ver o painel do professor

Componentes relacionados

Vizinhos que resolvem o problema parecido. Os links são resolvidos contra o registro.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

StatCardDelta

PropTipoPadrão
tone"warning" | "neutral" | "positive" | "negative" | null"neutral"

Também aceita as props de React, incluindo className e os atributos de DOM.

StatCard, StatCardLabel, StatCardValue não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Origem do dado
  • Orientação, acessibilidade e relacionados: documentação
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css