Estadística

Una estadística es una etiqueta, un valor y opcionalmente un cambio. statGroup() junta varias en una sola superficie con separadores entre ellas.

Estadística básica

Páginas

204

Tiempo de compilación

1,1 s

JS en cliente

3,3 kB

statGroup(
  stat({ label: 'Páginas', value: '204' }),
  stat({ label: 'Tiempo de compilación', value: '1,1 s' }),
  stat({ label: 'JS en cliente', value: '3,3 kB' }),
)

Con cambio

El cambio toma su color de color: verde para un número que fue en la buena dirección, rojo para uno que no. No te apoyes solo en el color: conserva el signo o la palabra.

Páginas

204

+8 esta semana

Tiempo de compilación

1,1 s

−0,3 s

Bundle

9,9 kB

+1,2 kB

statGroup(
  stat({ label: 'Páginas', value: '204', change: '+8 esta semana', color: 'success' }),
  stat({ label: 'Tiempo de compilación', value: '1,1 s', change: '−0,3 s', color: 'success' }),
  stat({ label: 'Bundle', value: '9,9 kB', change: '+1,2 kB', color: 'danger' }),
)

Con iconos

Despliegues

128

Colaboradores

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

Texto de ayuda

Lighthouse

100

accesibilidad

Medido en cada página en inglés dentro de CI.

Índice de Pagefind

204

Se reconstruye al final de cada compilación.

statGroup(
  stat({
    label: 'Lighthouse',
    value: '100',
    change: 'accesibilidad',
    color: 'success',
    help: 'Medido en cada página en inglés dentro de CI.',
  }),
  stat({
    label: 'Índice de Pagefind',
    value: '204',
    help: 'Se reconstruye al final de cada compilación.',
  }),
)

Por su cuenta

Una estadística suelta no necesita grupo: sencillamente no tiene superficie propia.

Páginas totales

204

card(
  cardBody(stat({ label: 'Páginas totales', value: '204', change: '+8', color: 'success' })),
)

Columnas fijas

Las estadísticas se autoajustan por defecto. columns fija el número cuando los datos deben quedarse en una sola fila.

Correctas

215

Fallidas

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

Desde datos

Páginas

204

Recursos

208

Total

9,7 MB

return (() => {
  const report = [
    { label: 'Páginas', value: 204 },
    { label: 'Recursos', value: 208 },
    { label: 'Total', value: '9,7 MB' },
  ]

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

Props

Prop	Tipo	Por defecto	Descripción
`label`	`Child`	—	Qué cuenta el número.
`value`	`Child`	—	El número en sí, compuesto con cifras tabulares.
`change`	`Child`	—	Una variación, coloreada por color.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Da color al cambio y al icono.
`icon`	`Child`	—	Glifo decorativo sobre la etiqueta.
`help`	`Child`	—	Una línea más discreta bajo todo lo demás.

statGroup() admite columns: cualquier valor de grid-template-columns.