[WebUI] Replace pie chart library

1 files changed, 105 insertions, 159 deletions

diff --git a/interface/js/app/graph.js b/interface/js/app/graph.js
index 54daf79c1..6bd83c72b 100644
--- a/interface/js/app/graph.js
+++ b/interface/js/app/graph.js
@@ -25,16 +25,15 @@
 
 /* global d3:false, FooTable:false */
 
-define(["jquery", "d3evolution", "footable"],
-    function ($, D3Evolution) {
+define(["jquery", "d3evolution", "d3pie", "footable"],
+    function ($, D3Evolution, D3Pie) {
         "use strict";
 
         var rrd_pie_config = {
-            header: {},
+            cornerRadius: 2,
             size: {
                 canvasWidth: 400,
                 canvasHeight: 180,
-                pieInnerRadius: "20%",
                 pieOuterRadius: "80%"
             },
             labels: {
@@ -45,140 +44,118 @@ define(["jquery", "d3evolution", "footable"],
                     hideWhenLessThanPercentage: 8
                 },
             },
-            misc: {
-                pieCenterOffset: {
-                    x: -120,
-                    y: 10,
-                },
-                gradient: {
-                    enabled: true,
-                },
-            },
-        };
-
-        var graph_options = {
-            title: "Rspamd throughput",
-            width: 1060,
-            height: 370,
-            yAxisLabel: "Message rate, msg/s",
-
-            legend: {
-                space: 140,
-                entries: [{
-                    label: "reject",
-                    color: "#FF0000"
-                }, {
-                    label: "soft reject",
-                    color: "#BF8040"
-                }, {
-                    label: "rewrite subject",
-                    color: "#FF6600"
-                }, {
-                    label: "add header",
-                    color: "#FFAD00"
-                }, {
-                    label: "greylist",
-                    color: "#436EEE"
-                }, {
-                    label: "no action",
-                    color: "#66CC00"
-                }]
+            padAngle: 0.02,
+            pieCenterOffset: {
+                x: -120,
+                y: 10,
             }
         };
 
-        function initGraph(rspamd) {
-            var graph = new D3Evolution("graph", $.extend({}, graph_options, {
-                yScale: rspamd.getSelector("selYScale"),
-                type: rspamd.getSelector("selType"),
-                interpolate: rspamd.getSelector("selInterpolate"),
-                convert: rspamd.getSelector("selConvert"),
-            }));
-            $("#selYScale").change(function () {
-                graph.yScale(this.value);
-            });
-            $("#selConvert").change(function () {
-                graph.convert(this.value);
-            });
-            $("#selType").change(function () {
-                graph.type(this.value);
-            });
-            $("#selInterpolate").change(function () {
-                graph.interpolate(this.value);
-            });
+        var ui = {};
+        var prevUnit = "msg/s";
 
-            return graph;
-        }
+        ui.draw = function (rspamd, graphs, tables, neighbours, checked_server, type) {
+            var graph_options = {
+                title: "Rspamd throughput",
+                width: 1060,
+                height: 370,
+                yAxisLabel: "Message rate, msg/s",
 
-        function getRrdSummary(json, scaleFactor) {
-            var xExtents = d3.extent(d3.merge(json), function (d) { return d.x; });
-            var timeInterval = xExtents[1] - xExtents[0];
+                legend: {
+                    space: 140,
+                    entries: rspamd.chartLegend
+                }
+            };
 
-            var total = 0;
-            var rows = json.map(function (curr, i) {
-                // Time intervals that don't have data are excluded from average calculation as d3.mean()ignores nulls
-                var avg = d3.mean(curr, function (d) { return d.y; });
-                // To find an integral on the whole time interval we need to convert nulls to zeroes
-                var value = d3.mean(curr, function (d) { return Number(d.y); }) * timeInterval / scaleFactor ^ 0; // eslint-disable-line no-bitwise
-                var yExtents = d3.extent(curr, function (d) { return d.y; });
+            function initGraph() {
+                var graph = new D3Evolution("graph", $.extend({}, graph_options, {
+                    yScale: rspamd.getSelector("selYScale"),
+                    type: rspamd.getSelector("selType"),
+                    interpolate: rspamd.getSelector("selInterpolate"),
+                    convert: rspamd.getSelector("selConvert"),
+                }));
+                $("#selYScale").change(function () {
+                    graph.yScale(this.value);
+                });
+                $("#selConvert").change(function () {
+                    graph.convert(this.value);
+                });
+                $("#selType").change(function () {
+                    graph.type(this.value);
+                });
+                $("#selInterpolate").change(function () {
+                    graph.interpolate(this.value);
+                });
 
-                total += value;
-                return {
-                    label: graph_options.legend.entries[i].label,
-                    value: value,
-                    min: Number(yExtents[0].toFixed(6)),
-                    avg: Number(avg.toFixed(6)),
-                    max: Number(yExtents[1].toFixed(6)),
-                    last: Number(curr[curr.length - 1].y.toFixed(6)),
-                    color: graph_options.legend.entries[i].color,
-                };
-            }, []);
+                return graph;
+            }
 
-            return {
-                rows: rows,
-                total: total
-            };
-        }
+            function getRrdSummary(json, scaleFactor) {
+                var xExtents = d3.extent(d3.merge(json), function (d) { return d.x; });
+                var timeInterval = xExtents[1] - xExtents[0];
 
-        function initSummaryTable(tables, rows, unit) {
-            tables.rrd_summary = FooTable.init("#rrd-table", {
-                sorting: {
-                    enabled: true
-                },
-                columns: [
-                    {name:"label", title:"Action"},
-                    {name:"value", title:"Messages", defaultContent:""},
-                    {name:"min", title:"Minimum, <span class=\"unit\">" + unit + "</span>", defaultContent:""},
-                    {name:"avg", title:"Average, <span class=\"unit\">" + unit + "</span>", defaultContent:""},
-                    {name:"max", title:"Maximum, <span class=\"unit\">" + unit + "</span>", defaultContent:""},
-                    {name:"last", title:"Last, " + unit},
-                ],
-                rows: rows.map(function (curr, i) {
+                var total = 0;
+                var rows = json.map(function (curr, i) {
+                    // Time intervals that don't have data are excluded from average calculation as d3.mean()ignores nulls
+                    var avg = d3.mean(curr, function (d) { return d.y; });
+                    // To find an integral on the whole time interval we need to convert nulls to zeroes
+                    var value = d3.mean(curr, function (d) { return Number(d.y); }) * timeInterval / scaleFactor ^ 0; // eslint-disable-line no-bitwise
+                    var yExtents = d3.extent(curr, function (d) { return d.y; });
+
+                    total += value;
                     return {
-                        options: {
-                            style: {
-                                color: graph_options.legend.entries[i].color
-                            }
-                        },
-                        value: curr
+                        label: graph_options.legend.entries[i].label,
+                        value: value,
+                        min: Number(yExtents[0].toFixed(6)),
+                        avg: Number(avg.toFixed(6)),
+                        max: Number(yExtents[1].toFixed(6)),
+                        last: Number(curr[curr.length - 1].y.toFixed(6)),
+                        color: graph_options.legend.entries[i].color,
                     };
-                }, [])
-            });
-        }
+                }, []);
 
-        function drawRrdTable(tables, rows, unit) {
-            if (Object.prototype.hasOwnProperty.call(tables, "rrd_summary")) {
-                $.each(tables.rrd_summary.rows.all, function (i, row) {
-                    row.val(rows[i], false, true);
+                return {
+                    rows: rows,
+                    total: total
+                };
+            }
+
+            function initSummaryTable(rows, unit) {
+                tables.rrd_summary = FooTable.init("#rrd-table", {
+                    sorting: {
+                        enabled: true
+                    },
+                    columns: [
+                        {name:"label", title:"Action"},
+                        {name:"value", title:"Messages", defaultContent:""},
+                        {name:"min", title:"Minimum, <span class=\"unit\">" + unit + "</span>", defaultContent:""},
+                        {name:"avg", title:"Average, <span class=\"unit\">" + unit + "</span>", defaultContent:""},
+                        {name:"max", title:"Maximum, <span class=\"unit\">" + unit + "</span>", defaultContent:""},
+                        {name:"last", title:"Last, " + unit},
+                    ],
+                    rows: rows.map(function (curr, i) {
+                        return {
+                            options: {
+                                style: {
+                                    color: graph_options.legend.entries[i].color
+                                }
+                            },
+                            value: curr
+                        };
+                    }, [])
                 });
-            } else {
-                initSummaryTable(tables, rows, unit);
             }
-        }
 
-        var ui = {};
-        var prevUnit = "msg/s";
+            function drawRrdTable(rows, unit) {
+                if (Object.prototype.hasOwnProperty.call(tables, "rrd_summary")) {
+                    $.each(tables.rrd_summary.rows.all, function (i, row) {
+                        row.val(rows[i], false, true);
+                    });
+                } else {
+                    initSummaryTable(rows, unit);
+                }
+            }
 
-        ui.draw = function (rspamd, graphs, tables, neighbours, checked_server, type) {
             function updateWidgets(data) {
                 var rrd_summary = {rows:[]};
                 var unit = "msg/s";
@@ -200,39 +177,8 @@ define(["jquery", "d3evolution", "footable"],
                     rrd_summary = getRrdSummary(data, scaleFactor);
                 }
 
-                if (graphs.rrd_pie) {
-                    graphs.rrd_pie.destroy();
-                    delete graphs.rrd_pie;
-                }
-                if (rrd_summary.total) {
-                    graphs.rrd_pie = rspamd.drawPie(graphs.rrd_pie,
-                        "rrd-pie",
-                        rrd_summary.rows,
-                        rrd_pie_config);
-                } else {
-                    // Show grayed out pie as percentage is undefined
-                    graphs.rrd_pie = rspamd.drawPie(graphs.rrd_pie,
-                        "rrd-pie",
-                        [{
-                            value: 1,
-                            color: "#FFFFFF",
-                        }],
-                        $.extend({}, rrd_pie_config, {
-                            labels: {
-                                outer: {
-                                    format: "none"
-                                },
-                                inner: {
-                                    format: "none"
-                                },
-                            },
-                            tooltips: {
-                                enabled: true,
-                                string: "Undefined"
-                            },
-                        })
-                    );
-                }
+                if (!graphs.rrd_pie) graphs.rrd_pie = new D3Pie("rrd-pie", rrd_pie_config);
+                graphs.rrd_pie.data(rrd_summary.rows);
 
                 graphs.graph.data(data);
                 if (unit !== prevUnit) {
@@ -240,12 +186,12 @@ define(["jquery", "d3evolution", "footable"],
                     $(".unit").text(unit);
                     prevUnit = unit;
                 }
-                drawRrdTable(tables, rrd_summary.rows, unit);
+                drawRrdTable(rrd_summary.rows, unit);
                 document.getElementById("rrd-total-value").innerHTML = rrd_summary.total;
             }
 
             if (!graphs.graph) {
-                graphs.graph = initGraph(rspamd);
+                graphs.graph = initGraph();
             }
 
             rspamd.query("graph", {
@@ -295,11 +241,11 @@ define(["jquery", "d3evolution", "footable"],
         ui.setup = function (rspamd) {
             // Handling mouse events on overlapping elements
             $("#rrd-pie").mouseover(function () {
-                $("#rrd-pie").css("z-index", "200");
+                $("#rrd-pie,#rrd-pie-tooltip").css("z-index", "200");
                 $("#rrd-table_toggle").css("z-index", "300");
             });
             $("#rrd-table_toggle").mouseover(function () {
-                $("#rrd-pie").css("z-index", "0");
+                $("#rrd-pie,#rrd-pie-tooltip").css("z-index", "0");
                 $("#rrd-table_toggle").css("z-index", "0");
             });