Stat

Stat apresenta uma métrica e seu movimento recente. Use-o para um número que precisa de tendência; use Badge quando a pergunta for o status atual de algo próximo, não uma variação medida.

Exemplos

Métricas lidas em conjunto

Coloque stats relacionados em uma grade que você controla. Mantenha o mesmo período de comparação em cada delta, ou valores que parecem comparáveis passarão a significar coisas diferentes em silêncio.

Monthly revenue$48,240↑ 12%

New customers328↑ 8%

Support tickets24↓ 3%

Direção e delta

direction fornece a seta e sua cor, então passe delta="12%", não uma seta escrita à mão. Ele segue a direção que você passa, não o sinal do texto; para churn ou latência, passe down para um número caindo e deixe claro em um texto próximo se isso é bom ou ruim.

Growing1,204↑ 12%

Falling68↓ 4%

Unchanged94%→ 0%

Quando usar

Use Stat para um resultado numérico em destaque cuja variação em um período conhecido ajude alguém a decidir.

Prefira outro componente quando:

Você está marcando um estado atual — use Badge, que rotula um status, não uma tendência.
As pessoas precisam comparar muitos registros e campos — use Table.
O número ainda está carregando — use Skeleton no formato da métrica final até o valor existir.

Acessibilidade

Stat renderiza uma <div> simples com spans de rótulo e valor. Ele não tem semântica de <dl>, então um leitor de tela lê primeiro o rótulo e depois o valor.
O delta opcional vem depois do valor e inclui uma seta visível. Mantenha o texto da variação significativo; cor e direção da seta devem confirmá-lo, não carregar a mensagem inteira.
Stat não tem elemento interativo nem comportamento de foco. Coloque-o perto do título ou região que explica a métrica e seu período de referência.

API e código

Nome	Tipo	Obrigatória	Descrição
`label`	`ReactNode`	Obrigatória	Label describing the metric.
`value`	`ReactNode`	Obrigatória	Prominent metric value.
`delta`	`ReactNode`	—	Optional change text.
`direction`	`'up' \| 'down' \| 'flat'`	—	Change direction and color. Default `"flat"`.

O delta carrega a classe de direção e a seta como texto visível:

html

<div class="lyra-stat">
  <span class="lyra-stat__label">Receita mensal</span>
  <span class="lyra-stat__value">US$ 48.240</span>
  <span class="lyra-stat__delta lyra-stat__delta--up">↑ 12%</span>
</div>

<lyra:stat> Gerado do lyra-ds/blade v0.10.0.

Prop	Padrão	Obrigatória	Valores de exemplo
`direction`	`'flat'`	—	`down` `flat` `up`

blade

<lyra:stat direction="up">
    <x-slot:label>Monthly active users</x-slot:label>
    <x-slot:value>12,480</x-slot:value>
    <x-slot:delta>8.2% vs. last month</x-slot:delta>
</lyra:stat>