From 9d8515d23cf735be397ccc4368aa071d3a4d4a06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= <hi_kalkan@yahoo.com>
Date: Wed, 24 Jul 2019 09:56:58 +0300
Subject: [PATCH] Refactor NewUserStatisticWidget\Default.js

---
 .../NewUserStatisticWidget/Default.cshtml     |   4 +-
 .../NewUserStatisticWidget/Default.js         | 160 ++++++++++--------
 2 files changed, 90 insertions(+), 74 deletions(-)

diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.cshtml b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.cshtml
index 6a2af5bb5d..712182f79f 100644
--- a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.cshtml
+++ b/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>
diff --git a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.js b/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.js
index 6dd54ce4ac..ce7af7ff99 100644
--- a/samples/DashboardDemo/src/DashboardDemo.Web/Pages/Components/NewUserStatisticWidget/Default.js
+++ b/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() {
-        return $("#FrequencyFilter option:selected").val();
-    };
+    function ChartManager($wrapper) {
 
-    var createChart = function (statistic) {
-        chart = new Chart($('#NewUserStatisticChart'),
-            {
-                type: 'bar',
-                data: {
-                    labels: statistic.labels,
-                    datasets: [
-                        {
-                            label: 'User count',
-                            data: statistic.data,
-                            backgroundColor: 'rgba(255, 132, 132, 1)'
-                        }
-                    ]
-                },
-                options: {
-                    scales: {
-                        yAxes: [{
-                            ticks: {
-                                beginAtZero: true
+        var _filters;
+        var _chart;
+
+        var getFrequencyVal = function () {
+            return $wrapper.find('.frequency-filter option:selected').val();
+        };
+
+        var createChart = function (statistic) {
+            _chart = new Chart($wrapper.find('.NewUserStatisticChart'),
+                {
+                    type: 'bar',
+                    data: {
+                        labels: statistic.labels,
+                        datasets: [
+                            {
+                                label: 'User count',
+                                data: statistic.data,
+                                backgroundColor: 'rgba(255, 132, 132, 1)'
                             }
-                        }]
+                        ]
+                    },
+                    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) {
-        chart.data = {
-            labels: statistic.labels,
-            datasets: [
-                {
-                    label: 'User count',
-                    data: statistic.data,
-                    backgroundColor: 'rgba(255, 132, 132, 1)'
-                }
-            ]
+        return {
+            init: init,
+            refresh: refresh
         };
-        chart.update();
-    };
+    }
 
     var init = function (args) {
-        serviceMethod({
-            startDate: args.filters.startDate,
-            endDate: args.filters.endDate,
-            frequency: getFrequencyVal()
-        })
-            .then(function (result) {
-                createChart(result);
+        args.container
+            .find('.newUserStatistic-widget')
+            .each(function() {
+                var $this = $(this);
+                var chartManager = new ChartManager($this);
+                chartManager.init(args.filters);
+                $this.data('chart-manager', chartManager);
             });
 
-        latestStartDate = args.filters.startDate;
-        latestEndDate = args.filters.endDate;
     };
 
     var refresh = function (args) {
-
-        serviceMethod({
-            startDate: args.filters.startDate,
-            endDate: args.filters.endDate,
-            frequency: getFrequencyVal()
-        })
-            .then(function (result) {
-                refreshChart(result);
+        args.container
+            .find('.newUserStatistic-widget')
+            .each(function () {
+                var $this = $(this);
+                var chartManager = $this.data('chart-manager');
+                chartManager.refresh(args.filters);
             });
-
-        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);
 })();
\ No newline at end of file