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/6] 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/6] 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/6] 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"} + ]} + ]')); From daef12b4cd31bf4217729e3d307cce8000e35ab6 Mon Sep 17 00:00:00 2001 From: Ophir LOJKINE Date: Tue, 20 May 2025 01:09:00 +0200 Subject: [PATCH 4/6] Apply suggestions from code review --- sqlpage/templates/big_number.handlebars | 2 -- 1 file changed, 2 deletions(-) diff --git a/sqlpage/templates/big_number.handlebars b/sqlpage/templates/big_number.handlebars index 22d84eda..2b689ebe 100644 --- a/sqlpage/templates/big_number.handlebars +++ b/sqlpage/templates/big_number.handlebars @@ -14,7 +14,6 @@ {{#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}}
- {{!-- 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}} Date: Tue, 20 May 2025 01:17:21 +0200 Subject: [PATCH 5/6] fix broken links in the documentation --- .../sqlpage/migrations/49_big_number.sql | 12 +++- sqlpage/migrations/49_big_number.sql | 66 ------------------- 2 files changed, 10 insertions(+), 68 deletions(-) delete mode 100644 sqlpage/migrations/49_big_number.sql diff --git a/examples/official-site/sqlpage/migrations/49_big_number.sql b/examples/official-site/sqlpage/migrations/49_big_number.sql index 001a7e4e..e18db309 100644 --- a/examples/official-site/sqlpage/migrations/49_big_number.sql +++ b/examples/official-site/sqlpage/migrations/49_big_number.sql @@ -12,6 +12,10 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S ('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), @@ -30,6 +34,10 @@ INSERT INTO example(component, description, properties) VALUES "title":"Sales", "value":75, "unit":"%", + "title_link": "#sales_dashboard", + "title_link_new_tab": true, + "value_link": "#sales_details", + "value_link_new_tab": false, "description":"Conversion rate", "change_percent": 9, "progress_percent": 75, @@ -48,8 +56,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":"Orders", "value":56, "color": "green" }, + {"title":"Users", "value":"1,234", "color": "red", "title_link": "#users", "title_link_new_tab": false, "value_link": "#users_details", "value_link_new_tab": true }, + {"title":"Orders", "value":56, "color": "green", "title_link": "#orders", "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"}, diff --git a/sqlpage/migrations/49_big_number.sql b/sqlpage/migrations/49_big_number.sql deleted file mode 100644 index 1ad05ee7..00000000 --- a/sqlpage/migrations/49_big_number.sql +++ /dev/null @@ -1,66 +0,0 @@ --- 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"} - ]} - ]')); From d446a15317a3cee177717eaf157f6ea3db8a0172 Mon Sep 17 00:00:00 2001 From: lovasoa Date: Tue, 20 May 2025 01:20:25 +0200 Subject: [PATCH 6/6] Update CHANGELOG.md --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a31ee74..32f47437 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,11 @@ - Updated sqlparser to [v0.56](https://github.com/apache/datafusion-sqlparser-rs/blob/main/changelog/0.56.0.md), with many improvements including: - Add support for the xmltable(...) function in postgres - Add support for MSSQL IF/ELSE statements. + - Added four optional properties to the `big_number` component: + - title_link (string): the URL or path that the Big Number’s title should link to, if any + - title_link_new_tab (bool): how the title link is opened + - value_link (string): the URL or path that the Big Number’s value should link to, if any + - value_link_new_tab (bool): open the link in a new tab ## v0.34 (2025-03-23)