diff options
author | Alexander Moisseev <moiseev@mezonplus.ru> | 2016-07-10 20:15:09 +0300 |
---|---|---|
committer | Alexander Moisseev <moiseev@mezonplus.ru> | 2016-07-10 20:25:26 +0300 |
commit | 0e39ad6729923cc4c7dd411d08f77cc38c0ad70d (patch) | |
tree | 7530502aaf468979fa500984484fbe8be2622a98 /interface | |
parent | 6203f9fb6257d45d779a97ca3865bf221623452f (diff) | |
download | rspamd-0e39ad6729923cc4c7dd411d08f77cc38c0ad70d.tar.gz rspamd-0e39ad6729923cc4c7dd411d08f77cc38c0ad70d.zip |
[WebUI] Update d3evolution
- Update to moisseev/D3Evolution@c73017a039bfb1377627f7d116f7aa0df92ad219 :
- Fix X-axis scale
- [Fix] Do not draw paths through undefined regions
- [Feature] Display `null` values as colored areas
- Add `step` interpolation
Diffstat (limited to 'interface')
-rw-r--r-- | interface/css/d3evolution.css | 4 | ||||
-rw-r--r-- | interface/index.html | 1 | ||||
-rw-r--r-- | interface/js/d3evolution.min.js | 2 |
3 files changed, 6 insertions, 1 deletions
diff --git a/interface/css/d3evolution.css b/interface/css/d3evolution.css index 6726838f1..a27a61d47 100644 --- a/interface/css/d3evolution.css +++ b/interface/css/d3evolution.css @@ -23,3 +23,7 @@ .d3evolution .legend circle { stroke-width: 2px; } +.d3evolution .path-null{ + fill: steelblue; + fill-opacity: .1; +} diff --git a/interface/index.html b/interface/index.html index 9cab006f4..bcea05a52 100644 --- a/interface/index.html +++ b/interface/index.html @@ -101,6 +101,7 @@ Select <a title="View Mike Bostock's Block." href="https://bl.ocks.org/mbostock/4342190" target="_blank">interpolation mode</a>: <select id="selInterpolate" class="form-control"> <option value="linear" selected>linear</option> + <option value="step">step</option> <option value="step-before">step-before</option> <option value="step-after">step-after</option> <option value="basis">basis</option> diff --git a/interface/js/d3evolution.min.js b/interface/js/d3evolution.min.js index 64ff4ba2c..7821bd819 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,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 +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]),u=d3.scale.linear().range([l,0]),s=d3.svg.axis().scale(c),d=d3.svg.axis().scale(u).orient("left").ticks(5),p=d3.svg.axis().tickFormat("").scale(c).tickSize(-l,0),f=d3.svg.axis().tickFormat("").scale(u).orient("left").tickSize(-o,0),y=d3.scale.quantize().range([l,0]),g=d3.svg.area().x(function(t){return c(t.x)}).y0(function(t){return y(0)}).y1(function(t){return y(null==t.y)}).interpolate("step"),h=d3.svg.line().defined(function(t){return null!=t.y}).x(function(t){return c(t.x)}).y(function(t){return u(t.y)}).interpolate(i.interpolate),x=d3.svg.area().defined(function(t){return null!=t.y}).x(function(t){return c(t.x)}).y0(function(t){return u(t.y0)}).y1(function(t){return u(t.y0+t.y)}).interpolate(i.interpolate),m=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}),u.domain([t[0]>0?0:t[0],t[1]]),d3.transition().duration(i.duration).each(function(){R.select(".y.grid").call(f.scale(u)),R.select(".y.axis").call(d.scale(u))})},v=d3.scale.category10(),k=function(t){return void 0!==i.legend.entries[t]&&void 0!==i.legend.entries[t].color?i.legend.entries[t].color:v(t)},b=function(t){return void 0!==i.legend.entries[t]&&void 0!==i.legend.entries[t].label?i.legend.entries[t].label:"path_"+t},A=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},_=function(){"percentage"===i.convert?(d.tickFormat(d3.format(".0%")),F.transition().duration(i.duration).style("opacity",0),n=A(r)):(d.tickFormat(null),F.transition().duration(i.duration).style("opacity",1),n=r),m()},w=d3.select("#"+t).append("svg").classed("d3evolution",!0).attr("width",i.width).attr("height",i.height),E=w.append("g").attr("class","legend"),R=w.append("g").attr("width",o).attr("height",l).attr("transform","translate("+i.margin.left+", "+i.margin.top+")");R.append("g").attr("class","x grid").attr("transform","translate(0,"+l+")").call(p),R.append("g").attr("class","y grid").attr("transform","translate(0,0)").call(f),R.append("g").attr("class","x axis").attr("transform","translate(0,"+l+")").call(s),R.append("g").attr("class","y axis").attr("transform","translate(0,0)").call(d);var F=R.append("text").attr("class","y label").attr("x",20-i.margin.left).attr("y",-20).text(i.yAxisLabel);w.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})});var o=d3.extent(d3.merge(r),function(t){return t.x});c.domain([o[0],o[1]]);var l=R.selectAll("path.path-null").data(r);l.enter().append("path").attr("class","path-null"),l.transition().duration(i.duration).attr("d",g),l.exit().remove(),_();var u=R.selectAll("path.path").data(n);u.enter().append("path").attr("class","path").attr("id",function(t,e){return"path_"+e}).style("area"===i.type?{fill:function(t,e){return k(e)},stroke:"none","fill-opacity":function(t,n){return e[n]}}:{fill:"none",stroke:function(t,e){return k(e)},opacity:function(t,n){return e[n]}}),u.transition().duration(i.duration).attr("d","area"===i.type?x:h),u.exit().remove(),d3.transition().duration(i.duration).each(function(){R.select(".x.grid").call(p.scale(c)),R.select(".x.axis").call(s.scale(c))});var d=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])},f=function(t){d3.select("#circle_"+t).attr("r",1.3*i.legend.buttonRadius),d3.select("#path_"+t).style("opacity",.4).style("fill-opacity",.4)},y=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=E.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 k(e)}).style("stroke",function(t,e){return k(e)}).style("fill-opacity",function(t,n){return e[n]+.2}).on("click",function(t,e){d(e)}).on("mouseover",function(t,e){f(e)}).on("mouseout",function(t,e){y(e)}),m.exit().remove(),m.transition().duration(i.duration).attr("cx",function(t,e){return a+i.legend.space*e});var v=E.selectAll("text").data(n);return v.enter().append("text").attr("y",2*i.margin.top/3).attr("dy","0.3em").text(function(t,e){return b(e)}).on("click",function(t,e){d(e)}).on("mouseover",function(t,e){f(e)}).on("mouseout",function(t,e){y(e)}),v.exit().remove(),v.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),E.selectAll("circle").attr("cx",function(t,e){return a+i.legend.space*e}).transition().duration(i.duration).style("fill",function(t,e){return k(e)}).style("stroke",function(t,e){return k(e)}),E.selectAll("text").text(function(t,e){return b(e)}),R.selectAll("path.path").transition().duration(i.duration).style("fill","area"===i.type?function(t,e){return k(e)}:"none").style("stroke","area"!==i.type?function(t,e){return k(e)}:"none"),this},this.convert=function(t){return i.convert=t,_(),R.selectAll("path.path").data(n).transition().duration(i.duration).attr("d","area"===i.type?x:h),this},this.interpolate=function(t){return i.interpolate=t,x.interpolate(i.interpolate),h.interpolate(i.interpolate),R.selectAll("path.path").attr("d","area"===i.type?x:h),this},this.type=function(t){return i.type=t,m(),R.selectAll("path.path").style("stroke","area"!==i.type?function(t,e){return k(e)}:"none").style("fill","area"===i.type?function(t,e){return k(e)}:"none").transition().duration(i.duration).attr("d","area"===i.type?x:h),this},this.destroy=function(){d3.select("svg").remove()}}
\ No newline at end of file |