Pie chart example

samples/DashboardDemo/src/DashboardDemo.Application.Contracts/CountersWidgetInputDto.cs

@@ -2,10 +2,7 @@
 
 namespace DashboardDemo
 {
-    public class CountersWidgetInputDto
+    public class CountersWidgetInputDto : WidgetFilter
     {
-        public DateTime StartDate { get; set; }
-
-        public DateTime EndDate { get; set; }
     }
 }

samples/DashboardDemo/src/DashboardDemo.Application.Contracts/IDashboardAppService.cs

@@ -8,5 +8,7 @@ namespace DashboardDemo
         Task<CountersWidgetResultDto> GetCountersWidgetAsync(CountersWidgetInputDto input);
 
         Task<NewUserStatistiWidgetResultDto> GetNewUserStatisticWidgetAsync(NewUserStatisticWidgetInputDto input);
+
+        Task<LicenseStatistiWidgetResultDto> GetLicenseStatisticWidgetAsync(LicenseStatisticWidgetInputDto input);
     }
 }

samples/DashboardDemo/src/DashboardDemo.Application.Contracts/LicenseStatistiWidgetResultDto.cs

@@ -0,0 +1,9 @@
+using System.Collections.Generic;
+
+namespace DashboardDemo
+{
+    public class LicenseStatistiWidgetResultDto
+    {
+        public Dictionary<string, int> Data { get; set; }
+    }
+}

samples/DashboardDemo/src/DashboardDemo.Application.Contracts/LicenseStatisticWidgetInputDto.cs

@@ -0,0 +1,6 @@
+namespace DashboardDemo
+{
+    public class LicenseStatisticWidgetInputDto : WidgetFilter
+    {
+    }
+}

samples/DashboardDemo/src/DashboardDemo.Application.Contracts/NewUserStatistiWidgetResultDto.cs

@@ -1,9 +1,9 @@
-namespace DashboardDemo
+using System.Collections.Generic;
+
+namespace DashboardDemo
 {
     public class NewUserStatistiWidgetResultDto
     {
-        public string[] Labels { get; set; }
-
-        public int[] Data { get; set; }
+        public Dictionary<string, int> Data { get; set; }
     }
 }

samples/DashboardDemo/src/DashboardDemo.Application.Contracts/NewUserStatisticWidgetInputDto.cs

@@ -2,12 +2,8 @@
 
 namespace DashboardDemo
 {
-    public class NewUserStatisticWidgetInputDto
+    public class NewUserStatisticWidgetInputDto : WidgetFilter
     {
-        public DateTime StartDate { get; set; }
-
-        public DateTime EndDate { get; set; }
-
         public NewUserStatisticFrequency Frequency { get; set; } = NewUserStatisticFrequency.Daily;
     }
 }

samples/DashboardDemo/src/DashboardDemo.Application.Contracts/WidgetFilter.cs

@@ -0,0 +1,10 @@
+using System;
+namespace DashboardDemo
+{
+    public class WidgetFilter
+    {
+        public DateTime StartDate { get; set; }
+
+        public DateTime EndDate { get; set; }
+    }
+}

samples/DashboardDemo/src/DashboardDemo.Application/DashboardAppService.cs

@@ -36,6 +36,20 @@ namespace DashboardDemo
             throw new UserFriendlyException("Not implemented statistic frequency.");
         }
 
