Catman · Charts

Micro stat

The figures under or beside a chart. ChangeIndicator is a movement with its verdict, toned by whether up is good or bad. MicroStat is a labelled figure. Both explain themselves in a tooltip.

@twelfth/micro-statuitooltip@twelfth/market-side

vs LY ▲6.2%

Examples

A rise is good news

vs LY ▲6.2%vs fcst ▼9%vs plan flat

A rise is bad news

MAPE ▲7 ptsdays out of stock ▲2aged stock ▼4.1%

Labelled figures

MAPE 11%reorder in 2 wksOTB $42k

Installation

1. Add the block. It brings what it builds on (tooltip, market-side) with it.
terminal
```
npx shadcn@latest add https://ui.twelfth.ai/r/micro-stat.json
```
2. Optional: register the namespace in components.json to write npx shadcn add @twelfth/micro-stat from then on.
components.json
```
{
  "registries": {
    "@twelfth": "https://ui.twelfth.ai/r/{name}.json"
  }
}
```

API reference

ChangeIndicator

Prop	Type	Default	Description
value*	number \| null	—	Signed change; null renders nothing.
higherIs*	"better" \| "worse"	—	Whether a rise is good news.
label	string	—	What moved, e.g. "vs LY".
format	(magnitude) => string	—	Formats the size of the change.
flatWithin	number	0	Changes this small read "flat".
strongAt	number	—	A worsening at least this large gets a filled chip.
hint	ReactNode	—	Explains how it was measured, in a tooltip.

MicroStat

Prop	Type	Default	Description
label*	ReactNode	—	e.g. "OTB".
value*	ReactNode	—	e.g. "$42k".
hint	ReactNode	—	Tooltip sentence.