@makechart/bubble 0.0.5 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/index.html +1 -1
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # Change Logs
2
2
 
3
+ ## v0.0.6
4
+
5
+ - extend the lite base ( `@makechart/base` `lite/index.html`, no d3 ): needs `@makechart/base` >= 0.2.0
6
+ and `@plotdb/chart` >= 3.7.0
7
+ d3 is replaced by `d3-hierarchy`, `d3-force` ( with `d3-dispatch`, `d3-quadtree`, `d3-timer` ) and `d3-force-boundary`
8
+ transitions run on `chart.anim`, so animation can be recorded frame by frame ( `anim.manual` / `step` )
9
+ - add test cases ( `test/index.ls`, run with `npm test` via `@makechart/viewer` )
10
+
11
+
3
12
  ## v0.0.5
4
13
 
5
14
  - add d3-force-boundary dependency
package/index.html CHANGED
@@ -1 +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:[{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>
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",path:"lite/index.html"},dependencies:[{name:"d3-hierarchy",version:"3.1.2",path:"dist/d3-hierarchy.min.js",async:false},{name:"d3-dispatch",version:"3.0.1",path:"dist/d3-dispatch.min.js",async:false},{name:"d3-quadtree",version:"3.0.1",path:"dist/d3-quadtree.min.js",async:false},{name:"d3-timer",version:"3.0.1",path:"dist/d3-timer.min.js",async:false},{name:"d3-force",version:"3.0.0",path:"dist/d3-force.min.js",async:false},{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,a,w,G,A,r,H,n,M,k,N,K;e=t.ctx,$=t.t;D=e.d3,a=e.forceBoundary,w=e.ldcolor,G=e.chart,A=e.wrapSvgText;r=G.utils,H=r.scale,n=r.shape,M=r.anim.join;k="http://www.w3.org/2000/svg";N=function(t,e){return Array.from(t.querySelectorAll(":scope > "+e))};K=function(t){var e;e=t.filter(function(t){return t!=null&&+t>=+t});if(e.length){return[e.reduce(function(t,e){if(e<t){return e}else{return t}}),e.reduce(function(t,e){if(e>t){return e}else{return t}})]}else{return[undefined,undefined]}};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=G.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:G.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:G.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 l,c,t,e,h,d=this;l=this;this.tint=c=new G.utils.tint;this.unit={};this.parsed=this.parsed||[];this.g=Object.fromEntries(["view","unit","legend"].map(function(t){return[t,d.layout.getGroup(t)]}));t=this.root.querySelector("[ld=tip]");this.tip=new G.utils.tip({root:this.root,accessor:function(t){var e,r,n,i,a,o;e=t.evt;if(!(e.target&&(r=e.target.__data__))){return null}n=d.cfg.tip.format?G.utils.format.d3(d.cfg.tip.format):d.fmt;i=!(a=n(r.area))?"":a+""+d.unit.text;if(d.binding.area&&d.binding.area.length>1){o=d.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 d.layout.getNode("view").getBoundingClientRect()}});this.legend=new G.utils.legend({layout:this.layout,name:"legend",root:this.root,shape:function(t){return this.setAttribute("fill",c.get(t.key))},direction:((e=this.cfg).legend||(e.legend={})).position==="bottom"?"horizontal":"vertical",cfg:{selectable:true}});this.legend.on("select",function(){d.bind();d.resize();return d.render()});h=this;this.pieLegend=new G.utils.legend({layout:this.layout,name:"pie-legend",root:this.root,shape:function(t,e){var r,n,i,a,o,s,u;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 this.setAttribute("fill",w.web({h:0,c:0,l:i}))}else{e=(s=/\/(\d+)/.exec(t.key))?+s[1]:0;u=c.get((l.binding.area[e]||{}).key||e);return this.setAttribute("fill",u)}},direction:((e=this.cfg).legend||(e.legend={})).position==="bottom"?"horizontal":"vertical",cfg:{selectable:true}});this.pieLegend.on("select",function(){d.bind();d.resize();return d.render()});this.arc=n.arc().startAngle(0).endAngle(Math.PI/2);return this._color=function(t,e){var r,n,i,a,o,s,u,l,h;if(d.binding.color){return c.get(+t.color)}r=d.groups.length?t.group:"";r=r!=null?r:"";n=d.groups.length&&d.cfg.pie.color!=="from palette"||e===0?r:r+"/"+e;if(d.groups.length&&d.cfg.pie.color!=="from palette"){n=c.get(n);i=d.cfg.pie.contrast*100;if(d.cfg.pie.color==="lightness"){a=w.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=w.hcl(n);u=d.cfg.pie.color==="dark to light"?e:(l=t.paths.length-e-1)>0?l:0;if(a.l>60+i/5){if(t.paths.length===1){o=1}else{o=u/((l=t.paths.length-1)>1?l:1)}a.l=a.l-i+i*o}else{o=u/((l=t.paths.length-1)>1?l:1);a.l=a.l+i*o}a.l=(l=(h=a.l)>10?h:10)<90?l:90}return w.web(a)}else{n=c.get((d.binding.area[e]||{}).key||e);return w.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(K(this.data.filter(function(t){return!isNaN(t.color)}).map(function(t){return+t.color})));this.tint.mode(G.utils.tint.mode.continuous)}else{this.tint.mode(G.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,u,l,h,c,d,f,g,B,p,m,b,y,v,x,_,w,A,M,k,N,z,S,C,L,q,E,R,j,I,O,P=this;this.fmt=G.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=((u=this.cfg).unit||(u.unit={})).position==="inner"?this.unit.text:"";s.outer=(u=((l=this.cfg).unit||(l.unit={})).position)==="inner"||u==="none"?"":this.unit.text?$("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!P.cfg.legend.enabled||P.legend.isSelected(t.group)}));if(this.legend.enabled()){c=c.filter(function(t){return!t._raw||!P.groups.length||P.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){d=(this.binding.area||[]).map(function(t,e){return P.pieLegend.isSelected(e?"/"+e:"")});c.map(function(t){if(Array.isArray(t._area)){return t.area=t._area.map(function(t,e){if(d[e]){return t}else{return 0}})}})}f=D.hierarchy(D.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");B=D.pack().size([g.width,g.height])(f);this.parsed=f.leaves().map(function(i){var e,a,t,r,n,o,s,u,l,h;i._raw=i.data.data._raw;e=i.data.data;a=P.parsed?(t=P.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(u=0,l=i.paths.length;u<l;++u){h=u;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={};b=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,b);m.x2=Math.max.apply(Math,b);y=m.x2-m.x1||1;v=(m.x2+m.x1)/2;this.parsed.map(function(t,e){var r,n;if(t.paths.length<=1){return}r=(t._dr-v)*2/y;n=p[t.group];if(P.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}});x=this.cfg.dynamics.anchor;_=Object.fromEntries(this.groups.map(function(t,e){return[t,e]}));for(w in p){A=p[w];(this.gcenter||(this.gcenter={}))[w]=x==="circular"?(s=[_[w],Math.min(this.vbox.width,this.vbox.height)],M=s[0],k=s[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=_[w],N=Math.sqrt(this.vbox.width*this.vbox.height/(this.groups.length||1)),z=Math.floor(this.vbox.width/N),S=Math.floor(this.vbox.height/N),c=[[z,S,z*S],[z+1,S,(z+1)*S],[z,S+1,z*(S+1)],[z+1,S+1,(z+1)*(S+1)]],c.sort(T),C=c.filter(F),s=!C.length?c[c.length-1]:C[0],z=s[0],S=s[1],N=Math.min(this.vbox.width/z,this.vbox.height/S),L=(this.vbox.width-N*z)/2,q=(this.vbox.height-N*S)/2,{x:N*(M%(z||1)+.5)+L,y:N*(Math.floor(M/(z||1))+.5)+q}):{x:(A.x1+A.x2)*.5,y:(A.y1+A.y2)*.5}}this.sim=null;this.start();this.rate=E=.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));R=K(this.parsed.map(function(t,e){return t.rr=t.r*P.rate}));j=this.cfg.bubble.minRadius||0;j<=(s=Math.min(g.width,g.height)/2)||(j=s);I=(s=Math.min((this.cfg.bubble.maxRadius||0)*g.width*.25/100,R[1]))>j?s:j;I<=(s=Math.min(g.width,g.height)/2)||(I=s);O=H.linear().domain([0,R[1]]).range([0,I]);return this.parsed.map(function(t,e){var r;t.rr=O(t.rr);if(t.rr){return(r=t.rr)>=j?r:t.rr=j}});function T(t,e){if(t[2]<e[2]){return-1}else if(t[2]>e[2]){return 1}else{return 0}}function F(t){return t[2]>=P.groups.length}},render:function(){var i,u,l,t,e,r,h,c,n,a,s,d,o,f,g,p,m,b,y,v,x,_=this;i=this.fmt,u=this._color,l=this.cfg,t=this.binding,e=this.tint,r=this.layout,h=this.unit;c=this.vbox;n=r.getNode("unit");a=A({node:n,useRange:true});this.g.unit.textContent="";this.g.unit.appendChild(a);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);s=function(i,a,t){return function(e){var t,r,n;_.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];_.arc.startAngle(r).endAngle(n);return _.arc()}};d=function(t,e,r){r==null&&(r={});return _.anim.tween(t,e,import$({duration:350},r))};o=M({root:this.g.view,tag:"g",cls:"bubble",data:this.parsed,key:function(t){return t._id}});o.exit.map(function(t){var e;e=t.__data__;e._removing=true;return e.paths.map(function(t){t.old.r=t.cur.r;return t.cur.r=0})});o.enter.map(function(t){var e;e=t.__data__;t.setAttribute("transform","translate("+e._x+","+e._y+")");return e._removing=false});N(this.g.view,"g.bubble").map(function(t){var i,a,o;i=t.__data__;t.setAttribute("transform","translate("+i._x+","+i._y+")");a=M({root:t,tag:"path",cls:"data",data:i.paths,key:function(t,e){return e}});a.exit.map(function(t){return t.remove()});a.enter.map(function(t,e){t.setAttribute("opacity",0);return t.setAttribute("fill",u(i,a.nodes.indexOf(t)))});o=function(){if(t.__data__._removing&&t.parentNode){return t.remove()}};if(!a.nodes.length&&i._removing){o()}return a.nodes.map(function(t,e){var r,n;r=t.__data__;n=i._removing&&e===a.nodes.length-1?{end:o}:{};return d(t,{d:s(r.old,r.cur,e),fill:u(i,e),opacity:1},n)})});f=!((g=this.cfg)!=null&&((p=g.label)!=null&&((m=p.trim)!=null&&m.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,((b=this.cfg)!=null?(y=b.label)!=null?(v=y.trim)!=null?v.keep:void 8:void 8:void 8)||0);x=M({root:this.g.view,tag:"g",cls:"label",data:f,key:function(t){return t._id}});x.exit.map(function(t){_.anim.interrupt(t);return t.remove()});x.enter.map(function(e){var t,r;t=e.__data__;e.setAttribute("class","label data");e.setAttribute("transform","translate("+t.x+","+t.y+")");e.setAttribute("opacity",0);e.setAttribute("font-size",l.label.font.size||"1em");r=e.style;r.pointerEvents="none";r.cursor="pointer";return[0,1].map(function(){var t;t=e.appendChild(document.createElementNS(k,"g"));t.setAttribute("class","inner");t.setAttribute("opacity",0);return t})});N(this.g.view,"g.label").map(function(t){var a,e,o,s,r,n;a=t.__data__;t.setAttribute("font-size",l.label.font.size||"1em");t.setAttribute("transform","translate("+a._x+","+a._y+")");t.setAttribute("class","label "+((e=l.label.font.family)?e.className||"":""));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};r=N(t,".inner");r.map(function(t,e){var r,n,i;t.__data__=a;for(r=t.childNodes.length-1;r>=0;--r){n=r;t.removeChild(t.childNodes[n])}i=A({text:o(a,e),style:{width:(l.label.wrap?a.rr*2:c.width)+"px",lineHeight:s(a,e,1.2),fontSize:l.label.font.size||""}});i.style.transform=l.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 t.appendChild(i)});n=function(t,e){var r;r=l.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 r.map(function(t,e){t.setAttribute("font-size",s(a,e,1)+"em");return d(t,{"style:visibility":n(a,e)?"visible":"hidden",opacity:n(a,e),fill:w.hcl(u(a,0)).l<70?"#fff":"#000"})})});N(this.g.view,"g.label").map(function(t){return d(t,{"font-size":l.label.font.size},{duration:150})});if(this.h){clearTimeout(this.h)}this.h=setTimeout(function(){var u;_.h=null;u=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*((l.label.overflow||0)+1);if(o<i||2*t.rr<a){return 0}else{return 1}};return N(_.g.view,"g.label").map(function(t,e){var r,n,i,a,o,s;r=t.__data__;r._box=n=t.getBoundingClientRect();i=[n.width,n.height],a=i[0],o=i[1];N(t,".inner").map(function(t){return t.setAttribute("transform","translate(0,"+-o/2+")")});s=u(r,e);return d(t,{opacity:s,"style:visibility":s?"visible":"hidden"},{duration:150})})},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=D.forceCollide().strength(.5).iterations(10).radius(function(t){return t.rr});this.fx=D.forceX(function(t){return(i.gcenter[t.group]||{}).x||i.vbox.width/2}).strength(.3);this.fy=D.forceY(function(t){return(i.gcenter[t.group]||{}).y||i.vbox.height/2}).strength(.3);this.fg=D.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=D.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});return N(this.g.view,"g.bubble").concat(N(this.g.view,"g.label")).map(function(t){var e;e=t.__data__;return t.setAttribute("transform","translate("+e._x+","+e._y+")")})}}};function import$(t,e){var r={}.hasOwnProperty;for(var n in e)if(r.call(e,n))t[n]=e[n];return t}</script></div>
package/package.json CHANGED
@@ -1 +1 @@
1
- {"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"}}
1
+ {"name":"@makechart/bubble","version":"0.0.6","description":"","scripts":{"test":"mctest","test:serve":"mctest serve -o","test:dev":"mctest -l \"@makechart/base:../base;@plotdb/chart:../../../plotdb/projects/chart;@plotdb/dash:../../../plotdb/projects/dash\"","test:dev:serve":"mctest serve -o -l \"@makechart/base:../base;@plotdb/chart:../../../plotdb/projects/chart;@plotdb/dash:../../../plotdb/projects/dash\""},"keywords":[],"author":"zbryikt","license":"MIT","dependencies":{"@plotdb/srcbuild":"^0.0.69","fedep":"1.6.0","livescript":"^1.6.0"},"devDependencies":{"@makechart/viewer":"^0.0.3"}}