@makechart/bubble 0.0.3 → 0.0.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Logs
 
+## v0.0.5
+
+ - add d3-force-boundary dependency
+ - ensure accessing unit with an existed object
+
+
+## v0.0.4
+
+ - enforce maximal radius based on canvas size to prevent overflow
+ - tweak force dynamics
+ - support `trim` config with amount of entries to keep in label config
+ - fix bug: label should apply `label.font.size` instead of `font.size`
+
+
 ## v0.0.3
 
  - add minimal radius (in pixel)

package/index.html

@@ -1 +1 @@
-<div><div plug="layout"><div class="pdl-layout"><div data-type="layout"><div class="pdl-cell" data-name="view"></div><div class="pdl-cell" data-name="unit"></div><div class="pdl-cell" data-name="legend"></div><div class="pdl-cell" data-name="pie-legend"></div></div><div data-type="render"></div></div></div><style type="text/css">.pdl-layout>div[data-type=layout]{display:grid;grid-template:1fr fit-content(1em)/1fr}.pdl-layout>div[data-type=layout] .pdl-cell[data-name=view]{grid-area:1/1}.pdl-layout>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/1;line-height:1em;text-align:right;padding:.25em 0;white-space:nowrap}.pdl-layout.lg-rt>div[data-type=layout]{grid-template:1fr fit-content(1em)/1fr fit-content(10em)}.pdl-layout.lg-rt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/2}.pdl-layout.lg-rt>div[data-type=layout] .pdl-cell[data-name=legend]{grid-area:1/2;padding:0 .5em 0 .5em}.pdl-layout.lgp-rt>div[data-type=layout]{grid-template:1fr fit-content(1em)/1fr fit-content(10em)}.pdl-layout.lgp-rt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/2}.pdl-layout.lgp-rt>div[data-type=layout] .pdl-cell[data-name=pie-legend]{grid-area:1/2;padding:0 .5em 0 .5em}.pdl-layout.lg-bt>div[data-type=layout]{grid-template:1fr fit-content(3em)/1fr fit-content(1em)}.pdl-layout.lg-bt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/2;padding:1em 0 0}.pdl-layout.lg-bt>div[data-type=layout] .pdl-cell[data-name=legend]{grid-area:2/1;padding:1em 0 0}.pdl-layout.lgp-bt>div[data-type=layout]{grid-template:1fr fit-content(3em)/1fr fit-content(1em)}.pdl-layout.lgp-bt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/2;padding:1em 0 0}.pdl-layout.lgp-bt>div[data-type=layout] .pdl-cell[data-name=pie-legend]{grid-area:2/1;padding:1em 0 0}.pdl-layout.lgp-rt.lg-rt>div[data-type=layout]{grid-template:1fr 1fr fit-content(1em)/1fr fit-content(10em)}.pdl-layout.lgp-rt.lg-rt>div[data-type=layout] .pdl-cell[data-name=view]{grid-area:1/1/span 2}.pdl-layout.lgp-rt.lg-rt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:3/2}.pdl-layout.lgp-rt.lg-rt>div[data-type=layout] .pdl-cell[data-name=legend]{grid-area:1/2;padding:0 .5em 0 .5em}.pdl-layout.lgp-rt.lg-rt>div[data-type=layout] .pdl-cell[data-name=pie-legend]{grid-area:2/2;padding:0 .5em 0 .5em}.pdl-layout.lgp-bt.lg-bt>div[data-type=layout]{grid-template:1fr fit-content(3em)/1fr 1fr fit-content(1em)}.pdl-layout.lgp-bt.lg-bt>div[data-type=layout] .pdl-cell[data-name=view]{grid-area:1/1 /auto/span 2}.pdl-layout.lgp-bt.lg-bt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/3;padding:1em 0 0}.pdl-layout.lgp-bt.lg-bt>div[data-type=layout] .pdl-cell[data-name=legend]{grid-area:2/1;padding:1em 0 0}.pdl-layout.lgp-bt.lg-bt>div[data-type=layout] .pdl-cell[data-name=pie-legend]{grid-area:2/2;padding:1em 0 0}.pdl-layout.lgp-bt.lg-rt>div[data-type=layout]{grid-template:1fr fit-content(3em)/1fr fit-content(10em)}.pdl-layout.lgp-bt.lg-rt>div[data-type=layout] .pdl-cell[data-name=view]{grid-area:1/1}.pdl-layout.lgp-bt.lg-rt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/2;padding:1em 0 0}.pdl-layout.lgp-bt.lg-rt>div[data-type=layout] .pdl-cell[data-name=legend]{grid-area:1/2;padding:0 .5em 0 .5em}.pdl-layout.lgp-bt.lg-rt>div[data-type=layout] .pdl-cell[data-name=pie-legend]{grid-area:2/1;padding:1em 0 0}.pdl-layout.lgp-rt.lg-bt>div[data-type=layout]{grid-template:1fr fit-content(3em)/1fr fit-content(10em)}.pdl-layout.lgp-rt.lg-bt>div[data-type=layout] .pdl-cell[data-name=view]{grid-area:1/1}.pdl-layout.lgp-rt.lg-bt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/2;padding:1em 0 0}.pdl-layout.lgp-rt.lg-bt>div[data-type=layout] .pdl-cell[data-name=egend]{grid-area:2/1;padding:1em 0 0}.pdl-layout.lgp-rt.lg-bt>div[data-type=layout] .pdl-cell[data-name=pie-legend]{grid-area:1/2;padding:0 .5em 0 .5em}</style><script type="@plotdb/block">var mod;module.exports={pkg:{name:"bubble",version:"0.0.1",extend:{name:"@makechart/base"},dependencies:[],i18n:{"zh-TW":{K:"千",M:"百萬"}}},init:function(t){var e,r,n,i;e=t.root,r=t.ctx,n=t.pubsub,i=t.t;return n.fire("init",{mod:mod({ctx:r,t:i})}).then(function(t){return t[0]})}};mod=function(t){var e,P,B,a,x,T,v,r;e=t.ctx,P=t.t;B=e.d3,a=e.forceBoundary,x=e.ldcolor,T=e.chart,v=e.wrapSvgText;return{sample:function(){return{raw:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100].map(function(t){return{name:"N-"+t+"-"+Math.random().toString(16).substring(Math.ceil(Math.random()*10)),val1:(Math.random()*100).toFixed(1),val2:(Math.random()*100).toFixed(1),val3:(Math.random()*100).toFixed(1),cat:Math.floor(Math.random()*6)}}),binding:{group:{key:"cat"},name:{key:"name"},area:[{key:"val1",unit:"MB"}]}}},config:(r=T.utils.config.from({preset:"default",legend:"legend",tip:"tip"}),r.bubble={minRadius:{name:"min radius",type:"number",default:1,min:0,max:10,step:1},maxRadius:{name:"max radius",type:"number",default:100,min:.1,max:100,step:.1}},r.dynamics={anchor:{name:"Anchor Layout",type:"choice",default:"none",values:[{name:"Default",value:"default"},{name:"Circular",value:"circular"},{name:"Array",value:"array"},{name:"none",value:"none"}]}},r.pie={order:{type:"choice",values:["group","ratio"],default:"ratio"},color:{type:"choice",name:"colorscheme",values:["from palette","lightness","dark to light","light to dark"],default:"dark to light"},contrast:{type:"number",name:"lightness contrast",default:.5,min:.1,max:.9,step:.01},legend:T.utils.config.from({preset:"legend"})},r.label={enabled:{type:"choice",default:"both",values:["both","name","value","none"]},format:{type:"format",default:".3s"},overflow:{type:"number",default:0,min:0,max:1,step:.01},font:T.utils.config.from({preset:"font"}),wrap:{type:"boolean",default:true}},r.unit={position:{type:"choice",values:["inner","outside","none"]}},r),dimension:{group:{type:"C",name:"group",priority:2},color:{type:"NR",name:"color",priority:4},area:{type:"R",name:"area",priority:1,multiple:true},name:{type:"NC",name:"name",priority:3}},init:function(){var u,c,t,e,h,f=this;u=this;this.tint=c=new T.utils.tint;this.unit={};this.parsed=this.parsed||[];this.g=Object.fromEntries(["view","unit","legend"].map(function(t){return[t,B.select(f.layout.getGroup(t))]}));t=this.root.querySelector("[ld=tip]");this.tip=new T.utils.tip({root:this.root,accessor:function(t){var e,r,n,i,a,o;e=t.evt;if(!(e.target&&(r=B.select(e.target).datum()))){return null}n=f.cfg.tip.format?B.format(f.cfg.tip.format):f.fmt;i=!(a=n(r.area))?"":a+""+f.unit.text;if(f.binding.area&&f.binding.area.length>1){o=f.binding.area[r.idx]||{};if(o=o.name||o.key||""){i=o+": "+i}}return{group:r.group||"",name:r.name,value:i}},range:function(){return f.layout.getNode("view").getBoundingClientRect()}});this.legend=new T.utils.legend({layout:this.layout,name:"legend",root:this.root,shape:function(t){return B.select(this).attr("fill",c.get(t.key))},direction:((e=this.cfg).legend||(e.legend={})).position==="bottom"?"horizontal":"vertical",cfg:{selectable:true}});this.legend.on("select",function(){f.bind();f.resize();return f.render()});h=this;this.pieLegend=new T.utils.legend({layout:this.layout,name:"pie-legend",root:this.root,shape:function(t,e){var r,n,i,a,o,s,l;r=h.cfg.pie.color==="dark to light"?t.idx:1-t.idx;if(h.binding.group){n=h.cfg.pie.contrast*2;i=(a=(o=100*(r*n+(.5-n/2)))>10?o:10)<90?a:90;return B.select(this).attr("fill",x.web({h:0,c:0,l:i}))}else{e=(s=/\/(\d+)/.exec(t.key))?+s[1]:0;l=c.get((u.binding.area[e]||{}).key||e);return B.select(this).attr("fill",l)}},direction:((e=this.cfg).legend||(e.legend={})).position==="bottom"?"horizontal":"vertical",cfg:{selectable:true}});this.pieLegend.on("select",function(){f.bind();f.resize();return f.render()});this.arc=B.arc().startAngle(0).endAngle(Math.PI/2);return this._color=function(t,e){var r,n,i,a,o,s,l,u,h;if(f.binding.color){return c.get(+t.color)}r=f.groups.length?t.group:"";r=r!=null?r:"";n=f.groups.length&&f.cfg.pie.color!=="from palette"||e===0?r:r+"/"+e;if(f.groups.length&&f.cfg.pie.color!=="from palette"){n=c.get(n);i=f.cfg.pie.contrast*100;if(f.cfg.pie.color==="lightness"){a=x.hcl(n);o=e/(t.paths.length||1);s=a.l>=60?a.l-i*o:a.l+i*o;n=a.c>=90?a.c:a.c+(90-a.c)*o;a.c=n;a.l=s}else{a=x.hcl(n);l=f.cfg.pie.color==="dark to light"?e:(u=t.paths.length-e-1)>0?u:0;if(a.l>60+i/5){if(t.paths.length===1){o=1}else{o=l/((u=t.paths.length-1)>1?u:1)}a.l=a.l-i+i*o}else{o=l/((u=t.paths.length-1)>1?u:1);a.l=a.l+i*o}a.l=(u=(h=a.l)>10?h:10)<90?u:90}return x.web(a)}else{n=c.get((f.binding.area[e]||{}).key||e);return x.web(n)}}},destroy:function(){return this.tip.destroy()},parse:function(){var t,e,r,n=this;this.tint.reset();this.data.forEach(function(t){t._area=t.area;return t._id=(t.group||"-")+"/"+(t.name||t._idx)});this.valid=this.data.filter(function(t){return Array.isArray(t.area)&&!isNaN(t.area.reduce(function(t,e){return t+e},0))});this.groups=Array.from(new Set(this.valid.map(function(t){return t.group}))).filter(function(t){return t!=null});this.sim=null;t=this.groups.map(function(t){return{key:t,text:t}});t.sort(function(t,e){if(t.key>e.key){return 1}else if(t.key<e.key){return-1}else{return 0}});this.legend.data(t);if(this.binding.color){this.tint.extent(B.extent(this.data.filter(function(t){return!isNaN(t.color)}).map(function(t){return+t.color})));this.tint.mode(T.utils.tint.mode.continuous)}else{this.tint.mode(T.utils.tint.mode.ordinal)}if(((e=this.cfg.pie.color)==="from palette"||e==="lightness")&&this.groups.length){r=[]}else{r=this.binding.area.map(function(t,e){var r;return{key:e?"/"+e:"",idx:e/((r=n.binding.area.length-1)>1?r:1),text:t.name||t.key}})}if(this.cfg.pie.legend.position==="bottom"){r.sort(function(t,e){return e.idx-t.idx})}return this.pieLegend.data(r.length>1?r:[])},resize:function(){var t,e,r,n,i,a,o,s,l,u,h,c,f,d,g,p,m,y,b,x,v,_,w,M,k,A,N,L,S,z,C,R=this;this.fmt=T.utils.format.from(this.cfg.label.format);t=(e=this.legend.data())&&e.length&&this.cfg.legend.enabled;r=this.cfg.legend.position==="bottom";this.root.querySelector(".pdl-layout").classList.toggle("lg-bt",t&&r);this.root.querySelector(".pdl-layout").classList.toggle("lg-rt",t&&!r);n=(e=this.pieLegend.data())&&e.length>1&&this.cfg.pie.legend.enabled;i=this.cfg.pie.legend.position==="bottom";this.root.querySelector(".pdl-layout").classList.toggle("lgp-bt",n&&i);this.root.querySelector(".pdl-layout").classList.toggle("lgp-rt",n&&!i);this.unit.text=(this.binding.area[0]||{}).unit||"";a=this.unit;a.inner=((o=this.cfg).unit||(o.unit={})).position==="inner"?this.unit.text:"";a.outer=(o=((s=this.cfg).unit||(s.unit={})).position)==="inner"||o==="none"?"":this.unit.text?P("unit")+": "+this.unit.text:"";l=this.layout.getNode("unit");l.style.display=!this.unit.outer?"none":"";l.textContent=this.unit.outer;this.tip.toggle(this.cfg.tip.enabled!=null?this.cfg.tip.enabled:true);u=[{key:"root",root:true}].concat(this.groups.map(function(t){return{key:"group-"+t}}),!this.groups.length?this.valid:this.valid.filter(function(t){return!R.cfg.legend.enabled||R.legend.isSelected(t.group)}));if(this.legend.enabled()){u=u.filter(function(t){return!t._raw||!R.groups.length||R.legend.isSelected(t.group)})}this.legend.config(this.cfg.legend);this.legend.update();this.pieLegend.config(this.cfg.pie.legend);this.pieLegend.update();this.layout.update(false);if(n){h=(this.binding.area||[]).map(function(t,e){return R.pieLegend.isSelected(e?"/"+e:"")});u.map(function(t){if(Array.isArray(t._area)){return t.area=t._area.map(function(t,e){if(h[e]){return t}else{return 0}})}})}c=B.hierarchy(B.stratify().id(function(t){if(t._idx!=null){return t._idx}else{return t.key}}).parentId(function(t){var e;if(t.root){return""}else if((e=t.group)!=null){return"group-"+e}else{return"root"}})(u)).sum(function(t){return(t.data.area||[]).reduce(function(t,e){return t+e},0)}).sort(function(t,e){return e.value-t.value});f=this.vbox=this.layout.getBox("view");d=B.pack().size([f.width,f.height])(c);this.parsed=c.leaves().map(function(i){var e,a,t,r,n,o,s,l,u,h;i._raw=i.data.data._raw;e=i.data.data;a=R.parsed?(t=R.parsed.filter(function(t){return t._id===e._id})[0],t?t:i):i;r=i.x,n=i.y;i.x=r;i.y=n;i._idx=e._idx;i._id=e._id;i.name=e.name;i.color=e.color;i.group=e.group;i.area=e.area;if(a._x){i._x=a._x}else if(!i._x){i._x=i.x}if(a._y){i._y=a._y}else if(!i._y){i._y=i.y}i.paths=(i.area||[]).map(function(t,e){var r,n;return n={name:i.name,group:i.group,area:t,idx:e},n.old=(r=(a.paths||[])[e]||{}).old,n.cur=r.cur,n});o=0;s=i.paths.length>1?(i.paths[0].area-i.paths[1].area)/4:0;for(l=0,u=i.paths.length;l<u;++l){h=l;i.paths[h].s=o-s;i.paths[h].e=(o+=i.paths[h].area)-s}i.rate=s;i.total=o||1;return i}).filter(function(t){return t.area!=null&&!isNaN(t.x)&&!isNaN(t.y)});g={};this.parsed.map(function(t,e){var r,n,i,a;(r=g[i=t.group]||(g[i]={})).x1<=(n=t.x)||(r.x1=n);(r=g[i=t.group]||(g[i]={})).x2>=(n=t.x)||(r.x2=n);(r=g[i=t.group]||(g[i]={})).y1<=(n=t.y)||(r.y1=n);return(a=(r=g[i=t.group]||(g[i]={})).y2)>=(n=t.y)?a:r.y2=n});p={};m=this.parsed.filter(function(t){return t.paths.length>1}).map(function(t){return t._dr=(t.paths[0].area-t.paths[1].area)/(t.paths[0].area+t.paths[1].area||1)});p.x1=Math.min.apply(Math,m);p.x2=Math.max.apply(Math,m);y=p.x2-p.x1||1;b=(p.x2+p.x1)/2;this.parsed.map(function(t,e){var r,n;if(t.paths.length<=1){return}r=(t._dr-b)*2/y;n=g[t.group];if(R.cfg.pie.order==="group"){return t.x=r*(n.x2-n.x1)*.5+(n.x2+n.x1)/2,t}else{return t.x=r*f.width*.4+f.width*.5,t}});x=this.cfg.dynamics.anchor;v=Object.fromEntries(this.groups.map(function(t,e){return[t,e]}));for(_ in g){w=g[_];(this.gcenter||(this.gcenter={}))[_]=x==="circular"?(a=[v[_],Math.min(this.vbox.width,this.vbox.height)],M=a[0],k=a[1],{x:this.vbox.width*.5+k*Math.cos(M*Math.PI*2/(this.groups.length||1))*.3,y:this.vbox.height*.5+k*Math.sin(M*Math.PI*2/(this.groups.length||1))*.3}):x==="array"?(M=v[_],A=Math.sqrt(this.vbox.width*this.vbox.height/(this.groups.length||1)),N=Math.floor(this.vbox.width/A),L=Math.floor(this.vbox.height/A),u=[[N,L,N*L],[N+1,L,(N+1)*L],[N,L+1,N*(L+1)],[N+1,L+1,(N+1)*(L+1)]],u.sort(q),S=u.filter(I),a=!S.length?u[u.length-1]:S[0],N=a[0],L=a[1],A=Math.min(this.vbox.width/N,this.vbox.height/L),z=(this.vbox.width-A*N)/2,C=(this.vbox.height-A*L)/2,{x:A*(M%(N||1)+.5)+z,y:A*(Math.floor(M/(N||1))+.5)+C}):{x:(w.x1+w.x2)*.5,y:(w.y1+w.y2)*.5}}this.sim=null;return this.start();function q(t,e){if(t[2]<e[2]){return-1}else if(t[2]>e[2]){return 1}else{return 0}}function I(t){return t[2]>=R.groups.length}},render:function(){var i,l,u,t,e,r,h,c,n,a,o,s,f,d,g,p,m,y,b=this;i=this.fmt,l=this._color,u=this.cfg,t=this.binding,e=this.tint,r=this.layout,h=this.unit;c=this.vbox;this.g.unit.call(function(){var t,e;t=r.getNode("unit");e=v({node:t,useRange:true});b.g.unit.node().textContent="";return b.g.unit.node().appendChild(e)});this.rate=n=.85*Math.PI/(2*Math.sqrt(3))*Math.sqrt(c.width*c.height/this.parsed.map(function(t){return Math.PI*Math.pow(t.r,2)}).reduce(function(t,e){return t+e},0));a=B.extent(this.parsed.map(function(t,e){return t.rr=t.r*b.rate}));o=this.cfg.bubble.minRadius||0;s=(f=Math.min((this.cfg.bubble.maxRadius||0)*c.width*.25/100,a[1]))>o?f:o;d=B.scaleLinear().domain([0,a[1]]).range([0,s]);this.parsed.map(function(t,e){var r;t.rr=d(t.rr);if(t.rr){return(r=t.rr)>=o?r:t.rr=o}});this.parsed.map(function(i,t){return i.paths.map(function(t,e){var r,n;r=t.s*2*Math.PI/i.total;n=t.e*2*Math.PI/i.total;t.old=t.cur||{r:i.rr,s:r,e:n};return t.cur={r:i.rr,s:r,e:n}})});e.set(this.cfg.palette);g=function(i,a,t){return function(e){var t,r,n;b.arc.innerRadius(0).outerRadius((a.r-i.r)*e+i.r);t=["s","e"].map(function(t){return(a[t]-i[t])*e+i[t]}),r=t[0],n=t[1];b.arc.startAngle(r).endAngle(n);return b.arc()}};p=this.g.view.selectAll("g.bubble").data(this.parsed,function(t){return t._id});p.exit().each(function(t,e){t._removing=true;return t.paths.map(function(t){t.old.r=t.cur.r;return t.cur.r=0})});p.exit().transition().delay(150).on("end",function(t){if(t._removing){return B.select(this).remove()}});p.enter().append("g").attr("class","bubble").attr("transform",function(t,e){return"translate("+t._x+","+t._y+")"}).each(function(t){return t._removing=false});this.g.view.selectAll("g.bubble").attr("transform",function(t,e){return"translate("+t._x+","+t._y+")"}).each(function(r,t){var e,n;e=B.select(this);n=e.selectAll("path.data").data(r.paths,function(t,e){return e});n.exit().remove();n.enter().append("path").attr("class","data").attr("opacity",function(t,e){return 0}).attr("fill",function(t,e){return l(r,e)});return e.selectAll("path.data").transition().duration(350).attrTween("d",function(t,e){return g(t.old,t.cur,e)}).attr("fill",function(t,e){return l(r,e)}).attr("opacity",1)});m=this.g.view.selectAll("g.label").data(this.parsed,function(t){return t._id});m.exit().remove();m.enter().append("g").attr("class","label data").attr("transform",function(t,e){return"translate("+t.x+","+t.y+")"}).attr("opacity",0).attr("font-size",function(){return u.font.size}).style("pointer-events","none").style("cursor","pointer").each(function(t,e){var r=this;return[0,1].map(function(){return B.select(r).append("g").attr("class","inner")}).map(function(t){return t.attr("opacity",0).style("pointer-event","none")})});this.g.view.selectAll("g.label").attr("transform",function(t,e){return"translate("+t._x+","+t._y+")"}).attr("class","label "+((y=u.label.font.family)?y.className||"":"")).each(function(a,t){var o,s,r;o=function(t,e){var r,n;if(e!==0){return a.name||""}r=a.area.reduce(function(t,e){return t+e},0);if(!(n=i(r))){return""}else{return n+""+h.inner}};s=function(t,e,r){var n,i,a;r==null&&(r=1);n=o(t,e);i=!e?1.1:.9*((a=1-.1*(n.length/5))>.7?a:.7);return i*r};B.select(this).selectAll("g.inner").each(function(t,e){var r,n,i;for(r=this.childNodes.length-1;r>=0;--r){n=r;this.removeChild(this.childNodes[n])}i=v({text:o(a,e),style:{width:(u.label.wrap?a.rr*2:c.width)+"px",lineHeight:s(a,e,1.2)}});i.style.transform=u.label.enabled!=="both"?"translate(0,0)":"translate(0,"+e*(.3+1.1/s(a,e,1))+"em)";Array.from(i.querySelectorAll("text")).map(function(t){return t.setAttribute("text-anchor","middle")});return this.appendChild(i)});r=function(t,e){var r;r=u.label.enabled;if(r==="both"){return 1}if(r==="name"){return e===0?0:1}if(r==="value"){return e===1?0:1}if(r==="none"){return 0}return 1};return B.select(this).selectAll(".inner").attr("font-size",function(t,e){return s(t,e,1)+"em"}).transition().duration(350).style("visibility",function(t,e){if(r(t,e)){return"visible"}else{return"hidden"}}).attr("opacity",r).attr("fill",function(){var t;t=x.hcl(l(a,0));if(t.l<70){return"#fff"}else{return"#000"}})});this.g.view.selectAll("g.label").transition().duration(150).attr("font-size",u.label.font.size);if(this.h){clearTimeout(this.h)}this.h=setTimeout(function(){var r;b.h=null;r=function(t,e){var r,n,i,a,o;r=t._box;n=[r.width,r.height],i=n[0],a=n[1];o=2*t.rr*((u.label.overflow||0)+1);if(o<i||2*t.rr<a){return 0}else{return 1}};return b.g.view.selectAll("g.label").each(function(t,e){var r,n,i,a;t._box=r=this.getBoundingClientRect();n=[r.width,r.height],i=n[0],a=n[1];return B.select(this).selectAll(".inner").attr("transform",function(){return"translate(0,"+-a/2+")"})}).transition().duration(150).attr("opacity",r).style("visibility",function(t,e){if(r(t,e)){return"visible"}else{return"hidden"}})},150);this.legend.render();return this.pieLegend.render()},tick:function(){var e,r,t,n,i=this;e=this.cfg.pad||5;r=this.vbox;if(!this.sim){t=true;this.fc=n=B.forceCollide().strength(.5).iterations(20).radius(function(t){return t.rr});this.fx=B.forceX(function(t){return(i.gcenter[t.group]||{}).x||i.vbox.width/2}).strength(.3);this.fy=B.forceY(function(t){return(i.gcenter[t.group]||{}).y||i.vbox.height/2}).strength(.3);this.fg=B.forceCenter().strength(.5);this.fb=a(function(t){return t.rr+e},function(t){return t.rr+e},function(t){return r.width-t.rr-e},function(t){return r.height-t.rr-e}).strength(.5);this.sim=B.forceSimulation().force("b",this.fb).force("collide",this.fc);this.sim.stop();this.sim.alpha(.9)}if((this.cfg.dynamics||{}).anchor==="none"||!(this.cfg.dynamics||{}).anchor){this.sim.force("x",null).force("y",null)}else{this.sim.force("x",this.fx).force("y",this.fy)}this.sim.nodes(this.parsed);this.sim.tick(t?10:1);this.parsed.map(function(t){t._x=t._x+(t.x-t._x)*.1;return t._y=t._y+(t.y-t._y)*.1});this.g.view.selectAll("g.bubble").attr("transform",function(t,e){return"translate("+t._x+","+t._y+")"});return this.g.view.selectAll("g.label").attr("transform",function(t,e){return"translate("+t._x+","+t._y+")"})}}};</script></div>
+<div><div plug="layout"><div class="pdl-layout"><div data-type="layout"><div class="pdl-cell" data-name="view"></div><div class="pdl-cell" data-name="unit"></div><div class="pdl-cell" data-name="legend"></div><div class="pdl-cell" data-name="pie-legend"></div></div><div data-type="render"></div></div></div><style type="text/css">.pdl-layout>div[data-type=layout]{display:grid;grid-template:1fr fit-content(1em)/1fr}.pdl-layout>div[data-type=layout] .pdl-cell[data-name=view]{grid-area:1/1}.pdl-layout>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/1;line-height:1em;text-align:right;padding:.25em 0;white-space:nowrap}.pdl-layout.lg-rt>div[data-type=layout]{grid-template:1fr fit-content(1em)/1fr fit-content(10em)}.pdl-layout.lg-rt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/2}.pdl-layout.lg-rt>div[data-type=layout] .pdl-cell[data-name=legend]{grid-area:1/2;padding:0 .5em 0 .5em}.pdl-layout.lgp-rt>div[data-type=layout]{grid-template:1fr fit-content(1em)/1fr fit-content(10em)}.pdl-layout.lgp-rt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/2}.pdl-layout.lgp-rt>div[data-type=layout] .pdl-cell[data-name=pie-legend]{grid-area:1/2;padding:0 .5em 0 .5em}.pdl-layout.lg-bt>div[data-type=layout]{grid-template:1fr fit-content(3em)/1fr fit-content(1em)}.pdl-layout.lg-bt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/2;padding:1em 0 0}.pdl-layout.lg-bt>div[data-type=layout] .pdl-cell[data-name=legend]{grid-area:2/1;padding:1em 0 0}.pdl-layout.lgp-bt>div[data-type=layout]{grid-template:1fr fit-content(3em)/1fr fit-content(1em)}.pdl-layout.lgp-bt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/2;padding:1em 0 0}.pdl-layout.lgp-bt>div[data-type=layout] .pdl-cell[data-name=pie-legend]{grid-area:2/1;padding:1em 0 0}.pdl-layout.lgp-rt.lg-rt>div[data-type=layout]{grid-template:1fr 1fr fit-content(1em)/1fr fit-content(10em)}.pdl-layout.lgp-rt.lg-rt>div[data-type=layout] .pdl-cell[data-name=view]{grid-area:1/1/span 2}.pdl-layout.lgp-rt.lg-rt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:3/2}.pdl-layout.lgp-rt.lg-rt>div[data-type=layout] .pdl-cell[data-name=legend]{grid-area:1/2;padding:0 .5em 0 .5em}.pdl-layout.lgp-rt.lg-rt>div[data-type=layout] .pdl-cell[data-name=pie-legend]{grid-area:2/2;padding:0 .5em 0 .5em}.pdl-layout.lgp-bt.lg-bt>div[data-type=layout]{grid-template:1fr fit-content(3em)/1fr 1fr fit-content(1em)}.pdl-layout.lgp-bt.lg-bt>div[data-type=layout] .pdl-cell[data-name=view]{grid-area:1/1 /auto/span 2}.pdl-layout.lgp-bt.lg-bt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/3;padding:1em 0 0}.pdl-layout.lgp-bt.lg-bt>div[data-type=layout] .pdl-cell[data-name=legend]{grid-area:2/1;padding:1em 0 0}.pdl-layout.lgp-bt.lg-bt>div[data-type=layout] .pdl-cell[data-name=pie-legend]{grid-area:2/2;padding:1em 0 0}.pdl-layout.lgp-bt.lg-rt>div[data-type=layout]{grid-template:1fr fit-content(3em)/1fr fit-content(10em)}.pdl-layout.lgp-bt.lg-rt>div[data-type=layout] .pdl-cell[data-name=view]{grid-area:1/1}.pdl-layout.lgp-bt.lg-rt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/2;padding:1em 0 0}.pdl-layout.lgp-bt.lg-rt>div[data-type=layout] .pdl-cell[data-name=legend]{grid-area:1/2;padding:0 .5em 0 .5em}.pdl-layout.lgp-bt.lg-rt>div[data-type=layout] .pdl-cell[data-name=pie-legend]{grid-area:2/1;padding:1em 0 0}.pdl-layout.lgp-rt.lg-bt>div[data-type=layout]{grid-template:1fr fit-content(3em)/1fr fit-content(10em)}.pdl-layout.lgp-rt.lg-bt>div[data-type=layout] .pdl-cell[data-name=view]{grid-area:1/1}.pdl-layout.lgp-rt.lg-bt>div[data-type=layout] .pdl-cell[data-name=unit]{grid-area:2/2;padding:1em 0 0}.pdl-layout.lgp-rt.lg-bt>div[data-type=layout] .pdl-cell[data-name=egend]{grid-area:2/1;padding:1em 0 0}.pdl-layout.lgp-rt.lg-bt>div[data-type=layout] .pdl-cell[data-name=pie-legend]{grid-area:1/2;padding:0 .5em 0 .5em}</style><script type="@plotdb/block">var mod;module.exports={pkg:{name:"bubble",version:"0.0.1",extend:{name:"@makechart/base"},dependencies:[{name:"d3-force-boundary",path:"dist/d3-force-boundary.min.js"}],i18n:{"zh-TW":{K:"千",M:"百萬"}}},init:function(t){var e,r,n,i;e=t.root,r=t.ctx,n=t.pubsub,i=t.t;return n.fire("init",{mod:mod({ctx:r,t:i})}).then(function(t){return t[0]})}};mod=function(t){var e,D,G,a,v,H,w,r;e=t.ctx,D=t.t;G=e.d3,a=e.forceBoundary,v=e.ldcolor,H=e.chart,w=e.wrapSvgText;return{sample:function(){return{raw:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100].map(function(t){return{name:"N-"+t+"-"+Math.random().toString(16).substring(Math.ceil(Math.random()*10)),val1:(Math.random()*100).toFixed(1),val2:(Math.random()*100).toFixed(1),val3:(Math.random()*100).toFixed(1),cat:Math.floor(Math.random()*6)}}),binding:{group:{key:"cat"},name:{key:"name"},area:[{key:"val1",unit:"MB"}]}}},config:(r=H.utils.config.from({preset:"default",legend:"legend",tip:"tip"}),r.bubble={minRadius:{name:"min radius",type:"number",default:1,min:0,max:10,step:1},maxRadius:{name:"max radius",type:"number",default:100,min:.1,max:100,step:.1}},r.dynamics={anchor:{name:"Anchor Layout",type:"choice",default:"none",values:[{name:"Default",value:"default"},{name:"Circular",value:"circular"},{name:"Array",value:"array"},{name:"none",value:"none"}]}},r.pie={order:{type:"choice",values:["group","ratio"],default:"ratio"},color:{type:"choice",name:"colorscheme",values:["from palette","lightness","dark to light","light to dark"],default:"dark to light"},contrast:{type:"number",name:"lightness contrast",default:.5,min:.1,max:.9,step:.01},legend:H.utils.config.from({preset:"legend"})},r.label={enabled:{type:"choice",default:"both",values:["both","name","value","none"]},format:{type:"format",default:".3s"},overflow:{type:"number",desc:"percentage of tolerance when label overflow",default:0,min:0,max:1,step:.01},font:H.utils.config.from({preset:"font"}),wrap:{type:"boolean",default:true},trim:{enabled:{type:"boolean",default:false,desc:"limit maximal amount of labels to show"},keep:{type:"number",desc:"amount of labels to keep when trim",default:100,min:0,max:100,step:1}}},r.unit={position:{type:"choice",values:["inner","outside","none"]}},r),dimension:{group:{type:"C",name:"group",priority:2},color:{type:"NR",name:"color",priority:4},area:{type:"R",name:"area",priority:1,multiple:true},name:{type:"NC",name:"name",priority:3}},init:function(){var u,c,t,e,h,f=this;u=this;this.tint=c=new H.utils.tint;this.unit={};this.parsed=this.parsed||[];this.g=Object.fromEntries(["view","unit","legend"].map(function(t){return[t,G.select(f.layout.getGroup(t))]}));t=this.root.querySelector("[ld=tip]");this.tip=new H.utils.tip({root:this.root,accessor:function(t){var e,r,n,i,a,o;e=t.evt;if(!(e.target&&(r=G.select(e.target).datum()))){return null}n=f.cfg.tip.format?G.format(f.cfg.tip.format):f.fmt;i=!(a=n(r.area))?"":a+""+f.unit.text;if(f.binding.area&&f.binding.area.length>1){o=f.binding.area[r.idx]||{};if(o=o.name||o.key||""){i=o+": "+i}}return{group:r.group||"",name:r.name,value:i}},range:function(){return f.layout.getNode("view").getBoundingClientRect()}});this.legend=new H.utils.legend({layout:this.layout,name:"legend",root:this.root,shape:function(t){return G.select(this).attr("fill",c.get(t.key))},direction:((e=this.cfg).legend||(e.legend={})).position==="bottom"?"horizontal":"vertical",cfg:{selectable:true}});this.legend.on("select",function(){f.bind();f.resize();return f.render()});h=this;this.pieLegend=new H.utils.legend({layout:this.layout,name:"pie-legend",root:this.root,shape:function(t,e){var r,n,i,a,o,s,l;r=h.cfg.pie.color==="dark to light"?t.idx:1-t.idx;if(h.binding.group){n=h.cfg.pie.contrast*2;i=(a=(o=100*(r*n+(.5-n/2)))>10?o:10)<90?a:90;return G.select(this).attr("fill",v.web({h:0,c:0,l:i}))}else{e=(s=/\/(\d+)/.exec(t.key))?+s[1]:0;l=c.get((u.binding.area[e]||{}).key||e);return G.select(this).attr("fill",l)}},direction:((e=this.cfg).legend||(e.legend={})).position==="bottom"?"horizontal":"vertical",cfg:{selectable:true}});this.pieLegend.on("select",function(){f.bind();f.resize();return f.render()});this.arc=G.arc().startAngle(0).endAngle(Math.PI/2);return this._color=function(t,e){var r,n,i,a,o,s,l,u,h;if(f.binding.color){return c.get(+t.color)}r=f.groups.length?t.group:"";r=r!=null?r:"";n=f.groups.length&&f.cfg.pie.color!=="from palette"||e===0?r:r+"/"+e;if(f.groups.length&&f.cfg.pie.color!=="from palette"){n=c.get(n);i=f.cfg.pie.contrast*100;if(f.cfg.pie.color==="lightness"){a=v.hcl(n);o=e/(t.paths.length||1);s=a.l>=60?a.l-i*o:a.l+i*o;n=a.c>=90?a.c:a.c+(90-a.c)*o;a.c=n;a.l=s}else{a=v.hcl(n);l=f.cfg.pie.color==="dark to light"?e:(u=t.paths.length-e-1)>0?u:0;if(a.l>60+i/5){if(t.paths.length===1){o=1}else{o=l/((u=t.paths.length-1)>1?u:1)}a.l=a.l-i+i*o}else{o=l/((u=t.paths.length-1)>1?u:1);a.l=a.l+i*o}a.l=(u=(h=a.l)>10?h:10)<90?u:90}return v.web(a)}else{n=c.get((f.binding.area[e]||{}).key||e);return v.web(n)}}},destroy:function(){return this.tip.destroy()},parse:function(){var t,e,r,n=this;this.tint.reset();this.data.forEach(function(t){t._area=t.area;return t._id=(t.group||"-")+"/"+(t.name||t._idx)});this.valid=this.data.filter(function(t){return Array.isArray(t.area)&&!isNaN(t.area.reduce(function(t,e){return t+e},0))});this.groups=Array.from(new Set(this.valid.map(function(t){return t.group}))).filter(function(t){return t!=null});this.sim=null;t=this.groups.map(function(t){return{key:t,text:t}});t.sort(function(t,e){if(t.key>e.key){return 1}else if(t.key<e.key){return-1}else{return 0}});this.legend.data(t);if(this.binding.color){this.tint.extent(G.extent(this.data.filter(function(t){return!isNaN(t.color)}).map(function(t){return+t.color})));this.tint.mode(H.utils.tint.mode.continuous)}else{this.tint.mode(H.utils.tint.mode.ordinal)}if(((e=this.cfg.pie.color)==="from palette"||e==="lightness")&&this.groups.length){r=[]}else{r=this.binding.area.map(function(t,e){var r;return{key:e?"/"+e:"",idx:e/((r=n.binding.area.length-1)>1?r:1),text:t.name||t.key}})}if(this.cfg.pie.legend.position==="bottom"){r.sort(function(t,e){return e.idx-t.idx})}return this.pieLegend.data(r.length>1?r:[])},resize:function(){var t,e,r,n,i,a,o,s,l,u,h,c,f,d,g,T,p,m,y,b,x,v,w,_,M,k,A,N,z,L,S,C,R,j,q,I,P,E,B=this;this.fmt=H.utils.format.from(this.cfg.label.format);t=(e=this.legend.data())&&e.length&&this.cfg.legend.enabled;r=this.cfg.legend.position==="bottom";this.root.querySelector(".pdl-layout").classList.toggle("lg-bt",t&&r);this.root.querySelector(".pdl-layout").classList.toggle("lg-rt",t&&!r);n=(e=this.pieLegend.data())&&e.length>1&&this.cfg.pie.legend.enabled;i=this.cfg.pie.legend.position==="bottom";this.root.querySelector(".pdl-layout").classList.toggle("lgp-bt",n&&i);this.root.querySelector(".pdl-layout").classList.toggle("lgp-rt",n&&!i);this.unit.text=((a=((o=this.binding.area)!=null?o[0]:void 8)||{})!=null?a.unit:void 8)||"";s=this.unit;s.inner=((l=this.cfg).unit||(l.unit={})).position==="inner"?this.unit.text:"";s.outer=(l=((u=this.cfg).unit||(u.unit={})).position)==="inner"||l==="none"?"":this.unit.text?D("unit")+": "+this.unit.text:"";h=this.layout.getNode("unit");h.style.display=!this.unit.outer?"none":"";h.textContent=this.unit.outer;this.tip.toggle(this.cfg.tip.enabled!=null?this.cfg.tip.enabled:true);c=[{key:"root",root:true}].concat(this.groups.map(function(t){return{key:"group-"+t}}),!this.groups.length?this.valid:this.valid.filter(function(t){return!B.cfg.legend.enabled||B.legend.isSelected(t.group)}));if(this.legend.enabled()){c=c.filter(function(t){return!t._raw||!B.groups.length||B.legend.isSelected(t.group)})}this.legend.config(this.cfg.legend);this.legend.update();this.pieLegend.config(this.cfg.pie.legend);this.pieLegend.update();this.layout.update(false);if(n){f=(this.binding.area||[]).map(function(t,e){return B.pieLegend.isSelected(e?"/"+e:"")});c.map(function(t){if(Array.isArray(t._area)){return t.area=t._area.map(function(t,e){if(f[e]){return t}else{return 0}})}})}d=G.hierarchy(G.stratify().id(function(t){if(t._idx!=null){return t._idx}else{return t.key}}).parentId(function(t){var e;if(t.root){return""}else if((e=t.group)!=null){return"group-"+e}else{return"root"}})(c)).sum(function(t){return(t.data.area||[]).reduce(function(t,e){return t+e},0)}).sort(function(t,e){return e.value-t.value});g=this.vbox=this.layout.getBox("view");T=G.pack().size([g.width,g.height])(d);this.parsed=d.leaves().map(function(i){var e,a,t,r,n,o,s,l,u,h;i._raw=i.data.data._raw;e=i.data.data;a=B.parsed?(t=B.parsed.filter(function(t){return t._id===e._id})[0],t?t:i):i;r=i.x,n=i.y;i.x=r;i.y=n;i._idx=e._idx;i._id=e._id;i.name=e.name;i.color=e.color;i.group=e.group;i.area=e.area;if(a._x){i._x=a._x}else if(!i._x){i._x=i.x}if(a._y){i._y=a._y}else if(!i._y){i._y=i.y}i.paths=(i.area||[]).map(function(t,e){var r,n;return n={name:i.name,group:i.group,area:t,idx:e},n.old=(r=(a.paths||[])[e]||{}).old,n.cur=r.cur,n});o=0;s=i.paths.length>1?(i.paths[0].area-i.paths[1].area)/4:0;for(l=0,u=i.paths.length;l<u;++l){h=l;i.paths[h].s=o-s;i.paths[h].e=(o+=i.paths[h].area)-s}i.rate=s;i.total=o||1;return i}).filter(function(t){return t.area!=null&&!isNaN(t.x)&&!isNaN(t.y)});p={};this.parsed.map(function(t,e){var r,n,i,a;(r=p[i=t.group]||(p[i]={})).x1<=(n=t.x)||(r.x1=n);(r=p[i=t.group]||(p[i]={})).x2>=(n=t.x)||(r.x2=n);(r=p[i=t.group]||(p[i]={})).y1<=(n=t.y)||(r.y1=n);return(a=(r=p[i=t.group]||(p[i]={})).y2)>=(n=t.y)?a:r.y2=n});m={};y=this.parsed.filter(function(t){return t.paths.length>1}).map(function(t){return t._dr=(t.paths[0].area-t.paths[1].area)/(t.paths[0].area+t.paths[1].area||1)});m.x1=Math.min.apply(Math,y);m.x2=Math.max.apply(Math,y);b=m.x2-m.x1||1;x=(m.x2+m.x1)/2;this.parsed.map(function(t,e){var r,n;if(t.paths.length<=1){return}r=(t._dr-x)*2/b;n=p[t.group];if(B.cfg.pie.order==="group"){return t.x=r*(n.x2-n.x1)*.5+(n.x2+n.x1)/2,t}else{return t.x=r*g.width*.4+g.width*.5,t}});v=this.cfg.dynamics.anchor;w=Object.fromEntries(this.groups.map(function(t,e){return[t,e]}));for(_ in p){M=p[_];(this.gcenter||(this.gcenter={}))[_]=v==="circular"?(s=[w[_],Math.min(this.vbox.width,this.vbox.height)],k=s[0],A=s[1],{x:this.vbox.width*.5+A*Math.cos(k*Math.PI*2/(this.groups.length||1))*.3,y:this.vbox.height*.5+A*Math.sin(k*Math.PI*2/(this.groups.length||1))*.3}):v==="array"?(k=w[_],N=Math.sqrt(this.vbox.width*this.vbox.height/(this.groups.length||1)),z=Math.floor(this.vbox.width/N),L=Math.floor(this.vbox.height/N),c=[[z,L,z*L],[z+1,L,(z+1)*L],[z,L+1,z*(L+1)],[z+1,L+1,(z+1)*(L+1)]],c.sort(F),S=c.filter(O),s=!S.length?c[c.length-1]:S[0],z=s[0],L=s[1],N=Math.min(this.vbox.width/z,this.vbox.height/L),C=(this.vbox.width-N*z)/2,R=(this.vbox.height-N*L)/2,{x:N*(k%(z||1)+.5)+C,y:N*(Math.floor(k/(z||1))+.5)+R}):{x:(M.x1+M.x2)*.5,y:(M.y1+M.y2)*.5}}this.sim=null;this.start();this.rate=j=.85*Math.PI/(2*Math.sqrt(3))*Math.sqrt(g.width*g.height/this.parsed.map(function(t){return Math.PI*Math.pow(t.r,2)}).reduce(function(t,e){return t+e},0));q=G.extent(this.parsed.map(function(t,e){return t.rr=t.r*B.rate}));I=this.cfg.bubble.minRadius||0;I<=(s=Math.min(g.width,g.height)/2)||(I=s);P=(s=Math.min((this.cfg.bubble.maxRadius||0)*g.width*.25/100,q[1]))>I?s:I;P<=(s=Math.min(g.width,g.height)/2)||(P=s);E=G.scaleLinear().domain([0,q[1]]).range([0,P]);return this.parsed.map(function(t,e){var r;t.rr=E(t.rr);if(t.rr){return(r=t.rr)>=I?r:t.rr=I}});function F(t,e){if(t[2]<e[2]){return-1}else if(t[2]>e[2]){return 1}else{return 0}}function O(t){return t[2]>=B.groups.length}},render:function(){var i,l,u,t,e,r,h,c,a,n,o,s,f,d,g,p,m,y,b,x=this;i=this.fmt,l=this._color,u=this.cfg,t=this.binding,e=this.tint,r=this.layout,h=this.unit;c=this.vbox;this.g.unit.call(function(){var t,e;t=r.getNode("unit");e=w({node:t,useRange:true});x.g.unit.node().textContent="";return x.g.unit.node().appendChild(e)});this.parsed.map(function(i,t){return i.paths.map(function(t,e){var r,n;r=t.s*2*Math.PI/i.total;n=t.e*2*Math.PI/i.total;t.old=t.cur||{r:i.rr,s:r,e:n};return t.cur={r:i.rr,s:r,e:n}})});e.set(this.cfg.palette);a=function(i,a,t){return function(e){var t,r,n;x.arc.innerRadius(0).outerRadius((a.r-i.r)*e+i.r);t=["s","e"].map(function(t){return(a[t]-i[t])*e+i[t]}),r=t[0],n=t[1];x.arc.startAngle(r).endAngle(n);return x.arc()}};n=this.g.view.selectAll("g.bubble").data(this.parsed,function(t){return t._id});n.exit().each(function(t,e){t._removing=true;return t.paths.map(function(t){t.old.r=t.cur.r;return t.cur.r=0})});n.exit().transition().delay(150).on("end",function(t){if(t._removing){return G.select(this).remove()}});n.enter().append("g").attr("class","bubble").attr("transform",function(t,e){return"translate("+t._x+","+t._y+")"}).each(function(t){return t._removing=false});this.g.view.selectAll("g.bubble").attr("transform",function(t,e){return"translate("+t._x+","+t._y+")"}).each(function(r,t){var e,n;e=G.select(this);n=e.selectAll("path.data").data(r.paths,function(t,e){return e});n.exit().remove();n.enter().append("path").attr("class","data").attr("opacity",function(t,e){return 0}).attr("fill",function(t,e){return l(r,e)});return e.selectAll("path.data").transition().duration(350).attrTween("d",function(t,e){return a(t.old,t.cur,e)}).attr("fill",function(t,e){return l(r,e)}).attr("opacity",1)});o=!((s=this.cfg)!=null&&((f=s.label)!=null&&((d=f.trim)!=null&&d.enabled)))?this.parsed:this.parsed.sort(function(t,e){if(+t.total<+e.total){return 1}else if(+t.total>+e.total){return-1}else{return 0}}).slice(0,((g=this.cfg)!=null?(p=g.label)!=null?(m=p.trim)!=null?m.keep:void 8:void 8:void 8)||0);y=this.g.view.selectAll("g.label").data(o,function(t){return t._id});y.exit().remove();y.enter().append("g").attr("class","label data").attr("transform",function(t,e){return"translate("+t.x+","+t.y+")"}).attr("opacity",0).attr("font-size",u.label.font.size||"1em").style("pointer-events","none").style("cursor","pointer").each(function(t,e){var r=this;return[0,1].map(function(){return G.select(r).append("g").attr("class","inner")}).map(function(t){return t.attr("opacity",0).style("pointer-event","none")})});this.g.view.selectAll("g.label").attr("font-size",u.label.font.size||"1em").attr("transform",function(t,e){return"translate("+t._x+","+t._y+")"}).attr("class","label "+((b=u.label.font.family)?b.className||"":"")).each(function(a,t){var o,s,r;o=function(t,e){var r,n;if(e!==0){return a.name||""}r=a.area.reduce(function(t,e){return t+e},0);if(!(n=i(r))){return""}else{return n+""+h.inner}};s=function(t,e,r){var n,i,a;r==null&&(r=1);n=o(t,e);i=!e?1.1:.9*((a=1-.1*(n.length/5))>.7?a:.7);return i*r};G.select(this).selectAll("g.inner").each(function(t,e){var r,n,i;for(r=this.childNodes.length-1;r>=0;--r){n=r;this.removeChild(this.childNodes[n])}i=w({text:o(a,e),style:{width:(u.label.wrap?a.rr*2:c.width)+"px",lineHeight:s(a,e,1.2),fontSize:u.label.font.size||""}});i.style.transform=u.label.enabled!=="both"?"translate(0,0)":"translate(0,"+e*(.3+1.1/s(a,e,1))+"em)";Array.from(i.querySelectorAll("text")).map(function(t){return t.setAttribute("text-anchor","middle")});return this.appendChild(i)});r=function(t,e){var r;r=u.label.enabled;if(r==="both"){return 1}if(r==="name"){return e===0?0:1}if(r==="value"){return e===1?0:1}if(r==="none"){return 0}return 1};return G.select(this).selectAll(".inner").attr("font-size",function(t,e){return s(t,e,1)+"em"}).transition().duration(350).style("visibility",function(t,e){if(r(t,e)){return"visible"}else{return"hidden"}}).attr("opacity",r).attr("fill",function(){var t;t=v.hcl(l(a,0));if(t.l<70){return"#fff"}else{return"#000"}})});this.g.view.selectAll("g.label").transition().duration(150).attr("font-size",u.label.font.size);if(this.h){clearTimeout(this.h)}this.h=setTimeout(function(){var r;x.h=null;r=function(t,e){var r,n,i,a,o;r=t._box;n=[r.width,r.height],i=n[0],a=n[1];o=2*t.rr*((u.label.overflow||0)+1);if(o<i||2*t.rr<a){return 0}else{return 1}};return x.g.view.selectAll("g.label").each(function(t,e){var r,n,i,a;t._box=r=this.getBoundingClientRect();n=[r.width,r.height],i=n[0],a=n[1];return G.select(this).selectAll(".inner").attr("transform",function(){return"translate(0,"+-a/2+")"})}).transition().duration(150).attr("opacity",r).style("visibility",function(t,e){if(r(t,e)){return"visible"}else{return"hidden"}})},150);this.legend.render();return this.pieLegend.render()},tick:function(){var e,r,t,n,i=this;e=this.cfg.pad||5;r=this.vbox;if(!this.sim){t=true;this.fc=n=G.forceCollide().strength(.5).iterations(10).radius(function(t){return t.rr});this.fx=G.forceX(function(t){return(i.gcenter[t.group]||{}).x||i.vbox.width/2}).strength(.3);this.fy=G.forceY(function(t){return(i.gcenter[t.group]||{}).y||i.vbox.height/2}).strength(.3);this.fg=G.forceCenter().strength(.5);this.fb=a(function(t){return t.rr+e},function(t){return t.rr+e},function(t){return r.width-t.rr-e},function(t){return r.height-t.rr-e}).strength(.5);this.sim=G.forceSimulation().force("b",this.fb).force("collide",this.fc);this.sim.stop();this.sim.alpha(1)}if((this.cfg.dynamics||{}).anchor==="none"||!(this.cfg.dynamics||{}).anchor){this.sim.force("x",null).force("y",null)}else{this.sim.force("x",this.fx).force("y",this.fy)}this.sim.nodes(this.parsed);this.sim.tick(t?10:1);this.parsed.map(function(t){t._x=t._x+(t.x-t._x)*.1;return t._y=t._y+(t.y-t._y)*.1});this.g.view.selectAll("g.bubble").attr("transform",function(t,e){return"translate("+t._x+","+t._y+")"});return this.g.view.selectAll("g.label").attr("transform",function(t,e){return"translate("+t._x+","+t._y+")"})}}};</script></div>

package/package.json

@@ -1 +1 @@
-{"name":"@makechart/bubble","version":"0.0.3","description":"","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":[],"author":"zbryikt","license":"MIT","dependencies":{"@plotdb/srcbuild":"^0.0.69","fedep":"1.6.0","livescript":"^1.6.0"}}
+{"name":"@makechart/bubble","version":"0.0.5","description":"","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":[],"author":"zbryikt","license":"MIT","dependencies":{"@plotdb/srcbuild":"^0.0.69","fedep":"1.6.0","livescript":"^1.6.0"}}