Create initial sample dashboard.

framework/src/Volo.Abp.Core/System/AbpDateTimeExtensions.cs

@@ -0,0 +1,21 @@
+namespace System
+{
+    /// <summary>
+    /// Extension methods for the <see cref="DateTime"/>.
+    /// </summary>
+    public static class AbpDateTimeExtensions
+    {
+        public static DateTime ClearTime(this DateTime dateTime)
+        {
+            return dateTime.Subtract(
+                new TimeSpan(
+                    0,
+                    dateTime.Hour,
+                    dateTime.Minute,
+                    dateTime.Second,
+                    dateTime.Millisecond
+                )
+            );
+        }
+    }
+}

framework/src/Volo.Abp.Core/System/AbpDayOfWeekExtensions.cs

@@ -1,7 +1,7 @@
 namespace System
 {
     /// <summary>
-    /// Extension methods for <see cref="AbpDayOfWeekExtensions"/>.
+    /// Extension methods for the <see cref="DayOfWeek"/>.
     /// </summary>
     public static class AbpDayOfWeekExtensions
     {

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/CountersWidgetViewComponent.cs

@@ -0,0 +1,29 @@
+using System;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
+
+namespace DashboardDemo.Web.Pages.Components.CountersWidget
+{
+    [Widget(
+        StyleFiles = new[] { "/Pages/Components/CountersWidget/Default.css" }
+        )]
+    public class CountersWidgetViewComponent : AbpViewComponent
+    {
+        public async Task<IViewComponentResult> InvokeAsync(DateTime startDate, DateTime endDate)
+        {
+            /* Instead of hard-coded / calculated values, get counts from a database or a service!
+             */
+
+            var dayFactor = (int)Math.Round(endDate.Subtract(startDate).TotalDays + 1);
+            return View(new CountersWidgetViewModel
+            {
+                NewUsers = dayFactor * 86,
+                ActiveUsers = dayFactor * 58,
+                TotalIncome = dayFactor * 749.53,
+                TotalProfit = dayFactor * 239.45,
+            });
+        }
+    }
+}

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/CountersWidgetViewModel.cs

@@ -0,0 +1,10 @@
+namespace DashboardDemo.Web.Pages.Components.CountersWidget
+{
+    public class CountersWidgetViewModel
+    {
+        public int NewUsers { get; set; }
+        public int ActiveUsers { get; set; }
+        public double TotalIncome { get; set; }
+        public double TotalProfit { get; set; }
+    }
+}

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

@@ -0,0 +1,29 @@
+@model DashboardDemo.Web.Pages.Components.CountersWidget.CountersWidgetViewModel
+<div class="counters-widget">
+    <abp-row>
+        <abp-column size-md="_3">
+            <div class="counters-widget-item">
+                <div class="counters-widget-count">@Model.NewUsers</div>
+                <div class="counters-widget-count-name">New Users</div>
+            </div>
+        </abp-column>
+        <abp-column size-md="_3">
+            <div class="counters-widget-item">
+                <div class="counters-widget-count">@Model.ActiveUsers</div>
+                <div class="counters-widget-count-name">Active Users</div>
+            </div>
+        </abp-column>
+        <abp-column size-md="_3">
+            <div class="counters-widget-item">
+                <div class="counters-widget-count">@Model.TotalIncome.ToString("C")</div>
+                <div class="counters-widget-count-name">Total Income</div>
+            </div>
+        </abp-column>
+        <abp-column size-md="_3">
+            <div class="counters-widget-item">
+                <div class="counters-widget-count">@Model.TotalProfit.ToString("C")</div>
+                <div class="counters-widget-count-name">Total Profit</div>
+            </div>
+        </abp-column>
+    </abp-row>
+</div>

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/CountersWidget/Default.css

@@ -0,0 +1,17 @@
+.counters-widget .counters-widget-item {
+    border: 1px solid #ddd;
+    border-bottom: 5px solid #bbb;
+    border-right: 5px solid #ddd;
+    background-color: #f5f5f5;
+    text-align: center;
+    padding: 10px;
+}
+
+.counters-widget .counters-widget-count {
+    font-size: 2em;
+    color: #00008b;
+}
+
+.counters-widget .counters-widget-count-name {
+    color: #666;
+}

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

@@ -0,0 +1,26 @@
+@page
+@model DashboardDemo.Web.Pages.MyDashboardModel
+
+@section styles {
+    <abp-style src="/Pages/MyDashboard.css" />
+}
+
+<form method="get" id="MyDashboardFilterForm">
+    <abp-row class="mb-3">
+        <abp-column size-md="_5">
+            <abp-input asp-for="StartDate" />
+        </abp-column>
+        <abp-column size-md="_5">
+            <abp-input asp-for="EndDate" />
+        </abp-column>
+        <abp-column size-md="_2">
+            <abp-button button-type="Primary" icon="refresh" size="Block_Large" type="Submit" text="Refresh" />
+        </abp-column>
+    </abp-row>
+</form>
+
+@await Component.InvokeAsync("CountersWidget", new
+{
+    startDate = @Model.StartDate,
+    endDate = @Model.EndDate
+})

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

@@ -0,0 +1,28 @@
+using System;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace DashboardDemo.Web.Pages
+{
+    public class MyDashboardModel : PageModel
+    {
+        [BindProperty(SupportsGet = true)]
+        public DateTime? StartDate { get; set; }
+
+        [BindProperty(SupportsGet = true)]
+        public DateTime? EndDate { get; set; }
+
+        public void OnGet()
+        {
+            if (StartDate == null)
+            {
+                StartDate = DateTime.Now.Subtract(TimeSpan.FromDays(6)).ClearTime();
+            }
+
+            if (EndDate == null)
+            {
+                EndDate = DateTime.Now.AddDays(1).ClearTime();
+            }
+        }
+    }
+}

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

@@ -0,0 +1,3 @@
+#MyDashboardFilterForm button[type=Submit] {
+    margin-top: 25px;
+}

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

@@ -1,6 +1,7 @@
 @page
 @using DashboardDemo.Web.Pages.Components.MySimpleWidget
 @model DashboardDemo.Web.Pages.MyWidgetsModel
+
 @* Example usage by widget name *@
 @await Component.InvokeAsync("MySimpleWidget", new { name = "John" })