Statistic - Keep React

The Statistic component in the Keep React allows you to display statistical information in a visually appealing and informative manner. With customizable options for type, number format, and additional features, you can present data in a way that best suits your design requirements.

Default Statistic#

Default Statistic component displays a title with <Statistic.Title> component and a total number with <Statistic.Amount> component.

Members

7,381,237

Statistic With Progress Rate#

The Statistic with Progress Rate component offers a concise representation of numerical data along with a corresponding rate. It displays a title (<Statistic.Title>) followed by the count (<Statistic.Amount>) and a rate with (<Statistic.Rate>).

Members

7,381,237

1.5%

Statistic With Dollar Sign#

The showDollar prop is set to true, which indicates that the dollar sign should be shown next to the amount.

Members

$7,381,237

1.5%

Statistic With Filter Button#

The showFilter prop is set to true, indicating that a filter button should be displayed alongside the statistic.

Members

$7,381,237

1.5%

Statistic With Avatar#

The Statistic with Avatar component combines numerical data presentation with an accompanying avatar image.

$7,381,237

1.5%

Members

Statistic With Icon#

The Statistic with Icon component seamlessly integrates a meaningful icon with essential numeric data.

$7,381,237

3.5%

Members

API Reference#

Explore the available props for the statistic component

Property	Description	Type	Default
showDollar	Displays a dollar sign or currency symbol, if applicable.	boolean	false
showFilter	Indicates whether a filter option should be shown.	boolean	false
iconBg	Sets the background color variant for the icon.	primary success	primary
children	Child components and content to be placed within the statistic component.	ReactNode	Content
filterLabel	Filter label text	string	This Month
filterData	Filter Data for dropdown	string[]	['January','...']