add charts.js, remove googlecharts (#3137)

* add charts.js, remove googlecharts

* change to doughnut

* show percentage on donut

data/web/js/site/debug.js

@@ -373,42 +373,50 @@ jQuery(function($){
   function rspamd_pie_graph() {
     $.ajax({
       url: '/api/v1/get/rspamd/actions',
-      success: function(graphdata){
-        graphdata.unshift(['Type', 'Count']);
-        google.charts.load('current', {'packages':['corechart']});
-        google.charts.setOnLoadCallback(drawChart);
+      success: function(data){
 
-        function drawChart() {
+        var total = 0;
+        $(data).map(function(){total += this[1];});
+        var labels = $.makeArray($(data).map(function(){return this[0] + ' ' + Math.round(this[1]/total * 100) + '%';}));
+        var values = $.makeArray($(data).map(function(){return this[1];}));
 
-          var data = google.visualization.arrayToDataTable(graphdata);
-          var body_font_color = $('body').css("color");
-          var options = {
-            is3D: true,
-            sliceVisibilityThreshold: 0,
-            pieSliceText: 'percentage',
-            backgroundColor: { fill:'transparent' },
-            legend: {textStyle: {color: body_font_color}},
-            chartArea: {
-              left: 0,
-              right: 0,
-              top: 20,
-              width: '100%',
-              height: '100%'
-            },
-      
-            slices: {
-              0: { color: '#DC3023' },
-              1: { color: '#59ABE3' },
-              2: { color: '#FFA400' },
-              3: { color: '#FFA400' },
-              4: { color: '#26A65B' }
+        var graphdata = {
+          labels: labels,
+          datasets: [{
+            data: values,
+            backgroundColor: ['#DC3023', '#59ABE3', '#FFA400', '#FFA400', '#26A65B']
+          }]
+        };
+
+        var options = {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            datalabels: {
+              color: '#FFF',
+              font: {
+                weight: 'bold'
+              },
+              display: function(context) {
+                return context.dataset.data[context.dataIndex] !== 0;
+              },
+              formatter: function(value, context) {
+                return Math.round(value/total*100) + '%';
+              }
             }
-          };
+          }
+        };
 
-          var chart = new google.visualization.PieChart(document.getElementById('rspamd_donut'));
+        var chartcanvas = document.getElementById('rspamd_donut');
 
-          chart.draw(data, options);
-        }
+        Chart.plugins.register('ChartDataLabels');
+
+        var chart = new Chart(chartcanvas.getContext("2d"), {
+          plugins: [ChartDataLabels],
+          type: 'doughnut',
+          data: graphdata,
+          options: options
+        });
       }
     });
   }
@@ -658,13 +666,6 @@ jQuery(function($){
   draw_ui_logs();
   draw_netfilter_logs();
   draw_rspamd_history();
-  $(window).resize(function () {
-      var timer;
-      clearTimeout(timer);
-      timer = setTimeout(function () {
-        rspamd_pie_graph();
-      }, 500);
-  });
   $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
     var target = $(e.target).attr("href");
     if ((target == '#tab-rspamd-history')) {