Statistique

Une statistique, c’est un libellé, une valeur et éventuellement une variation. statGroup() en réunit plusieurs sur une même surface, séparées par des filets.

Statistique de base

Pages

204

Temps de build

1,1 s

JS client

3,3 ko

statGroup(
  stat({ label: 'Pages', value: '204' }),
  stat({ label: 'Temps de build', value: '1,1 s' }),
  stat({ label: 'JS client', value: '3,3 ko' }),
)

Avec une variation

La variation prend sa couleur de color — vert pour un chiffre parti dans le bon sens, rouge sinon. Ne comptez pas sur la couleur seule : gardez le signe ou le mot.

Pages

204

+8 cette semaine

Temps de build

1,1 s

−0,3 s

Bundle

9,9 ko

+1,2 ko

statGroup(
  stat({ label: 'Pages', value: '204', change: '+8 cette semaine', color: 'success' }),
  stat({ label: 'Temps de build', value: '1,1 s', change: '−0,3 s', color: 'success' }),
  stat({ label: 'Bundle', value: '9,9 ko', change: '+1,2 ko', color: 'danger' }),
)

Avec des icônes

Déploiements

128

Contributeurs

statGroup(
  stat({
    label: 'Déploiements',
    value: '128',
    color: 'primary',
    icon: icon('zap'),
  }),
  stat({
    label: 'Contributeurs',
    value: '17',
    color: 'primary',
    icon: icon('user'),
  }),
)

Texte d’aide

Lighthouse

100

accessibilité

Mesuré sur chaque page anglaise dans la CI.

Index Pagefind

204

Reconstruit à la fin de chaque build.

statGroup(
  stat({
    label: 'Lighthouse',
    value: '100',
    change: 'accessibilité',
    color: 'success',
    help: 'Mesuré sur chaque page anglaise dans la CI.',
  }),
  stat({
    label: 'Index Pagefind',
    value: '204',
    help: 'Reconstruit à la fin de chaque build.',
  }),
)

Toute seule

Une statistique isolée n’a pas besoin de groupe — elle n’a simplement pas de surface à elle.

Pages au total

204

card(
  cardBody(stat({ label: 'Pages au total', value: '204', change: '+8', color: 'success' })),
)

Colonnes fixes

Les statistiques s’auto-ajustent par défaut. columns fige leur nombre quand les chiffres doivent rester sur une seule rangée.

Réussis

215

Échoués

statGroup({ columns: 'repeat(2, 1fr)' },
  stat({ label: 'Réussis', value: '215', color: 'success' }),
  stat({ label: 'Échoués', value: '0', color: 'success' }),
)

À partir de données

Pages

204

Ressources

208

Total

9,7 Mo

return (() => {
  const report = [
    { label: 'Pages', value: 204 },
    { label: 'Ressources', value: 208 },
    { label: 'Total', value: '9,7 Mo' },
  ]

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

Props

Prop	Type	Défaut	Description
`label`	`Child`	—	Ce que le chiffre compte.
`value`	`Child`	—	Le chiffre lui-même, en chiffres tabulaires.
`change`	`Child`	—	Un delta, coloré par color.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Colore la variation et l’icône.
`icon`	`Child`	—	Glyphe décoratif au-dessus du libellé.
`help`	`Child`	—	Une ligne plus discrète sous le reste.

statGroup() prend columns — n’importe quelle valeur grid-template-columns.