Dashboard global filter sample

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

@@ -6,6 +6,7 @@ using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.Extensions.DependencyInjection;
 using DashboardDemo.EntityFrameworkCore;
+using DashboardDemo.GlobalFilters;
 using DashboardDemo.Localization.DashboardDemo;
 using DashboardDemo.Menus;
 using DashboardDemo.Pages;
@@ -75,6 +76,7 @@ namespace DashboardDemo
             var configuration = context.Services.GetConfiguration();
 
             ConfigureWidgets();
+            ConfigureGlobalFilters();
             ConfigureDashboards();
             ConfigureDatabaseServices();
             ConfigureAutoMapper();
@@ -93,6 +95,14 @@ namespace DashboardDemo
             });
         }
 
+        private void ConfigureGlobalFilters()
+        {
+            Configure<GlobalFilterOptions>(options =>
+            {
+                options.GlobalFilters.AddRange(GlobalFilterDefinitionProvider.GetDefinitions());
+            });
+        }
+
         private void ConfigureDashboards()
         {
             Configure<DashboardOptions>(options =>

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

@@ -1,6 +1,7 @@
 using System.Collections.Generic;
 using DashboardDemo.Localization.DashboardDemo;
 using DashboardDemo.Pages.widgets;
+using DashboardDemo.Pages.widgets.Filters;
 using DashboardDemo.Widgets;
 using Volo.Abp.AspNetCore.Mvc.UI.Dashboards;
 using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
@@ -17,7 +18,8 @@ namespace DashboardDemo.Dashboards
                 LocalizableString.Create<DashboardDemoResource>("MyDashboard")
                 )
                 .WithWidget(RoleListWidgetViewComponent.WidgetName)
-                .WithWidget(UserCountWidgetViewComponent.WidgetName);
+                .WithWidget(UserCountWidgetViewComponent.WidgetName)
+                .WithGlobalFilter(DateRangeGlobalFilterViewComponent.GlobalFilterName);
 
             return new List<DashboardDefinition>
             {

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

@@ -0,0 +1,29 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using DashboardDemo.Localization.DashboardDemo;
+using DashboardDemo.Pages.widgets;
+using DashboardDemo.Pages.widgets.Filters;
+using Volo.Abp.AspNetCore.Mvc.UI.Dashboards;
+using Volo.Abp.Localization;
+
+namespace DashboardDemo.GlobalFilters
+{
+    public static class GlobalFilterDefinitionProvider
+    {
+        public static List<GlobalFilterDefinition> GetDefinitions()
+        {
+            var dateRangeFilter = new GlobalFilterDefinition(
+                DateRangeGlobalFilterViewComponent.GlobalFilterName,
+                    LocalizableString.Create<DashboardDemoResource>("DateRangeFilter"),
+                typeof(DateRangeGlobalFilterViewComponent)
+                );
+
+            return new List<GlobalFilterDefinition>
+            {
+                dateRangeFilter
+            };
+        }
+    }
+}

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

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

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

@@ -0,0 +1,12 @@
+using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+
+namespace DashboardDemo.Pages.widgets.Filters
+{
+    public class DateRangeGlobalFilterScriptContributor : BundleContributor
+    {
+        public override void ConfigureBundle(BundleConfigurationContext context)
+        {
+            context.Files.Add("/Pages/widgets/Filters/DateRangeGlobalFilter.js");
+        }
+    }
+}

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

@@ -0,0 +1,10 @@
+@inject IHtmlLocalizer<DashboardDemoResource> L
+@using DashboardDemo.Localization.DashboardDemo
+@using Microsoft.AspNetCore.Mvc.Localization
+@model DashboardDemo.Pages.widgets.Filters.DateRangeGlobalFilterViewComponent
+@{
+}
+<div id="DateRangeGlobalFilterContainer">
+    <abp-button button-type="Success" text="@L["Refresh"].Value" id="GlobalRefreshButton"/>
+</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 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/UserCountWidget.js

@@ -2,14 +2,11 @@
     var $container = $('#UserCountWidgetContainer');
     if ($container.length > 0) {
 
-        var _identityUserAppService = volo.abp.identity.identityUser;
+        var $DateRangeGlobalFilterContainer = $("#DateRangeGlobalFilterContainer");
-        _identityUserAppService.getList({}).then(function (result) {
-            $container.find('#UserCount').text(result.items.length);
-        });
 
-        var createChart = function() {
+
+        var createChart = function () {
             dashboardDemo.userStatistic.getNewUserPerDayStatistic().then(function (result) {
-                console.log(result.data);
 
                 var chart = new Chart($container.find('#UserStatistics'), {
                     type: 'bar',
@@ -34,6 +31,13 @@
             });
         };
 
+        if ($DateRangeGlobalFilterContainer.length > 0) {
+            $DateRangeGlobalFilterContainer.find('#GlobalRefreshButton').on('click',
+                function () {
+                    createChart();
+                });
+        }
+
         createChart();
     }
 })(jQuery);

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

@@ -1,4 +1,5 @@
 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;
@@ -9,6 +10,7 @@ namespace DashboardDemo.Pages.widgets
     [DependsOn(typeof(JQueryScriptContributor))]
     [DependsOn(typeof(ClipboardScriptBundleContributor))]
     [DependsOn(typeof(ChartjsScriptContributor))]
+    [DependsOn(typeof(DateRangeGlobalFilterScriptContributor))]
     public class UserCountWidgetScriptBundleContributor : BundleContributor
     {
         public override void ConfigureBundle(BundleConfigurationContext context)

samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/UserCountWidgetStyleBundleContributor.cs

@@ -1,4 +1,5 @@
 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;