From 0ff9ad5b198e2293778adb169738fd19355ec62b Mon Sep 17 00:00:00 2001 From: Yunus Emre Kalkan Date: Wed, 24 Jul 2019 11:01:39 +0300 Subject: [PATCH] Pie chart example --- .../CountersWidgetInputDto.cs | 5 +- .../IDashboardAppService.cs | 2 + .../LicenseStatistiWidgetResultDto.cs | 9 ++ .../LicenseStatisticWidgetInputDto.cs | 6 ++ .../NewUserStatistiWidgetResultDto.cs | 8 +- .../NewUserStatisticWidgetInputDto.cs | 6 +- .../WidgetFilter.cs | 10 ++ .../DashboardAppService.cs | 43 ++++++--- .../LicenseStatisticWidget/Default.cshtml | 12 +++ .../LicenseStatisticWidget/Default.js | 92 +++++++++++++++++++ ...LicenseStatisticWidgetScriptContributor.cs | 15 +++ .../LicenseStatisticWidgetViewComponent.cs | 19 ++++ .../NewUserStatisticWidget/Default.js | 8 +- .../NewUserStatisticWidgetViewComponent.cs | 3 +- .../Pages/MyDashboard.cshtml | 3 + 15 files changed, 208 insertions(+), 33 deletions(-) create mode 100644 samples/DashboardDemo/src/DashboardDemo.Application.Contracts/LicenseStatistiWidgetResultDto.cs create mode 100644 samples/DashboardDemo/src/DashboardDemo.Application.Contracts/LicenseStatisticWidgetInputDto.cs create mode 100644 samples/DashboardDemo/src/DashboardDemo.Application.Contracts/WidgetFilter.cs create mode 100644 samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/Default.cshtml create mode 100644 samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/Default.js create mode 100644 samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/LicenseStatisticWidgetScriptContributor.cs create mode 100644 samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/LicenseStatisticWidgetViewComponent.cs diff --git a/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/CountersWidgetInputDto.cs b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/CountersWidgetInputDto.cs index 8296a58556..d7c6dfc53c 100644 --- a/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/CountersWidgetInputDto.cs +++ b/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; } } } \ No newline at end of file diff --git a/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/IDashboardAppService.cs b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/IDashboardAppService.cs index ddbe447c04..4cbf32a1d4 100644 --- a/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/IDashboardAppService.cs +++ b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/IDashboardAppService.cs @@ -8,5 +8,7 @@ namespace DashboardDemo Task GetCountersWidgetAsync(CountersWidgetInputDto input); Task GetNewUserStatisticWidgetAsync(NewUserStatisticWidgetInputDto input); + + Task GetLicenseStatisticWidgetAsync(LicenseStatisticWidgetInputDto input); } } diff --git a/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/LicenseStatistiWidgetResultDto.cs b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/LicenseStatistiWidgetResultDto.cs new file mode 100644 index 0000000000..e14853f3f8 --- /dev/null +++ b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/LicenseStatistiWidgetResultDto.cs @@ -0,0 +1,9 @@ +using System.Collections.Generic; + +namespace DashboardDemo +{ + public class LicenseStatistiWidgetResultDto + { + public Dictionary Data { get; set; } + } +} \ No newline at end of file diff --git a/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/LicenseStatisticWidgetInputDto.cs b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/LicenseStatisticWidgetInputDto.cs new file mode 100644 index 0000000000..96903da718 --- /dev/null +++ b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/LicenseStatisticWidgetInputDto.cs @@ -0,0 +1,6 @@ +namespace DashboardDemo +{ + public class LicenseStatisticWidgetInputDto : WidgetFilter + { + } +} \ No newline at end of file diff --git a/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/NewUserStatistiWidgetResultDto.cs b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/NewUserStatistiWidgetResultDto.cs index 1a207141c4..cb409a2be4 100644 --- a/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/NewUserStatistiWidgetResultDto.cs +++ b/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 Data { get; set; } } } \ No newline at end of file diff --git a/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/NewUserStatisticWidgetInputDto.cs b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/NewUserStatisticWidgetInputDto.cs index 3c17a4ece6..fda641cd11 100644 --- a/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/NewUserStatisticWidgetInputDto.cs +++ b/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; } } \ No newline at end of file diff --git a/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/WidgetFilter.cs b/samples/DashboardDemo/src/DashboardDemo.Application.Contracts/WidgetFilter.cs new file mode 100644 index 0000000000..203b100573 --- /dev/null +++ b/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; } + } +} diff --git a/samples/DashboardDemo/src/DashboardDemo.Application/DashboardAppService.cs b/samples/DashboardDemo/src/DashboardDemo.Application/DashboardAppService.cs index 5d13aa3be1..fa2c0202fa 100644 --- a/samples/DashboardDemo/src/DashboardDemo.Application/DashboardAppService.cs +++ b/samples/DashboardDemo/src/DashboardDemo.Application/DashboardAppService.cs @@ -36,6 +36,20 @@ namespace DashboardDemo throw new UserFriendlyException("Not implemented statistic frequency."); } + public async Task GetLicenseStatisticWidgetAsync(LicenseStatisticWidgetInputDto input) + { + var days = (int)Math.Round(input.EndDate.Subtract(input.StartDate).TotalDays + 1); + + var data = new Dictionary + { + {"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 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(); - 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(); + 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(); 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(); + + 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 }; } } diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/Default.cshtml b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/Default.cshtml new file mode 100644 index 0000000000..72022fbd2c --- /dev/null +++ b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/Default.cshtml @@ -0,0 +1,12 @@ +
+ + + License Statistics + + +
+ +
+ + +
\ No newline at end of file diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/Default.js b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/Default.js new file mode 100644 index 0000000000..3d8570b545 --- /dev/null +++ b/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); + }); + }); +})(); \ No newline at end of file diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/LicenseStatisticWidgetScriptContributor.cs b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/LicenseStatisticWidgetScriptContributor.cs new file mode 100644 index 0000000000..1144865e91 --- /dev/null +++ b/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"); + } + } +} diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/LicenseStatisticWidgetViewComponent.cs b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/LicenseStatisticWidgetViewComponent.cs new file mode 100644 index 0000000000..f35803e73e --- /dev/null +++ b/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(); + } + } +} diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.js b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.js index a1f7a872d6..e026e621dd 100644 --- a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.js +++ b/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)' } ] diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/NewUserStatisticWidgetViewComponent.cs b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/NewUserStatisticWidgetViewComponent.cs index 8cfba2e85b..2e2386be7a 100644 --- a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/NewUserStatisticWidgetViewComponent.cs +++ b/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) }, diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.cshtml b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.cshtml index cd558d6b72..414bd60500 100644 --- a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.cshtml +++ b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboard.cshtml @@ -37,5 +37,8 @@ @await Component.InvokeAsync("NewUserStatisticWidget") + + @await Component.InvokeAsync("LicenseStatisticWidget") +