diff --git a/.changeset/green-trees-cheer.md b/.changeset/green-trees-cheer.md new file mode 100644 index 000000000..40c78eae1 --- /dev/null +++ b/.changeset/green-trees-cheer.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": minor +--- + +Add new charts to dashboard pages diff --git a/core/scss/vendor/_apexcharts.scss b/core/scss/vendor/_apexcharts.scss index 5fb05ad43..e3d34c3d3 100644 --- a/core/scss/vendor/_apexcharts.scss +++ b/core/scss/vendor/_apexcharts.scss @@ -45,4 +45,8 @@ .apexcharts-svg, .apexcharts-canvas { border-radius: inherit; +} + +.apexcharts-pie-area { + stroke: var(--#{$prefix}bg-surface) !important; } \ No newline at end of file diff --git a/shared/data/charts.json b/shared/data/charts.json index e825b36d2..938e7341b 100644 --- a/shared/data/charts.json +++ b/shared/data/charts.json @@ -1,4 +1,103 @@ { + "active-users-3": { + "type": "radialBar", + "height": 10, + "sparkline": true, + "series": [ + { + "color": "primary", + "data": 78 + } + ] + }, + "visitors": { + "type": "line", + "height": 10, + "sparkline": true, + "datetime": true, + "stroke-width": [ + 2, + 1 + ], + "stroke-dash": [ + 0, + 3 + ], + "series": [ + { + "name": "Visitors", + "color": "primary", + "data": [ + 7687, + 7543, + 7545, + 7543, + 7635, + 8140, + 7810, + 8315, + 8379, + 8441, + 8485, + 8227, + 8906, + 8561, + 8333, + 8551, + 9305, + 9647, + 9359, + 9840, + 9805, + 8612, + 8970, + 8097, + 8070, + 9829, + 10545, + 10754, + 10270, + 9282 + ] + }, + { + "name": "Visitors last month", + "color": "gray-400", + "data": [ + 8630, + 9389, + 8427, + 9669, + 8736, + 8261, + 8037, + 8922, + 9758, + 8592, + 8976, + 9459, + 8125, + 8528, + 8027, + 8256, + 8670, + 9384, + 9813, + 8425, + 8162, + 8024, + 8897, + 9284, + 8972, + 8776, + 8121, + 9476, + 8281, + 9065 + ] + } + ] + }, "active-users-2": { "type": "line", "height": 18, diff --git a/shared/includes/cards/charts/active-users.html b/shared/includes/cards/charts/active-users.html index 33154406f..f13dcad09 100644 --- a/shared/includes/cards/charts/active-users.html +++ b/shared/includes/cards/charts/active-users.html @@ -1,7 +1,7 @@
-
Active users
+
Active subscriptions
{% include "parts/dropdown/days.html" %}
diff --git a/shared/includes/cards/welcome.html b/shared/includes/cards/welcome.html new file mode 100644 index 000000000..5d88df950 --- /dev/null +++ b/shared/includes/cards/welcome.html @@ -0,0 +1,258 @@ +
+
+
+
+

Welcome back, Paweł

+

You have 5 new messages and 2 new notifications.

+ +
+
+
Today's Sales
+
+
6,782
+
+ {% include "ui/trending.html" value=7 %} +
+
+ {% include "ui/progress.html" value=75 color="success" size="sm" %} +
+ +
+
Growth Rate
+
+
78,4%
+
+ {% include "ui/trending.html" value=-1 %} +
+
+ {% include "ui/progress.html" value=78 color="danger" size="sm" %} +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
\ No newline at end of file diff --git a/shared/includes/layout/homepage.html b/shared/includes/layout/homepage.html index 97a976491..cdb06ba41 100644 --- a/shared/includes/layout/homepage.html +++ b/shared/includes/layout/homepage.html @@ -1,4 +1,36 @@
+
+ {% include "cards/welcome.html" %} +
+
+
+
+
Total Users
+
+
75,782
+
+ {% include "ui/trending.html" value=2 %} +
+
+
24,635 users increased from last month
+
+ {% include "ui/chart.html" chart-id="visitors" height="6" %} +
+
+
+
+
+
Active Users
+
+
25,782
+
+ {% include "ui/trending.html" value=-1 %} +
+
+ {% include "ui/chart.html" chart-id="active-users-3" height="12" %} +
+
+
{% include "cards/charts/sales.html" %}
diff --git a/shared/includes/ui/chart.html b/shared/includes/ui/chart.html index d33a5bcc3..3b3e8208a 100644 --- a/shared/includes/ui/chart.html +++ b/shared/includes/ui/chart.html @@ -17,7 +17,7 @@ {% assign data = charts[data.extend] | concat_objects: charts[include.chart-id] %} {% endif %} -
+
{% capture script %} {% assign chart-type = data.type | default: 'bar' -%} {% removeemptylines %} @@ -71,14 +71,18 @@ {% if chart-type == 'radialBar' %} plotOptions: { radialBar: { + startAngle: -120, + endAngle: 120, + hollow: { + margin: 16, + size: "50%" + }, dataLabels: { - total: { - show: true, - label: 'Totals', - formatter: function (val) { - return "44%"; - }, - }, + show: true, + value: { + offsetY: -8, + fontSize: '24px', + } }, }, },