Показатель

Показатель — это подпись, значение и, при желании, изменение. statGroup() собирает несколько на одну поверхность с разделителями между ними.

Простой показатель

Страниц

204

Время сборки

1,1 с

JS в клиенте

3,3 кБ

statGroup(
  stat({ label: 'Страниц', value: '204' }),
  stat({ label: 'Время сборки', value: '1,1 с' }),
  stat({ label: 'JS в клиенте', value: '3,3 кБ' }),
)

С изменением

Изменение берёт цвет из color: зелёный — для числа, которое пошло в нужную сторону, красный — для обратного. Не полагайтесь на один лишь цвет: оставляйте знак или слово.

Страниц

204

+8 за неделю

Время сборки

1,1 с

−0,3 с

Бандл

9,9 кБ

+1,2 кБ

statGroup(
  stat({ label: 'Страниц', value: '204', change: '+8 за неделю', color: 'success' }),
  stat({ label: 'Время сборки', value: '1,1 с', change: '−0,3 с', color: 'success' }),
  stat({ label: 'Бандл', value: '9,9 кБ', change: '+1,2 кБ', color: 'danger' }),
)

С иконками

Развёртываний

128

Участников

statGroup(
  stat({
    label: 'Развёртываний',
    value: '128',
    color: 'primary',
    icon: icon('zap'),
  }),
  stat({
    label: 'Участников',
    value: '17',
    color: 'primary',
    icon: icon('user'),
  }),
)

Текст подсказки

Lighthouse

100

доступность

Измеряется в CI на каждой английской странице.

Индекс Pagefind

204

Пересобирается в конце каждой сборки.

statGroup(
  stat({
    label: 'Lighthouse',
    value: '100',
    change: 'доступность',
    color: 'success',
    help: 'Измеряется в CI на каждой английской странице.',
  }),
  stat({
    label: 'Индекс Pagefind',
    value: '204',
    help: 'Пересобирается в конце каждой сборки.',
  }),
)

Сам по себе

Одиночному показателю группа не нужна — просто у него не будет собственной поверхности.

Всего страниц

204

card(
  cardBody(stat({ label: 'Всего страниц', value: '204', change: '+8', color: 'success' })),
)

Фиксированные колонки

По умолчанию показатели подстраиваются сами. columns закрепляет их количество, когда числа должны остаться в одну строку.

Проходят

215

Падают

statGroup({ columns: 'repeat(2, 1fr)' },
  stat({ label: 'Проходят', value: '215', color: 'success' }),
  stat({ label: 'Падают', value: '0', color: 'success' }),
)

Из данных

Страницы

204

Ресурсы

208

Всего

9,7 МБ

return (() => {
  const report = [
    { label: 'Страницы', value: 204 },
    { label: 'Ресурсы', value: 208 },
    { label: 'Всего', value: '9,7 МБ' },
  ]

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

Пропсы

Проп	Тип	По умолчанию	Описание
`label`	`Child`	—	Что именно считает число.
`value`	`Child`	—	Само число, набранное табличными цифрами.
`change`	`Child`	—	Изменение, окрашенное по color.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Окрашивает изменение и иконку.
`icon`	`Child`	—	Декоративный значок над подписью.
`help`	`Child`	—	Более тихая строка под всем остальным.

statGroup() принимает columns — любое значение grid-template-columns.