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]>

Author: hanskihyv

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
  - Add support for nice "switch" checkboxes in the form component using `'switch' as type`
  - Add support for headers in the form component using
 

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"},

sqlpage/templates/big_number.handlebars

@@ -10,9 +10,23 @@
   >
     <div class="card flex-fill {{#if color}}bg-{{color}}-lt{{/if}}">
       <div class="card-body d-flex flex-column">
+        
         {{#if title}}
         <div class="d-flex align-items-center">
-          <div class="subheader text-truncate me-2">{{title}}</div>
+          <div class="subheader text-truncate me-2">
+            {{#if title_link}}
+              <a href="{{title_link}}" class="text-decoration-none"
+                 {{#if title_link_new_tab}}
+                   target="_blank" rel="noopener noreferrer"
+                 {{/if}}
+              >
+                {{title}}
+              </a>
+            {{else}}
+              {{title}}
+            {{/if}}
+          </div>
+
           {{#if dropdown_item}}
           <div class="ms-auto lh-1">
             <div class="dropdown">
@@ -30,9 +44,23 @@
           </div>
           {{/if}}
         </div>
-        {{/if~}}
+        {{/if}}
+        
         <div class="d-flex align-items-center mt-1">
-          <div class="h1 {{#if description}}mb-3{{else}}mb-0{{/if}} mt-auto text-nowrap text-truncate">{{value}}{{#if unit}} {{unit}}{{/if}}</div>
+          <div class="h1 {{#if description}}mb-3{{else}}mb-0{{/if}} mt-auto text-nowrap text-truncate">
+            {{#if value_link}}
+              <a href="{{value_link}}"
+                 class="text-decoration-none"
+                 {{#if value_link_new_tab}} target="_blank" rel="noopener noreferrer"
+               {{/if}}
+               >
+                {{value}}{{#if unit}} {{unit}}{{/if}}
+              </a>
+            {{else}}
+              {{value}}{{#if unit}} {{unit}}{{/if}}
+            {{/if}}
+          </div>
+
           {{#if (and change_percent (not description))}}
           <div class="ms-auto">
             {{#if change_percent}}
@@ -48,7 +76,8 @@
           </div>
           {{/if}}
         </div>
-        {{~#if description}}
+        
+        {{#if description}}
         <div class="d-flex flex-wrap mb-2" title="{{description}}">
           <div class="text-truncate me-2">{{description}}</div>
           {{#if change_percent}}
@@ -62,16 +91,17 @@
               {{/if}}
             </span>
           </div>
-          {{~/if~}}
+          {{/if}}
         </div>
-        {{~/if~}}
-        {{~#if progress_percent~}}
+        {{/if}}
+
+        {{#if progress_percent}}
         <div class="progress progress-sm">
           <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">
             <span class="visually-hidden">{{progress_percent}}% Complete</span>
           </div>
         </div>
-        {{~/if}}
+        {{/if}}
       </div>
     </div>
   </div>