From 4c6fcde5c282fb7a8884e1a0127971ea299b1faa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hyv=C3=B6nen?= Date: Wed, 19 Mar 2025 12:55:32 +0200 Subject: [PATCH 1/3] Add link & target props to big_number.handlebars --- sqlpage/templates/big_number.handlebars | 33 +++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/sqlpage/templates/big_number.handlebars b/sqlpage/templates/big_number.handlebars index 272836de..996166f7 100644 --- a/sqlpage/templates/big_number.handlebars +++ b/sqlpage/templates/big_number.handlebars @@ -10,9 +10,22 @@ >
+ {{#if title}}
-
{{title}}
+ +
+ {{#if title_link}} + + {{title}} + + {{else}} + {{title}} + {{/if}} +
+ {{#if dropdown_item}}
@@ -31,8 +44,21 @@ {{/if}}
{{/if~}} +
-
{{value}}{{#if unit}} {{unit}}{{/if}}
+ +
+ {{#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,6 +74,7 @@
{{/if}}
+ {{~#if description}}
{{description}}
@@ -65,6 +92,7 @@ {{~/if~}}
{{~/if~}} + {{~#if progress_percent~}}
@@ -72,6 +100,7 @@
{{~/if}} +
From 26f6fb82d9d155a9f1bb5976d890eeccf44beca3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hyv=C3=B6nen?= Date: Thu, 20 Mar 2025 12:26:15 +0200 Subject: [PATCH 2/3] Refactor: added new links in 49_big_number.sql and updated big_number.handlebars --- sqlpage/templates/big_number.handlebars | 35 ++++++++++++++----------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/sqlpage/templates/big_number.handlebars b/sqlpage/templates/big_number.handlebars index 996166f7..22d84eda 100644 --- a/sqlpage/templates/big_number.handlebars +++ b/sqlpage/templates/big_number.handlebars @@ -13,19 +13,21 @@ {{#if 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}}
@@ -43,22 +45,24 @@
{{/if}}
- {{/if~}} + {{/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}} + {{#if value_link_new_tab}} target="_blank" rel="noopener noreferrer" + {{/if}} + > {{value}}{{#if unit}} {{unit}}{{/if}} {{else}} {{value}}{{#if unit}} {{unit}}{{/if}} {{/if}}
- + {{#if (and change_percent (not description))}}
{{#if change_percent}} @@ -75,7 +79,7 @@ {{/if}}
- {{~#if description}} + {{#if description}}
{{description}}
{{#if change_percent}} @@ -89,18 +93,17 @@ {{/if}}
- {{~/if~}} + {{/if}}
- {{~/if~}} - - {{~#if progress_percent~}} + {{/if}} + + {{#if progress_percent}}
- {{~/if}} - + {{/if}}
From fd4adc7f056a0446ae267812d14752d6cc02b899 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hyv=C3=B6nen?= Date: Thu, 20 Mar 2025 12:36:54 +0200 Subject: [PATCH 3/3] Refactor: added new links in 49_big_number.sql --- sqlpage/migrations/49_big_number.sql | 66 ++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 sqlpage/migrations/49_big_number.sql 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"} + ]} + ]'));