Kennzahl

Eine Kennzahl besteht aus Label, Wert und wahlweise einer Veränderung. statGroup() fügt mehrere zu einer Fläche zusammen, mit Trennlinien dazwischen.

Einfache Kennzahl

Seiten

204

Build-Zeit

1,1 s

Client-JS

3,3 kB

statGroup(
  stat({ label: 'Seiten', value: '204' }),
  stat({ label: 'Build-Zeit', value: '1,1 s' }),
  stat({ label: 'Client-JS', value: '3,3 kB' }),
)

Mit Veränderung

Die Veränderung nimmt ihre Farbe aus color — grün für eine Zahl, die in die richtige Richtung ging, rot für eine, die es nicht tat. Verlass dich nicht auf die Farbe allein: behalte das Vorzeichen oder das Wort.

Seiten

204

+8 diese Woche

Build-Zeit

1,1 s

−0,3 s

Bundle

9,9 kB

+1,2 kB

statGroup(
  stat({ label: 'Seiten', value: '204', change: '+8 diese Woche', color: 'success' }),
  stat({ label: 'Build-Zeit', value: '1,1 s', change: '−0,3 s', color: 'success' }),
  stat({ label: 'Bundle', value: '9,9 kB', change: '+1,2 kB', color: 'danger' }),
)

Mit Icons

Deployments

128

Mitwirkende

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

Hilfetext

Lighthouse

100

Barrierefreiheit

In der CI auf jeder englischen Seite gemessen.

Pagefind-Index

204

Wird am Ende jedes Builds neu erzeugt.

statGroup(
  stat({
    label: 'Lighthouse',
    value: '100',
    change: 'Barrierefreiheit',
    color: 'success',
    help: 'In der CI auf jeder englischen Seite gemessen.',
  }),
  stat({
    label: 'Pagefind-Index',
    value: '204',
    help: 'Wird am Ende jedes Builds neu erzeugt.',
  }),
)

Für sich allein

Eine einzelne Kennzahl braucht keine Gruppe — sie hat dann nur keine eigene Fläche.

Seiten insgesamt

204

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

Feste Spalten

Kennzahlen passen sich standardmäßig selbst ein. columns legt die Anzahl fest, wenn die Zahlen auf einer Reihe bleiben sollen.

Bestanden

215

Fehlgeschlagen

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

Aus Daten

Seiten

204

Assets

208

Gesamt

9,7 MB

return (() => {
  const report = [
    { label: 'Seiten', value: 204 },
    { label: 'Assets', value: 208 },
    { label: 'Gesamt', value: '9,7 MB' },
  ]

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

Props

Prop	Typ	Standard	Beschreibung
`label`	`Child`	—	Was die Zahl zählt.
`value`	`Child`	—	Die Zahl selbst, in Tabellenziffern gesetzt.
`change`	`Child`	—	Eine Veränderung, eingefärbt über color.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	—	Färbt Veränderung und Icon.
`icon`	`Child`	—	Dekoratives Zeichen über dem Label.
`help`	`Child`	—	Eine leisere Zeile unter allem anderen.

statGroup() nimmt columns — jeden grid-template-columns-Wert.