change_percent without description in the big_number

fix #688

Author: lovasoa

CHANGELOG.md

@@ -29,6 +29,7 @@
   - Adds support for setting column names with an `=` sign, like `SELECT some_property = (a*b) FROM some_table` in mssql
   - Adds support for the `LIMIT max_rows, offset` syntax in SQLite. https://www.sqlite.org/lang_select.html#limitoffset
   - Adds support for `ANY`, `ALL`, and `SOME` subqueries, like `SELECT * FROM t WHERE a = ANY (SELECT b FROM t2)` 
+- Add support for `change_percent` without `description` in the big_number component to display the percentage change of a value.
 
 ## 0.30.1 (2024-10-31)
 - fix a bug where table sorting would break if table search was not also enabled.

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

@@ -50,7 +50,7 @@ INSERT INTO example(component, description, properties) VALUES
         {"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": [
+        {"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

@@ -31,7 +31,23 @@
           {{/if}}
         </div>
         {{/if~}}
-        <div class="h1 {{#if description}}mb-3{{/if}} mt-auto text-nowrap text-truncate">{{value}}{{#if unit}} {{unit}}{{/if}}</div>
+        <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>
+          {{#if (and change_percent (not description))}}
+          <div class="ms-auto">
+            {{#if change_percent}}
+            <span class="text-{{#if (gte change_percent 0)}}success{{else}}danger{{/if}} d-inline-flex align-items-center lh-1">
+              {{change_percent}}%
+              {{#if (gte change_percent 0)}}
+                  {{~icon_img 'trending-up'~}}
+              {{else}}
+                  {{~icon_img 'trending-down'~}}
+              {{/if}}
+            </span>
+            {{/if}}
+          </div>
+          {{/if}}
+        </div>
         {{~#if description}}
         <div class="d-flex flex-wrap mb-2" title="{{description}}">
           <div class="text-truncate me-2">{{description}}</div>