Merge pull request #1532 from abpframework/dashboard-demo-widget-manager-usage

used widget manager for all widgets

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

@@ -1,21 +1,26 @@
-(function() {
+abp.widgets = abp.widgets || {}; //TODO: Remove later
-    function refresh(args) {
+(function () {
-        args.container
+    abp.widgets.CountersWidget = function ($wrapper) {
-            .find('.counters-widget')
+
-            .each(function () {
+        var refresh = function (filters) {
-                var $this = $(this);
+            dashboardDemo.dashboard.getCountersWidget({
-                dashboardDemo.dashboard
+                startDate: filters.startDate,
-                    .getCountersWidget({
+                endDate: filters.endDate
-                        startDate: args.filters.startDate,
+            }).then(function (result) {
-                        endDate: args.filters.endDate
+                $wrapper.find('.new-user-count').text(result.newUsers);
-                    }).then(function (result) {
+                $wrapper.find('.active-user-count').text(result.activeUsers);
-                        $this.find('.new-user-count').text(result.newUsers);
+                $wrapper.find('.total-income').text('$' + result.totalIncome.toFixed(2));
-                        $this.find('.active-user-count').text(result.activeUsers);
+                $wrapper.find('.total-profit').text('$' + result.totalProfit.toFixed(2));
-                        $this.find('.total-income').text('$' + result.totalIncome.toFixed(2));
-                        $this.find('.total-profit').text('$' + result.totalProfit.toFixed(2));
-                    });
             });
-    }
+        };
+
+        var init = function (filters) {
+            // there is no initial process for this widget.
+        };
 
-    abp.event.on('refresh-widgets', refresh);
+        return {
+            init: init,
+            refresh: refresh
+        };
+    };
 })();

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

@@ -1,12 +1,10 @@
-<div class="license-statistic-widget">
+<abp-card background="Light">
-    <abp-card background="Light">
+    <abp-card-header background="Secondary" class="text-white">
-        <abp-card-header background="Secondary" class="text-white">
+        License Statistics
-            License Statistics
+    </abp-card-header>
-        </abp-card-header>
+    <abp-card-body>
-        <abp-card-body>
+        <div class="row">
-            <div class="row">
+            <canvas class="LicenseStatisticChart"></canvas>
-                <canvas class="LicenseStatisticChart"></canvas>
+        </div>
-            </div>
+    </abp-card-body>
-        </abp-card-body>
+</abp-card>
-    </abp-card>
-</div>

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/LicenseStatisticWidget/Default.js

@@ -1,11 +1,9 @@
 (function () {
-    var serviceMethod = dashboardDemo.dashboard.getLicenseStatisticWidget;
+    abp.widgets.LicenseStatisticWidget = function($wrapper) {
-
-    function ChartManager($wrapper) {
 
         var _chart;
 
-        var createChart = function (statistic) {
+        var createChart = function(statistic) {
             _chart = new Chart($wrapper.find('.LicenseStatisticChart'),
                 {
                     type: 'pie',
@@ -26,7 +24,7 @@
                 });
         };
 
-        var refreshChart = function (statistic) {
+        var refreshChart = function(statistic) {
             _chart.data = {
                 labels: Object.keys(statistic.data),
                 datasets: [
@@ -44,21 +42,21 @@
             _chart.update();
         };
 
-        var render = function (filters, callback) {
+        var render = function(filters, callback) {
-            serviceMethod({
+            dashboardDemo.dashboard.getLicenseStatisticWidget({
-                startDate: filters.startDate,
+                    startDate: filters.startDate,
-                endDate: filters.endDate
+                    endDate: filters.endDate
                 })
-                .then(function (result) {
+                .then(function(result) {
                     callback(result);
                 });
         };
 
-        var init = function (filters) {
+        var init = function(filters) {
             render(filters, createChart);
         };
 
-        var refresh = function (filters) {
+        var refresh = function(filters) {
             render(filters, refreshChart);
         };
 
@@ -66,27 +64,5 @@
             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);
-            });
-    });
 })();

samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.js

@@ -1,11 +1,11 @@
 abp.widgets = abp.widgets || {}; //TODO: Remove later
 (function () {
-    abp.widgets.NewUserStatisticWidget = function ($wrapper) {
+    abp.widgets.NewUserStatisticWidget = function($wrapper) {
 
         var _latestFilters;
         var _chart;
 
-        var refresh = function (filters) {
+        var refresh = function(filters) {
             _latestFilters = filters || _latestFilters;
             dashboardDemo.dashboard.getNewUserStatisticWidget({
                 startDate: _latestFilters.startDate,
@@ -26,17 +26,19 @@
             });
         };
 
-        var init = function (filters) {
+        var init = function(filters) {
             _chart = new Chart($wrapper.find('.NewUserStatisticChart'),
                 {
                     type: 'bar',
                     options: {
                         scales: {
-                            yAxes: [{
+                            yAxes: [
-                                ticks: {
+                                {
-                                    beginAtZero: true
+                                    ticks: {
+                                        beginAtZero: true
+                                    }
                                 }
-                            }]
+                            ]
                         }
                     }
                 });
@@ -45,14 +47,15 @@
 
             $wrapper
                 .find('.frequency-filter')
-                .on('change', function () {
+                .on('change',
-                    refresh();
+                    function() {
-                });
+                        refresh();
+                    });
         };
 
         return {
             init: init,
             refresh: refresh
         };
-    }
+    };
 })();