fix big number

Author: lovasoa

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

@@ -8,6 +8,8 @@ INSERT INTO component(name, icon, description, introduced_in_version) VALUES
 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),
     ('value', 'The main value to be displayed prominently.', 'TEXT', FALSE, FALSE),
@@ -45,12 +47,12 @@ INSERT INTO example(component, description, properties) VALUES
 INSERT INTO example(component, description, properties) VALUES
     ('big_number', 'Big numbers with dropdowns and customized layout',
     json('[
-        {"component":"big_number", "columns":3},
+        {"component":"big_number", "columns":3, "id":"colorfull_dashboard"},
         {"title":"Users", "value":"1,234", "color": "red" },
         {"title":"Orders", "value":56, "color": "green" },
         {"title":"Revenue", "value":"9,876", "unit": "€", "color": "blue", "dropdown_item": [
-            {"label":"This week", "link":"?days=7"},
-            {"label":"This month", "link":"?days=30"},
-            {"label":"This quarter", "link":"?days=90"}
+            {"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

@@ -1,8 +1,12 @@
-<div class="row g-3 h-100
-  {{~#if columns}} row-cols-1 row-cols-sm-2 row-cols-md-{{columns~}}{{/if~}}
+<div {{#if id}} id="{{id}}" {{/if~}}
+  class="row g-3 h-100
+  {{~#if columns}} row-cols-1 row-cols-sm-2 row-cols-md-{{columns~}} {{/if~}}
+  {{~#if class}} {{class}} {{/if}}
 ">
 {{#each_row}}
-  <div class="col d-flex">
+  <div class="col d-flex {{~#if class}} {{class}}{{/if}}"
+  {{~#if id}} id="{{id}}"{{/if~}}
+  >
     <div class="card flex-fill {{#if color}}bg-{{color}}-lt{{/if}}">
       <div class="card-body d-flex flex-column">
         {{#if title}}
@@ -43,17 +47,16 @@
               {{/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>