@makechart/axis-bubble 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Logs
 
+## v0.0.2
+
+ - extend the lite base ( `@makechart/base` `lite/index.html`, no d3 ): needs `@makechart/base` >= 0.2.0
+   and `@plotdb/chart` >= 3.7.0
+   d3 is replaced by `d3-force` ( with `d3-dispatch`, `d3-quadtree`, `d3-timer` ) and `d3-force-boundary`
+ - fix bug: it didn't render at all. layout is now disabled ( it has no layout markup ), the svg is
+   positioned at the top left, and the simulation is actually started
+ - fix bug: `d3-force-boundary` was used but not loaded
+ - fix bug: `root.seed` was used instead of `@seed`
+ - fix bug: clicking before the simulation is ready threw
+ - remove debug alpha text
+ - fix bug: labels blocked hovering ( `pointer-event` instead of `pointer-events` )
+ - add test cases ( `test/index.ls`, run with `npm test` via `@makechart/viewer` )
+
+
 ## v0.0.1
 
 init release

package/index.html

@@ -1 +1 @@
-<div><script type="@plotdb/block">var mod;module.exports={pkg:{name:"axis-bubble",version:"0.0.1",extend:{name:"@makechart/base"},dependencies:[]},init:function(t){var e,r,n;e=t.root,r=t.context,n=t.pubsub;return n.fire("init",{mod:mod({context:r})}).then(function(t){return t[0]})}};mod=function(t){var e,a,i,o,r;e=t.context;a=e.d3,i=e.forceBoundary,o=e.ldcolor,r=e.repeatString$;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,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200].map(function(t){return{val:Math.random()*50+10,x:Math.random(),cat:Math.ceil(5*Math.random())}}),binding:{color:{key:"cat"},radius:{key:"val"},xpos:{key:"x"}}}},config:{},dimension:{color:{type:"R",name:"顏色"},radius:{type:"R",name:"半徑"},xpos:{type:"R",name:"X座標"}},init:function(){var t,e=this;this.svg.addEventListener("click",function(){e.type=!e.type;e.resize();e.render();e.sim.stop();return e.sim.alpha(.9)});this.svg.appendChild(t=document.createElementNS("http://www.w3.org/2000/svg","text"));this.text=a.select(t);return this.text.attr("x",20).attr("y",20)},parse:function(){this.xextent=a.extent(this.data.map(function(t){return t.xpos}));this.rextent=a.extent(this.data.map(function(t){return t.radius}));return this.cextent=a.extent(this.data.map(function(t){return t.color}))},resize:function(){var t,e=this;t=a.randomUniform.source(a.randomLcg(root.seed))(0,1);this.scaleX=a.scaleLinear().domain(this.xextent).range([0,this.box.width]);if(this.type){this.scaleY=a.scaleLinear().domain(this.cextent).range([0,this.box.height])}else{this.scaleY=function(){return e.box.height/2}}this.data.map(function(t){return t.x=t.x||e.scaleX(t.xpos),t.y=t.y||e.box.height/2,t.ty=e.scaleY(t.color),t.val=t.radius,t.r=t.radius,t.c=t.color,t});this.area=this.box.width*this.box.height;return this.rate=.5},render:function(){var e,t,r,n,i,s=this;e=this.rate;this.scale={color:a.interpolateTurbo,r:a.scaleLinear().domain(this.rextent).range([0,1]),c:a.scaleLinear().domain(this.cextent).range([0,1])};t=this.cfg.palette?this.cfg.palette.colors.map(function(t){return o.web(t.value||t)}):["#f00","#0f0","#00f","#f90","#9f0","#0f9"];r=a.interpolateDiscrete(t);this.scale.color=function(t){return r(s.scale.c(t))};n=a.select(this.svg).selectAll("circle.bubble").data(this.data);n.exit().remove();n.enter().append("circle").attr("class","bubble").attr("r",function(t,e){return 0}).attr("fill",function(t,e){return s.scale.color(t.c)});a.select(this.svg).selectAll("circle.bubble").attr("cx",function(t,e){return t.x}).attr("cy",function(t,e){return t.y}).attr("fill",function(t,e){return s.scale.color(t.c)}).attr("r",function(t,e){var r;return((r=t.r)>2?r:2)*s.rate});i=a.select(this.svg).selectAll("g.label").data(this.data);i.exit().remove();i.enter().append("g").attr("class","label").each(function(t,e){var r=this;return[0].map(function(){return a.select(r).append("text")}).map(function(t){return t.attr("dy","-.28em").attr("text-anchor","middle").attr("font-size",".7em").attr("font-family","Rubik").style("pointer-event","none")})});return a.select(this.svg).selectAll("g.label").attr("transform",function(t,e){return"translate("+t.x+","+t.y+")"}).each(function(r,t){return a.select(this).selectAll("text").attr("opacity",r.r*2*e<(r.val.toFixed(2)+"").length*7?0:1).attr("dy",function(t,e){return".38em"}).text(function(t,e){if(e===0){if(r.val>1e6){return(r.val/1e6).toFixed(2)+"M"}else if(r.val>1e3){return(r.val/1e3).toFixed(2)+"K"}else{return r.val.toFixed(2)}}else{return r._idx}})})},tick:function(){var t,e,r,n=this;if(!this.sim){t=true;this.fc=e=a.forceCollide();this.sim=a.forceSimulation().force("center",this.fg=a.forceCenter(this.box.width/2,this.box.height/2)).force("x",this.fx=a.forceX(this.box.width/2).strength(.15)).force("y",this.fy=a.forceY(this.box.height/2).strength(.1)).force("b",this.fb=i(function(t){return t.r},function(t){return t.r},function(t){return n.box.width-t.r},function(t){return n.box.height-t.r})).force("collide",e);this.sim.stop();this.sim.alpha(.9);this.sim.nodes(this.data)}this.fc.strength(1);this.fc.radius(function(t){return n.rate*t.r+2});this.fg.x(this.box.width/2);this.fg.y(this.box.height/2);this.fx.strength(.15);this.fy.strength(.01);this.sim.tick(t?20:1);r=this.sim.alpha();this.text.text(r);if(r<.001){this.stop()}this.data.map(function(t){return t.y=t.y+(t.ty-t.y)*r*.1});a.select(this.svg).selectAll("circle.bubble").attr("cx",function(t,e){return t.x}).attr("cy",function(t,e){return t.y});a.select(this.svg).selectAll("g.label").attr("transform",function(t,e){return"translate("+t.x+","+t.y+")"});return this.render()}}};</script></div>
+<div><script type="@plotdb/block">var mod;module.exports={pkg:{name:"axis-bubble",version:"0.0.1",extend:{name:"@makechart/base",path:"lite/index.html"},dependencies:[{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"}]},init:function(t){var e,i,r;e=t.root,i=t.context,r=t.pubsub;return r.fire("init",{mod:mod({context:i}),layout:false}).then(function(t){return t[0]})}};mod=function(t){var e,n,s,a,i,r,o,c,u,h,l,d,f,m,x;e=t.context;n=e.d3,s=e.forceBoundary,a=e.ldcolor,i=e.chart;r=i.utils,o=r.scale,c=r.color,u=c.turbo,h=c.discrete,l=r.anim.join;d="http://www.w3.org/2000/svg";f=function(t,e){return Array.from(t.querySelectorAll(":scope > "+e))};m=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]}};x=function(t){var e,i,r,n,s;t==null&&(t=Math.random());e=[1664525,1013904223,1/4294967296],i=e[0],r=e[1],n=e[2];s=(0<=t&&t<1?t/n:Math.abs(t))|0;return function(){return n*((s=i*s+r|0)>>>0)}};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,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200].map(function(t){return{val:Math.random()*50+10,x:Math.random(),cat:Math.ceil(5*Math.random())}}),binding:{color:{key:"cat"},radius:{key:"val"},xpos:{key:"x"}}}},config:{},dimension:{color:{type:"R",name:"顏色"},radius:{type:"R",name:"半徑"},xpos:{type:"R",name:"X座標"}},init:function(){var t,e=this;t=this.svg.style;t.position="absolute";t.left=0;t.top=0;return this.svg.addEventListener("click",function(){e.type=!e.type;e.resize();e.render();if(e.sim){e.sim.stop();return e.sim.alpha(.9)}})},parse:function(){this.xextent=m(this.data.map(function(t){return t.xpos}));this.rextent=m(this.data.map(function(t){return t.radius}));return this.cextent=m(this.data.map(function(t){return t.color}))},resize:function(){var t,e=this;t=x(this.seed);this.scaleX=o.linear().domain(this.xextent).range([0,this.box.width]);if(this.type){this.scaleY=o.linear().domain(this.cextent).range([0,this.box.height])}else{this.scaleY=function(){return e.box.height/2}}this.data.map(function(t){return t.x=t.x||e.scaleX(t.xpos),t.y=t.y||e.box.height/2,t.ty=e.scaleY(t.color),t.val=t.radius,t.r=t.radius,t.c=t.color,t});this.area=this.box.width*this.box.height;this.rate=.5;return this.start()},render:function(){var r,t,e,i,n,s=this;r=this.rate;this.scale={color:u,r:o.linear().domain(this.rextent).range([0,1]),c:o.linear().domain(this.cextent).range([0,1])};t=this.cfg.palette?this.cfg.palette.colors.map(function(t){return a.web(t.value||t)}):["#f00","#0f0","#00f","#f90","#9f0","#0f9"];e=h(t);this.scale.color=function(t){return e(s.scale.c(t))};i=l({root:this.svg,tag:"circle",cls:"bubble",data:this.data});i.exit.map(function(t){return t.remove()});i.enter.map(function(t){t.setAttribute("r",0);return t.setAttribute("fill",s.scale.color(t.__data__.c))});f(this.svg,"circle.bubble").map(function(t){var e,i;e=t.__data__;t.setAttribute("cx",e.x);t.setAttribute("cy",e.y);t.setAttribute("fill",s.scale.color(e.c));return t.setAttribute("r",((i=e.r)>2?i:2)*s.rate)});n=l({root:this.svg,tag:"g",cls:"label",data:this.data});n.exit.map(function(t){return t.remove()});n.enter.map(function(t){var e;e=t.appendChild(document.createElementNS(d,"text"));e.setAttribute("dy","-.28em");e.setAttribute("text-anchor","middle");e.setAttribute("font-size",".7em");e.setAttribute("font-family","Rubik");e.style.pointerEvents="none";return e});return f(this.svg,"g.label").map(function(t){var i;i=t.__data__;t.setAttribute("transform","translate("+i.x+","+i.y+")");return f(t,"text").map(function(t,e){t.__data__=i;t.setAttribute("opacity",i.r*2*r<(i.val.toFixed(2)+"").length*7?0:1);t.setAttribute("dy",".38em");return t.textContent=e===0?i.val>1e6?(i.val/1e6).toFixed(2)+"M":i.val>1e3?(i.val/1e3).toFixed(2)+"K":i.val.toFixed(2):i._idx})})},tick:function(){var t,e,i,r=this;if(!this.data||!this.box){return}if(!this.sim){t=true;this.fc=e=n.forceCollide();this.sim=n.forceSimulation().force("center",this.fg=n.forceCenter(this.box.width/2,this.box.height/2)).force("x",this.fx=n.forceX(this.box.width/2).strength(.15)).force("y",this.fy=n.forceY(this.box.height/2).strength(.1)).force("b",this.fb=s(function(t){return t.r},function(t){return t.r},function(t){return r.box.width-t.r},function(t){return r.box.height-t.r})).force("collide",e);this.sim.stop();this.sim.alpha(.9);this.sim.nodes(this.data)}this.fc.strength(1);this.fc.radius(function(t){return r.rate*t.r+2});this.fg.x(this.box.width/2);this.fg.y(this.box.height/2);this.fx.strength(.15);this.fy.strength(.01);this.sim.tick(t?20:1);i=this.sim.alpha();if(i<.001){this.stop()}this.data.map(function(t){return t.y=t.y+(t.ty-t.y)*i*.1});return this.render()}}};</script></div>

package/package.json

@@ -1 +1 @@
-{"name":"@makechart/axis-bubble","version":"0.0.1","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/axis-bubble","version":"0.0.2","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"}}