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
class
An optional CSS class to be added to the component for custom styling
columns
The number of columns to display the big numbers in (default is one column per item).
id
An optional ID to be used as an anchor for links.
Row-level parameters
value
REQUIRED. The main value to be displayed prominently.
change_percent
The percentage change in value (e.g., 7 for 7% increase, -8 for 8% decrease).
color
The color of the card
description
A description or additional context for the big number.
dropdown_item
A list of JSON objects containing links. e.g. {"label":"This week", "link":"?days=7"}
progress_color
The color of the progress bar (e.g., "primary", "success", "danger").
progress_percent
The value of the progress (0-100).
title
The title or label for the big number.
unit
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,
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;