UNPKG

react-wordcloud-fork

Version:

Simple React + D3 wordcloud component with powerful features.

3 lines (2 loc) 13.2 kB
!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).reactWordcloudFork={},t.debounce,t.react,t.d3Selection,t.resizeObserverPolyfill,0,t.d3Array,t.d3Cloud,t.clonedeep,t.seedrandom,t.tippy_js,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 p="default"in n?n.default:n;function y(){return(y=Object.assign?Object.assign.bind():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)}function m(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}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 v(t){return t.text}function g(){return"serif"}function b(){return"normal"}function w(t){return Math.sqrt(t.value)}function M(){return 30*(~~(6*Math.random())-3)}function k(){return 1}function O(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),p=c*h,y=c*d,m=f*h,v=f*d;c=Math.max(Math.abs(p+v),Math.abs(p-v))+31>>5<<5,f=~~Math.max(Math.abs(y+m),Math.abs(y-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,M=(f=e.y1-e.y0,0);M<f*w;M++)b[M]=0;if(null==(i=e.xoff))return;l=e.yoff;for(var k=0,O=-1,z=0;z<f;z++){for(M=0;M<c;M++){var W=g[2048*(l+z)+(i+M)<<2]?1<<31-M%32:0;b[w*z+(M>>5)]|=W,k|=W}k?O=z:(e.y0++,f--,z--,l++)}e.y1=e.y0+O,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),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 W(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 C(t){return"function"==typeof t?t:function(){return t}}var T={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 j(t,e){return t[Math.floor(e()*t.length)]}function E(t){return t.size+"px"}function R(t){return t.text}function A(t){return"translate("+t.x+", "+t.y+")"+("number"==typeof t.rotate?"rotate("+t.rotate+")":"")}function F(t){var e,n=t.callbacks,o=t.maxWords,a=t.options,c=t.selection,h=t.size,p=t.onRendered,y=t.wordsToBlock,m=a.deterministic,x=a.enableOptimizations,F=a.fontFamily,P=a.fontStyle,B=a.fontSizes,I=a.fontWeight,L=a.padding,H=a.randomSeed,D=a.rotations,N=a.rotationAngles,U=a.spiral,_=a.scale,G=t.words.concat().sort(function(t,e){return i.descending(t.value,e.value)}).slice(0,o),J=s(m?H||"deterministic":null);(e=x?function(){var t=[256,256],e=v,n=g,r=w,o=b,a=b,i=M,l=k,u=S,s=[],c=Infinity,d=f.dispatch("word","end"),h=Math.random,p={},y=q,m=!1;function x(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]),p=u(t),y=h()<.5?1:-1,m=-y;(o=p(m+=y))&&(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&&!((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 x,v=n.sprite,g=n.width>>5,b=t[0]>>5,w=n.x-(g<<4),M=127&w,k=32-M,O=n.y1-n.y0,W=(n.y+n.y0)*b+(w>>5),S=0;S<O;S++){x=0;for(var q=0;q<=g;q++)e[W+q]|=x<<k|(q<g?(x=v[S*g+q])>>>M:0);W+=b}return delete n.sprite,!0}return!1}return p.canvas=function(t){return arguments.length?(y=C(t),p):y},p.start=function(){var u=function(t){t.width=t.height=1;var e=Math.sqrt(t.getContext("2d",{willReadFrequently:!0}).getImageData(0,0,1,1).data.length>>2);t.width=2048/e,t.height=2048/e;var n=t.getContext("2d",{willReadFrequently:!0});return n.fillStyle=n.strokeStyle="red",n.textAlign="center",{context:n,ratio:e}}(y()),c=new Uint32Array((t[0]>>5)*t[1]),f=null,v=[],g=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=g[r];o.x=t[0]*(h()+.5)>>1,o.y=t[1]*(h()+.5)>>1,O(u,o,g,r),o.hasText&&x(c,o,f)&&(v.push(o),d.call("word",p,o),f?W(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),m||(o<s.length?setTimeout(function(){return e(n+1)},0):(p.stop(),d.call("end",p,v,f)))}(0)},0),p},p.revive=function(){return m=!1,p},p.stop=function(){return m=!0,p},p.timeInterval=function(t){return arguments.length?(c=null==t?Infinity:t,p):c},p.words=function(t){return arguments.length?(s=t,p):s},p.size=function(e){return arguments.length?(t=[+e[0],+e[1]],p):t},p.font=function(t){return arguments.length?(n=C(t),p):n},p.fontStyle=function(t){return arguments.length?(o=C(t),p):o},p.fontWeight=function(t){return arguments.length?(a=C(t),p):a},p.rotate=function(t){return arguments.length?(i=C(t),p):i},p.text=function(t){return arguments.length?(e=C(t),p):e},p.spiral=function(t){return arguments.length?(u=T[t]||t,p):u},p.fontSize=function(t){return arguments.length?(r=C(t),p):r},p.padding=function(t){return arguments.length?(l=C(t),p):l},p.random=function(t){return arguments.length?(h=t,p):h},p.on=function(){var t=d.on.apply(d,arguments);return t===d?p:t},p}():l()).size(h).padding(L).words(u(G)).rotate(function(){return void 0===D?30*(~~(6*J())-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 j(r,n)}(D,N,J)}).spiral(U).random(J).text(R).font(F).fontStyle(P).fontWeight(I),function t(o,l){void 0===l&&(l=1),x&&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)}(G,o,_)(t.value)}).on("end",function(e){if(G.length!==e.length&&l<=10){10===l&&console.warn("Unable to layout "+(G.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=t.callbacks,n=t.options,o=t.random,a=t.selection,i=t.words,l=t.onRendered,u=e.getWordColor,s=e.onWordClick,c=e.onWordMouseOut,f=e.onWordMouseOver,d=n.colors,h=n.fontStyle,p=n.fontWeight,y=n.textAttributes,m=n.fontFamily,x=n.transitionDuration;function v(t){return u?u(t):j(d,o)}a.selectAll("text").data(i).join(function(t){var e=t.append("text").on("click",function(t){s&&s(t,r.event)}).on("mouseover",function(t){f&&f(t,r.event)}).on("mouseout",function(t){c&&c(t,r.event)}).attr("cursor",s?"pointer":"default").attr("fill",v).attr("font-family",m).attr("font-style",h).attr("font-weight",p).attr("text-anchor","middle").attr("transform","translate(0, 0) rotate(0)");"object"==typeof y&&Object.keys(y).forEach(function(t){e=e.attr(t,y[t])}),e=e.call(function(t){return t.transition().duration(x).attr("font-size",E).attr("transform",A).text(R)})},function(t){t.transition().duration(x).attr("fill",v).attr("font-family",m).attr("font-size",E).attr("transform",A).text(R)},function(t){t.transition().duration(x).attr("fill-opacity",0).remove()}),l(a)}({callbacks:n,options:a,random:J,selection:c,words:e,onRendered:p,wordsToBlock:y})}).start()}(B)}var P=["callbacks","maxWords","minSize","options","size","words","selectedWordsCloud","wordsToBlock","wordsToHighlight"],B=["onWordMouseOver","onWordMouseOut","onWordClick"],I={getWordTooltip:function(t){return t.text+" ("+t.value+")"}},L={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 H(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=t.selectedWordsCloud,h=t.wordsToBlock,x=t.wordsToHighlight,v=m(t,P),g=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 p=new o(function(t){if(t&&0!==t.length&&void 0===e){var n=t[0].contentRect;c(n.width,n.height)}});return p.observe(n),function(){p.unobserve(n),r.select(n).selectAll("*").remove()}},[e,t,a]),[i,f,u]}(u,c,s.svgAttributes),b=g[0],w=g[1],M=g[2],k=n.useRef(e(F,100)),O=n.useState(null)[1],z=n.useState(!1),W=z[0],S=z[1];n.useEffect(function(){w&&w.selectAll("text").on("mouseover",function(t,e){var n=a.onWordMouseOver;O({element:this,props:t}),n&&n(t)}).on("mouseout",function(t,e){var n=a.onWordMouseOut;O(null),n&&n(t)})},[W,d]),n.useEffect(function(){w&&w.selectAll("text").attr("selected",function(){var t=this.innerHTML;return d.some(function(e){return e.props.text===t})?"true":""}).attr("blocked",function(){return null!=h&&h.includes(this.innerHTML)?"true":""}).attr("name",function(){var t,e=this.innerHTML;return(null==x||null==(t=x.find(function(t){return t.text===e}))?void 0:t.name)||""}).on("click",function(t,e){var n=a.onWordClick;!n||null!=h&&h.includes(t.text)||n({element:this,props:t})})},[W,d]);var q=n.useCallback(function(){S(!0)},[]),C=n.useMemo(function(){return d.filter(function(t){return t.element}).map(function(t){var e,n=t.element.parentElement,r=t.element.getBoundingClientRect(),o=r.left,a=r.top,i=r.width,l=n.getBoundingClientRect(),u=l.left,c=l.top,f=n.parentElement.getBoundingClientRect(),d=u-f.left,h=c-f.top,y=s.fontSizes,m=s.fontFamily,x=s.tagFontSize,v=t.props.size,g=null==(e=t.element.getAttribute("transform"))?void 0:e.includes("rotate"),b={backgroundColor:"#FFF",border:"1px solid",borderRadius:"20px",boxSizing:"border-box",padding:"2px 4px",position:"absolute",fontSize:x||"7px",fontFamily:m,right:g?Math.abs(y[0]-v)/2+"px":"0px",bottom:g?"5px":(y[0]-v)/2+"px"};return p.createElement("span",{style:{position:"absolute",left:o-u+d+"px",top:a-c+h+"px",textAlign:"right",width:i}},p.createElement("span",{style:b},t.props.value))})},[d,W]);return n.useEffect(function(){if(w){S(!1);var t=m(a,B),e=y({},I,{onWordClick:void 0,onWordMouseOver:void 0,onWordMouseOut:void 0},t),n=y({},L,s);k.current({callbacks:e,maxWords:l,options:n,selection:w,size:M,words:f,wordsToBlock:h,onRendered:q})}},[l,s,w,M,f,q]),p.createElement("div",{className:"ReactWordCloud",style:{height:"100%",width:"100%",position:"relative"}},p.createElement("div",y({ref:b,style:{height:"100%",width:"100%"}},v)),C)}H.defaultProps={callbacks:I,maxWords:100,minSize:[300,300],options:L,selectedWordsCloud:[]},t.default=H,t.defaultCallbacks=I,t.defaultOptions=L}); //# sourceMappingURL=index.umd.js.map