Skip to content

Commit eaac4c7

Browse files
hanskihyvlovasoa
hanskihyv
and
lovasoa
authored
Add link & target props to big_number.handlebars (#861)
* Add link & target props to big_number.handlebars * Refactor: added new links in 49_big_number.sql and updated big_number.handlebars * Refactor: added new links in 49_big_number.sql * Apply suggestions from code review * fix broken links in the documentation * Update CHANGELOG.md --------- Co-authored-by: Ophir LOJKINE <[email protected]>
1 parent 4d98b9c commit eaac4c7

File tree

3 files changed

+53
-10
lines changed

3 files changed

+53
-10
lines changed

‎CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@
1818
- Updated sqlparser to [v0.56](https://github.com/apache/datafusion-sqlparser-rs/blob/main/changelog/0.56.0.md), with many improvements including:
1919
- Add support for the xmltable(...) function in postgres
2020
- Add support for MSSQL IF/ELSE statements.
21+
- Added four optional properties to the `big_number` component:
22+
- title_link (string): the URL or path that the Big Number’s title should link to, if any
23+
- title_link_new_tab (bool): how the title link is opened
24+
- value_link (string): the URL or path that the Big Number’s value should link to, if any
25+
- value_link_new_tab (bool): open the link in a new tab
2126
- Add support for nice "switch" checkboxes in the form component using `'switch' as type`
2227
- Add support for headers in the form component using
2328

‎examples/official-site/sqlpage/migrations/49_big_number.sql

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
1212
('class', 'An optional CSS class to be added to the component for custom styling', 'TEXT', TRUE, TRUE),
1313
-- Item-level parameters (for each big number)
1414
('title', 'The title or label for the big number.', 'TEXT', FALSE, TRUE),
15+
('title_link', 'A link for the Big Number title. If set, the entire title becomes clickable.', 'TEXT', FALSE, TRUE),
16+
('title_link_new_tab', 'If true, the title link will open in a new tab/window.', 'BOOLEAN', FALSE, TRUE),
17+
('value_link', 'A link for the Big Number value. If set, the entire value becomes clickable.', 'TEXT', FALSE, TRUE),
18+
('value_link_new_tab', 'If true, the value link will open in a new tab/window.', 'BOOLEAN', FALSE, TRUE),
1519
('value', 'The main value to be displayed prominently.', 'TEXT', FALSE, FALSE),
1620
('unit', 'The unit of measurement for the value.', 'TEXT', FALSE, TRUE),
1721
('description', 'A description or additional context for the big number.', 'TEXT', FALSE, TRUE),
@@ -30,6 +34,10 @@ INSERT INTO example(component, description, properties) VALUES
3034
"title":"Sales",
3135
"value":75,
3236
"unit":"%",
37+
"title_link": "#sales_dashboard",
38+
"title_link_new_tab": true,
39+
"value_link": "#sales_details",
40+
"value_link_new_tab": false,
3341
"description":"Conversion rate",
3442
"change_percent": 9,
3543
"progress_percent": 75,
@@ -48,8 +56,8 @@ INSERT INTO example(component, description, properties) VALUES
4856
('big_number', 'Big numbers with dropdowns and customized layout',
4957
json('[
5058
{"component":"big_number", "columns":3, "id":"colorfull_dashboard"},
51-
{"title":"Users", "value":"1,234", "color": "red" },
52-
{"title":"Orders", "value":56, "color": "green" },
59+
{"title":"Users", "value":"1,234", "color": "red", "title_link": "#users", "title_link_new_tab": false, "value_link": "#users_details", "value_link_new_tab": true },
60+
{"title":"Orders", "value":56, "color": "green", "title_link": "#orders", "title_link_new_tab": true },
5361
{"title":"Revenue", "value":"9,876", "unit": "€", "color": "blue", "change_percent": -7, "dropdown_item": [
5462
{"label":"This week", "link":"?days=7&component=big_number#colorfull_dashboard"},
5563
{"label":"This month", "link":"?days=30&component=big_number#colorfull_dashboard"},

‎sqlpage/templates/big_number.handlebars

Lines changed: 38 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,23 @@
1010
>
1111
<div class="card flex-fill {{#if color}}bg-{{color}}-lt{{/if}}">
1212
<div class="card-body d-flex flex-column">
13+
1314
{{#if title}}
1415
<div class="d-flex align-items-center">
15-
<div class="subheader text-truncate me-2">{{title}}</div>
16+
<div class="subheader text-truncate me-2">
17+
{{#if title_link}}
18+
<a href="{{title_link}}" class="text-decoration-none"
19+
{{#if title_link_new_tab}}
20+
target="_blank" rel="noopener noreferrer"
21+
{{/if}}
22+
>
23+
{{title}}
24+
</a>
25+
{{else}}
26+
{{title}}
27+
{{/if}}
28+
</div>
29+
1630
{{#if dropdown_item}}
1731
<div class="ms-auto lh-1">
1832
<div class="dropdown">
@@ -30,9 +44,23 @@
3044
</div>
3145
{{/if}}
3246
</div>
33-
{{/if~}}
47+
{{/if}}
48+
3449
<div class="d-flex align-items-center mt-1">
35-
<div class="h1 {{#if description}}mb-3{{else}}mb-0{{/if}} mt-auto text-nowrap text-truncate">{{value}}{{#if unit}} {{unit}}{{/if}}</div>
50+
<div class="h1 {{#if description}}mb-3{{else}}mb-0{{/if}} mt-auto text-nowrap text-truncate">
51+
{{#if value_link}}
52+
<a href="{{value_link}}"
53+
class="text-decoration-none"
54+
{{#if value_link_new_tab}} target="_blank" rel="noopener noreferrer"
55+
{{/if}}
56+
>
57+
{{value}}{{#if unit}} {{unit}}{{/if}}
58+
</a>
59+
{{else}}
60+
{{value}}{{#if unit}} {{unit}}{{/if}}
61+
{{/if}}
62+
</div>
63+
3664
{{#if (and change_percent (not description))}}
3765
<div class="ms-auto">
3866
{{#if change_percent}}
@@ -48,7 +76,8 @@
4876
</div>
4977
{{/if}}
5078
</div>
51-
{{~#if description}}
79+
80+
{{#if description}}
5281
<div class="d-flex flex-wrap mb-2" title="{{description}}">
5382
<div class="text-truncate me-2">{{description}}</div>
5483
{{#if change_percent}}
@@ -62,16 +91,17 @@
6291
{{/if}}
6392
</span>
6493
</div>
65-
{{~/if~}}
94+
{{/if}}
6695
</div>
67-
{{~/if~}}
68-
{{~#if progress_percent~}}
96+
{{/if}}
97+
98+
{{#if progress_percent}}
6999
<div class="progress progress-sm">
70100
<div class="progress-bar bg-{{progress_color}}" style="width: {{progress_percent}}%" role="progressbar" aria-valuenow="{{progress_percent}}" aria-valuemin="0" aria-valuemax="100" aria-label="{{progress_percent}}% Complete">
71101
<span class="visually-hidden">{{progress_percent}}% Complete</span>
72102
</div>
73103
</div>
74-
{{~/if}}
104+
{{/if}}
75105
</div>
76106
</div>
77107
</div>

0 commit comments

Comments
 (0)