Statistica

Una statistica è un’etichetta, un valore e facoltativamente una variazione. statGroup() ne unisce diverse su un’unica superficie, con dei divisori in mezzo.

Statistica di base

Pagine

204

Tempo di build

1,1s

JS client

3,3 kB

statGroup(
  stat({ label: 'Pagine', value: '204' }),
  stat({ label: 'Tempo di build', value: '1,1s' }),
  stat({ label: 'JS client', value: '3,3 kB' }),
)

Con una variazione

La variazione prende il colore da color — verde per un numero che è andato nella direzione giusta, rosso per uno che non l’ha fatto. Non affidarti al solo colore: tieni il segno o la parola.

Pagine

204

+8 questa settimana

Tempo di build

1,1s

−0,3s

Bundle

9,9 kB

+1,2 kB

statGroup(
  stat({ label: 'Pagine', value: '204', change: '+8 questa settimana', color: 'success' }),
  stat({ label: 'Tempo di build', value: '1,1s', change: '−0,3s', color: 'success' }),
  stat({ label: 'Bundle', value: '9,9 kB', change: '+1,2 kB', color: 'danger' }),
)

Con icone

Deploy

128

Contributori

statGroup(
  stat({
    label: 'Deploy',
    value: '128',
    color: 'primary',
    icon: icon('zap'),
  }),
  stat({
    label: 'Contributori',
    value: '17',
    color: 'primary',
    icon: icon('user'),
  }),
)

Testo di aiuto

Lighthouse

100

accessibilità

Misurato su ogni pagina inglese in CI.

Indice Pagefind

204

Ricostruito alla fine di ogni build.

statGroup(
  stat({
    label: 'Lighthouse',
    value: '100',
    change: 'accessibilità',
    color: 'success',
    help: 'Misurato su ogni pagina inglese in CI.',
  }),
  stat({
    label: 'Indice Pagefind',
    value: '204',
    help: 'Ricostruito alla fine di ogni build.',
  }),
)

Da sola

Una singola statistica non ha bisogno di un gruppo — semplicemente non ha una superficie propria.

Pagine totali

204

card(
  cardBody(stat({ label: 'Pagine totali', value: '204', change: '+8', color: 'success' })),
)

Colonne fisse

Le statistiche si adattano automaticamente per impostazione predefinita. columns fissa il conteggio quando i numeri devono restare su una sola riga.

Passate

215

Fallite

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

Dai dati

Pagine

204

Risorse

208

Totale

9,7 MB

return (() => {
  const report = [
    { label: 'Pagine', value: 204 },
    { label: 'Risorse', value: 208 },
    { label: 'Totale', value: '9,7 MB' },
  ]

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

Props

Prop	Tipo	Predefinito	Descrizione
`label`	`Child`	—	Che cosa conta il numero.
`value`	`Child`	—	Il numero stesso, composto in cifre tabulari.
`change`	`Child`	—	Una differenza, colorata da color.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Colora la variazione e l’icona.
`icon`	`Child`	—	Glifo decorativo sopra l’etichetta.
`help`	`Child`	—	Una riga più sommessa sotto tutto il resto.

statGroup() accetta columns — qualunque valore di grid-template-columns.