İstatistik

İstatistik bir etiket, bir değer ve isteğe bağlı olarak bir değişimdir. statGroup() birkaçını, aralarında ayırıcılarla tek bir yüzeyde birleştirir.

Temel istatistik

Sayfalar

204

Derleme süresi

1,1 sn

İstemci JS

3,3 kB

statGroup(
  stat({ label: 'Sayfalar', value: '204' }),
  stat({ label: 'Derleme süresi', value: '1,1 sn' }),
  stat({ label: 'İstemci JS', value: '3,3 kB' }),
)

Bir değişimle

Değişim rengini color propundan alır — doğru yöne giden bir sayı için yeşil, gitmeyen için kırmızı. Yalnızca renge güvenmeyin: işareti ya da sözcüğü koruyun.

Sayfalar

204

bu hafta +8

Derleme süresi

1,1 sn

−0,3 sn

Paket

9,9 kB

+1,2 kB

statGroup(
  stat({ label: 'Sayfalar', value: '204', change: 'bu hafta +8', color: 'success' }),
  stat({ label: 'Derleme süresi', value: '1,1 sn', change: '−0,3 sn', color: 'success' }),
  stat({ label: 'Paket', value: '9,9 kB', change: '+1,2 kB', color: 'danger' }),
)

Simgelerle

Dağıtımlar

128

Katkıcılar

statGroup(
  stat({
    label: 'Dağıtımlar',
    value: '128',
    color: 'primary',
    icon: icon('zap'),
  }),
  stat({
    label: 'Katkıcılar',
    value: '17',
    color: 'primary',
    icon: icon('user'),
  }),
)

Yardım metni

Lighthouse

100

erişilebilirlik

CI’da her İngilizce sayfada ölçülür.

Pagefind dizini

204

Her derlemenin sonunda yeniden kurulur.

statGroup(
  stat({
    label: 'Lighthouse',
    value: '100',
    change: 'erişilebilirlik',
    color: 'success',
    help: 'CI’da her İngilizce sayfada ölçülür.',
  }),
  stat({
    label: 'Pagefind dizini',
    value: '204',
    help: 'Her derlemenin sonunda yeniden kurulur.',
  }),
)

Tek başına

Tek bir istatistiğin gruba ihtiyacı yoktur — yalnızca kendine ait bir yüzeyi olmaz.

Toplam sayfa

204

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

Sabit sütunlar

İstatistikler varsayılan olarak kendiliğinden sığar. Sayıların tek satırda kalması gerektiğinde columns sayıyı sabitler.

Geçen

215

Başarısız

statGroup({ columns: 'repeat(2, 1fr)' },
  stat({ label: 'Geçen', value: '215', color: 'success' }),
  stat({ label: 'Başarısız', value: '0', color: 'success' }),
)

Veriden

Sayfalar

204

Varlıklar

208

Toplam

9,7 MB

return (() => {
  const report = [
    { label: 'Sayfalar', value: 204 },
    { label: 'Varlıklar', value: 208 },
    { label: 'Toplam', value: '9,7 MB' },
  ]

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

Proplar

Prop	Tür	Varsayılan	Açıklama
`label`	`Child`	—	Sayının neyi saydığı.
`value`	`Child`	—	Tablo rakamlarıyla dizilmiş sayının kendisi.
`change`	`Child`	—	color ile renklenen bir fark.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Değişimi ve simgeyi renklendirir.
`icon`	`Child`	—	Etiketin üstündeki süs glifi.
`help`	`Child`	—	Geri kalan her şeyin altındaki daha sessiz satır.

statGroup() şunu alır: columns — herhangi bir grid-template-columns değeri.