dashboard demo improvements

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Dashboards/Pages/Components/Dashboard/Default.js

@@ -0,0 +1,6 @@
+(function ($) {
+        $('#GlobalRefreshButton').on('click',
+            function () {
+                $(document).trigger('RefreshWidgets', $('#DashboardGlobalFiltersForm').serializeFormToObject());
+            });
+})(jQuery);

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Dashboards/Volo.Abp.AspNetCore.Mvc.UI.Dashboards.csproj

@@ -18,14 +18,17 @@
   <ItemGroup>
     <EmbeddedResource Include="Volo\Abp\AspNetCore\Mvc\UI\Dashboards\Components\**\*.cshtml" />
     <Content Remove="Volo\Abp\AspNetCore\Mvc\UI\Dashboards\Components\**\*.cshtml" />
+    <EmbeddedResource Include="Pages\Components\Dashboard\*.js" />
+    <Content Remove="Pages\Components\Dashboard\*.js" />
   </ItemGroup>
 
   <ItemGroup>
+    <EmbeddedResource Include="Volo\Abp\AspNetCore\Mvc\UI\Dashboards\_ViewImports.cshtml" />
     <Content Remove="Volo\Abp\AspNetCore\Mvc\UI\Dashboards\_ViewImports.cshtml" />
   </ItemGroup>
 
   <ItemGroup>
-    <EmbeddedResource Include="Volo\Abp\AspNetCore\Mvc\UI\Dashboards\_ViewImports.cshtml" />
+    <Content Include="Volo\Abp\AspNetCore\Mvc\UI\Dashboards\Components\Dashboard\Default.cshtml" />
   </ItemGroup>
 
   <ItemGroup>

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Dashboards/Volo/Abp/AspNetCore/Mvc/UI/Dashboards/AbpBasicDashboardScriptContributor.cs

@@ -4,5 +4,9 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Dashboards
 {
     public class AbpBasicDashboardScriptContributor : BundleContributor
     {
+        public override void ConfigureBundle(BundleConfigurationContext context)
+        {
+            context.Files.Add("/Pages/Components/Dashboard/Default.js");
+        }
     }
 }

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Dashboards/Volo/Abp/AspNetCore/Mvc/UI/Dashboards/Components/Dashboard/Default.cshtml

@@ -1,23 +1,33 @@
-@using Microsoft.AspNetCore.Authorization
+@using Localization.Resources.AbpUi
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Mvc.Localization
 @using Microsoft.Extensions.Localization
 @using Volo.Abp.AspNetCore.Mvc.UI.Dashboards
 @using Volo.Abp.AspNetCore.Mvc.UI.Widgets
 @inject IAuthorizationService AuthorizationService
 @inject IWidgetRenderer WidgetRenderer
 @inject IGlobalFilterRenderer GlobalFilteRenderer
-@inject IStringLocalizerFactory localizer
+@inject IHtmlLocalizer<AbpUiResource> L
 @model Volo.Abp.AspNetCore.Mvc.UI.Dashboards.Components.Dashboard.DashboardViewModel
 @{
 }
 
 <abp-row class="mb-4">
-    @foreach (var globalFilterConfiguration in Model.Dashboard.AvailableGlobalFilters)
+    <form id="DashboardGlobalFiltersForm">
-    {
+        @foreach (var globalFilterConfiguration in Model.Dashboard.AvailableGlobalFilters)
-        var globalFilter = Model.GetGlobalFilter(globalFilterConfiguration.GlobalFilterName);
+        {
-        
+            var globalFilter = Model.GetGlobalFilter(globalFilterConfiguration.GlobalFilterName);
-        @await GlobalFilteRenderer.RenderAsync(Component, globalFilter.Name)
 
-    }
+            @await GlobalFilteRenderer.RenderAsync(Component, globalFilter.Name)
+
+        }
+        @if (Model.Dashboard.AvailableGlobalFilters.Any())
+        {
+        <div class="float-right">
+            <abp-button button-type="Success" text="@L["Refresh"].Value" id="GlobalRefreshButton" />
+        </div>
+        }
+    </form>
 </abp-row>
 
 <abp-row>

