The big_number component

A component to display key metrics or statistics with optional description, change indicator, and progress bar. Useful in dashboards.

Introduced in SQLPage v0.28.0.

Top-level parameters

name	type	description
class	TEXT	class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.
columns	INTEGER	The number of columns to display the big numbers in (default is one column per item).
id	TEXT	id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).

Row-level parameters

name	required	type	description
value	REQUIRED	TEXT	The main value to be displayed prominently.
change_percent		INTEGER	The percentage change in value (e.g., 7 for 7% increase, -8 for 8% decrease).
class		TEXT	class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.
color		COLOR	The color of the card
description		TEXT	A description or additional context for the big number.
dropdown_item		JSON	A list of JSON objects containing links. e.g. {"label":"This week", "link":"?days=7"}
id		TEXT	id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).
progress_color		TEXT	The color of the progress bar (e.g., "primary", "success", "danger").
progress_percent		INTEGER	The value of the progress (0-100).
title		TEXT	The title or label for the big number.
title_link		TEXT	A link for the Big Number title. If set, the entire title becomes clickable.
title_link_new_tab		BOOLEAN	If true, the title link will open in a new tab/window.
unit		TEXT	The unit of measurement for the value.
value_link		TEXT	A link for the Big Number value. If set, the entire value becomes clickable.
value_link_new_tab		BOOLEAN	If true, the value link will open in a new tab/window.

Example 1

Big numbers with change indicators and progress bars

select 
    'big_number' as component;
select 
    'Sales'            as title,
    75                 as value,
    '%'                as unit,
    '#sales_dashboard' as title_link,
    TRUE               as title_link_new_tab,
    '#sales_details'   as value_link,
    FALSE              as value_link_new_tab,
    'Conversion rate'  as description,
    9                  as change_percent,
    75                 as progress_percent,
    'blue'             as progress_color;
select 
    'Revenue'      as title,
    '4,300'        as value,
    '$'            as unit,
    'Year on year' as description,
    -8             as change_percent;

Result

Sales

75 %

Conversion rate

Revenue

4,300 $

Year on year

-8%

Example 2

Big numbers with dropdowns and customized layout

select 
    'big_number'          as component,
    3                     as columns,
    'colorfull_dashboard' as id;
select 
    'Users'          as title,
    '1,234'          as value,
    'red'            as color,
    '#users'         as title_link,
    FALSE            as title_link_new_tab,
    '#users_details' as value_link,
    TRUE             as value_link_new_tab;
select 
    'Orders'  as title,
    56        as value,
    'green'   as color,
    '#orders' as title_link,
    TRUE      as title_link_new_tab;
select 
    'Revenue' as title,
    '9,876'   as value,
    '€'       as unit,
    'blue'    as color,
    -7        as change_percent,
    JSON('{"label":"This week","link":"?days=7&component=big_number#colorfull_dashboard"}') as dropdown_item,
    JSON('{"label":"This month","link":"?days=30&component=big_number#colorfull_dashboard"}') as dropdown_item,
    JSON('{"label":"This quarter","link":"?days=90&component=big_number#colorfull_dashboard"}') as dropdown_item;

Result

Users

1,234

Orders

Revenue

9,876 €

-7%

The big_number component

Top-level parameters

Row-level parameters

Example 1

Result

Example 2

Result

See also: other components