Stat

One measurement: label, value and how it moved. Which direction counts as healthy is a prop, because a rise in incidents is not a rise in deployments.

src/components/ui/stat.tsx

About

From the component's own source, where it was written.

A single measurement: label, value, and how it moved.

The direction of a change and whether that change is *good* are different questions, which is why goodDirection exists. Deployments rising is healthy; open incidents rising is not, and a component that colours every increase green would say the opposite of what the number means.

Install

npx astralyx-ui add stat

Usage

import { Stat } from '@/components/ui/stat'

<Stat label="Deployments" value={1482} delta={12.4} />
<Stat label="Open incidents" value={3} delta={2} goodDirection="down" />

Composer

Change the props and the source below follows.

Deployments

1,48212.4%

Props

label

value

delta

goodDirection

size

chart

tsx

<Stat
  label="Deployments"
  value={1482}
  delta={12.4}
  goodDirection="up"
  size="default"
  chart={<Sparkline values={series} variant="area" />}
/>

Examples

A row of measures

tsx

<Stat label="Deployments" value={1482} delta={12.4} chart={<Sparkline values={series} variant="area" />} />
<Stat label="Success rate" value={98.2} deltaSuffix="pp" delta={0.6} />
<Stat label="Open incidents" value={3} delta={2} goodDirection="down" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Stat`

A single measurement: label, value, and how it moved.

Extends Omit<ComponentProps<'div'>, 'title'>.

Prop	Type	Default	Description
label	ReactNode	required	What is measured, and the measurement.
value	ReactNode	required	What is measured, and the measurement.
delta	number	—	Signed change. The sign picks the arrow; the absolute value is printed, since the arrow already carries direction.
deltaSuffix	string	'%'	Unit printed after the delta.
goodDirection	'up' \| 'down' \| 'none'	'up'	Which way is healthy. Colours the delta green or red accordingly; `none` keeps it neutral.
icon	ReactNode	—	—
chart	ReactNode	—	Usually a Sparkline, rendered under the value.
hint	ReactNode	—	—
size	'sm' \| 'default' \| 'lg'	'default'	Scales the value type and the card padding together.
bordered	boolean	true	Draw the card. Turn off inside a container that already provides one.
animate	boolean	true	Count to the value on mount and on every change. Only applies when `value` is a number — a preformatted string has nothing to count through.