From: Alexander Moisseev <moiseev@mezonplus.ru>
Date: Thu, 7 Jul 2016 19:23:06 +0000 (+0300)
Subject: [WebUI] Update d3evolution
X-Git-Tag: 1.3.0~137^2
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F710%2Fhead;p=thirdparty%2Frspamd.git

[WebUI] Update d3evolution

Update to https://github.com/moisseev/D3Evolution/commit/e3ce22ebe37d75d22437deee99cab58b303471cd :
    - Add `convert` method (percentage)
    - Add Y-axis label
---

diff --git a/interface/css/d3evolution.css b/interface/css/d3evolution.css
index 49082e3e88..6726838f19 100644
--- a/interface/css/d3evolution.css
+++ b/interface/css/d3evolution.css
@@ -4,6 +4,9 @@
 .d3evolution .chart-title {
     font-size: 17px;
 }
+.d3evolution .y.label {
+    font-weight: normal;
+}
 .d3evolution .grid .tick {
     stroke: lightgrey;
     shape-rendering: crispEdges;
diff --git a/interface/index.html b/interface/index.html
index e155e68942..9cab006f4a 100644
--- a/interface/index.html
+++ b/interface/index.html
@@ -88,6 +88,11 @@
 								<option value="weekly">Weekly</option>
 								<option value="monthly">Monthly</option>
 							</select>
+							Convert to:
+							<select id="selConvert" class="form-control">
+								<option value="" selected>--</option>
+								<option value="percentage">percentage</option>
+							</select>
 							Select chart type:
 							<select id="selType" class="form-control">
 								<option value="line" selected>Line</option>
diff --git a/interface/js/d3evolution.min.js b/interface/js/d3evolution.min.js
index cfcc917f6d..64ff4ba2c3 100644
--- a/interface/js/d3evolution.min.js
+++ b/interface/js/d3evolution.min.js
@@ -1 +1 @@
-function D3Evolution(t,e){"use strict";var n,r,a=$.extend(!0,{title:"",width:800,height:400,margin:{top:80,right:60,bottom:40,left:60},type:"line",duration:1250,interpolate:"linear",legend:{buttonRadius:7,space:130,entries:[]}},e),i=a.width-a.margin.left-a.margin.right,l=a.height-a.margin.top-a.margin.bottom,o=d3.time.scale().range([0,i]),c=d3.scale.linear().range([l,0]),s=d3.svg.axis().scale(o),u=d3.svg.axis().scale(c).orient("left").ticks(5),d=d3.svg.axis().tickFormat("").scale(o).tickSize(-l,0),p=d3.svg.axis().tickFormat("").scale(c).orient("left").tickSize(-i,0),f=d3.svg.line().x(function(t){return o(t.x)}).y(function(t){return c(t.y)}).interpolate(a.interpolate),g=d3.svg.area().x(function(t){return o(t.x)}).y0(function(t){return c(t.y0)}).y1(function(t){return c(t.y0+t.y)}).interpolate(a.interpolate),y=d3.layout.stack(),h=d3.scale.category10(),m=function(t){return void 0!==a.legend.entries[t]&&void 0!==a.legend.entries[t].color?a.legend.entries[t].color:h(t)},x=function(t){return void 0!==a.legend.entries[t]&&void 0!==a.legend.entries[t].label?a.legend.entries[t].label:"path_"+t},v=d3.select("#"+t).append("svg").classed("d3evolution",!0).attr("width",a.width).attr("height",a.height),k=v.append("g").attr("class","legend"),b=v.append("g").attr("width",i).attr("height",l).attr("transform","translate("+a.margin.left+", "+a.margin.top+")");b.append("g").attr("class","x grid").attr("transform","translate(0,"+l+")").call(d),b.append("g").attr("class","y grid").attr("transform","translate(0,0)").call(p),b.append("g").attr("class","x axis").attr("transform","translate(0,"+l+")").call(s),b.append("g").attr("class","y axis").attr("transform","translate(0,0)").call(u),v.append("svg:text").attr("class","chart-title").attr("x",a.width/2).attr("y",a.margin.top/3).attr("text-anchor","middle").text(a.title),this.data=function(t){n=t;var e=[];r=a.width-a.margin.right-a.legend.space*n.length,n.forEach(function(t){t.forEach(function(t){t.x*=1e3})});var i,l=d3.extent(d3.merge(n),function(t){return t.x});"area"===a.type?(y(n),i=[0,d3.max(d3.merge(n),function(t){return t.y0+t.y})]):i=d3.extent(d3.merge(n),function(t){return t.y}),o.domain([l[0],l[1]]),c.domain([i[0]>0?0:i[0],i[1]]);var h=b.selectAll("path.path").data(n);h.enter().append("path").attr("class","path").attr("id",function(t,e){return"path_"+e}).style("area"===a.type?{fill:function(t,e){return m(e)},stroke:"none","fill-opacity":function(t,n){return e[n]}}:{fill:"none",stroke:function(t,e){return m(e)},opacity:function(t,n){return e[n]}}),h.transition().duration(a.duration).attr("d","area"===a.type?g:f),h.exit().remove(),d3.transition().duration(a.duration).each(function(){b.select(".x.grid").call(d.scale(o)),b.select(".y.grid").call(p.scale(c)),b.select(".x.axis").call(s.scale(o)),b.select(".y.axis").call(u.scale(c))});var v=function(t){e[t]=0!=e[t]?0:1,d3.select("#circle_"+t).transition().duration(a.duration).style("fill-opacity",e[t]+.2),d3.select("#path_"+t).transition().duration(a.duration).style("opacity",e[t])},_=function(t){d3.select("#circle_"+t).attr("r",1.3*a.legend.buttonRadius),d3.select("#path_"+t).style("opacity",.4).style("fill-opacity",.4)},A=function(t){d3.select("#circle_"+t).attr("r",a.legend.buttonRadius),d3.select("#path_"+t).style("opacity",e[t]).style("fill-opacity",e[t])},w=k.selectAll("circle").data(n);w.enter().append("circle").attr("id",function(t,e){return"circle_"+e}).attr("cy",2*a.margin.top/3).attr("r",a.legend.buttonRadius).style("fill",function(t,e){return m(e)}).style("stroke",function(t,e){return m(e)}).style("fill-opacity",function(t,n){return e[n]+.2}).on("click",function(t,e){v(e)}).on("mouseover",function(t,e){_(e)}).on("mouseout",function(t,e){A(e)}),w.exit().remove(),w.transition().duration(a.duration).attr("cx",function(t,e){return r+a.legend.space*e});var R=k.selectAll("text").data(n);return R.enter().append("text").attr("y",2*a.margin.top/3).attr("dy","0.3em").text(function(t,e){return x(e)}).on("click",function(t,e){v(e)}).on("mouseover",function(t,e){_(e)}).on("mouseout",function(t,e){A(e)}),R.exit().remove(),R.transition().duration(a.duration).attr("x",function(t,e){return r+a.legend.space*e+2*a.legend.buttonRadius}),this},this.legend=function(t){return $.extend(!0,a.legend.entries,t),k.selectAll("circle").attr("cx",function(t,e){return r+a.legend.space*e}).transition().duration(a.duration).style("fill",function(t,e){return m(e)}).style("stroke",function(t,e){return m(e)}),k.selectAll("text").text(function(t,e){return x(e)}),b.selectAll("path.path").transition().duration(a.duration).style("fill","area"===a.type?function(t,e){return m(e)}:"none").style("stroke","area"!==a.type?function(t,e){return m(e)}:"none"),this},this.interpolate=function(t){return a.interpolate=t,g.interpolate(a.interpolate),f.interpolate(a.interpolate),b.selectAll("path.path").attr("d","area"===a.type?g:f),this},this.type=function(t){a.type=t;var e;return"area"===a.type?(y(n),e=[0,d3.max(d3.merge(n),function(t){return t.y0+t.y})]):e=d3.extent(d3.merge(n),function(t){return t.y}),c.domain([e[0]>0?0:e[0],e[1]]),b.selectAll("path.path").style("stroke","area"!==a.type?function(t,e){return m(e)}:"none").style("fill","area"===a.type?function(t,e){return m(e)}:"none").transition().duration(a.duration).attr("d","area"===a.type?g:f),d3.transition().duration(a.duration).each(function(){b.select(".y.grid").call(p.scale(c)),b.select(".y.axis").call(u.scale(c))}),this},this.destroy=function(){d3.select("svg").remove()}}
\ No newline at end of file
+function D3Evolution(t,e){"use strict";var n,r,a,i=$.extend(!0,{title:"",width:800,height:400,margin:{top:80,right:60,bottom:40,left:60},yAxisLabel:"",type:"line",duration:1250,interpolate:"linear",legend:{buttonRadius:7,space:130,entries:[]}},e),o=i.width-i.margin.left-i.margin.right,l=i.height-i.margin.top-i.margin.bottom,c=d3.time.scale().range([0,o]),s=d3.scale.linear().range([l,0]),u=d3.svg.axis().scale(c),d=d3.svg.axis().scale(s).orient("left").ticks(5),p=d3.svg.axis().tickFormat("").scale(c).tickSize(-l,0),f=d3.svg.axis().tickFormat("").scale(s).orient("left").tickSize(-o,0),y=d3.svg.line().x(function(t){return c(t.x)}).y(function(t){return s(t.y)}).interpolate(i.interpolate),g=d3.svg.area().x(function(t){return c(t.x)}).y0(function(t){return s(t.y0)}).y1(function(t){return s(t.y0+t.y)}).interpolate(i.interpolate),h=function(){var t;"area"===i.type?(d3.layout.stack()(n),t=[0,d3.max(d3.merge(n),function(t){return t.y0+t.y})]):t=d3.extent(d3.merge(n),function(t){return t.y}),s.domain([t[0]>0?0:t[0],t[1]]),d3.transition().duration(i.duration).each(function(){w.select(".y.grid").call(f.scale(s)),w.select(".y.axis").call(d.scale(s))})},m=d3.scale.category10(),x=function(t){return void 0!==i.legend.entries[t]&&void 0!==i.legend.entries[t].color?i.legend.entries[t].color:m(t)},v=function(t){return void 0!==i.legend.entries[t]&&void 0!==i.legend.entries[t].label?i.legend.entries[t].label:"path_"+t},k=function(t){var e=t.reduce(function(t,e){return e.map(function(e,n){return e.y+(t[n]?t[n]:0)})},[]),n=$.extend(!0,[],t);return n.forEach(function(t){t.forEach(function(t,n){e[n]&&(t.y/=e[n])})}),n},b=function(){"percentage"===i.convert?(d.tickFormat(d3.format(".0%")),E.transition().duration(i.duration).style("opacity",0),n=k(r)):(d.tickFormat(null),E.transition().duration(i.duration).style("opacity",1),n=r),h()},A=d3.select("#"+t).append("svg").classed("d3evolution",!0).attr("width",i.width).attr("height",i.height),_=A.append("g").attr("class","legend"),w=A.append("g").attr("width",o).attr("height",l).attr("transform","translate("+i.margin.left+", "+i.margin.top+")");w.append("g").attr("class","x grid").attr("transform","translate(0,"+l+")").call(p),w.append("g").attr("class","y grid").attr("transform","translate(0,0)").call(f),w.append("g").attr("class","x axis").attr("transform","translate(0,"+l+")").call(u),w.append("g").attr("class","y axis").attr("transform","translate(0,0)").call(d);var E=w.append("text").attr("class","y label").attr("x",20-i.margin.left).attr("y",-20).text(i.yAxisLabel);A.append("svg:text").attr("class","chart-title").attr("x",i.width/2).attr("y",i.margin.top/3).attr("text-anchor","middle").text(i.title),this.data=function(t){r=t;var e=[];a=i.width-i.margin.right-i.legend.space*r.length,r.forEach(function(t){t.forEach(function(t){t.x*=1e3})}),b();var o=d3.extent(d3.merge(n),function(t){return t.x});c.domain([o[0],o[1]]);var l=w.selectAll("path.path").data(n);l.enter().append("path").attr("class","path").attr("id",function(t,e){return"path_"+e}).style("area"===i.type?{fill:function(t,e){return x(e)},stroke:"none","fill-opacity":function(t,n){return e[n]}}:{fill:"none",stroke:function(t,e){return x(e)},opacity:function(t,n){return e[n]}}),l.transition().duration(i.duration).attr("d","area"===i.type?g:y),l.exit().remove(),d3.transition().duration(i.duration).each(function(){w.select(".x.grid").call(p.scale(c)),w.select(".y.grid").call(f.scale(s))});var u=function(t){e[t]=0!=e[t]?0:1,d3.select("#circle_"+t).transition().duration(i.duration).style("fill-opacity",e[t]+.2),d3.select("#path_"+t).transition().duration(i.duration).style("opacity",e[t])},d=function(t){d3.select("#circle_"+t).attr("r",1.3*i.legend.buttonRadius),d3.select("#path_"+t).style("opacity",.4).style("fill-opacity",.4)},h=function(t){d3.select("#circle_"+t).attr("r",i.legend.buttonRadius),d3.select("#path_"+t).style("opacity",e[t]).style("fill-opacity",e[t])},m=_.selectAll("circle").data(n);m.enter().append("circle").attr("id",function(t,e){return"circle_"+e}).attr("cy",2*i.margin.top/3).attr("r",i.legend.buttonRadius).style("fill",function(t,e){return x(e)}).style("stroke",function(t,e){return x(e)}).style("fill-opacity",function(t,n){return e[n]+.2}).on("click",function(t,e){u(e)}).on("mouseover",function(t,e){d(e)}).on("mouseout",function(t,e){h(e)}),m.exit().remove(),m.transition().duration(i.duration).attr("cx",function(t,e){return a+i.legend.space*e});var k=_.selectAll("text").data(n);return k.enter().append("text").attr("y",2*i.margin.top/3).attr("dy","0.3em").text(function(t,e){return v(e)}).on("click",function(t,e){u(e)}).on("mouseover",function(t,e){d(e)}).on("mouseout",function(t,e){h(e)}),k.exit().remove(),k.transition().duration(i.duration).attr("x",function(t,e){return a+i.legend.space*e+2*i.legend.buttonRadius}),this},this.legend=function(t){return $.extend(!0,i.legend.entries,t),_.selectAll("circle").attr("cx",function(t,e){return a+i.legend.space*e}).transition().duration(i.duration).style("fill",function(t,e){return x(e)}).style("stroke",function(t,e){return x(e)}),_.selectAll("text").text(function(t,e){return v(e)}),w.selectAll("path.path").transition().duration(i.duration).style("fill","area"===i.type?function(t,e){return x(e)}:"none").style("stroke","area"!==i.type?function(t,e){return x(e)}:"none"),this},this.convert=function(t){return i.convert=t,b(),w.selectAll("path.path").data(n).transition().duration(i.duration).attr("d","area"===i.type?g:y),this},this.interpolate=function(t){return i.interpolate=t,g.interpolate(i.interpolate),y.interpolate(i.interpolate),w.selectAll("path.path").attr("d","area"===i.type?g:y),this},this.type=function(t){return i.type=t,h(),w.selectAll("path.path").style("stroke","area"!==i.type?function(t,e){return x(e)}:"none").style("fill","area"===i.type?function(t,e){return x(e)}:"none").transition().duration(i.duration).attr("d","area"===i.type?g:y),this},this.destroy=function(){d3.select("svg").remove()}}
\ No newline at end of file
diff --git a/interface/js/rspamd.js b/interface/js/rspamd.js
index a7972caa6a..c7e4840eeb 100644
--- a/interface/js/rspamd.js
+++ b/interface/js/rspamd.js
@@ -37,6 +37,9 @@
             selected.selData = this.value;
             getGraphData(this.value);
         });
+        $("#selConvert").change(function () {
+            graph.convert(this.value);
+        });
         $("#selType").change(function () {
             graph.type(this.value);
         });
@@ -485,7 +488,7 @@
 
         function initGraph() {
             // Get selectors' current state
-            var selIds = ["selData", "selType", "selInterpolate"];
+            var selIds = ["selData", "selConvert", "selType", "selInterpolate"];
             selIds.forEach(function (id) {
                 var e = document.getElementById(id);
                 selected[id] = e.options[e.selectedIndex].value;
@@ -495,6 +498,7 @@
                 title: "Rspamd throughput",
                 width: 1060,
                 height: 370,
+                yAxisLabel: "Message rate, msg/s",
 
                 type: selected.selType,
                 interpolate: selected.selInterpolate,