dashboard demo improvements

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

@@ -18,5 +18,15 @@ namespace DashboardDemo
 
             return new NewUserPerDayStatisticDto{Data = data};
         }
+
+        public async Task<MonthlyProfitStatisticDto> GetMonthlyProfitStatistic()
+        {
+            var data = Enumerable
+                .Repeat(0, 12)
+                .Select(i => new Random().Next(-20, 40))
+                .ToArray();
+
+            return new MonthlyProfitStatisticDto { Data = data };
+        }
     }
 }

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

@@ -9,5 +9,7 @@ namespace DashboardDemo
     public interface IDemoStatisticAppService : IApplicationService
     {
         Task<NewUserPerDayStatisticDto> GetNewUserPerDayStatistic();
+
+        Task<MonthlyProfitStatisticDto> GetMonthlyProfitStatistic();
     }
 }

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

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

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

@@ -15,9 +15,10 @@ namespace DashboardDemo.Dashboards
                 DashboardNames.MyDashboard,
                 LocalizableString.Create<DashboardDemoResource>("MyDashboard")
                 )
-                .WithWidget(RoleListWidgetViewComponent.WidgetName)
                 .WithWidget(UserCountWidgetViewComponent.WidgetName)
-                .WithGlobalFilter(DateRangeGlobalFilterViewComponent.GlobalFilterName);
+                .WithWidget(RoleListWidgetViewComponent.WidgetName)
+                .WithWidget(MonthlyProfitWidgetViewComponent.WidgetName)
+                .WithGlobalFilter(RefreshGlobalFilterViewComponent.GlobalFilterName);
 
             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(
-                DateRangeGlobalFilterViewComponent.GlobalFilterName,
+                RefreshGlobalFilterViewComponent.GlobalFilterName,
                     LocalizableString.Create<DashboardDemoResource>("DateRangeFilter"),
-                typeof(DateRangeGlobalFilterViewComponent)
+                typeof(RefreshGlobalFilterViewComponent)
                 );
 
             return new List<GlobalFilterDefinition>

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

@@ -8,6 +8,7 @@ namespace DashboardDemo.Pages
     [DependsOn(
         typeof(AbpBasicDashboardScriptContributor),
         typeof(UserCountWidgetScriptBundleContributor),
+        typeof(MonthlyProfitWidgetScriptBundleContributor),
         typeof(RoleListWidgetScriptContributor)
     )]
     public class MyDashboardScriptBundleContributor : BundleContributor

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

@@ -8,6 +8,7 @@ namespace DashboardDemo.Pages
     [DependsOn(
         typeof(AbpBasicDashboardStyleContributor),
         typeof(UserCountWidgetStyleBundleContributor),
+        typeof(MonthlyProfitWidgetStyleBundleContributor),
         typeof(RoleListWidgetStyleContributor)
     )]
     public class MyDashboardStyleBundleContributor : BundleContributor

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

@@ -1,6 +0,0 @@
-(function ($) {
-    var $container = $('#DateRangeGlobalFilterContainer');
-    if ($container.length > 0) {
-        console.log("GlobalRefreshButton loaded");
-    }
-})(jQuery);

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

@@ -1,17 +0,0 @@
-using Microsoft.AspNetCore.Mvc;
-
-namespace DashboardDemo.Pages.widgets.Filters
-{
-    [ViewComponent]
-    public class DateRangeGlobalFilterViewComponent : ViewComponent
-    {
-        public const string GlobalFilterName = "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/RefreshGlobalFilter.js

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

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

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

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

@@ -1,10 +1,10 @@
 @inject IHtmlLocalizer<DashboardDemoResource> L
 @using DashboardDemo.Localization.DashboardDemo
 @using Microsoft.AspNetCore.Mvc.Localization
-@model DashboardDemo.Pages.widgets.Filters.DateRangeGlobalFilterViewComponent
+@model DashboardDemo.Pages.widgets.Filters.RefreshGlobalFilterViewComponent
 @{
 }
-<div id="DateRangeGlobalFilterContainer">
+<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

@@ -0,0 +1,17 @@
+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.css

@@ -0,0 +1,3 @@
+body {
+    margin: 0;
+}

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

@@ -0,0 +1,45 @@
+(function ($) {
+    var $container = $('#MonthlyProfitWidgetContainer');
+    if ($container.length > 0) {
+        var chart = {};
+        var $RefreshGlobalFilterContainer = $("#RefreshGlobalFilterContainer");
+
+        var createChart = function () {
+            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"],
+                        datasets: [{
+                            label: 'Monthly Profit',
+                            data: result.data,
+                            backgroundColor: 'rgba(255, 255, 132, 0.2)'
+                        }]
+                    },
+                    options: {
+                        scales: {
+                            yAxes: [{
+                                ticks: {
+                                    beginAtZero: true
+                                }
+                            }]
+                        }
+                    }
+                });
+            });
+        };
+
+        if ($RefreshGlobalFilterContainer.length > 0) {
+            $RefreshGlobalFilterContainer.find('#GlobalRefreshButton').on('click',
+                function () {
+                    dashboardDemo.demoStatistic.getMonthlyProfitStatistic().then(function (result) {
+                        chart.data.datasets[0].data = result.data;
+                        chart.update();
+                    });
+                });
+        }
+
+        createChart();
+    }
+})(jQuery);

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

