Stat

Stat presents a key metric in a compact card with an optional trend and supporting caption.

Usage

<script>
	import { Stat } from 'deskblocks';
</script>

<Stat label="Open tickets" value="24" />

With a caption

The sub prop adds a muted helper line under the value.

<Stat label="Avg. first response" value="1h 12m" sub="last 7 days" />

Trend

Pass trend to display a delta pill. The direction sets its arrow and color: up uses success, down uses danger and flat uses neutral. Pass the already formatted change as value .

<div
	style="display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 12px; align-items: start;"
>
	<Stat
		label="Resolved today"
		value="38"
		trend={{ direction: 'up', value: '+12%' }}
		sub="vs yesterday"
	/>
	<Stat
		label="SLA compliance"
		value="86%"
		trend={{ direction: 'down', value: '-8%' }}
		sub="vs last week"
	/>
	<Stat label="Happiness" value="94%" trend={{ direction: 'flat', value: '±0%' }} />
</div>

Cards stretch to the row height (align-self: stretch ), so stats placed side by side in a grid stay equal-height even when some have no caption.

Custom value slot

Use the value slot instead of the value prop when the metric area needs markup, such as a spinner while the figure loads.

<script>
	import { Stat, Spinner } from 'deskblocks';
</script>

<Stat label="Open tickets">
	<Spinner slot="value" size="small" />
</Stat>

Slots

• value : replaces the value text, for example a Spinner while the figure loads.

Props

type StatTrend = {
	direction: 'up' | 'down' | 'flat';
	value: string;
};