samples/DashboardDemo/src/DashboardDemo.Application/DemoStatisticAppService.cs

@@ -3,30 +3,61 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using Volo.Abp;
 using Volo.Abp.Application.Services;
 
 namespace DashboardDemo
 {
     public class DemoStatisticAppService : ApplicationService, IDemoStatisticAppService
     {
-        public async Task<NewUserPerDayStatisticDto> GetNewUserPerDayStatistic()
+        public async Task<GetMonthlyUserStatisticDto> GetMonthlyUserStatistic(FilterDto filter)
         {
+            var monthCount = GetLabels(filter, out var monthList);
+
             var data = Enumerable
-                .Repeat(0, 7)
+                .Repeat(0, monthCount)
-                .Select(i => new Random().Next(50, 99))
+                .Select(i => new Random().Next(750, 960))
                 .ToArray();
 
-            return new NewUserPerDayStatisticDto{Data = data};
+            return new GetMonthlyUserStatisticDto{Labels = monthList.ToArray(), Data = data};
         }
 
-        public async Task<MonthlyProfitStatisticDto> GetMonthlyProfitStatistic()
+        public async Task<MonthlyProfitStatisticDto> GetMonthlyProfitStatistic(FilterDto filter)
         {
+            var monthCount = GetLabels(filter, out var monthList);
+
             var data = Enumerable
-                .Repeat(0, 12)
+                .Repeat(0, monthCount)
                 .Select(i => new Random().Next(-20, 40))
                 .ToArray();
 
-            return new MonthlyProfitStatisticDto { Data = data };
+            return new MonthlyProfitStatisticDto { Labels = monthList.ToArray(), Data = data };
+        }
+
+        private static int GetLabels(FilterDto filter, out List<string> monthList)
+        {
+            DateTime endDate = filter.EndDate ?? DateTime.Now;
+            DateTime startDate = filter.StartDate ?? DateTime.Now.AddYears(-1);
+
+            if (filter.StartDate > filter.EndDate)
+            {
+                throw new BusinessException("Start date can not be greater than end date.");
+            }
+
+            var months = new[] {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"};
+            var monthCount = (endDate.Year - startDate.Year) * 12 + endDate.Month - startDate.Month +1;
+            monthList = new List<string>();
+
+            for (int i = 0; i < monthCount; i++)
+            {
+                monthList.Add(months[endDate.Month-1]);
+                endDate = endDate.AddMonths(-1);
+            }
+
+
+            monthList.Reverse();
+
+            return monthCount;
         }
     }
 }

samples/DashboardDemo/src/DashboardDemo.Application/FilterDto.cs

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

samples/DashboardDemo/src/DashboardDemo.Application/GetMonthlyUserStatisticDto.cs

@@ -0,0 +1,9 @@
+namespace DashboardDemo
+{
+    public class GetMonthlyUserStatisticDto
+    {
+        public string[] Labels { get; set; }
+
+        public int[] Data { get; set; }
+    }
+}

samples/DashboardDemo/src/DashboardDemo.Application/IDemoStatisticAppService.cs

@@ -8,8 +8,8 @@ namespace DashboardDemo
 {
     public interface IDemoStatisticAppService : IApplicationService
     {
-        Task<NewUserPerDayStatisticDto> GetNewUserPerDayStatistic();
+        Task<GetMonthlyUserStatisticDto> GetMonthlyUserStatistic(FilterDto filter);
 
-        Task<MonthlyProfitStatisticDto> GetMonthlyProfitStatistic();
+        Task<MonthlyProfitStatisticDto> GetMonthlyProfitStatistic(FilterDto filter);
     }
 }

samples/DashboardDemo/src/DashboardDemo.Application/MonthlyProfitStatisticDto.cs

@@ -2,6 +2,8 @@
 {
     public class MonthlyProfitStatisticDto
     {
+        public string[] Labels { get; set; }
+
         public int[] Data { get; set; }
     }
 }

samples/DashboardDemo/src/DashboardDemo.Application/NewUserPerDayStatisticDto.cs

@@ -1,7 +0,0 @@
-namespace DashboardDemo
-{
-    public class NewUserPerDayStatisticDto
-    {
-        public int[] Data { get; set; }
-    }
-}

samples/DashboardDemo/src/DashboardDemo.Web/DashboardDemoWebModule.cs

@@ -116,7 +116,7 @@ namespace DashboardDemo
                     {
                         configuration.AddContributors(typeof(MyDashboardScriptBundleContributor));
                     });