@@ -0,0 +1,21 @@
+using DashboardDemo.Pages.widgets.Chartjs;
+using DashboardDemo.Pages.widgets.Filters;
+using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+using Volo.Abp.AspNetCore.Mvc.UI.Packages.Clipboard;
+using Volo.Abp.AspNetCore.Mvc.UI.Packages.JQuery;
+using Volo.Abp.Modularity;
+
+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)
+        {
+            context.Files.Add("/Pages/widgets/MonthlyProfitWidget/MonthlyProfitWidget.js");
+        }
+    }
+}

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

@@ -0,0 +1,20 @@
+using DashboardDemo.Pages.widgets.Chartjs;
+using DashboardDemo.Pages.widgets.Filters;
+using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+using Volo.Abp.AspNetCore.Mvc.UI.Packages.Bootstrap;
+using Volo.Abp.AspNetCore.Mvc.UI.Packages.HighlightJs;
+using Volo.Abp.Modularity;
+
+namespace DashboardDemo.Pages.widgets
+{
+    [DependsOn(typeof(BootstrapStyleContributor))]
+    [DependsOn(typeof(HighlightJsStyleContributor))]
+    [DependsOn(typeof(ChartjsStyleContributor))]
+    public class MonthlyProfitWidgetStyleBundleContributor : BundleContributor
+    {
+        public override void ConfigureBundle(BundleConfigurationContext context)
+        {
+            context.Files.Add("/Pages/widgets/MonthlyProfitWidget/MonthlyProfitWidget.css");
+        }
+    }
+}

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

@@ -0,0 +1,16 @@
+@inject IHtmlLocalizer<DashboardDemoResource> L
+@using DashboardDemo.Localization.DashboardDemo
+@using Microsoft.AspNetCore.Mvc.Localization
+@model DashboardDemo.Pages.widgets.MonthlyProfitWidgetViewComponent
+@{
+}
+<div id="MonthlyProfitWidgetContainer">
+    <abp-card background="Light">
+        <abp-card-header background="Info">@L["Monthly Profit"]</abp-card-header>
+        <abp-card-body>
+            <div class="row margin-bottom-5">
+                <canvas  id="MonthlyProfitStatistics"></canvas>
+            </div>
+        </abp-card-body>
+    </abp-card>
+</div>

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

@@ -0,0 +1,17 @@
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc;
+
+namespace DashboardDemo.Pages.widgets
+{
+    public class MonthlyProfitWidgetViewComponent : AbpViewComponent
+    {
+        public const string WidgetName = "MonthlyProfitWidget";
+        
+        public const string DisplayName = "Monthly Profit Widget";
+
+        public IViewComponentResult Invoke()
+        {
+            return View("/Pages/widgets/MonthlyProfitWidget/MonthlyProfitWidgetViewComponent.cshtml", new MonthlyProfitWidgetViewComponent());
+        }
+    }
+}

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

@@ -1,14 +1,15 @@
 (function ($) {
     var $container = $('#UserCountWidgetContainer');
     if ($container.length > 0) {
+        var chart = {};
 
-        var $DateRangeGlobalFilterContainer = $("#DateRangeGlobalFilterContainer");
+        var $DateRangeGlobalFilterContainer = $("#RefreshGlobalFilterContainer");
 
 
         var createChart = function () {
             dashboardDemo.demoStatistic.getNewUserPerDayStatistic().then(function (result) {
 
-                var chart = new Chart($container.find('#UserStatistics'), {
+                chart = new Chart($container.find('#UserStatistics'), {
                     type: 'bar',
                     data: {
                         labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', "Sun"],
@@ -34,7 +35,11 @@
         if ($DateRangeGlobalFilterContainer.length > 0) {
             $DateRangeGlobalFilterContainer.find('#GlobalRefreshButton').on('click',
                 function () {
-                    createChart();
+                    dashboardDemo.demoStatistic.getNewUserPerDayStatistic().then(function (result) {
+
+                        chart.data.datasets[0].data = result.data;
+                        chart.update();
+                    });
                 });
         }
 

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

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

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

@@ -16,7 +16,15 @@ namespace DashboardDemo.Widgets
                     LocalizableString.Create<DashboardDemoResource>(UserCountWidgetViewComponent.DisplayName),
                     typeof(UserCountWidgetViewComponent)
                 )
-                .SetDefaultDimension(6, 7)
+                .SetDefaultDimension(6, 4)
+                .AddRequiredPermission(IdentityPermissions.Users.Default);
+
+            var monthlyProfitWidget = new WidgetDefinition(
+                    MonthlyProfitWidgetViewComponent.WidgetName,
+                    LocalizableString.Create<DashboardDemoResource>(MonthlyProfitWidgetViewComponent.DisplayName),
+                    typeof(MonthlyProfitWidgetViewComponent)
+                )
+                .SetDefaultDimension(6, 4)
                 .AddRequiredPermission(IdentityPermissions.Users.Default);
 
             var roleListWidget = new WidgetDefinition(
@@ -30,6 +38,7 @@ namespace DashboardDemo.Widgets
             return new List<WidgetDefinition>
             {
                 userCountWidget,
+                monthlyProfitWidget,
                 roleListWidget
             };
         }