UNPKG

react-wordcloud

Version:

Simple React + D3 wordcloud component with powerful features.

3 lines (2 loc) 10.3 kB
function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}var e=t(require("lodash.debounce")),n=require("react"),r=t(n),o=require("d3-selection"),a=t(require("resize-observer-polyfill"));require("d3-transition");var i=require("d3-array"),u=t(require("d3-cloud")),s=t(require("lodash.clonedeep")),l=t(require("seedrandom")),c=t(require("tippy.js")),f=require("d3-dispatch"),d=require("d3-scale"),h=require("d3-scale-chromatic");function y(){return(y=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}).apply(this,arguments)}var x=Math.PI/180;function v(t){return t.text}function p(){return"serif"}function g(){return"normal"}function m(t){return Math.sqrt(t.value)}function b(){return 30*(~~(6*Math.random())-3)}function w(){return 1}function M(t,e,n,r){if(!e.sprite){var o=t.context,a=t.ratio;o.clearRect(0,0,2048/a,2048/a);var i=0,u=0,s=0,l=n.length;for(--r;++r<l;){e=n[r],o.save(),o.font=e.style+" "+e.weight+" "+~~((e.size+1)/a)+"px "+e.font;var c=o.measureText(e.text+"m").width*a,f=e.size<<1;if(e.rotate){var d=Math.sin(e.rotate*x),h=Math.cos(e.rotate*x),y=c*h,v=c*d,p=f*h,g=f*d;c=Math.max(Math.abs(y+g),Math.abs(y-g))+31>>5<<5,f=~~Math.max(Math.abs(v+p),Math.abs(v-p))}else c=c+31>>5<<5;if(f>s&&(s=f),i+c>=2048&&(i=0,u+=s,s=0),u+f>=2048)break;o.translate((i+(c>>1))/a,(u+(f>>1))/a),e.rotate&&o.rotate(e.rotate*x),o.fillText(e.text,0,0),e.padding&&(o.lineWidth=2*e.padding,o.strokeText(e.text,0,0)),o.restore(),e.width=c,e.height=f,e.xoff=i,e.yoff=u,e.x1=c>>1,e.y1=f>>1,e.x0=-e.x1,e.y0=-e.y1,e.hasText=!0,i+=c}for(var m=o.getImageData(0,0,2048/a,2048/a).data,b=[];--r>=0;)if((e=n[r]).hasText){for(var w=(c=e.width)>>5,M=(f=e.y1-e.y0,0);M<f*w;M++)b[M]=0;if(null==(i=e.xoff))return;u=e.yoff;for(var z=0,k=-1,q=0;q<f;q++){for(M=0;M<c;M++){var S=m[2048*(u+q)+(i+M)<<2]?1<<31-M%32:0;b[w*q+(M>>5)]|=S,z|=S}z?k=q:(e.y0++,f--,q--,u++)}e.y1=e.y0+k,e.sprite=b.slice(0,(e.y1-e.y0)*w)}}}function z(t,e,n){for(var r,o=t.sprite,a=t.width>>5,i=t.x-(a<<4),u=127&i,s=32-u,l=t.y1-t.y0,c=(t.y+t.y0)*(n>>=5)+(i>>5),f=0;f<l;f++){r=0;for(var d=0;d<=a;d++)if((r<<s|(d<a?(r=o[f*a+d])>>>u:0))&e[c+d])return!0;c+=n}return!1}function k(t,e){var n=t[0],r=t[1];e.x+e.x0<n.x&&(n.x=e.x+e.x0),e.y+e.y0<n.y&&(n.y=e.y+e.y0),e.x+e.x1>r.x&&(r.x=e.x+e.x1),e.y+e.y1>r.y&&(r.y=e.y+e.y1)}function q(t){var e=t[0]/t[1];return function(t){return[e*(t*=.1)*Math.cos(t),t*Math.sin(t)]}}function S(){return document.createElement("canvas")}function W(t){return"function"==typeof t?t:function(){return t}}var O={archimedean:q,rectangular:function(t){var e=4*t[0]/t[1],n=0,r=0;return function(t){var o=t<0?-1:1;switch(Math.sqrt(1+4*o*t)-o&3){case 0:n+=e;break;case 1:r+=4;break;case 2:n-=e;break;default:r-=4}return[n,r]}}};function T(t,e){return t[Math.floor(e()*t.length)]}function j(t){return t.size+"px"}function A(t){return t.text}function E(t){return"translate("+t.x+", "+t.y+")"+("number"==typeof t.rotate?"rotate("+t.rotate+")":"")}function C(t){var e,n=t.callbacks,r=t.maxWords,a=t.options,h=t.selection,x=t.size,C=a.deterministic,I=a.enableOptimizations,D=a.fontFamily,L=a.fontStyle,R=a.fontSizes,F=a.fontWeight,P=a.padding,N=a.randomSeed,U=a.rotations,H=a.rotationAngles,B=a.spiral,G=a.scale,J=t.words.concat().sort(function(t,e){return i.descending(t.value,e.value)}).slice(0,r),K=l(C?N||"deterministic":null);(e=I?function(){var t=[256,256],e=v,n=p,r=m,o=g,a=g,i=b,u=w,s=q,l=[],c=Infinity,d=f.dispatch("word","end"),h=Math.random,y={},x=S,T=!1;function j(e,n,r){for(var o,a,i,u,l,c=n.x,f=n.y,d=Math.sqrt(t[0]*t[0]+t[1]*t[1]),y=s(t),x=h()<.5?1:-1,v=-x;(o=y(v+=x))&&(a=~~o[0],i=~~o[1],!(Math.min(Math.abs(a),Math.abs(i))>=d));)if(n.x=c+a,n.y=f+i,!(n.x+n.x0<0||n.y+n.y0<0||n.x+n.x1>t[0]||n.y+n.y1>t[1]||r&&z(n,e,t[0])||r&&!((u=n).x+u.x1>(l=r)[0].x&&u.x+u.x0<l[1].x&&u.y+u.y1>l[0].y&&u.y+u.y0<l[1].y))){for(var p,g=n.sprite,m=n.width>>5,b=t[0]>>5,w=n.x-(m<<4),M=127&w,k=32-M,q=n.y1-n.y0,S=(n.y+n.y0)*b+(w>>5),W=0;W<q;W++){p=0;for(var O=0;O<=m;O++)e[S+O]|=p<<k|(O<m?(p=g[W*m+O])>>>M:0);S+=b}return delete n.sprite,!0}return!1}return y.canvas=function(t){return arguments.length?(x=W(t),y):x},y.start=function(){var s=function(t){t.width=t.height=1;var e=Math.sqrt(t.getContext("2d").getImageData(0,0,1,1).data.length>>2);t.width=2048/e,t.height=2048/e;var n=t.getContext("2d");return n.fillStyle=n.strokeStyle="red",n.textAlign="center",{context:n,ratio:e}}(x()),c=new Uint32Array((t[0]>>5)*t[1]),f=null,v=[],p=l.map(function(t,s){return t.text=e.call(this,t,s),t.font=n.call(this,t,s),t.style=o.call(this,t,s),t.weight=a.call(this,t,s),t.rotate=i.call(this,t,s),t.size=~~r.call(this,t,s),t.padding=u.call(this,t,s),t}).sort(function(t,e){return e.size-t.size});return setTimeout(function(){return function e(n){var r=50*n,o=Math.min(50*(n+1),l.length);!function(e,n){for(var r=e;r<n;r+=1){var o=p[r];o.x=t[0]*(h()+.5)>>1,o.y=t[1]*(h()+.5)>>1,M(s,o,p,r),o.hasText&&j(c,o,f)&&(v.push(o),d.call("word",y,o),f?k(f,o):f=[{x:o.x+o.x0,y:o.y+o.y0},{x:o.x+o.x1,y:o.y+o.y1}],o.x-=t[0]>>1,o.y-=t[1]>>1)}}(r,o),T||(o<l.length?setTimeout(function(){return e(n+1)},0):(y.stop(),d.call("end",y,v,f)))}(0)},0),y},y.revive=function(){return T=!1,y},y.stop=function(){return T=!0,y},y.timeInterval=function(t){return arguments.length?(c=null==t?Infinity:t,y):c},y.words=function(t){return arguments.length?(l=t,y):l},y.size=function(e){return arguments.length?(t=[+e[0],+e[1]],y):t},y.font=function(t){return arguments.length?(n=W(t),y):n},y.fontStyle=function(t){return arguments.length?(o=W(t),y):o},y.fontWeight=function(t){return arguments.length?(a=W(t),y):a},y.rotate=function(t){return arguments.length?(i=W(t),y):i},y.text=function(t){return arguments.length?(e=W(t),y):e},y.spiral=function(t){return arguments.length?(s=O[t]||t,y):s},y.fontSize=function(t){return arguments.length?(r=W(t),y):r},y.padding=function(t){return arguments.length?(u=W(t),y):u},y.random=function(t){return arguments.length?(h=t,y):h},y.on=function(){var t=d.on.apply(d,arguments);return t===d?y:t},y}():u()).size(x).padding(P).words(s(J)).rotate(function(){return void 0===U?30*(~~(6*K())-3):function(t,e,n){if(t<1)return 0;var r=[];if(1===t)r=[e[0]];else{r=[].concat(e);for(var o=(e[1]-e[0])/(t-1),a=e[0]+o;a<e[1];)r.push(a),a+=o}return T(r,n)}(U,H,K)}).spiral(B).random(K).text(A).font(D).fontStyle(L).fontWeight(F),function t(r,u){void 0===u&&(u=1),I&&e.revive(),e.fontSize(function(t){return function(t,e,n){var r,o=i.min(t,function(t){return Number(t.value)}),a=i.max(t,function(t){return Number(t.value)});switch(n){case"log":r=d.scaleLog;break;case"sqrt":r=d.scaleSqrt;break;case"linear":default:r=d.scaleLinear}return r().domain([o,a]).range(e)}(J,r,G)(t.value)}).on("end",function(e){if(J.length!==e.length&&u<=10){10===u&&console.warn("Unable to layout "+(J.length-e.length)+" word(s) after "+u+" attempts. Consider: (1) Increasing the container/component size. (2) Lowering the max font size. (3) Limiting the rotation angles.");var i=Math.max(.95*r[0],1);t([i,Math.max(.95*r[1],i)],u+1)}else!function(t){var e,n=t.callbacks,r=t.options,a=t.random,i=t.words,u=n.getWordColor,s=n.getWordTooltip,l=n.onWordClick,f=n.onWordMouseOver,d=n.onWordMouseOut,h=r.colors,x=r.enableTooltip,v=r.fontStyle,p=r.fontWeight,g=r.textAttributes,m=r.tooltipOptions,b=r.fontFamily,w=r.transitionDuration;function M(t){return u?u(t):T(h,a)}t.selection.selectAll("text").data(i).join(function(t){var n=t.append("text").on("click",function(t){l&&l(t,o.event)}).on("mouseover",function(t){x&&(e=c(o.event.target,y({animation:"scale",arrow:!0,content:function(){return s(t)}},m))),f&&f(t,o.event)}).on("mouseout",function(t){e&&e.destroy(),d&&d(t,o.event)}).attr("cursor",l?"pointer":"default").attr("fill",M).attr("font-family",b).attr("font-style",v).attr("font-weight",p).attr("text-anchor","middle").attr("transform","translate(0, 0) rotate(0)");"object"==typeof g&&Object.keys(g).forEach(function(t){n=n.attr(t,g[t])}),n=n.call(function(t){return t.transition().duration(w).attr("font-size",j).attr("transform",E).text(A)})},function(t){t.transition().duration(w).attr("fill",M).attr("font-family",b).attr("font-size",j).attr("transform",E).text(A)},function(t){t.transition().duration(w).attr("fill-opacity",0).remove()})}({callbacks:n,options:a,random:K,selection:h,words:e})}).start()}(R)}var I={getWordTooltip:function(t){return t.text+" ("+t.value+")"}},D={colors:i.range(20).map(function(t){return t.toString()}).map(d.scaleOrdinal(h.schemeCategory10)),deterministic:!1,enableOptimizations:!1,enableTooltip:!0,fontFamily:"times new roman",fontSizes:[4,32],fontStyle:"normal",fontWeight:"normal",padding:1,rotationAngles:[-90,90],scale:"sqrt",spiral:"rectangular",tooltipOptions:{},transitionDuration:600};function L(t){var i=t.callbacks,u=t.maxWords,s=void 0===u?100:u,l=t.minSize,c=t.options,f=t.size,d=t.words,h=function(t,e){if(null==t)return{};var n,r,o={},a=Object.keys(t);for(r=0;r<a.length;r++)e.indexOf(n=a[r])>=0||(o[n]=t[n]);return o}(t,["callbacks","maxWords","minSize","options","size","words"]),x=y({},I,i),v=y({},D,c),p=function(t,e,r){var i=n.useRef(),u=n.useState(e),s=u[0],l=u[1],c=n.useState(null),f=c[0],d=c[1];return n.useEffect(function(){var n=i.current,u=o.select(n).append("svg").style("display","block");"object"==typeof r&&Object.keys(r).forEach(function(t){u=u.attr(t,r[t])});var s=u.append("g");function c(t,e){u.attr("height",e).attr("width",t),s.attr("transform","translate("+t/2+", "+e/2+")"),l([t,e])}d(s);var f=0,h=0;void 0===e?(f=n.parentElement.offsetWidth,h=n.parentElement.offsetHeight):(f=e[0],h=e[1]),c(f=Math.max(f,t[0]),h=Math.max(h,t[1]));var y=new a(function(t){if(t&&0!==t.length&&void 0===e){var n=t[0].contentRect;c(n.width,n.height)}});return y.observe(n),function(){y.unobserve(n),o.select(n).selectAll("*").remove()}},[e,t,r]),[i,f,s]}(l,f,c.svgAttributes),g=p[0],m=p[1],b=p[2],w=n.useRef(e(C,100));return n.useEffect(function(){m&&w.current({callbacks:x,maxWords:s,options:v,selection:m,size:b,words:d})},[s,x,v,m,b,d]),r.createElement("div",y({ref:g,style:{height:"100%",width:"100%"}},h))}L.defaultProps={callbacks:I,maxWords:100,minSize:[300,300],options:D},exports.default=L,exports.defaultCallbacks=I,exports.defaultOptions=D; //# sourceMappingURL=index.js.map