+        public async Task<LicenseStatistiWidgetResultDto> GetLicenseStatisticWidgetAsync(LicenseStatisticWidgetInputDto input)
+        {
+            var days = (int)Math.Round(input.EndDate.Subtract(input.StartDate).TotalDays + 1);
+
+            var data = new Dictionary<string, int>
+            {
+                {"Regular", new Random().Next(50, 100) * days},
+                {"Enterprise", new Random().Next(40, 70) * days},
+                {"Ultimate", new Random().Next(30, 40) * days}
+            };
+
+            return new LicenseStatistiWidgetResultDto(){Data = data};
+        }
+
         private async Task<NewUserStatistiWidgetResultDto> GetMonthlyNewUserStatisticWidgetAsync(NewUserStatisticWidgetInputDto input)
         {
             DateTime endDate = input.EndDate;
@@ -45,7 +59,7 @@ namespace DashboardDemo
             var monthCount = (endDate.Year - startDate.Year) * 12 + endDate.Month - startDate.Month + 1;
             var labels = new List<string>();
 
-            for (int i = 0; i < monthCount; i++)
+            for (var i = 0; i < monthCount; i++)
             {
                 labels.Add(months[endDate.Month - 1]);
                 endDate = endDate.AddMonths(-1);
@@ -53,16 +67,16 @@ namespace DashboardDemo
 
             labels.Reverse();
 
-            var data = Enumerable
-                .Repeat(0, monthCount)
-                .Select(i => new Random().Next(1500, 3000))
-                .ToArray();
+            var data = new Dictionary<string, int>();
 
+            for (var i = 0; i < monthCount; i++)
+            {
+                data.Add(labels[i], new Random().Next(1500, 3000));
+            }
 
             return new NewUserStatistiWidgetResultDto()
             {
-                Data = data,
-                Labels = labels.ToArray()
+                Data = data
             };
         }
 
@@ -70,11 +84,6 @@ namespace DashboardDemo
         {
             var dayCount = (input.EndDate - input.StartDate).Days + 1;
 
-            var data = Enumerable
-                .Repeat(0, dayCount)
-                .Select(i => new Random().Next(50, 100))
-                .ToArray();
-
             var labels = new List<string>();
 
             for (int i = 0; i < dayCount; i++)
@@ -82,10 +91,16 @@ namespace DashboardDemo
                 labels.Add(input.StartDate.AddDays(i).Day.ToString());
             }
 
+            var data = new Dictionary<string, int>();
+
+            for (var i = 0; i < dayCount; i++)
+            {
+                data.Add(labels[i], new Random().Next(50, 100));
+            }
+
             return new NewUserStatistiWidgetResultDto()
             {
-                Data = data,
-                Labels = labels.ToArray()
+                Data = data
             };
         }
     }

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/Default.cshtml

@@ -0,0 +1,12 @@
+<div class="license-statistic-widget">
+    <abp-card background="Light">
+        <abp-card-header background="Secondary" class="text-white">
+            License Statistics
+        </abp-card-header>
+        <abp-card-body>
+            <div class="row">
+                <canvas class="LicenseStatisticChart"></canvas>
+            </div>
+        </abp-card-body>
+    </abp-card>
+</div>

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/Default.js

@@ -0,0 +1,92 @@
+(function () {
+    var serviceMethod = dashboardDemo.dashboard.getLicenseStatisticWidget;
+
+    function ChartManager($wrapper) {
+
+        var _chart;
+
+        var createChart = function (statistic) {
+            _chart = new Chart($wrapper.find('.LicenseStatisticChart'),
+                {
+                    type: 'pie',
+                    data: {
+                        labels: Object.keys(statistic.data),
+                        datasets: [
+                            {
+                                label: 'License ratios',
+                                data: Object.values(statistic.data),
+                                backgroundColor: [
+                                    'rgba(50, 150, 255, 1)',
+                                    'rgba(150, 255, 100, 1)',
+                                    'rgba(255, 100, 150, 1)'
+                                ]
+                            }
+                        ]
+                    }
+                });
+        };
+
+        var refreshChart = function (statistic) {
+            _chart.data = {
+                labels: Object.keys(statistic.data),
+                datasets: [
+                    {
+                        label: 'License ratios',
+                        data: Object.values(statistic.data),
+                        backgroundColor: [
+                            'rgba(50, 150, 255, 1)',
+                            'rgba(150, 255, 100, 1)',
+                            'rgba(255, 100, 150, 1)'
+                        ]
+                    }
+                ]
+            };
+            _chart.update();
+        };
+
+        var render = function (filters, callback) {
+            serviceMethod({
+                startDate: filters.startDate,
+                endDate: filters.endDate
+                })
+                .then(function (result) {
+                    callback(result);
+                });
+        };
+
+        var init = function (filters) {
+            render(filters, createChart);
+        };
+
+        var refresh = function (filters) {
+            render(filters, refreshChart);
+        };
+
+        return {
+            init: init,
+            refresh: refresh
+        };
+    }
+
+    abp.event.on('init-widgets', function (args) {
+        args.container
+            .find('.license-statistic-widget')
+            .each(function () {
+                var $this = $(this);
+                var chartManager = new ChartManager($this);
+                chartManager.init(args.filters);
+                $this.data('chart-manager', chartManager);
+            });
+
+    });
+
+    abp.event.on('refresh-widgets', function (args) {
+        args.container
+            .find('.license-statistic-widget')
+            .each(function () {
+                var $this = $(this);
+                var chartManager = $this.data('chart-manager');
+                chartManager.refresh(args.filters);
+            });
+    });
+})();

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/LicenseStatisticWidgetScriptContributor.cs

