From 0042472f9a9716de26b0421b51f22d6412779a45 Mon Sep 17 00:00:00 2001 From: codecalm Date: Sun, 2 Nov 2025 18:57:51 +0100 Subject: [PATCH] feat: add new statistics cards to widgets page and update card styles --- preview/pages/widgets.html | 72 +++++++++++++++++------- shared/includes/cards/code.html | 2 +- shared/includes/cards/configuration.html | 2 +- shared/includes/cards/stat-card.html | 17 ++++++ 4 files changed, 71 insertions(+), 22 deletions(-) create mode 100644 shared/includes/cards/stat-card.html diff --git a/preview/pages/widgets.html b/preview/pages/widgets.html index c68bce20c..9e0adad95 100644 --- a/preview/pages/widgets.html +++ b/preview/pages/widgets.html @@ -8,6 +8,19 @@ permalink: widgets.html ---
+
+ {% include "cards/stat-card.html" title="Earned" value="$2,847" icon="credit-card" %} +
+
+ {% include "cards/stat-card.html" title="Hours logged" value="42.7 hrs" icon="clock" %} +
+
+ {% include "cards/stat-card.html" title="Avg. time" value="3:28 hrs" icon="slideshow" %} +
+
+ {% include "cards/stat-card.html" title="Weekly growth" value="18.4%" icon="discount" %} +
+
{% include "cards/project-progress.html" %}
@@ -39,46 +52,64 @@ permalink: widgets.html
- {% include "cards/small-stats.html" id="currency" icon="currency-dollar" color="primary" title="132 Sales" description="12 waiting payments" %} + {% include "cards/small-stats.html" id="currency" icon="currency-dollar" color="primary" title="132 Sales" + description="12 waiting payments" %}
- {% include "cards/small-stats.html" id="shopping-cart" icon="shopping-cart" color="green" title="78 Orders" description="32 shipped" %} + {% include "cards/small-stats.html" id="shopping-cart" icon="shopping-cart" color="green" title="78 Orders" + description="32 shipped" %}
- {% include "cards/small-stats.html" id="user" icon="user" color="red" title="1352 Members" description="163 registered today" %} + {% include "cards/small-stats.html" id="user" icon="user" color="red" title="1352 Members" description="163 + registered today" %}
- {% include "cards/small-stats.html" id="message" icon="message" color="yellow" title="132 Comments" description="16 waitings" %} + {% include "cards/small-stats.html" id="message" icon="message" color="yellow" title="132 Comments" + description="16 waitings" %}
-
{% include "cards/small-stats.html" id="sales" chart-position="left" chart-type="donut" chart-data="56" color="primary" title="132 Sales" description="12 waiting payments" %} +
{% include "cards/small-stats.html" id="sales" chart-position="left" + chart-type="donut" chart-data="56" color="primary" title="132 Sales" description="12 waiting payments" %}
-
{% include "cards/small-stats.html" id="orders" chart-position="left" chart-type="donut" chart-data="56" color="green" title="78 Orders" description="32 shipped" %} +
{% include "cards/small-stats.html" id="orders" chart-position="left" + chart-type="donut" chart-data="56" color="green" title="78 Orders" description="32 shipped" %}
-
{% include "cards/small-stats.html" id="members" chart-position="left" chart-type="donut" chart-data="56" color="red" title="1352 Members" description="163 registered today" %} +
{% include "cards/small-stats.html" id="members" chart-position="left" + chart-type="donut" chart-data="56" color="red" title="1352 Members" description="163 registered today" %}
-
{% include "cards/small-stats.html" id="comments" chart-position="left" chart-type="donut" chart-data="56" color="yellow" title="132 Comments" description="16 waitings" %} +
{% include "cards/small-stats.html" id="comments" chart-position="left" + chart-type="donut" chart-data="56" color="yellow" title="132 Comments" description="16 waitings" %}
-
{% include "cards/small-stats.html" id="sales" icon="arrow-up" color="green" lt=true title="$5,256.99" description="Revenue last 30 days" description-value="+4%" %} +
{% include "cards/small-stats.html" id="sales" icon="arrow-up" color="green" lt=true + title="$5,256.99" description="Revenue last 30 days" description-value="+4%" %}
-
{% include "cards/small-stats.html" id="orders" icon="arrow-down" color="red" lt=true title="342" description="Sales last 30 days" description-value="-4.3%" description-value-color="red" %} +
{% include "cards/small-stats.html" id="orders" icon="arrow-down" color="red" lt=true + title="342" description="Sales last 30 days" description-value="-4.3%" description-value-color="red" %}
-
{% include "cards/small-stats.html" id="members" icon="arrow-up" color="green" lt=true title="132" description="Customers last 30 days" description-value="+6.8%" %} +
{% include "cards/small-stats.html" id="members" icon="arrow-up" color="green" lt=true + title="132" description="Customers last 30 days" description-value="+6.8%" %}
-
{% include "cards/small-stats.html" id="comments" icon="arrow-down" color="red" lt=true title="78" description="Members registered today" description-value="-2%" description-value-color="red" %} +
{% include "cards/small-stats.html" id="comments" icon="arrow-down" color="red" + lt=true title="78" description="Members registered today" description-value="-2%" description-value-color="red" %}
-
{% include "cards/small-stats.html" chart-type="line" chart-data="20,0,40,30,40,30,80,60" %}
-
{% include "cards/small-stats.html" chart-type="bar" chart-data="20,40,30,10,40,60,80,70" color="red" icon="heart" %}
-
{% include "cards/small-stats.html" chart-type="bar" chart-data="20,40,20,-10,-30,10,40,60,80,70" color="green" icon="brand-github" %}
-
{% include "cards/small-stats.html" chart-type="donut" chart-data="12" person-id=10 %}
-
{% include "cards/small-stats.html" chart-type="donut" chart-data="12" person-id=11 %}
+
{% include "cards/small-stats.html" chart-type="line" chart-data="20,0,40,30,40,30,80,60" + %}
+
{% include "cards/small-stats.html" chart-type="bar" chart-data="20,40,30,10,40,60,80,70" + color="red" icon="heart" %}
+
{% include "cards/small-stats.html" chart-type="bar" + chart-data="20,40,20,-10,-30,10,40,60,80,70" color="green" icon="brand-github" %}
+
{% include "cards/small-stats.html" chart-type="donut" chart-data="12" person-id=10 %} +
+
{% include "cards/small-stats.html" chart-type="donut" chart-data="12" person-id=11 %} +
{% include "cards/small-stats.html" chart-type="donut" chart-data="56" person-id=1 %}
{% include "cards/small-stats.html" color="green" person-id=4 %}
-
{% include "cards/small-stats.html" small-icon="trending-down" color="red" person-id=3 %}
+
{% include "cards/small-stats.html" small-icon="trending-down" color="red" person-id=3 %} +
{% include "cards/code.html" %}
@@ -89,10 +120,11 @@ permalink: widgets.html
-
{% include "cards/project-kanban.html" title="Tabler UI" badge="v1.0" value=30 percentage-color="red" limit=4 offset=0 due="72 days" %}
+
{% include "cards/project-kanban.html" title="Tabler UI" badge="v1.0" value=30 + percentage-color="red" limit=4 offset=0 due="72 days" %}
{% include "cards/project-kanban.html" title="Tabler React" value=80 offset=20 %}
{% include "cards/user-info.html" %}
{% include "cards/configuration.html" %}
-
+
\ No newline at end of file diff --git a/shared/includes/cards/code.html b/shared/includes/cards/code.html index 4062b9711..744ec9c2d 100644 --- a/shared/includes/cards/code.html +++ b/shared/includes/cards/code.html @@ -3,7 +3,7 @@

Card with code

-{% highlight scss %} +{% highlight css %} .card-footer { background: transparent; diff --git a/shared/includes/cards/configuration.html b/shared/includes/cards/configuration.html index bbfa7746d..046d87f44 100644 --- a/shared/includes/cards/configuration.html +++ b/shared/includes/cards/configuration.html @@ -18,7 +18,7 @@
tabler
Location:
-
{% include "ui/flag.html" flag="pl" %} Poland
+
{% include "ui/flag.html" flag="pl" size="xxs" %} Poland
IP Address:
46.113.11.3
diff --git a/shared/includes/cards/stat-card.html b/shared/includes/cards/stat-card.html new file mode 100644 index 000000000..620b0929b --- /dev/null +++ b/shared/includes/cards/stat-card.html @@ -0,0 +1,17 @@ +{% assign title = include.title | default: "Title" %} +{% assign value = include.value | default: "" %} +{% assign icon = include.icon | default: "user" %} +
+
+
+
+

{{ title }}

+
{{ value }}
+
+
+ {% include "ui/avatar.html" icon=icon size="lg" %} +
+
+
+
+