Statistic

Display statistic number.

When to use

When want to highlight some data.
When want to display statistic data with description.

Examples

Basic

Simplest Usage.

Animated number

Animated number with react-countup.

Timer

Timer component.

Unit

Add unit through prefix and suffix.

In Card

Display statistic data in Card.

Custom semantic dom styling

You can customize the semantic dom style of the Statistic by passing objects/functions through classNames and styles.

API

Statistic, Statistic.Timer, and Statistic.Countdown are exported from @ceebee/ui/client.

Statistic

Property	Description	Type	Default	Version
`classNames`	Customize class for each semantic structure inside the Statistic component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props }) => Record<SemanticDOM, string>`	`-`	—
`decimalSeparator`	The decimal separator	`string`	`.`	—
`formatter`	Customize value display logic	`(value) => ReactNode`	`-`	—
`groupSeparator`	Group separator	`string`	`,`	—
`loading`	Loading status of Statistic	`boolean`	`false`	4.8.0
`precision`	The precision of input value	`number`	`-`	—
`prefix`	The prefix node of value	`ReactNode`	`-`	—
`styles`	Customize inline style for each semantic structure inside the Statistic component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props }) => Record<SemanticDOM, CSSProperties>`	`-`	—
`suffix`	The suffix node of value	`ReactNode`	`-`	—
`title`	Display title	`ReactNode`	`-`	—
`value`	Display value	`string \| number`	`-`	—
`valueStyle`	Set value section style, please use styles.content instead	`CSSProperties`	`-`	—
`format`	Format as dayjs	`string`	`HH:mm:ss`	—
`prefix`	The prefix node of value	`ReactNode`	`-`	—
`suffix`	The suffix node of value	`ReactNode`	`-`	—
`title`	Display title	`ReactNode`	`-`	—
`value`	Set target countdown time	`number`	`-`	—
`valueStyle`	Set value section style	`CSSProperties`	`-`	—
`onFinish`	Trigger when time's up	`() => void`	`-`	—
`onChange`	Trigger when time's changing	`(value: number) => void`	`-`	4.16.0
`type`	Timer direction, count down or count up	`countdown \| countup`	`-`	—
`format`	Format as dayjs	`string`	`HH:mm:ss`	—
`prefix`	The prefix node of value	`ReactNode`	`-`	—
`suffix`	The suffix node of value	`ReactNode`	`-`	—
`title`	Display title	`ReactNode`	`-`	—
`value`	Target time for countdown, or start time for countup (timestamp in ms)	`number`	`-`	—
`valueStyle`	Set value section style	`CSSProperties`	`-`	—
`onFinish`	Trigger when time's up, only called when type is countdown	`() => void`	`-`	—
`onChange`	Trigger when time's changing	`(value: number) => void`	`-`	—