Estatística

Uma estatística é uma etiqueta, um valor e, opcionalmente, uma variação. O statGroup() junta várias numa só superfície, com divisórias entre elas.

Estatística básica

Páginas

204

Tempo de construção

1,1 s

JS no cliente

3,3 kB

statGroup(
  stat({ label: 'Páginas', value: '204' }),
  stat({ label: 'Tempo de construção', value: '1,1 s' }),
  stat({ label: 'JS no cliente', value: '3,3 kB' }),
)

Com variação

A variação tira a cor do color — verde para um número que foi no bom sentido, vermelho para um que não. Não te fies só na cor: mantém o sinal ou a palavra.

Páginas

204

+8 esta semana

Tempo de construção

1,1 s

−0,3 s

Bundle

9,9 kB

+1,2 kB

statGroup(
  stat({ label: 'Páginas', value: '204', change: '+8 esta semana', color: 'success' }),
  stat({ label: 'Tempo de construção', value: '1,1 s', change: '−0,3 s', color: 'success' }),
  stat({ label: 'Bundle', value: '9,9 kB', change: '+1,2 kB', color: 'danger' }),
)

Com ícones

Publicações

128

Contribuidores

statGroup(
  stat({
    label: 'Publicações',
    value: '128',
    color: 'primary',
    icon: icon('zap'),
  }),
  stat({
    label: 'Contribuidores',
    value: '17',
    color: 'primary',
    icon: icon('user'),
  }),
)

Texto de ajuda

Lighthouse

100

acessibilidade

Medido em todas as páginas em inglês na CI.

Índice Pagefind

204

Reconstruído no fim de cada construção.

statGroup(
  stat({
    label: 'Lighthouse',
    value: '100',
    change: 'acessibilidade',
    color: 'success',
    help: 'Medido em todas as páginas em inglês na CI.',
  }),
  stat({
    label: 'Índice Pagefind',
    value: '204',
    help: 'Reconstruído no fim de cada construção.',
  }),
)

Sozinha

Uma estatística isolada não precisa de grupo — apenas não tem superfície própria.

Total de páginas

204

card(
  cardBody(stat({ label: 'Total de páginas', value: '204', change: '+8', color: 'success' })),
)

Colunas fixas

As estatísticas ajustam-se sozinhas por predefinição. O columns fixa a contagem quando os números devem ficar numa só linha.

A passar

215

A falhar

statGroup({ columns: 'repeat(2, 1fr)' },
  stat({ label: 'A passar', value: '215', color: 'success' }),
  stat({ label: 'A falhar', value: '0', color: 'success' }),
)

A partir de dados

Páginas

204

Recursos

208

Total

9,7 MB

return (() => {
  const report = [
    { label: 'Páginas', value: 204 },
    { label: 'Recursos', value: 208 },
    { label: 'Total', value: '9,7 MB' },
  ]

  return statGroup(
    report.map((entry) => stat({ label: entry.label, value: String(entry.value) })),
  )
})()

Props

Prop	Tipo	Predefinição	Descrição
`label`	`Child`	—	O que o número conta.
`value`	`Child`	—	O número em si, composto em algarismos tabulares.
`change`	`Child`	—	Uma variação, colorida pelo color.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Colore a variação e o ícone.
`icon`	`Child`	—	Símbolo decorativo por cima da etiqueta.
`help`	`Child`	—	Uma linha mais discreta por baixo de tudo o resto.

statGroup() aceita columns — qualquer valor de grid-template-columns.