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 | required | type | description |
|---|---|---|---|
| class | TEXT |
An optional CSS class to be added to the component for custom styling | |
| columns | INTEGER |
The number of columns to display the big numbers in (default is one column per item). | |
| id | TEXT |
An optional ID to be used as an anchor for links. |
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). | |
| 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"} | |
| 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. | |
| unit | TEXT |
The unit of measurement for the value. |
Example 1
Big numbers with change indicators and progress bars
select
'big_number' as component;
select
'Sales' as title,
75 as value,
'%' as unit,
'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
9%
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;
select
'Orders' as title,
56 as value,
'green' as color;
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;