-                options.ScriptBundles.Add(UserCountWidgetViewComponent.WidgetName, configuration =>
+                options.ScriptBundles.Add(UserCountWidgetViewComponent.Name, configuration =>
                 {
                     configuration.AddContributors(typeof(UserCountWidgetScriptBundleContributor));
                 });
@@ -124,7 +124,7 @@ namespace DashboardDemo
                     {
                         configuration.AddContributors(typeof(MyDashboardStyleBundleContributor));
                     });
-                options.StyleBundles.Add(UserCountWidgetViewComponent.WidgetName, configuration =>
+                options.StyleBundles.Add(UserCountWidgetViewComponent.Name, configuration =>
                 {
                     configuration.AddContributors(typeof(UserCountWidgetStyleBundleContributor));
                 });

samples/DashboardDemo/src/DashboardDemo.Web/Dashboards/DashboardDefinitionProvider.cs

@@ -15,10 +15,10 @@ namespace DashboardDemo.Dashboards
                 DashboardNames.MyDashboard,
                 LocalizableString.Create<DashboardDemoResource>("MyDashboard")
                 )
-                .WithWidget(UserCountWidgetViewComponent.WidgetName)
+                .WithWidget(UserCountWidgetViewComponent.Name)
-                .WithWidget(RoleListWidgetViewComponent.WidgetName)
+                .WithWidget(RoleListWidgetViewComponent.Name)
-                .WithWidget(MonthlyProfitWidgetViewComponent.WidgetName)
+                .WithWidget(MonthlyProfitWidgetViewComponent.Name)
-                .WithGlobalFilter(RefreshGlobalFilterViewComponent.GlobalFilterName);
+                .WithGlobalFilter(DateRangeGlobalFilterViewComponent.Name);
 
             return new List<DashboardDefinition>
             {

samples/DashboardDemo/src/DashboardDemo.Web/GlobalFilters/GlobalFilterDefinitionProvider.cs

@@ -15,9 +15,9 @@ namespace DashboardDemo.GlobalFilters
         public static List<GlobalFilterDefinition> GetDefinitions()
         {
             var dateRangeFilter = new GlobalFilterDefinition(
-                RefreshGlobalFilterViewComponent.GlobalFilterName,
+                DateRangeGlobalFilterViewComponent.Name,
                     LocalizableString.Create<DashboardDemoResource>("DateRangeFilter"),
-                typeof(RefreshGlobalFilterViewComponent)
+                typeof(DateRangeGlobalFilterViewComponent)
                 );
 
             return new List<GlobalFilterDefinition>

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

@@ -13,15 +13,15 @@
 @model IndexModel
 @section styles {
     <link href="~/pages/index.css" rel="stylesheet" />
-    <abp-style-bundle name="@UserCountWidgetViewComponent.WidgetName" />
+    <abp-style-bundle name="@UserCountWidgetViewComponent.Name" />
 }
 @section scripts {
-    <abp-script-bundle name="@UserCountWidgetViewComponent.WidgetName" />
+    <abp-script-bundle name="@UserCountWidgetViewComponent.Name" />
 }
 <abp-card>
     <abp-card-header>@L["Welcome"]</abp-card-header>
     <abp-card-body>
-        @await WidgetRenderer.RenderAsync(Component, UserCountWidgetViewComponent.WidgetName)
+        @await WidgetRenderer.RenderAsync(Component, UserCountWidgetViewComponent.Name)
     </abp-card-body>
 </abp-card>
 @foreach (var dashboard in OptionsDashboadOptions.Value.Dashboards)

samples/DashboardDemo/src/DashboardDemo.Web/Pages/MyDashboardScriptBundleContributor.cs

@@ -1,4 +1,5 @@
 using DashboardDemo.Pages.widgets;
+using DashboardDemo.Pages.widgets.Filters;
 using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
 using Volo.Abp.AspNetCore.Mvc.UI.Dashboards;
 using Volo.Abp.Modularity;
@@ -9,7 +10,8 @@ namespace DashboardDemo.Pages
         typeof(AbpBasicDashboardScriptContributor),
         typeof(UserCountWidgetScriptBundleContributor),
         typeof(MonthlyProfitWidgetScriptBundleContributor),
-        typeof(RoleListWidgetScriptContributor)
+        typeof(RoleListWidgetScriptContributor),
+        typeof(DateRangeGlobalFilterScriptContributor)
     )]
     public class MyDashboardScriptBundleContributor : BundleContributor
     {

samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/Filters/RefreshGlobalFilter.js → samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/Filters/DateRangeGlobalFilter.js

@@ -1,5 +1,5 @@
 (function ($) {
-    var $container = $('#RefreshGlobalFilterContainer');
+    var $container = $('#DateRangeGlobalFilterContainer');
     if ($container.length > 0) {
 
     }

samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/Filters/RefreshGlobalFilterScriptContributor.cs → samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/Filters/DateRangeGlobalFilterScriptContributor.cs

@@ -2,11 +2,11 @@
 
 namespace DashboardDemo.Pages.widgets.Filters
 {
-    public class RefreshGlobalFilterScriptContributor : BundleContributor
+    public class DateRangeGlobalFilterScriptContributor : BundleContributor
     {
         public override void ConfigureBundle(BundleConfigurationContext context)
         {
-            context.Files.Add("/Pages/widgets/Filters/RefreshGlobalFilter.js");
+            context.Files.Add("/Pages/widgets/Filters/DateRangeGlobalFilter.js");
         }
     }
 }

samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/Filters/DateRangeGlobalFilterViewComponent.cshtml

@@ -0,0 +1,11 @@
+@inject IHtmlLocalizer<DashboardDemoResource> L
+@using DashboardDemo.Localization.DashboardDemo
+@using Microsoft.AspNetCore.Mvc.Localization
+@model DashboardDemo.Pages.widgets.Filters.DateRangeGlobalFilterViewComponent
+@{
+}
+<div id="DateRangeGlobalFilterContainer">
+    <input type="date" id="StartDate" name="StartDate"/>
+    <input type="date" id="EndDate" name="EndDate"/>
+</div>
+

samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/Filters/DateRangeGlobalFilterViewComponent.cshtml.cs

@@ -0,0 +1,17 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace DashboardDemo.Pages.widgets.Filters
+{
+    [ViewComponent]
+    public class DateRangeGlobalFilterViewComponent : ViewComponent
+    {
+        public const string Name = "DateRangeGlobalFilter";
+
+        public const string DisplayName = "Date Range Filter";
+
+        public IViewComponentResult Invoke()
+        {
+            return View("/Pages/widgets/Filters/DateRangeGlobalFilterViewComponent.cshtml", new DateRangeGlobalFilterViewComponent());
+        }
+    }
+}

samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/Filters/RefreshGlobalFilterViewComponent.cshtml

@@ -1,10 +0,0 @@
-@inject IHtmlLocalizer<DashboardDemoResource> L
-@using DashboardDemo.Localization.DashboardDemo
-@using Microsoft.AspNetCore.Mvc.Localization
-@model DashboardDemo.Pages.widgets.Filters.RefreshGlobalFilterViewComponent
-@{
-}
-<div id="RefreshGlobalFilterContainer">
-    <abp-button button-type="Success" text="@L["Refresh"].Value" id="GlobalRefreshButton"/>
-</div>
-

samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/Filters/RefreshGlobalFilterViewComponent.cshtml.cs

@@ -1,17 +0,0 @@
-using Microsoft.AspNetCore.Mvc;
-
-namespace DashboardDemo.Pages.widgets.Filters
-{
-    [ViewComponent]
-    public class RefreshGlobalFilterViewComponent : ViewComponent
-    {
-        public const string GlobalFilterName = "RefreshGlobalFilter";
-
-        public const string DisplayName = "Refresh Filter";
-
-        public IViewComponentResult Invoke()
-        {
-            return View("/Pages/widgets/Filters/RefreshGlobalFilterViewComponent.cshtml", new RefreshGlobalFilterViewComponent());
-        }
-    }
-}

samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/MonthlyProfitWidget/MonthlyProfitWidget.js

@@ -2,15 +2,13 @@
     var $container = $('#MonthlyProfitWidgetContainer');
     if ($container.length > 0) {
         var chart = {};
-        var $RefreshGlobalFilterContainer = $("#RefreshGlobalFilterContainer");
 
         var createChart = function () {
-            dashboardDemo.demoStatistic.getMonthlyProfitStatistic().then(function (result) {
+            dashboardDemo.demoStatistic.getMonthlyProfitStatistic({}).then(function (result) {
-
                 chart = new Chart($container.find('#MonthlyProfitStatistics'), {
                     type: 'line',
                     data: {
-                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"],
+                        labels: result.labels,
                         datasets: [{
                             label: 'Monthly Profit',
                             data: result.data,
@@ -30,15 +28,20 @@
             });
         };
 
-        if ($RefreshGlobalFilterContainer.length > 0) {
+        $(document).on('RefreshWidgets',
-            $RefreshGlobalFilterContainer.find('#GlobalRefreshButton').on('click',
+            function (event, filters) {
-                function () {
+                dashboardDemo.demoStatistic.getMonthlyProfitStatistic({ startDate: filters.startDate, endDate: filters.endDate }).then(function (result) {
-                    dashboardDemo.demoStatistic.getMonthlyProfitStatistic().then(function (result) {
+                    chart.data = {
-                        chart.data.datasets[0].data = result.data;
+                        labels: result.labels,
-                        chart.update();
+                            datasets: [{
-                    });
+                            label: 'Monthly Profit',
+                            data: result.data,
+                            backgroundColor: 'rgba(255, 255, 132, 0.2)'
+                        }]
+                    },
+                    chart.update();
                 });
-        }
+            });
 
         createChart();
     }

samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/MonthlyProfitWidget/MonthlyProfitWidgetScriptBundleContributor.cs

@@ -10,7 +10,6 @@ namespace DashboardDemo.Pages.widgets
     [DependsOn(typeof(JQueryScriptContributor))]
     [DependsOn(typeof(ClipboardScriptBundleContributor))]
     [DependsOn(typeof(ChartjsScriptContributor))]
-    [DependsOn(typeof(RefreshGlobalFilterScriptContributor))]
     public class MonthlyProfitWidgetScriptBundleContributor : BundleContributor
     {
         public override void ConfigureBundle(BundleConfigurationContext context)

samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/MonthlyProfitWidget/MonthlyProfitWidgetViewComponent.cshtml.cs

@@ -5,7 +5,7 @@ namespace DashboardDemo.Pages.widgets
 {
     public class MonthlyProfitWidgetViewComponent : AbpViewComponent
     {
-        public const string WidgetName = "MonthlyProfitWidget";
+        public const string Name = "MonthlyProfitWidget";
         
         public const string DisplayName = "Monthly Profit Widget";
 

samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/RoleListWidget/RoleListWidgetViewComponent.cshtml.cs

@@ -5,7 +5,7 @@ namespace DashboardDemo.Pages.widgets
     [ViewComponent]
     public class RoleListWidgetViewComponent : ViewComponent
     {
-        public const string WidgetName = "RoleListWidget";
+        public const string Name = "RoleListWidget";
 
         public const string DisplayName = "RoleListWidgets";
 

samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/UserCountWidget/UserCountWidget.js

@@ -3,18 +3,14 @@
     if ($container.length > 0) {
         var chart = {};
 
-        var $DateRangeGlobalFilterContainer = $("#RefreshGlobalFilterContainer");
-
-
         var createChart = function () {
-            dashboardDemo.demoStatistic.getNewUserPerDayStatistic().then(function (result) {
+            dashboardDemo.demoStatistic.getMonthlyUserStatistic({}).then(function (result) {
-
                 chart = new Chart($container.find('#UserStatistics'), {
                     type: 'bar',
                     data: {
-                        labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', "Sun"],
+                        labels: result.labels,
                         datasets: [{
-                            label: 'Avarage new user per day',
+                            label: 'Monthly user count',
                             data: result.data,
                             backgroundColor: 'rgba(255, 99, 132, 0.2)'
                         }]
@@ -32,16 +28,20 @@
             });
         };
 
-        if ($DateRangeGlobalFilterContainer.length > 0) {
+            $(document).on('RefreshWidgets',
-            $DateRangeGlobalFilterContainer.find('#GlobalRefreshButton').on('click',
+                function (event, filters) {
-                function () {
+                    dashboardDemo.demoStatistic.getMonthlyUserStatistic({ startDate: filters.startDate, endDate: filters.endDate }).then(function (result) {
-                    dashboardDemo.demoStatistic.getNewUserPerDayStatistic().then(function (result) {
+                        chart.data= {
-
+                            labels: result.labels,
-                        chart.data.datasets[0].data = result.data;
+                                datasets: [{
+                                label: 'Monthly user count',
+                                data: result.data,
+                                backgroundColor: 'rgba(255, 99, 132, 0.2)'
+                            }]
+                        },
                         chart.update();
                     });
                 });
-        }
 
         createChart();
     }

samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/UserCountWidget/UserCountWidgetScriptBundleContributor.cs

@@ -10,7 +10,6 @@ namespace DashboardDemo.Pages.widgets
     [DependsOn(typeof(JQueryScriptContributor))]
     [DependsOn(typeof(ClipboardScriptBundleContributor))]
     [DependsOn(typeof(ChartjsScriptContributor))]
-    [DependsOn(typeof(RefreshGlobalFilterScriptContributor))]
     public class UserCountWidgetScriptBundleContributor : BundleContributor
     {
         public override void ConfigureBundle(BundleConfigurationContext context)

samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/UserCountWidget/UserCountWidgetViewComponent.cshtml.cs

@@ -5,7 +5,7 @@ namespace DashboardDemo.Pages.widgets
 {
     public class UserCountWidgetViewComponent : AbpViewComponent
     {
-        public const string WidgetName = "UserCountWidget";
+        public const string Name = "UserCountWidget";
         
         public const string DisplayName = "UserCountWidgett";
 

samples/DashboardDemo/src/DashboardDemo.Web/Widgets/WidgetDefinitionProvider.cs

@@ -12,7 +12,7 @@ namespace DashboardDemo.Widgets
         public static List<WidgetDefinition> GetDefinitions()
         {
             var userCountWidget = new WidgetDefinition(
-                    UserCountWidgetViewComponent.WidgetName,
+                    UserCountWidgetViewComponent.Name,
                     LocalizableString.Create<DashboardDemoResource>(UserCountWidgetViewComponent.DisplayName),
                     typeof(UserCountWidgetViewComponent)
                 )
@@ -20,7 +20,7 @@ namespace DashboardDemo.Widgets
                 .AddRequiredPermission(IdentityPermissions.Users.Default);
 
             var monthlyProfitWidget = new WidgetDefinition(
-                    MonthlyProfitWidgetViewComponent.WidgetName,
+                    MonthlyProfitWidgetViewComponent.Name,
                     LocalizableString.Create<DashboardDemoResource>(MonthlyProfitWidgetViewComponent.DisplayName),
                     typeof(MonthlyProfitWidgetViewComponent)
                 )
@@ -28,7 +28,7 @@ namespace DashboardDemo.Widgets
                 .AddRequiredPermission(IdentityPermissions.Users.Default);
 
             var roleListWidget = new WidgetDefinition(
-                    RoleListWidgetViewComponent.WidgetName,
+                    RoleListWidgetViewComponent.Name,
                     LocalizableString.Create<DashboardDemoResource>(RoleListWidgetViewComponent.DisplayName),
                     typeof(RoleListWidgetViewComponent)
                 )