From dd547832d1d48d8a2d06c3ebdf9d18e752443e7c Mon Sep 17 00:00:00 2001 From: Vsevolod Stakhov Date: Sat, 2 Jul 2016 21:24:28 +0100 Subject: [PATCH] [WebUI] Use local copy of d3evolution --- interface/css/d3evolution.css | 22 ++++++++++++++++++++++ interface/index.html | 7 +++---- interface/js/d3evolution.min.js | 1 + 3 files changed, 26 insertions(+), 4 deletions(-) create mode 100644 interface/css/d3evolution.css create mode 100644 interface/js/d3evolution.min.js diff --git a/interface/css/d3evolution.css b/interface/css/d3evolution.css new file mode 100644 index 000000000..49082e3e8 --- /dev/null +++ b/interface/css/d3evolution.css @@ -0,0 +1,22 @@ +.d3evolution svg { + background-color: white; +} +.d3evolution .chart-title { + font-size: 17px; +} +.d3evolution .grid .tick { + stroke: lightgrey; + shape-rendering: crispEdges; +} +.d3evolution .axis, +.d3evolution .legend { + font-size: 13px; +} +.d3evolution .axis path, +.d3evolution .axis line { + fill: none; + stroke: grey; +} +.d3evolution .legend circle { + stroke-width: 2px; +} diff --git a/interface/index.html b/interface/index.html index cef29803f..e155e6894 100644 --- a/interface/index.html +++ b/interface/index.html @@ -8,7 +8,7 @@ - + @@ -320,10 +320,9 @@ - + + - - diff --git a/interface/js/d3evolution.min.js b/interface/js/d3evolution.min.js new file mode 100644 index 000000000..cfcc917f6 --- /dev/null +++ b/interface/js/d3evolution.min.js @@ -0,0 +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 -- 2.39.5