@@ -0,0 +1,15 @@
+using DashboardDemo.Web.Bundles;
+using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+using Volo.Abp.Modularity;
+
+namespace DashboardDemo.Web.Pages.Components.LicenseStatisticWidget
+{
+    [DependsOn(typeof(ChartjsScriptContributor))]
+    public class LicenseStatisticWidgetScriptContributor : BundleContributor
+    {
+        public override void ConfigureBundle(BundleConfigurationContext context)
+        {
+            context.Files.Add("/Pages/Components/LicenseStatisticWidget/Default.js");
+        }
+    }
+}

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/LicenseStatisticWidgetViewComponent.cs

@@ -0,0 +1,19 @@
+using DashboardDemo.Web.Bundles;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
+
+namespace DashboardDemo.Web.Pages.Components.LicenseStatisticWidget
+{
+    [Widget(
+        StyleTypes = new[] { typeof(ChartjsStyleContributor) },
+        ScriptTypes = new[] { typeof(LicenseStatisticWidgetScriptContributor) }
+        )]
+    public class LicenseStatisticWidgetViewComponent : AbpViewComponent
+    {
+        public IViewComponentResult Invoke()
+        {
+            return View();
+        }
+    }
+}

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.js

@@ -15,11 +15,11 @@
                 {
                     type: 'bar',
                     data: {
-                        labels: statistic.labels,
+                        labels: Object.keys(statistic.data),
                         datasets: [
                             {
                                 label: 'User count',
-                                data: statistic.data,
+                                data: Object.values(statistic.data),
                                 backgroundColor: 'rgba(255, 132, 132, 1)'
                             }
                         ]
@@ -38,11 +38,11 @@
 
         var refreshChart = function (statistic) {
             _chart.data = {
-                labels: statistic.labels,
+                labels: Object.keys(statistic.data),
                 datasets: [
                     {
                         label: 'User count',
-                        data: statistic.data,
+                        data: Object.values(statistic.data),
                         backgroundColor: 'rgba(255, 132, 132, 1)'
                     }
                 ]

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/NewUserStatisticWidgetViewComponent.cs

@@ -1,10 +1,9 @@
 using DashboardDemo.Web.Bundles;
-using DashboardDemo.Web.Pages.Components.NewUserStatisticWidget;
 using Microsoft.AspNetCore.Mvc;
 using Volo.Abp.AspNetCore.Mvc;
 using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
 
-namespace DashboardDemo.Web.Pages.Components.CountersWidget
+namespace DashboardDemo.Web.Pages.Components.NewUserStatisticWidget
 {
     [Widget(
         StyleTypes = new[] { typeof(ChartjsStyleContributor) },

samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.cshtml

@@ -37,5 +37,8 @@
         <abp-column size="_6">
             @await Component.InvokeAsync("NewUserStatisticWidget")
         </abp-column>
+        <abp-column size="_6">
+            @await Component.InvokeAsync("LicenseStatisticWidget")
+        </abp-column>
     </abp-row>
 </div>