diff --git a/sqlpage/migrations/49_big_number.sql b/sqlpage/migrations/49_big_number.sql new file mode 100644 index 00000000..1ad05ee7 --- /dev/null +++ b/sqlpage/migrations/49_big_number.sql @@ -0,0 +1,66 @@ +-- Big Number Component Documentation + +-- Component Definition +INSERT INTO component(name, icon, description, introduced_in_version) VALUES + ('big_number', 'chart-area', 'A component to display key metrics or statistics with optional description, change indicator, and progress bar. Useful in dashboards.', '0.28.0'); + +-- Inserting parameter information for the big_number component +INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'big_number', * FROM (VALUES + -- Top-level parameters (for the whole big_number list) + ('columns', 'The number of columns to display the big numbers in (default is one column per item).', 'INTEGER', TRUE, TRUE), + ('id', 'An optional ID to be used as an anchor for links.', 'TEXT', TRUE, TRUE), + ('class', 'An optional CSS class to be added to the component for custom styling', 'TEXT', TRUE, TRUE), + -- Item-level parameters (for each big number) + ('title', 'The title or label for the big number.', 'TEXT', FALSE, TRUE), + ('title_link', 'A link for the Big Number title. If set, the entire title becomes clickable.', 'TEXT', FALSE, TRUE), + ('title_link_new_tab', 'If true, the title link will open in a new tab/window.', 'BOOLEAN', FALSE, TRUE), + ('value_link', 'A link for the Big Number value. If set, the entire value becomes clickable.', 'TEXT', FALSE, TRUE), + ('value_link_new_tab', 'If true, the value link will open in a new tab/window.', 'BOOLEAN', FALSE, TRUE), + ('value', 'The main value to be displayed prominently.', 'TEXT', FALSE, FALSE), + ('unit', 'The unit of measurement for the value.', 'TEXT', FALSE, TRUE), + ('description', 'A description or additional context for the big number.', 'TEXT', FALSE, TRUE), + ('change_percent', 'The percentage change in value (e.g., 7 for 7% increase, -8 for 8% decrease).', 'INTEGER', FALSE, TRUE), + ('progress_percent', 'The value of the progress (0-100).', 'INTEGER', FALSE, TRUE), + ('progress_color', 'The color of the progress bar (e.g., "primary", "success", "danger").', 'TEXT', FALSE, TRUE), + ('dropdown_item', 'A list of JSON objects containing links. e.g. {"label":"This week", "link":"?days=7"}', 'JSON', FALSE, TRUE), + ('color', 'The color of the card', 'COLOR', FALSE, TRUE) +) x; + +INSERT INTO example(component, description, properties) VALUES + ('big_number', 'Big numbers with change indicators and progress bars', + json('[ + {"component":"big_number"}, + { + "title":"Sales", + "value":75, + "unit":"%", + "title_link": "/sales_dashboard.sql", + "title_link_new_tab": true, + "value_link": "/sales_details.sql", + "value_link_new_tab": false, + "description":"Conversion rate", + "change_percent": 9, + "progress_percent": 75, + "progress_color": "blue" + }, + { + "title":"Revenue", + "value":"4,300", + "unit":"$", + "description":"Year on year", + "change_percent": -8 + } + ]')); + +INSERT INTO example(component, description, properties) VALUES + ('big_number', 'Big numbers with dropdowns and customized layout', + json('[ + {"component":"big_number", "columns":3, "id":"colorfull_dashboard"}, + {"title":"Users", "value":"1,234", "color": "red", "title_link": "/users_dashboard.sql", "title_link_new_tab": false, "value_link": "/users_details.sql", "value_link_new_tab": true }, + {"title":"Orders", "value":56, "color": "green", "title_link": "/orders.sql", "title_link_new_tab": true }, + {"title":"Revenue", "value":"9,876", "unit": "€", "color": "blue", "change_percent": -7, "dropdown_item": [ + {"label":"This week", "link":"?days=7&component=big_number#colorfull_dashboard"}, + {"label":"This month", "link":"?days=30&component=big_number#colorfull_dashboard"}, + {"label":"This quarter", "link":"?days=90&component=big_number#colorfull_dashboard"} + ]} + ]')); diff --git a/sqlpage/templates/big_number.handlebars b/sqlpage/templates/big_number.handlebars index 272836de..22d84eda 100644 --- a/sqlpage/templates/big_number.handlebars +++ b/sqlpage/templates/big_number.handlebars @@ -10,9 +10,24 @@ >
+ {{#if title}}
-
{{title}}
+
+ {{!-- Introduced `title_link_new_tab` and `value_link_new_tab`. If set to a truthy value, opens the link in a new tab (target="_blank"). Otherwise, defaults to same tab (target="_self"). --}} + {{#if title_link}} + + {{title}} + + {{else}} + {{title}} + {{/if}} +
+ {{#if dropdown_item}}
{{/if}}
- {{/if~}} + {{/if}} +
-
{{value}}{{#if unit}} {{unit}}{{/if}}
+
+ {{!-- Introduced `title_link_new_tab` and `value_link_new_tab`. If set to a truthy value, opens the link in a new tab (target="_blank"). Otherwise, defaults to same tab (target="_self"). --}} + {{#if value_link}} + + {{value}}{{#if unit}} {{unit}}{{/if}} + + {{else}} + {{value}}{{#if unit}} {{unit}}{{/if}} + {{/if}} +
+ {{#if (and change_percent (not description))}}
{{#if change_percent}} @@ -48,7 +78,8 @@
{{/if}}
- {{~#if description}} + + {{#if description}}
{{description}}
{{#if change_percent}} @@ -62,16 +93,17 @@ {{/if}}
- {{~/if~}} + {{/if}}
- {{~/if~}} - {{~#if progress_percent~}} + {{/if}} + + {{#if progress_percent}}
{{progress_percent}}% Complete
- {{~/if}} + {{/if}}