Statystyka

Statystyka to etykieta, wartość i opcjonalnie zmiana. statGroup() łączy kilka na jednej powierzchni, z separatorami pomiędzy.

Podstawowa statystyka

Strony

204

Czas buildu

1,1s

JS klienta

3,3 kB

statGroup(
  stat({ label: 'Strony', value: '204' }),
  stat({ label: 'Czas buildu', value: '1,1s' }),
  stat({ label: 'JS klienta', value: '3,3 kB' }),
)

Ze zmianą

Zmiana bierze kolor z color — zielony dla liczby, która poszła we właściwą stronę, czerwony dla tej, która nie. Nie polegaj na samym kolorze: zostaw znak albo słowo.

Strony

204

+8 w tym tygodniu

Czas buildu

1,1s

−0,3s

Paczka

9,9 kB

+1,2 kB

statGroup(
  stat({ label: 'Strony', value: '204', change: '+8 w tym tygodniu', color: 'success' }),
  stat({ label: 'Czas buildu', value: '1,1s', change: '−0,3s', color: 'success' }),
  stat({ label: 'Paczka', value: '9,9 kB', change: '+1,2 kB', color: 'danger' }),
)

Z ikonami

Wdrożenia

128

Współtwórcy

statGroup(
  stat({
    label: 'Wdrożenia',
    value: '128',
    color: 'primary',
    icon: icon('zap'),
  }),
  stat({
    label: 'Współtwórcy',
    value: '17',
    color: 'primary',
    icon: icon('user'),
  }),
)

Tekst pomocy

Lighthouse

100

dostępność

Mierzone na każdej angielskiej stronie w CI.

Indeks Pagefind

204

Przebudowywany na końcu każdego buildu.

statGroup(
  stat({
    label: 'Lighthouse',
    value: '100',
    change: 'dostępność',
    color: 'success',
    help: 'Mierzone na każdej angielskiej stronie w CI.',
  }),
  stat({
    label: 'Indeks Pagefind',
    value: '204',
    help: 'Przebudowywany na końcu każdego buildu.',
  }),
)

Sama z siebie

Pojedyncza statystyka nie potrzebuje grupy — po prostu nie ma wtedy własnej powierzchni.

Wszystkich stron

204

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

Stałe kolumny

Statystyki domyślnie dopasowują się same. columns ustala ich liczbę, gdy liczby mają zostać w jednym wierszu.

Zaliczone

215

Niezaliczone

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

Z danych

Strony

204

Zasoby

208

Razem

9,7 MB

return (() => {
  const report = [
    { label: 'Strony', value: 204 },
    { label: 'Zasoby', value: 208 },
    { label: 'Razem', value: '9,7 MB' },
  ]

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

Propsy

Prop	Typ	Domyślnie	Opis
`label`	`Child`	—	Co liczy ta liczba.
`value`	`Child`	—	Sama liczba, złożona cyframi tabelarycznymi.
`change`	`Child`	—	Różnica, pokolorowana przez color.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Koloruje zmianę i ikonę.
`icon`	`Child`	—	Ozdobny znak nad etykietą.
`help`	`Child`	—	Cichszy wiersz pod resztą.

statGroup() przyjmuje columns — dowolną wartość grid-template-columns.