Refactor NewUserStatisticWidget\Default.js

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

@@ -5,7 +5,7 @@
         </abp-card-header>
         <abp-card-body>
             <div>
-                <div class="form-group" id="FrequencyFilter">
+                <div class="form-group frequency-filter">
                     <select class="form-control">
                         <option value="Daily">Daily</option>
                         <option value="Monthly">Monthly</option>
@@ -13,7 +13,7 @@
                 </div>
             </div>
             <div class="row mt-5">
-                <canvas id="NewUserStatisticChart" class="NewUserStatisticChart"></canvas>
+                <canvas class="NewUserStatisticChart"></canvas>
             </div>
         </abp-card-body>
     </abp-card>

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

@@ -1,93 +1,109 @@
 (function () {
-    var chart;
     var serviceMethod = dashboardDemo.dashboard.getNewUserStatisticWidget;
-    var latestEndDate;
-    var latestStartDate;
 
-    var getFrequencyVal = function() {
+    function ChartManager($wrapper) {
-        return $("#FrequencyFilter option:selected").val();
-    };
 
-    var createChart = function (statistic) {
+        var _filters;
-        chart = new Chart($('#NewUserStatisticChart'),
+        var _chart;
-            {
+
-                type: 'bar',
+        var getFrequencyVal = function () {
-                data: {
+            return $wrapper.find('.frequency-filter option:selected').val();
-                    labels: statistic.labels,
+        };
-                    datasets: [
+
-                        {
+        var createChart = function (statistic) {
-                            label: 'User count',
+            _chart = new Chart($wrapper.find('.NewUserStatisticChart'),
-                            data: statistic.data,
+                {
-                            backgroundColor: 'rgba(255, 132, 132, 1)'
+                    type: 'bar',
-                        }
+                    data: {
-                    ]
+                        labels: statistic.labels,
-                },
+                        datasets: [
-                options: {
+                            {
-                    scales: {
+                                label: 'User count',
-                        yAxes: [{
+                                data: statistic.data,
-                            ticks: {
+                                backgroundColor: 'rgba(255, 132, 132, 1)'
-                                beginAtZero: true
                             }
-                        }]
+                        ]
+                    },
+                    options: {
+                        scales: {
+                            yAxes: [{
+                                ticks: {
+                                    beginAtZero: true
+                                }
+                            }]
+                        }
                     }
-                }
+                });
+        };
+
+        var refreshChart = function (statistic) {
+            _chart.data = {
+                labels: statistic.labels,
+                datasets: [
+                    {
+                        label: 'User count',
+                        data: statistic.data,
+                        backgroundColor: 'rgba(255, 132, 132, 1)'
+                    }
+                ]
+            };
+            _chart.update();
+        };
+
+        var render = function (args, callback) {
+            serviceMethod({
+                    startDate: _filters.startDate,
+                    endDate: _filters.endDate,
+                    frequency: getFrequencyVal()
+                })
+                .then(function (result) {
+                    callback(result);
+                });
+        };
+
+        var init = function (filters) {
+            _filters = filters;
+            render(filters, createChart);
+        };
+
+        var refresh = function (filters) {
+            _filters = filters;
+            render(filters, refreshChart);
+        };
+
+        $wrapper.find('.frequency-filter').on('change',
+            function () {
+                refresh(_filters);
             });
-    };
 
-    var refreshChart = function (statistic) {
+        return {
-        chart.data = {
+            init: init,
-            labels: statistic.labels,
+            refresh: refresh
-            datasets: [
-                {
-                    label: 'User count',
-                    data: statistic.data,
-                    backgroundColor: 'rgba(255, 132, 132, 1)'
-                }
-            ]
         };
-        chart.update();
+    }
-    };
 
     var init = function (args) {
-        serviceMethod({
+        args.container
-            startDate: args.filters.startDate,
+            .find('.newUserStatistic-widget')
-            endDate: args.filters.endDate,
+            .each(function() {
-            frequency: getFrequencyVal()
+                var $this = $(this);
-        })
+                var chartManager = new ChartManager($this);
-            .then(function (result) {
+                chartManager.init(args.filters);
-                createChart(result);
+                $this.data('chart-manager', chartManager);
             });
 
-        latestStartDate = args.filters.startDate;
-        latestEndDate = args.filters.endDate;
     };
 
     var refresh = function (args) {
-
+        args.container
-        serviceMethod({
+            .find('.newUserStatistic-widget')
-            startDate: args.filters.startDate,
+            .each(function () {
-            endDate: args.filters.endDate,
+                var $this = $(this);
-            frequency: getFrequencyVal()
+                var chartManager = $this.data('chart-manager');
-        })
+                chartManager.refresh(args.filters);
-            .then(function (result) {
-                refreshChart(result);
             });
-
-        latestStartDate = args.filters.startDate;
-        latestEndDate = args.filters.endDate;
     };
 
-    $('#FrequencyFilter').on('change',
-        function () {
-            refresh({
-                filters: {
-                    startDate: latestStartDate,
-                    endDate: latestEndDate
-                }
-            });
-        });
-
-    abp.event.on('refresh-widgets', refresh);
-
     abp.event.on('init-widgets', init);
+    abp.event.on('refresh-widgets', refresh);
 })();