Skip to main content
The big_number component displays key metrics or statistics prominently. Perfect for dashboards, it supports change indicators, progress bars, dropdown filters, and clickable links.

​
Basic Usage

SELECT 'big_number' AS component;
SELECT 
    'Sales' AS title,
    75 AS value,
    '%' AS unit;

​
Top-Level Properties

​
columns
integer
Number of columns to display the big numbers in (default: one column per item)
​
id
text
Optional ID to be used as an anchor for links
​
class
text
Optional CSS class for custom styling

​
Item Properties

​
title
text
The title or label for the big number
​
value
text
required
The main value to be displayed prominently
​
unit
text
The unit of measurement for the value (e.g., ”%”, ”$”, “users”)
​
description
text
Additional context or description for the metric
​
title_link
url
Makes the title clickable. If set, the entire title becomes a link.
​
title_link_new_tab
boolean
If true, the title link opens in a new tab/window
​
value_link
url
Makes the value clickable. If set, the entire value becomes a link.
​
value_link_new_tab
boolean
If true, the value link opens in a new tab/window
​
change_percent
integer
Percentage change (e.g., 7 for 7% increase, -8 for 8% decrease). Shows up/down arrow with color.
​
progress_percent
integer
Progress bar value (0-100)
​
progress_color
color
Color of the progress bar (e.g., “primary”, “success”, “danger”)
​
color
color
Background color of the card
​
dropdown_item
json
JSON array of dropdown menu items: [{"label":"This week", "link":"?days=7"}]

​
Examples

​
Simple Metrics

SELECT 'big_number' AS component;

SELECT 
    'Total Users' AS title,
    '1,234' AS value;

SELECT 
    'Revenue' AS title,
    '45,678' AS value,
    '$' AS unit;

SELECT 
    'Conversion Rate' AS title,
    25.5 AS value,
    '%' AS unit;

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;

SELECT 'big_number' AS component;

SELECT 
    'Active Users' AS title,
    '1,234' AS value,
    '/users.sql' AS title_link,
    false AS title_link_new_tab,
    '/users.sql?details=1' AS value_link,
    true AS value_link_new_tab;

SELECT 
    'New Orders' AS title,
    56 AS value,
    '/orders.sql' AS title_link,
    12 AS change_percent;

​
Colored Dashboard with Dropdowns

SELECT 'big_number' AS component,
       3 AS columns,
       '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_array(
        json_object('label', 'This week', 'link', '?days=7&component=big_number#dashboard'),
        json_object('label', 'This month', 'link', '?days=30&component=big_number#dashboard'),
        json_object('label', 'This quarter', 'link', '?days=90&component=big_number#dashboard')
    ) AS dropdown_item;

​
Complete Dashboard Example

SELECT 'big_number' AS component, 4 AS columns;

SELECT 
    'Total Sales' AS title,
    '152' AS value,
    'Today' AS description,
    5 AS change_percent;

SELECT 
    'New Customers' AS title,
    '23' AS value,
    'This week' AS description,
    12 AS change_percent,
    'green' AS color;

SELECT 
    'Average Order' AS title,
    '87' AS value,
    '$' AS unit,
    'Last 30 days' AS description,
    -3 AS change_percent;

SELECT 
    'Goal Progress' AS title,
    '67' AS value,
    '%' AS unit,
    'Monthly target' AS description,
    67 AS progress_percent,
    'success' AS progress_color;

​
Metrics with Dynamic Time Ranges

-- Get the time range from URL parameter (default to 7 days)
SET days = COALESCE($days, 7);

SELECT 'big_number' AS component, 3 AS columns, 'metrics' AS id;

SELECT 
    'Revenue' AS title,
    CAST(SUM(amount) AS TEXT) AS value,
    '$' AS unit,
    json_array(
        json_object('label', 'Last 7 days', 'link', '?days=7#metrics'),
        json_object('label', 'Last 30 days', 'link', '?days=30#metrics'),
        json_object('label', 'Last 90 days', 'link', '?days=90#metrics')
    ) AS dropdown_item
FROM orders
WHERE order_date >= date('now', '-' || $days || ' days');

SELECT 
    'Orders' AS title,
    CAST(COUNT(*) AS TEXT) AS value,
    json_array(
        json_object('label', 'Last 7 days', 'link', '?days=7#metrics'),
        json_object('label', 'Last 30 days', 'link', '?days=30#metrics'),
        json_object('label', 'Last 90 days', 'link', '?days=90#metrics')
    ) AS dropdown_item
FROM orders
WHERE order_date >= date('now', '-' || $days || ' days');

​
Notes

The big_number component is designed for dashboards and KPI displays where you need to highlight important metrics.
Use change_percent to show trends - positive values display in green with an up arrow, negative values in red with a down arrow.
Combine progress_percent with appropriate progress_color to show goal completion or utilization percentages.
Use dropdown_item to let users switch between different time ranges or filters without cluttering the interface.
Progress bars expect values between 0 and 100. Values outside this range may display incorrectly.

Build docs developers (and LLMs) love

Get started for freeTalk to us