Statistik

Statistik adalah sebuah label, sebuah nilai, dan secara opsional sebuah perubahan. statGroup() menyatukan beberapa di antaranya ke satu permukaan dengan pemisah di antaranya.

Statistik dasar

Halaman

204

Waktu build

1,1 dtk

JS klien

3,3 kB

statGroup(
  stat({ label: 'Halaman', value: '204' }),
  stat({ label: 'Waktu build', value: '1,1 dtk' }),
  stat({ label: 'JS klien', value: '3,3 kB' }),
)

Dengan perubahan

Perubahannya mengambil warna dari color — hijau untuk angka yang bergerak ke arah yang benar, merah untuk yang tidak. Jangan bergantung pada warna saja: pertahankan tandanya atau katanya.

Halaman

204

+8 minggu ini

Waktu build

1,1 dtk

−0,3 dtk

Bundel

9,9 kB

+1,2 kB

statGroup(
  stat({ label: 'Halaman', value: '204', change: '+8 minggu ini', color: 'success' }),
  stat({ label: 'Waktu build', value: '1,1 dtk', change: '−0,3 dtk', color: 'success' }),
  stat({ label: 'Bundel', value: '9,9 kB', change: '+1,2 kB', color: 'danger' }),
)

Dengan ikon

Penerapan

128

Kontributor

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

Teks bantuan

Lighthouse

100

aksesibilitas

Diukur pada setiap halaman berbahasa Inggris di CI.

Indeks Pagefind

204

Dibangun ulang di akhir setiap build.

statGroup(
  stat({
    label: 'Lighthouse',
    value: '100',
    change: 'aksesibilitas',
    color: 'success',
    help: 'Diukur pada setiap halaman berbahasa Inggris di CI.',
  }),
  stat({
    label: 'Indeks Pagefind',
    value: '204',
    help: 'Dibangun ulang di akhir setiap build.',
  }),
)

Berdiri sendiri

Satu statistik tidak butuh grup — ia hanya tidak punya permukaannya sendiri.

Total halaman

204

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

Kolom tetap

Statistik menyesuaikan diri secara bawaan. columns menyematkan jumlahnya ketika angkanya harus tetap dalam satu baris.

Lulus

215

Gagal

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

Dari data

Halaman

204

Aset

208

Total

9,7 MB

return (() => {
  const report = [
    { label: 'Halaman', value: 204 },
    { label: 'Aset', value: 208 },
    { label: 'Total', value: '9,7 MB' },
  ]

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

Props

Prop	Tipe	Bawaan	Deskripsi
`label`	`Child`	—	Apa yang dihitung angkanya.
`value`	`Child`	—	Angkanya sendiri, disusun dengan angka tabular.
`change`	`Child`	—	Selisih, diwarnai oleh color.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Mewarnai perubahan dan ikonnya.
`icon`	`Child`	—	Glif hiasan di atas labelnya.
`help`	`Child`	—	Baris yang lebih tenang di bawah semuanya.

statGroup() menerima columns — nilai grid-template-columns apa pun.