From a7e485a053e1868469752945c53bf3ec87cef1d5 Mon Sep 17 00:00:00 2001 From: Masayuki Tanaka Date: Mon, 27 Jan 2014 18:56:44 +0900 Subject: [PATCH] Add destory() as destructor and fix duplicated chart generation - #6 --- c3.js | 31 +++++++++---- c3.min.js | 135 +++++++++++++++++++++++++++--------------------------- 2 files changed, 90 insertions(+), 76 deletions(-) diff --git a/c3.js b/c3.js index 4116653..1437ee4 100644 --- a/c3.js +++ b/c3.js @@ -903,7 +903,6 @@ var firstDate = null, lastDate = null, orgXDomain; function init(data) { - var targets = c3.data.targets = convertDataToTargets(data); var grid, xgridLine; var i; @@ -911,8 +910,13 @@ if (selectChart.empty()) { window.alert('No bind element found. Check the selector specified by "bindto" and existance of that element. Default "bindto" is "#chart".'); return; + } else { + selectChart.html(""); } + c3.data.x = undefined; + c3.data.targets = convertDataToTargets(data); + // TODO: set names if names not specified // Init sizes and scales @@ -1326,10 +1330,10 @@ /*-- Legend Region --*/ - if (__legend_show) { updateLegend(targets); } + if (__legend_show) { updateLegend(c3.data.targets); } // Set targets - updateTargets(targets); + updateTargets(c3.data.targets); // Draw with targets redraw({withTransition: false, withUpdateXDomain: true}); @@ -1338,18 +1342,23 @@ if (__tooltip_init_show) { if (isTimeSeries && typeof __tooltip_init_x === 'string') { __tooltip_init_x = parseDate(__tooltip_init_x); - for (i = 0; i < targets[0].values.length; i++) { - if ((targets[0].values[i].x - __tooltip_init_x) === 0) { break; } + for (i = 0; i < c3.data.targets[0].values.length; i++) { + if ((c3.data.targets[0].values[i].x - __tooltip_init_x) === 0) { break; } } __tooltip_init_x = i; } - tooltip.html(__tooltip_contents(targets.map(function (d) { + tooltip.html(__tooltip_contents(c3.data.targets.map(function (d) { return addName(d.values[__tooltip_init_x]); }))); tooltip.style("top", __tooltip_init_position.top) .style("left", __tooltip_init_position.left) .style("visibility", "visible"); } + + // Bind resize event + if (window.onresize == null) { + window.onresize = resize; + } } function redraw(options) { @@ -2009,6 +2018,13 @@ return targets.length > 0 ? targets[0] : undefined; }; + c3.destroy = function () { + c3.data.targets = undefined; + c3.data.x = undefined; + selectChart.html(""); + window.onresize = null; + }; + /*-- Load data and init chart with defined functions --*/ if ('url' in config.data) { @@ -2024,9 +2040,6 @@ 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 b475199..baecd49 100644 --- a/c3.min.js +++ b/c3.min.js @@ -1,67 +1,68 @@ -(function(ha){function wc(){function p(e,c){e.attr("transform",function(e){return"translate("+(c(e)+W)+", 0)"})}function s(e,c){e.attr("transform",function(e){return"translate(0,"+c(e)+")"})}function ha(e){var c=e[0];e=e[e.length-1];return ca?0:a}function Db(a){var b=Ha[a.id];a.name=p(b)?b:a.id;return a}function Ub(a){var b=a[0],d={},h=[],m,e;for(m=1;mv[d].indexOf(e.id)))for(h=0;h=g;g+=t)r+=e(a[c-1],a[c],g,u)}return r}function sb(a){var b=k.data.targets=Ia(a),d,c;lc=e.select(ua);if(lc.empty())ha.alert('No bind element found. Check the selector specified by "bindto" and existance of that element. Default "bindto" is "#chart".');else{Q(); -Ab();l.domain(e.extent(a.map(function(a){return a.x})));y.domain(ja("y"));R.domain(ja("y2"));Z.domain(l.domain());Ua.domain(y.domain());Va.domain(R.domain());J.ticks(10>a.length?a.length:10);ma.ticks(Vc).outerTickSize(0).tickFormat(Wc);Wa.ticks(Xc).outerTickSize(0).tickFormat(Yc);S=l.domain();F.x(Z);oa&&G.x(l);La=e.select(ua).append("svg").attr("width",q+B+A).attr("height",t+w+Y).on("mouseenter",Zc).on("mouseleave",$c);ab=La.append("defs");ab.append("clipPath").attr("id",tb).append("rect").attr("y", -w).attr("width",q).attr("height",t-w);ab.append("clipPath").attr("id","xaxis-clip").append("rect").attr("x",-1-B).attr("y",-20).attr("width",W).attr("height",X);ab.append("clipPath").attr("id","yaxis-clip").append("rect").attr("x",-B+1).attr("y",w-1).attr("width",ia).attr("height",eb);g=La.append("g").attr("transform",K.main);x=xa?La.append("g").attr("transform",K.context):null;ya=za?La.append("g").attr("transform",K.legend):null;da=e.select(ua).style("position","relative").append("div").style("position", -"absolute").style("width","30%").style("z-index","10").style("visibility","hidden");g.append("g").attr("class","x axis").attr("clip-path",f?"":"url(#xaxis-clip)").attr("transform",K.x).call(f?ma:J).append("text").attr("class","-axis-x-label").attr("x",q).attr("dy","-.5em").style("text-anchor","end").text(ad);g.append("g").attr("class","y axis").attr("clip-path",f?"url(#yaxis-clip)":"").call(f?J:ma).append("text").attr("transform","rotate(-90)").attr("dy","1.2em").attr("dx","-.5em").style("text-anchor", -"end").text(bd);Kb&&g.append("g").attr("class","y2 axis").attr("transform",K.y2).call(Wa);d=g.append("g").attr("clip-path",Ma).attr("class","grid");mc&&d.append("g").attr("class","xgrids");ub&&(c=d.append("g").attr("class","xgrid-lines").selectAll(".xgrid-line").data(ub).enter().append("g").attr("class","xgrid-line"),c.append("line").attr("class",function(a){return""+a["class"]}),c.append("text").attr("class",function(a){return""+a["class"]}).attr("text-anchor","end").attr("transform",f?"":"rotate(-90)").attr("dx", -f?0:-w).attr("dy",-6).text(function(a){return a.text}));cd&&d.append("g").attr("class","xgrid-focus").append("line").attr("class","xgrid-focus").attr("x1",f?0:-10).attr("x2",f?q:-10).attr("y1",f?-10:w).attr("y2",f?-10:t);nc&&d.append("g").attr("class","ygrids");vb&&d.append("g").attr("class","ygrid-lines").selectAll("ygrid-line").data(vb).enter().append("line").attr("class",function(a){return"ygrid-line "+a["class"]});g.append("g").attr("clip-path",Ma).attr("class","regions");g.append("g").attr("clip-path", -Ma).attr("class","chart");g.select(".chart").append("g").attr("class","event-rects").style("fill-opacity",0).style("cursor",oa?"ew-resize":null).selectAll(".event-rects").data(a).enter().append("rect").attr("class",function(a,b){return"event-rect event-rect-"+b}).style("cursor",ea&&pa?"pointer":null).on("mouseover",function(a,b){if(!bb){var d=k.data.targets.map(function(a){return Db(a.values[b])}),c,h;if(0",d,c,e;for(d=0;d"+e+""+c+"";return b+""}),fd=c(["tooltip","init","show"],!1),Aa=c(["tooltip","init","x"],0),sc=c(["tooltip","init","position"],{top:"0px",left:"50px"}),tb=ua.replace("#","")+"-clip",Ma="url(#"+tb+")",z="timeseries"===vc,$="categorized"===vc,kb=!z&&T,yb=null,bb=!1,xb=!1,ka=za?40:0,na=e.time.format(ld).parse,U=function(a,b){var d=[],c=null!==b?b:"#1f77b4 #ff7f0e #2ca02c #d62728 #9467bd #8c564b #e377c2 #7f7f7f #bcbd22 #17becf".split(" "); -return function(b){if(b in a)return a[b];-1===d.indexOf(b)&&d.push(b);return c[d.indexOf(b)%c.length]}}(md,nd),Bc=function(){var a=[[e.time.format("%Y/%-m/%-d"),function(){return!0}],[e.time.format("%-m/%-d"),function(a){return a.getMonth()}],[e.time.format("%-m/%-d"),function(a){return 1!==a.getDate()}],[e.time.format("%-m/%-d"),function(a){return a.getDay()&&1!==a.getDate()}],[e.time.format("%I %p"),function(a){return a.getHours()}],[e.time.format("%I:%M"),function(a){return a.getMinutes()}],[e.time.format(":%S"), -function(a){return a.getSeconds()}],[e.time.format(".%L"),function(a){return a.getMilliseconds()}]];return function(b){for(var d=a.length-1,c=a[d];!c[1](b);)c=a[--d];return c[0](b)}}(),Gb,Nb,Ib,Ta,Mb,Ob,q,t,la,fb,va,Pb,Qb,ib,jb,l,y,R,Z,Ua,Va,J,ma,Wa,Ca,xc=f?"left":"bottom",yc=f?hb?"top":"bottom":hb?"right":"left",zc=f?gb?"bottom":"top":gb?"left":"right",Ac="bottom",K={main:function(){return"translate("+B+","+w+")"},context:function(){return"translate("+H+","+Ba+")"},legend:function(){return"translate("+ -Cb+","+Bb+")"},y2:function(){return"translate("+(f?0:q)+","+(f?10:0)+")"},x:function(){return"translate(0,"+t+")"},subx:function(){return"translate(0,"+la+")"}},hd=function(){var a=e.svg.line().x(f?function(a){return E(a.id)(a.value)}:$a).y(f?$a:function(a){return E(a.id)(a.value)});return function(b){var d=jc(b.values),c;if(qb(b))return"spline"===ca["string"===typeof b?b:b.id]?a.interpolate("cardinal"):a.interpolate("linear"),0b.classes.indexOf(a)})});return L};k.data.get=function(a){a=k.data.getAsTarget(a);return p(a)?a.values.map(function(a){return a.value}):void 0};k.data.getAsTarget=function(a){var b= -Xa(function(b){return b.id===a});return 0a?0:a}function Eb(a){var b=Ha[a.id];a.name=n(b)?b:a.id;return a}function Vb(a){var b=a[0],c={},g=[],p,e;for(p=1;pw[c].indexOf(e.id)))for(g=0;g=q;q+=v)k+=e(a[d-1],a[d],q,u)}return k}function tb(a){var b,c;ab=e.select(ua);if(ab.empty())P.alert('No bind element found. Check the selector specified by "bindto" and existance of that element. Default "bindto" is "#chart".');else{ab.html("");k.data.x=void 0; +k.data.targets=Ia(a);R();Bb();m.domain(e.extent(a.map(function(a){return a.x})));y.domain(ja("y"));S.domain(ja("y2"));$.domain(m.domain());Ua.domain(y.domain());Va.domain(S.domain());J.ticks(10>a.length?a.length:10);ma.ticks(Uc).outerTickSize(0).tickFormat(Vc);Wa.ticks(Wc).outerTickSize(0).tickFormat(Xc);T=m.domain();F.x($);oa&&G.x(m);La=e.select(ua).append("svg").attr("width",s+B+A).attr("height",r+v+Z).on("mouseenter",Yc).on("mouseleave",Zc);bb=La.append("defs");bb.append("clipPath").attr("id", +ub).append("rect").attr("y",v).attr("width",s).attr("height",r-v);bb.append("clipPath").attr("id","xaxis-clip").append("rect").attr("x",-1-B).attr("y",-20).attr("width",X).attr("height",Y);bb.append("clipPath").attr("id","yaxis-clip").append("rect").attr("x",-B+1).attr("y",v-1).attr("width",ia).attr("height",fb);h=La.append("g").attr("transform",K.main);x=xa?La.append("g").attr("transform",K.context):null;ya=za?La.append("g").attr("transform",K.legend):null;ea=e.select(ua).style("position","relative").append("div").style("position", +"absolute").style("width","30%").style("z-index","10").style("visibility","hidden");h.append("g").attr("class","x axis").attr("clip-path",f?"":"url(#xaxis-clip)").attr("transform",K.x).call(f?ma:J).append("text").attr("class","-axis-x-label").attr("x",s).attr("dy","-.5em").style("text-anchor","end").text($c);h.append("g").attr("class","y axis").attr("clip-path",f?"url(#yaxis-clip)":"").call(f?J:ma).append("text").attr("transform","rotate(-90)").attr("dy","1.2em").attr("dx","-.5em").style("text-anchor", +"end").text(ad);Lb&&h.append("g").attr("class","y2 axis").attr("transform",K.y2).call(Wa);b=h.append("g").attr("clip-path",Ma).attr("class","grid");lc&&b.append("g").attr("class","xgrids");vb&&(c=b.append("g").attr("class","xgrid-lines").selectAll(".xgrid-line").data(vb).enter().append("g").attr("class","xgrid-line"),c.append("line").attr("class",function(a){return""+a["class"]}),c.append("text").attr("class",function(a){return""+a["class"]}).attr("text-anchor","end").attr("transform",f?"":"rotate(-90)").attr("dx", +f?0:-v).attr("dy",-6).text(function(a){return a.text}));bd&&b.append("g").attr("class","xgrid-focus").append("line").attr("class","xgrid-focus").attr("x1",f?0:-10).attr("x2",f?s:-10).attr("y1",f?-10:v).attr("y2",f?-10:r);mc&&b.append("g").attr("class","ygrids");wb&&b.append("g").attr("class","ygrid-lines").selectAll("ygrid-line").data(wb).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).style("cursor",oa?"ew-resize":null).selectAll(".event-rects").data(a).enter().append("rect").attr("class",function(a,b){return"event-rect event-rect-"+b}).style("cursor",fa&&pa?"pointer":null).on("mouseover",function(a,b){if(!cb){var c=k.data.targets.map(function(a){return Eb(a.values[b])}),d,n;if(0",c,d,e;for(c=0;c"+e+""+d+"";return b+""}),ed=d(["tooltip","init","show"],!1),Aa=d(["tooltip","init","x"],0),rc= +d(["tooltip","init","position"],{top:"0px",left:"50px"}),ub=ua.replace("#","")+"-clip",Ma="url(#"+ub+")",z="timeseries"===uc,aa="categorized"===uc,lb=!z&&U,zb=null,cb=!1,yb=!1,ka=za?40:0,na=e.time.format(ld).parse,V=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];-1===c.indexOf(b)&&c.push(b);return d[c.indexOf(b)%d.length]}}(md,nd),Ac=function(){var a=[[e.time.format("%Y/%-m/%-d"), +function(){return!0}],[e.time.format("%-m/%-d"),function(a){return a.getMonth()}],[e.time.format("%-m/%-d"),function(a){return 1!==a.getDate()}],[e.time.format("%-m/%-d"),function(a){return a.getDay()&&1!==a.getDate()}],[e.time.format("%I %p"),function(a){return a.getHours()}],[e.time.format("%I:%M"),function(a){return a.getMinutes()}],[e.time.format(":%S"),function(a){return a.getSeconds()}],[e.time.format(".%L"),function(a){return a.getMilliseconds()}]];return function(b){for(var c=a.length-1,d= +a[c];!d[1](b);)d=a[--c];return d[0](b)}}(),Hb,Ob,Jb,Ta,Nb,Pb,s,r,la,gb,va,Qb,Rb,jb,kb,m,y,S,$,Ua,Va,J,ma,Wa,Ca,wc=f?"left":"bottom",xc=f?ib?"top":"bottom":ib?"right":"left",yc=f?hb?"bottom":"top":hb?"left":"right",zc="bottom",K={main:function(){return"translate("+B+","+v+")"},context:function(){return"translate("+H+","+Ba+")"},legend:function(){return"translate("+Db+","+Cb+")"},y2:function(){return"translate("+(f?0:s)+","+(f?10:0)+")"},x:function(){return"translate(0,"+r+")"},subx:function(){return"translate(0,"+ +la+")"}},hd=function(){var a=e.svg.line().x(f?function(a){return E(a.id)(a.value)}:$a).y(f?$a:function(a){return E(a.id)(a.value)});return function(b){var c=kc(b.values),d;if(rb(b))return"spline"===da["string"===typeof b?b:b.id]?a.interpolate("cardinal"):a.interpolate("linear"),0b.classes.indexOf(a)})});return L};k.data.get=function(a){a=k.data.getAsTarget(a);return n(a)?a.values.map(function(a){return a.value}):void 0};k.data.getAsTarget=function(a){var b=Xa(function(b){return b.id===a});return 0