Statistic

A labeled number with thousands separators, fixed precision, prefix and suffix.

import { Statistic } from '@lobehub/ui/base-ui';

NPM Source Edit

Data Display

Basic

Loading preview

APIs

Statistic properties

classNames: { title?: string; value?: string; }
formatter: (value: number | string | undefined) => ReactNode
loading: boolean
Defaults to false.
precision: number
prefix: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
ref: null | (instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLDivElement | null>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
styles: { title?: CSSProperties; value?: CSSProperties; }
suffix: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
title: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
value: string | number

Also accepts all native HTML and ARIA attributes.

Numbers format through Intl.NumberFormat('en-US'): thousands separators always, precision fixes the decimal places. Strings render unchanged. formatter replaces the built-in formatting. loading swaps the value for a skeleton.

Migrating from antd Statistic

valueStyle → styles.value.
groupSeparator, decimalSeparator, Statistic.Countdown and Statistic.Timer are not supported.