react-wordcloud
Version:
Simple React + D3 wordcloud component with powerful features.
3 lines (2 loc) • 11.1 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("lodash.debounce"),require("react"),require("d3-selection"),require("resize-observer-polyfill"),require("d3-transition"),require("d3-array"),require("d3-cloud"),require("lodash.clonedeep"),require("seedrandom"),require("tippy.js"),require("d3-dispatch"),require("d3-scale"),require("d3-scale-chromatic")):"function"==typeof define&&define.amd?define(["exports","lodash.debounce","react","d3-selection","resize-observer-polyfill","d3-transition","d3-array","d3-cloud","lodash.clonedeep","seedrandom","tippy.js","d3-dispatch","d3-scale","d3-scale-chromatic"],e):e((t=t||self).reactWordcloud={},t.debounce,t.react,t.d3Selection,t.resizeObserverPolyfill,0,t.d3Array,t.d3Cloud,t.clonedeep,t.seedrandom,t.tippy,t.d3Dispatch,t.d3Scale,t.d3ScaleChromatic)}(this,function(t,e,n,r,o,a,i,l,u,s,c,f,d,h){e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var y="default"in n?n.default:n;function p(){return(p=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)}o=o&&Object.prototype.hasOwnProperty.call(o,"default")?o.default:o,l=l&&Object.prototype.hasOwnProperty.call(l,"default")?l.default:l,u=u&&Object.prototype.hasOwnProperty.call(u,"default")?u.default:u,s=s&&Object.prototype.hasOwnProperty.call(s,"default")?s.default:s,c=c&&Object.prototype.hasOwnProperty.call(c,"default")?c.default:c;var x=Math.PI/180;function m(t){return t.text}function v(){return"serif"}function g(){return"normal"}function b(t){return Math.sqrt(t.value)}function w(){return 30*(~~(6*Math.random())-3)}function z(){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,l=0,u=0,s=n.length;for(--r;++r<s;){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,p=c*d,m=f*h,v=f*d;c=Math.max(Math.abs(y+v),Math.abs(y-v))+31>>5<<5,f=~~Math.max(Math.abs(p+m),Math.abs(p-m))}else c=c+31>>5<<5;if(f>u&&(u=f),i+c>=2048&&(i=0,l+=u,u=0),l+f>=2048)break;o.translate((i+(c>>1))/a,(l+(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=l,e.x1=c>>1,e.y1=f>>1,e.x0=-e.x1,e.y0=-e.y1,e.hasText=!0,i+=c}for(var g=o.getImageData(0,0,2048/a,2048/a).data,b=[];--r>=0;)if((e=n[r]).hasText){for(var w=(c=e.width)>>5,z=(f=e.y1-e.y0,0);z<f*w;z++)b[z]=0;if(null==(i=e.xoff))return;l=e.yoff;for(var M=0,O=-1,k=0;k<f;k++){for(z=0;z<c;z++){var S=g[2048*(l+k)+(i+z)<<2]?1<<31-z%32:0;b[w*k+(z>>5)]|=S,M|=S}M?O=k:(e.y0++,f--,k--,l++)}e.y1=e.y0+O,e.sprite=b.slice(0,(e.y1-e.y0)*w)}}}function O(t,e,n){for(var r,o=t.sprite,a=t.width>>5,i=t.x-(a<<4),l=127&i,u=32-l,s=t.y1-t.y0,c=(t.y+t.y0)*(n>>=5)+(i>>5),f=0;f<s;f++){r=0;for(var d=0;d<=a;d++)if((r<<u|(d<a?(r=o[f*a+d])>>>l: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 S(t){var e=t[0]/t[1];return function(t){return[e*(t*=.1)*Math.cos(t),t*Math.sin(t)]}}function q(){return document.createElement("canvas")}function W(t){return"function"==typeof t?t:function(){return t}}var j={archimedean:S,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 P(t){return t.size+"px"}function A(t){return t.text}function C(t){return"translate("+t.x+", "+t.y+")"+("number"==typeof t.rotate?"rotate("+t.rotate+")":"")}function E(t){var e,n=t.callbacks,o=t.maxWords,a=t.options,h=t.selection,y=t.size,x=a.deterministic,E=a.enableOptimizations,I=a.fontFamily,D=a.fontStyle,L=a.fontSizes,R=a.fontWeight,F=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,o),K=s(x?N||"deterministic":null);(e=E?function(){var t=[256,256],e=m,n=v,r=b,o=g,a=g,i=w,l=z,u=S,s=[],c=Infinity,d=f.dispatch("word","end"),h=Math.random,y={},p=q,x=!1;function T(e,n,r){for(var o,a,i,l,s,c=n.x,f=n.y,d=Math.sqrt(t[0]*t[0]+t[1]*t[1]),y=u(t),p=h()<.5?1:-1,x=-p;(o=y(x+=p))&&(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&&O(n,e,t[0])||r&&!((l=n).x+l.x1>(s=r)[0].x&&l.x+l.x0<s[1].x&&l.y+l.y1>s[0].y&&l.y+l.y0<s[1].y))){for(var m,v=n.sprite,g=n.width>>5,b=t[0]>>5,w=n.x-(g<<4),z=127&w,M=32-z,k=n.y1-n.y0,S=(n.y+n.y0)*b+(w>>5),q=0;q<k;q++){m=0;for(var W=0;W<=g;W++)e[S+W]|=m<<M|(W<g?(m=v[q*g+W])>>>z:0);S+=b}return delete n.sprite,!0}return!1}return y.canvas=function(t){return arguments.length?(p=W(t),y):p},y.start=function(){var u=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}}(p()),c=new Uint32Array((t[0]>>5)*t[1]),f=null,m=[],v=s.map(function(t,u){return t.text=e.call(this,t,u),t.font=n.call(this,t,u),t.style=o.call(this,t,u),t.weight=a.call(this,t,u),t.rotate=i.call(this,t,u),t.size=~~r.call(this,t,u),t.padding=l.call(this,t,u),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),s.length);!function(e,n){for(var r=e;r<n;r+=1){var o=v[r];o.x=t[0]*(h()+.5)>>1,o.y=t[1]*(h()+.5)>>1,M(u,o,v,r),o.hasText&&T(c,o,f)&&(m.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),x||(o<s.length?setTimeout(function(){return e(n+1)},0):(y.stop(),d.call("end",y,m,f)))}(0)},0),y},y.revive=function(){return x=!1,y},y.stop=function(){return x=!0,y},y.timeInterval=function(t){return arguments.length?(c=null==t?Infinity:t,y):c},y.words=function(t){return arguments.length?(s=t,y):s},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?(u=j[t]||t,y):u},y.fontSize=function(t){return arguments.length?(r=W(t),y):r},y.padding=function(t){return arguments.length?(l=W(t),y):l},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}():l()).size(y).padding(F).words(u(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(I).fontStyle(D).fontWeight(R),function t(o,l){void 0===l&&(l=1),E&&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,o,G)(t.value)}).on("end",function(e){if(J.length!==e.length&&l<=10){10===l&&console.warn("Unable to layout "+(J.length-e.length)+" word(s) after "+l+" attempts. Consider: (1) Increasing the container/component size. (2) Lowering the max font size. (3) Limiting the rotation angles.");var i=Math.max(.95*o[0],1);t([i,Math.max(.95*o[1],i)],l+1)}else!function(t){var e,n=t.callbacks,o=t.options,a=t.random,i=t.words,l=n.getWordColor,u=n.getWordTooltip,s=n.onWordClick,f=n.onWordMouseOver,d=n.onWordMouseOut,h=o.colors,y=o.enableTooltip,x=o.fontStyle,m=o.fontWeight,v=o.textAttributes,g=o.tooltipOptions,b=o.fontFamily,w=o.transitionDuration;function z(t){return l?l(t):T(h,a)}t.selection.selectAll("text").data(i).join(function(t){var n=t.append("text").on("click",function(t){s&&s(t,r.event)}).on("mouseover",function(t){y&&(e=c(r.event.target,p({animation:"scale",arrow:!0,content:function(){return u(t)}},g))),f&&f(t,r.event)}).on("mouseout",function(t){e&&e.destroy(),d&&d(t,r.event)}).attr("cursor",s?"pointer":"default").attr("fill",z).attr("font-family",b).attr("font-style",x).attr("font-weight",m).attr("text-anchor","middle").attr("transform","translate(0, 0) rotate(0)");"object"==typeof v&&Object.keys(v).forEach(function(t){n=n.attr(t,v[t])}),n=n.call(function(t){return t.transition().duration(w).attr("font-size",P).attr("transform",C).text(A)})},function(t){t.transition().duration(w).attr("fill",z).attr("font-family",b).attr("font-size",P).attr("transform",C).text(A)},function(t){t.transition().duration(w).attr("fill-opacity",0).remove()})}({callbacks:n,options:a,random:K,selection:h,words:e})}).start()}(L)}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 a=t.callbacks,i=t.maxWords,l=void 0===i?100:i,u=t.minSize,s=t.options,c=t.size,f=t.words,d=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"]),h=p({},I,a),x=p({},D,s),m=function(t,e,a){var i=n.useRef(),l=n.useState(e),u=l[0],s=l[1],c=n.useState(null),f=c[0],d=c[1];return n.useEffect(function(){var n=i.current,l=r.select(n).append("svg").style("display","block");"object"==typeof a&&Object.keys(a).forEach(function(t){l=l.attr(t,a[t])});var u=l.append("g");function c(t,e){l.attr("height",e).attr("width",t),u.attr("transform","translate("+t/2+", "+e/2+")"),s([t,e])}d(u);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 o(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),r.select(n).selectAll("*").remove()}},[e,t,a]),[i,f,u]}(u,c,s.svgAttributes),v=m[0],g=m[1],b=m[2],w=n.useRef(e(E,100));return n.useEffect(function(){g&&w.current({callbacks:h,maxWords:l,options:x,selection:g,size:b,words:f})},[l,h,x,g,b,f]),y.createElement("div",p({ref:v,style:{height:"100%",width:"100%"}},d))}L.defaultProps={callbacks:I,maxWords:100,minSize:[300,300],options:D},t.default=L,t.defaultCallbacks=I,t.defaultOptions=D});
//# sourceMappingURL=index.umd.js.map