diff --git a/c3.js b/c3.js index 7284e13..23b1d6e 100644 --- a/c3.js +++ b/c3.js @@ -30,7 +30,7 @@ // bindto - id to bind the chart checkConfig('bindto', 'bindto is required in config'); - var __size_width = getConfig(['size','width'], 640), + var __size_width = getConfig(['size','width'], null), __size_height = getConfig(['size','height'], 280); // data - data configuration @@ -151,9 +151,21 @@ }; } + var parseDate = d3.time.format(__data_x_format).parse; + /*-- Set Chart Params --*/ - var bottom = 20 + __subchart_size_height + legendHeight, + var bottom, bottom2, right, top2, top3, margin, margin2, margin3, width, height, height2, height3; + var xMin, xMax, yMin, yMax, x, y, y2, subX, subY, subY2; + + // TODO: Enable set position + var xAxis = isCategorized ? categoryAxis() : d3.svg.axis(), + yAxis = d3.svg.axis(), + yAxis2 = d3.svg.axis(), + subXAxis = isCategorized ? categoryAxis() : d3.svg.axis(); + + function updateSizes () { + bottom = 20 + __subchart_size_height + legendHeight, right = __axis_y2_show && !__axis_rotated ? 50 : 1, top2 = __size_height - __subchart_size_height - legendHeight, bottom2 = 20 + legendHeight, @@ -161,35 +173,38 @@ margin = {top: 0, right: right, bottom: bottom, left: 40}, margin2 = {top: top2, right: 20, bottom: bottom2, left: 40}, margin3 = {top: top3, right: 20, bottom: 0, left: 40}, - width = __size_width - margin.left - margin.right, + width = (__size_width == null ? getParentWidth() : __size_width) - margin.left - margin.right, height = __size_height - margin.top - margin.bottom, height2 = __size_height - margin2.top - margin2.bottom, height3 = __size_height - margin3.top - margin3.bottom; - - var parseDate = d3.time.format(__data_x_format).parse; - - var xMin = __axis_rotated ? 10 : 0, - xMax = __axis_rotated ? height : width, - yMin = __axis_rotated ? 0 : height, - yMax = __axis_rotated ? width : 1; - - var x = getX(xMin, xMax), - y = getY(yMin, yMax), - y2 = getY(yMin, yMax), - subX = getX(0, width), - subY = getY(height2, 10), + } + updateSizes(); + + function updateScales () { + var _x, _y, _y2, _subX; + // update edges + xMin = __axis_rotated ? 10 : 0; + xMax = __axis_rotated ? height : width; // AAA + yMin = __axis_rotated ? 0 : height; + yMax = __axis_rotated ? width : 1; // AAA + // update scales + _x = getX(xMin, xMax); + _y = getY(yMin, yMax); + _y2 = getY(yMin, yMax); + _subX = getX(0, width); + x = isDefined(x) ? _x.domain(x.domain()) : _x; + y = isDefined(y) ? _y.domain(y.domain()) : _y; + y2 = isDefined(y2) ? _y2.domain(y2.domain()) : _y2; + subX = isDefined(subX) ? _subX.domain(subX.domain()) : _subX; + subY = getY(height2, 10); subY2 = getY(height2, 10); - - // TODO: Enable set position - var xAxis = isCategorized ? categoryAxis() : d3.svg.axis(), - yAxis = d3.svg.axis(), - yAxis2 = d3.svg.axis(), - subXAxis = isCategorized ? categoryAxis() : d3.svg.axis(); - - xAxis.scale(x).orient(__axis_rotated ? "left" : "bottom"); - yAxis.scale(y).orient(__axis_rotated ? "bottom" : "left"); - yAxis2.scale(y2).orient(__axis_rotated ? "top" : "right"); - subXAxis.scale(subX).orient("bottom"); + // update axies + xAxis.scale(x).orient(__axis_rotated ? "left" : "bottom"); + yAxis.scale(y).orient(__axis_rotated ? "bottom" : "left"); + yAxis2.scale(y2).orient(__axis_rotated ? "top" : "right"); + subXAxis.scale(subX).orient("bottom"); + }; + updateScales(); if (isTimeSeries) { xAxis.tickFormat(customTimeFormat); @@ -278,27 +293,28 @@ // Define svgs var svg = d3.select(config.bindto).append("svg") - .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom); + .attr("width", width + margin.left + margin.right) // AAA + .attr("height", height + margin.top + margin.bottom); - svg.append("defs"); + // Define defs + var defs = svg.append("defs"); - svg.select("defs").append("clipPath") + defs.append("clipPath") .attr("id", clipId) .append("rect") .attr("y", margin.top) - .attr("width", width) + .attr("width", width) // AAA .attr("height", height-margin.top); - svg.select("defs").append("clipPath") + defs.append("clipPath") .attr("id", "xaxis-clip") .append("rect") .attr("x", -1) .attr("y", -1) - .attr("width", width + 2) + .attr("width", width + 2) // AAA .attr("height", 40); - svg.select("defs").append("clipPath") + defs.append("clipPath") .attr("id", "yaxis-clip") .append("rect") .attr("x", -40 + 1) @@ -331,6 +347,11 @@ /*-- Define Functions --*/ + function getParentWidth () { + // TODO: if rotated, use height + return +d3.select(config.bindto).style("width").replace('px',''); + } + //-- Scale --// function getX (min, max) { @@ -841,7 +862,7 @@ .append('line') .attr('class', 'xgrid-focus') .attr("x1", __axis_rotated ? 0 : -10) - .attr("x2", __axis_rotated ? width : -10) + .attr("x2", __axis_rotated ? width : -10) // AAA update on update .attr("y1", __axis_rotated ? -10 : margin.top) .attr("y2", __axis_rotated ? -10 : height); } @@ -1082,7 +1103,7 @@ if (__axis_y2_show) { main.append("g") .attr("class", "y2 axis") - .attr("transform", "translate(" + (__axis_rotated ? 0 : width) + "," + (__axis_rotated ? 10 : 0) + ")") + .attr("transform", "translate(" + (__axis_rotated ? 0 : width) + "," + (__axis_rotated ? 10 : 0) + ")") // AAA .call(yAxis2); } @@ -1341,6 +1362,18 @@ }); } + function resize () { + // Update sizes and scales + updateSizes(); + updateScales(); + // Resize svg + d3.select('svg').attr('width', width + margin.left + margin.right); + d3.select('#'+clipId).select('rect').attr('width', width); + d3.select('#xaxis-clip').select('rect').attr('width', width + 2); + // Draw with new sizes & scales + redraw(); + } + function updateTargets (targets) { var mainLineEnter, mainLineUpdate, mainBarEnter, mainBarUpdate; var contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate; @@ -1715,6 +1748,9 @@ throw Error('url or rows or columns is required.'); } + // Bind resize event + window.onresize = resize; + return c3; } diff --git a/c3.min.js b/c3.min.js index 7f027d8..0a15be6 100644 --- a/c3.min.js +++ b/c3.min.js @@ -1,58 +1,59 @@ -(function(La){function db(){function v(d,k){d.attr("transform",function(d){return"translate("+(k(d)+F)+",0)"})}function d(d,k){d.attr("transform",function(d){return"translate(0,"+k(d)+")"})}function n(d){var k=d[0];d=d[d.length-1];return ks[c].indexOf(f.id)))for(e=0;e=d;d+=diffx2)qa+=h(a[f-1],a[f],d,m);return qa}function Ua(a){var b=l.data.targets=ma(a),c,e;p.domain(d3.extent(a.map(function(a){return a.x}))); -A.domain(R(b,"y"));ia.domain(R(b,"y2"));C.domain(p.domain());Pa.domain(A.domain());Oa.domain(ia.domain());x.ticks(10>a.length?a.length:10);c=h.append("g").attr("clip-path",Ha).attr("class","grid");rb&&c.append("g").attr("class","xgrids");Va&&(e=c.append("g").attr("class","xgrid-lines").selectAll(".xgrid-line").data(Va).enter().append("g").attr("class","xgrid-line"),e.append("line").attr("class",function(a){return""+a["class"]}),e.append("text").attr("class",function(a){return""+a["class"]}).attr("text-anchor", -"end").attr("transform",g?"":"rotate(-90)").attr("dx",g?0:-q.top).attr("dy",-6).text(function(a){return a.text}));Wb&&c.append("g").attr("class","xgrid-focus").append("line").attr("class","xgrid-focus").attr("x1",g?0:-10).attr("x2",g?t:-10).attr("y1",g?-10:q.top).attr("y2",g?-10:u);sb&&c.append("g").attr("class","ygrids");Wa&&c.append("g").attr("class","ygrid-lines").selectAll("ygrid-line").data(Wa).enter().append("line").attr("class",function(a){return"ygrid-line "+a["class"]});h.append("g").attr("clip-path", -Ha).attr("class","regions");h.append("g").attr("clip-path",Ha).attr("class","chart");h.select(".chart").append("g").attr("class","event-rects").style("fill-opacity",0).selectAll(".event-rects").data(a).enter().append("rect").attr("class",function(a,b){return"event-rect event-rect-"+b}).style("cursor",function(a){return V&&ba?"pointer":null}).on("mouseover",function(a,b){if(!Ia){var c=l.data.targets.map(function(a){return M(a.values[b])}),e,d;if(0",c,d,f;for(c=0;c"+f+""+ -d+"";return b+""}),Zb=d(["tooltip","init","show"],!1),la=d(["tooltip","init","x"],0),yb=d(["tooltip","init","position"],{top:"0px",left:"50px"}),Eb=v.bindto.replace("#","")+"-clip",Ha="url(#"+Eb+")",z="timeseries"===Cb,Ba="categorized"===Cb,Ya=null,Ia=!1,da=wa?40:0,hc=function(a){return function(b){for(var c=a.length-1,d=a[c];!d[1](b);)d=a[--c];return d[0](b)}}([[d3.time.format("%Y/%-m/%-d"),function(){return!0}],[d3.time.format("%-m/%-d"),function(a){return a.getMonth()}],[d3.time.format("%-m/%-d"), -function(a){return 1!=a.getDate()}],[d3.time.format("%-m/%-d"),function(a){return a.getDay()&&1!=a.getDate()}],[d3.time.format("%I %p"),function(a){return a.getHours()}],[d3.time.format("%I:%M"),function(a){return a.getMinutes()}],[d3.time.format(":%S"),function(a){return a.getSeconds()}],[d3.time.format(".%L"),function(a){return a.getMilliseconds()}]]),q={top:0,right:wb&&!g?50:1,bottom:20+Bb+da,left:40},Fb=Ja-Bb-da,ic=Ja-da,t=dc-q.left-q.right,u=Ja-q.top-q.bottom,va=Ja-Fb-(20+da),aa=d3.time.format(ec).parse, -Gb=g?0:u,Hb=g?t:1,p=Ma(g?10:0,g?u:t),A=na(Gb,Hb),ia=na(Gb,Hb),C=Ma(0,t),Pa=na(va,10),Oa=na(va,10),x=Ba?db():d3.svg.axis(),ta=d3.svg.axis(),$a=d3.svg.axis(),ka=Ba?db():d3.svg.axis();x.scale(p).orient(g?"left":"bottom");ta.scale(A).orient(g?"bottom":"left");$a.scale(ia).orient(g?"top":"right");ka.scale(C).orient("bottom");z&&x.tickFormat(hc);Ba?(x.categories(Ka).tickCentered(Db),ka.categories(Ka).tickCentered(Db)):(x.tickOffset=function(){return 0},ka.tickOffset=function(){return 0});Ba&&function(){var a= -p,b=C,c=Object.keys(p),d,f;p=function(b){return a(b)+x.tickOffset()};C=function(a){return b(a)+ka.tickOffset()};for(f=0;fa?0: -a},N=function(a,b){var c=[],d=null!==b?b:"#1f77b4 #ff7f0e #2ca02c #d62728 #9467bd #8c564b #e377c2 #7f7f7f #bcbd22 #17becf".split(" ");return function(b){if(b in a)return a[b];0<=c.indexOf(b)||c.push(b);return d[c.indexOf(b)%d.length]}}(fc,gc),ea=d3.select(v.bindto).append("svg").attr("width",t+q.left+q.right).attr("height",u+q.top+q.bottom);ea.append("defs");ea.select("defs").append("clipPath").attr("id",Eb).append("rect").attr("y",q.top).attr("width",t).attr("height",u-q.top);ea.select("defs").append("clipPath").attr("id", -"xaxis-clip").append("rect").attr("x",-1).attr("y",-1).attr("width",t+2).attr("height",40);ea.select("defs").append("clipPath").attr("id","yaxis-clip").append("rect").attr("x",-39).attr("y",q.top-1).attr("width",40).attr("height",u-q.top+2);var h=ea.append("g").attr("transform","translate("+q.left+","+q.top+")"),I=null;ua&&(I=ea.append("g").attr("transform","translate(40,"+Fb+")"));var za=null;wa&&(za=ea.append("g").attr("transform","translate(40,"+ic+")"));var ja=d3.select(v.bindto).style("position", -"relative").append("div").style("position","absolute").style("width","30%").style("z-index","10").style("visibility","hidden"),ha=d3.svg.brush().x(C).on("brush",function(){J({withTransition:!1,withY:!1,withSubchart:!1})}),Ga=null,Qa=null;l.focus=function(a){l.defocus();d3.selectAll(Aa(a)).filter(function(a){return P(a.id)}).classed("focused",!0).transition().duration(100).style("opacity",1)};l.defocus=function(a){d3.selectAll(Aa(a)).filter(function(a){return P(a.id)}).classed("focused",!1).transition().duration(100).style("opacity", -0.3)};l.revert=function(a){d3.selectAll(Aa(a)).filter(function(a){return P(a.id)}).classed("focused",!1).transition().duration(100).style("opacity",1)};l.show=function(a){d3.selectAll(Aa(a)).transition().style("opacity",1)};l.hide=function(a){d3.selectAll(Aa(a)).transition().style("opacity",0)};l.load=function(a){r(a.done)&&(a.done=function(){});if("cacheIds"in a&&ga(a.cacheIds))xa(fa(a.cacheIds),a.done);else if("data"in a)xa(ma(data),a.done);else if("url"in a)d3.csv(a.url,function(b,c){xa(ma(c), -a.done)});else if("rows"in a)xa(ma(E(a.rows)),a.done);else if("columns"in a)xa(ma(k(a.columns)),a.done);else throw Error("url or rows or columns is required.");};l.unload=function(a){l.data.targets=l.data.targets.filter(function(b){return b.id!=a});d3.selectAll(".target-"+a).transition().style("opacity",0).remove();wa&&(d3.selectAll(".legend-item-"+a).remove(),bb(l.data.targets));0b.classes.indexOf(a)})});return D};l.data.get=function(a){a=l.data.getAsTarget(a);return n(a)?a.values.map(function(a){return a.value}):void 0};l.data.getAsTarget=function(a){var b=y(function(b){return b.id==a});return 0t[c].indexOf(f.id)))for(e=0;e=d;d+=diffx2)qa+=h(a[f-1],a[f],d, +p);return qa}function Za(a){var b=l.data.targets=I(a),c,e;p.domain(d3.extent(a.map(function(a){return a.x})));v.domain(Ca(b,"y"));N.domain(Ca(b,"y2"));w.domain(p.domain());Fa.domain(v.domain());Ga.domain(N.domain());C.ticks(10>a.length?a.length:10);c=h.append("g").attr("clip-path",Ma).attr("class","grid");Lb&&c.append("g").attr("class","xgrids");$a&&(e=c.append("g").attr("class","xgrid-lines").selectAll(".xgrid-line").data($a).enter().append("g").attr("class","xgrid-line"),e.append("line").attr("class", +function(a){return""+a["class"]}),e.append("text").attr("class",function(a){return""+a["class"]}).attr("text-anchor","end").attr("transform",g?"":"rotate(-90)").attr("dx",g?0:-s).attr("dy",-6).text(function(a){return a.text}));oc&&c.append("g").attr("class","xgrid-focus").append("line").attr("class","xgrid-focus").attr("x1",g?0:-10).attr("x2",g?q:-10).attr("y1",g?-10:s).attr("y2",g?-10:u);Mb&&c.append("g").attr("class","ygrids");ab&&c.append("g").attr("class","ygrid-lines").selectAll("ygrid-line").data(ab).enter().append("line").attr("class", +function(a){return"ygrid-line "+a["class"]});h.append("g").attr("clip-path",Ma).attr("class","regions");h.append("g").attr("clip-path",Ma).attr("class","chart");h.select(".chart").append("g").attr("class","event-rects").style("fill-opacity",0).selectAll(".event-rects").data(a).enter().append("rect").attr("class",function(a,b){return"event-rect event-rect-"+b}).style("cursor",function(a){return V&&$?"pointer":null}).on("mouseover",function(a,b){if(!Na){var c=l.data.targets.map(function(a){return Da(a.values[b])}), +e,d;if(0",c,d,f;for(c=0;c"+f+""+d+"";return b+""}),rc=d(["tooltip","init","show"],!1),ha=d(["tooltip","init","x"],0),Rb=d(["tooltip","init","position"],{top:"0px",left:"50px"}),hb=x.bindto.replace("#","")+"-clip",Ma="url(#"+hb+")",E="timeseries"===Ub,Aa="categorized"===Ub,cb=null,Na=!1,Y=va?40:0,zc=function(a){return function(b){for(var c=a.length-1,d=a[c];!d[1](b);)d=a[--c];return d[0](b)}}([[d3.time.format("%Y/%-m/%-d"), +function(){return!0}],[d3.time.format("%-m/%-d"),function(a){return a.getMonth()}],[d3.time.format("%-m/%-d"),function(a){return 1!=a.getDate()}],[d3.time.format("%-m/%-d"),function(a){return a.getDay()&&1!=a.getDate()}],[d3.time.format("%I %p"),function(a){return a.getHours()}],[d3.time.format("%I:%M"),function(a){return a.getMinutes()}],[d3.time.format(":%S"),function(a){return a.getSeconds()}],[d3.time.format(".%L"),function(a){return a.getMilliseconds()}]]),Z=d3.time.format(wc).parse,mb,rb,ob, +qb,sb,q,u,da,ub,vb,Ra,Sa,p,v,N,w,Fa,Ga,C=Aa?kb():d3.svg.axis(),oa=d3.svg.axis(),Ta=d3.svg.axis(),ea=Aa?kb():d3.svg.axis();M();P();E&&C.tickFormat(zc);Aa?(C.categories(Oa).tickCentered(Vb),ea.categories(Oa).tickCentered(Vb)):(C.tickOffset=function(){return 0},ea.tickOffset=function(){return 0});Aa&&function(){var a=p,b=w,c=Object.keys(p),d,f;p=function(b){return a(b)+C.tickOffset()};w=function(a){return b(a)+ea.tickOffset()};for(f=0;fa?0:a},O=function(a,b){var c=[],d=null!==b?b:"#1f77b4 #ff7f0e #2ca02c #d62728 #9467bd #8c564b #e377c2 #7f7f7f #bcbd22 #17becf".split(" ");return function(b){if(b in a)return a[b];0<=c.indexOf(b)||c.push(b);return d[c.indexOf(b)%d.length]}}(xc,yc),Pa=d3.select(x.bindto).append("svg").attr("width", +q+J+B).attr("height",u+s+R),ib=Pa.append("defs");ib.append("clipPath").attr("id",hb).append("rect").attr("y",s).attr("width",q).attr("height",u-s);ib.append("clipPath").attr("id","xaxis-clip").append("rect").attr("x",-1).attr("y",-1).attr("width",q+2).attr("height",40);ib.append("clipPath").attr("id","yaxis-clip").append("rect").attr("x",-39).attr("y",s-1).attr("width",40).attr("height",u-s+2);var h=Pa.append("g").attr("transform","translate("+J+","+s+")"),L=null;ua&&(L=Pa.append("g").attr("transform", +"translate("+F+","+ia+")"));var ya=null;va&&(ya=Pa.append("g").attr("transform","translate("+Ba+","+lb+")"));var ga=d3.select(x.bindto).style("position","relative").append("div").style("position","absolute").style("width","30%").style("z-index","10").style("visibility","hidden"),fa=d3.svg.brush().x(w).on("brush",function(){G({withTransition:!1,withY:!1,withSubchart:!1})}),Ka=null,Ua=null;l.focus=function(a){l.defocus();d3.selectAll(za(a)).filter(function(a){return Qa(a.id)}).classed("focused",!0).transition().duration(100).style("opacity", +1)};l.defocus=function(a){d3.selectAll(za(a)).filter(function(a){return Qa(a.id)}).classed("focused",!1).transition().duration(100).style("opacity",0.3)};l.revert=function(a){d3.selectAll(za(a)).filter(function(a){return Qa(a.id)}).classed("focused",!1).transition().duration(100).style("opacity",1)};l.show=function(a){d3.selectAll(za(a)).transition().style("opacity",1)};l.hide=function(a){d3.selectAll(za(a)).transition().style("opacity",0)};l.load=function(a){r(a.done)&&(a.done=function(){});if("cacheIds"in +a&&ba(a.cacheIds))wa(ca(a.cacheIds),a.done);else if("data"in a)wa(I(data),a.done);else if("url"in a)d3.csv(a.url,function(b,c){wa(I(c),a.done)});else if("rows"in a)wa(I(ja(a.rows)),a.done);else if("columns"in a)wa(I(ka(a.columns)),a.done);else throw Error("url or rows or columns is required.");};l.unload=function(a){l.data.targets=l.data.targets.filter(function(b){return b.id!=a});d3.selectAll(".target-"+a).transition().style("opacity",0).remove();va&&(d3.selectAll(".legend-item-"+a).remove(),fb(l.data.targets)); +0b.classes.indexOf(a)})});return H};l.data.get=function(a){a=l.data.getAsTarget(a);return n(a)?a.values.map(function(a){return a.value}):void 0};l.data.getAsTarget=function(a){var b=Ha(function(b){return b.id== +a});return 0