Add link & target props to big_number.handlebars

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"}
+        ]}
+    ]'));

sqlpage/templates/big_number.handlebars

@@ -10,9 +10,24 @@
   >
     <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">
+            {{!--  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}}
+              <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 +45,24 @@
           </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">
+            {{!--  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}}
+              <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 +78,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 +93,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>