Real data updates chart

admin.php

@@ -258,7 +258,7 @@ class AdminPlugin extends Plugin
 
                     echo json_encode([
                         "success" => true,
-                        "payload" => ["resources" => $resources_updates, "grav" => $grav_updates]
+                        "payload" => ["resources" => $resources_updates, "grav" => $grav_updates, "installed" => $gpm->countInstalled()]
                     ]);
                     break;
             }

themes/grav/js/admin-all.js

@@ -26,6 +26,29 @@ $(function () {
         "positionClass": "toast-top-right"
     }
 
+    // dashboard
+    var chart = $('.updates-chart'), UpdatesChart;
+    if (chart.length) {
+        var data = {
+          series: [100, 0]
+        };
+
+        var options = {
+          donut: true,
+          donutWidth: 10,
+          startAngle: 0,
+          total: 100,
+          showLabel: false,
+          height: 150
+        };
+
+        UpdatesChart = Chartist.Pie('.updates-chart .ct-chart', data, options);
+        UpdatesChart.on('draw', function(data){
+            if (data.index) { return; }
+            chart.find('.numeric span').text(Math.round(data.value) + '%');
+        });
+    }
+
     // Cache Clear
     $('[data-clear-cache]').on('click', function(e) {
 
@@ -53,6 +76,7 @@ $(function () {
         }
 
         var grav = response.payload.grav,
+            installed = response.payload.installed,
             resources = response.payload.resources;
 
         //console.log(grav, resources);
@@ -67,6 +91,13 @@ $(function () {
             $('[data-gpm-grav]').addClass('grav').html('<p>' + icon + content + button + '</p>');
         }
 
+        // dashboard
+        if ($('.updates-chart').length) {
+            var missing = resources.total * 100 / installed,
+                updated = 100 - missing;
+            UpdatesChart.update({series: [updated, missing]});
+        }
+
         if (resources.total > 0) {
             var length,
                 icon = '<i class="fa fa-bullhorn"></i>',

themes/grav/templates/dashboard.html.twig

@@ -22,21 +22,7 @@
                     <div class="updates-chart">
                         <div class="chart-wrapper">
                             <div class="ct-chart"></div>
-                            <script>
+                            <span class="numeric"><span>-</span><em>updated</em></span>
-                                var data = {
-                                  series: [75,25]
-                                };
-                                var options = {
-                                  donut: true,
-                                  donutWidth: 10,
-                                  startAngle: 0,
-                                  total: 100,
-                                  showLabel: false,
-                                  height: 150
-                                };
-                                Chartist.Pie('.updates-chart .ct-chart', data, options);
-                            </script>
-                            <span class="numeric">75%<em>updated</em></span>
                         </div>
                         <p>Updates Available</p>
                     </div>