react-wordcloud-fork
Version:
Simple React + D3 wordcloud component with powerful features.
3 lines (2 loc) • 12.3 kB
JavaScript
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"),i=t(require("resize-observer-polyfill"));require("d3-transition");var a=require("d3-array"),u=t(require("d3-cloud")),l=t(require("lodash.clonedeep")),s=t(require("seedrandom"));require("tippy.js");var c=require("d3-dispatch"),f=require("d3-scale"),d=require("d3-scale-chromatic");function h(){return(h=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 p(t,e){if(null==t)return{};var n,r,o={},i=Object.keys(t);for(r=0;r<i.length;r++)e.indexOf(n=i[r])>=0||(o[n]=t[n]);return o}var x=Math.PI/180;function v(t){return t.text}function m(){return"serif"}function y(){return"normal"}function g(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,i=t.ratio;o.clearRect(0,0,2048/i,2048/i);var a=0,u=0,l=0,s=n.length;for(--r;++r<s;){e=n[r],o.save(),o.font=e.style+" "+e.weight+" "+~~((e.size+1)/i)+"px "+e.font;var c=o.measureText(e.text+"m").width*i,f=e.size<<1;if(e.rotate){var d=Math.sin(e.rotate*x),h=Math.cos(e.rotate*x),p=c*h,v=c*d,m=f*h,y=f*d;c=Math.max(Math.abs(p+y),Math.abs(p-y))+31>>5<<5,f=~~Math.max(Math.abs(v+m),Math.abs(v-m))}else c=c+31>>5<<5;if(f>l&&(l=f),a+c>=2048&&(a=0,u+=l,l=0),u+f>=2048)break;o.translate((a+(c>>1))/i,(u+(f>>1))/i),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=a,e.yoff=u,e.x1=c>>1,e.y1=f>>1,e.x0=-e.x1,e.y0=-e.y1,e.hasText=!0,a+=c}for(var g=o.getImageData(0,0,2048/i,2048/i).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==(a=e.xoff))return;u=e.yoff;for(var k=0,z=-1,W=0;W<f;W++){for(M=0;M<c;M++){var S=g[2048*(u+W)+(a+M)<<2]?1<<31-M%32:0;b[w*W+(M>>5)]|=S,k|=S}k?z=W:(e.y0++,f--,W--,u++)}e.y1=e.y0+z,e.sprite=b.slice(0,(e.y1-e.y0)*w)}}}function k(t,e,n){for(var r,o=t.sprite,i=t.width>>5,a=t.x-(i<<4),u=127&a,l=32-u,s=t.y1-t.y0,c=(t.y+t.y0)*(n>>=5)+(a>>5),f=0;f<s;f++){r=0;for(var d=0;d<=i;d++)if((r<<l|(d<i?(r=o[f*i+d])>>>u:0))&e[c+d])return!0;c+=n}return!1}function z(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 W(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 q(t){return"function"==typeof t?t:function(){return t}}var O={archimedean:W,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 C(t){return t.size+"px"}function E(t){return t.text}function R(t){return"translate("+t.x+", "+t.y+")"+("number"==typeof t.rotate?"rotate("+t.rotate+")":"")}function A(t){var e,n=t.callbacks,r=t.maxWords,i=t.options,d=t.selection,h=t.size,p=t.onRendered,x=t.wordsToBlock,A=i.deterministic,j=i.enableOptimizations,F=i.fontFamily,B=i.fontStyle,I=i.fontSizes,L=i.fontWeight,H=i.padding,D=i.randomSeed,N=i.rotations,P=i.rotationAngles,U=i.spiral,G=i.scale,J=t.words.concat().sort(function(t,e){return a.descending(t.value,e.value)}).slice(0,r),K=s(A?D||"deterministic":null);(e=j?function(){var t=[256,256],e=v,n=m,r=g,o=y,i=y,a=b,u=w,l=W,s=[],f=Infinity,d=c.dispatch("word","end"),h=Math.random,p={},x=S,T=!1;function C(e,n,r){for(var o,i,a,u,s,c=n.x,f=n.y,d=Math.sqrt(t[0]*t[0]+t[1]*t[1]),p=l(t),x=h()<.5?1:-1,v=-x;(o=p(v+=x))&&(i=~~o[0],a=~~o[1],!(Math.min(Math.abs(i),Math.abs(a))>=d));)if(n.x=c+i,n.y=f+a,!(n.x+n.x0<0||n.y+n.y0<0||n.x+n.x1>t[0]||n.y+n.y1>t[1]||r&&k(n,e,t[0])||r&&!((u=n).x+u.x1>(s=r)[0].x&&u.x+u.x0<s[1].x&&u.y+u.y1>s[0].y&&u.y+u.y0<s[1].y))){for(var m,y=n.sprite,g=n.width>>5,b=t[0]>>5,w=n.x-(g<<4),M=127&w,z=32-M,W=n.y1-n.y0,S=(n.y+n.y0)*b+(w>>5),q=0;q<W;q++){m=0;for(var O=0;O<=g;O++)e[S+O]|=m<<z|(O<g?(m=y[q*g+O])>>>M:0);S+=b}return delete n.sprite,!0}return!1}return p.canvas=function(t){return arguments.length?(x=q(t),p):x},p.start=function(){var l=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}}(x()),c=new Uint32Array((t[0]>>5)*t[1]),f=null,v=[],m=s.map(function(t,l){return t.text=e.call(this,t,l),t.font=n.call(this,t,l),t.style=o.call(this,t,l),t.weight=i.call(this,t,l),t.rotate=a.call(this,t,l),t.size=~~r.call(this,t,l),t.padding=u.call(this,t,l),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=m[r];o.x=t[0]*(h()+.5)>>1,o.y=t[1]*(h()+.5)>>1,M(l,o,m,r),o.hasText&&C(c,o,f)&&(v.push(o),d.call("word",p,o),f?z(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<s.length?setTimeout(function(){return e(n+1)},0):(p.stop(),d.call("end",p,v,f)))}(0)},0),p},p.revive=function(){return T=!1,p},p.stop=function(){return T=!0,p},p.timeInterval=function(t){return arguments.length?(f=null==t?Infinity:t,p):f},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=q(t),p):n},p.fontStyle=function(t){return arguments.length?(o=q(t),p):o},p.fontWeight=function(t){return arguments.length?(i=q(t),p):i},p.rotate=function(t){return arguments.length?(a=q(t),p):a},p.text=function(t){return arguments.length?(e=q(t),p):e},p.spiral=function(t){return arguments.length?(l=O[t]||t,p):l},p.fontSize=function(t){return arguments.length?(r=q(t),p):r},p.padding=function(t){return arguments.length?(u=q(t),p):u},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}():u()).size(h).padding(H).words(l(J)).rotate(function(){return void 0===N?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),i=e[0]+o;i<e[1];)r.push(i),i+=o}return T(r,n)}(N,P,K)}).spiral(U).random(K).text(E).font(F).fontStyle(B).fontWeight(L),function t(r,u){void 0===u&&(u=1),j&&e.revive(),e.fontSize(function(t){return function(t,e,n){var r,o=a.min(t,function(t){return Number(t.value)}),i=a.max(t,function(t){return Number(t.value)});switch(n){case"log":r=f.scaleLog;break;case"sqrt":r=f.scaleSqrt;break;case"linear":default:r=f.scaleLinear}return r().domain([o,i]).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 a=Math.max(.95*r[0],1);t([a,Math.max(.95*r[1],a)],u+1)}else!function(t){var e=t.callbacks,n=t.options,r=t.random,i=t.selection,a=t.words,u=t.onRendered,l=e.getWordColor,s=e.onWordClick,c=e.onWordMouseOut,f=e.onWordMouseOver,d=n.colors,h=n.fontStyle,p=n.fontWeight,x=n.textAttributes,v=n.fontFamily,m=n.transitionDuration;function y(t){return l?l(t):T(d,r)}i.selectAll("text").data(a).join(function(t){var e=t.append("text").on("click",function(t){s&&s(t,o.event)}).on("mouseover",function(t){f&&f(t,o.event)}).on("mouseout",function(t){c&&c(t,o.event)}).attr("cursor",s?"pointer":"default").attr("fill",y).attr("font-family",v).attr("font-style",h).attr("font-weight",p).attr("text-anchor","middle").attr("transform","translate(0, 0) rotate(0)");"object"==typeof x&&Object.keys(x).forEach(function(t){e=e.attr(t,x[t])}),e=e.call(function(t){return t.transition().duration(m).attr("font-size",C).attr("transform",R).text(E)})},function(t){t.transition().duration(m).attr("fill",y).attr("font-family",v).attr("font-size",C).attr("transform",R).text(E)},function(t){t.transition().duration(m).attr("fill-opacity",0).remove()}),u(i)}({callbacks:n,options:i,random:K,selection:d,words:e,onRendered:p,wordsToBlock:x})}).start()}(I)}var j=["callbacks","maxWords","minSize","options","size","words","selectedWordsCloud","wordsToBlock","wordsToHighlight"],F=["onWordMouseOver","onWordMouseOut","onWordClick"],B={getWordTooltip:function(t){return t.text+" ("+t.value+")"}},I={colors:a.range(20).map(function(t){return t.toString()}).map(f.scaleOrdinal(d.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,u=t.maxWords,l=void 0===u?100:u,s=t.minSize,c=t.options,f=t.size,d=t.words,x=t.selectedWordsCloud,v=t.wordsToBlock,m=t.wordsToHighlight,y=p(t,j),g=function(t,e,r){var a=n.useRef(),u=n.useState(e),l=u[0],s=u[1],c=n.useState(null),f=c[0],d=c[1];return n.useEffect(function(){var n=a.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 l=u.append("g");function c(t,e){u.attr("height",e).attr("width",t),l.attr("transform","translate("+t/2+", "+e/2+")"),s([t,e])}d(l);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 i(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),o.select(n).selectAll("*").remove()}},[e,t,r]),[a,f,l]}(s,f,c.svgAttributes),b=g[0],w=g[1],M=g[2],k=n.useRef(e(A,100)),z=n.useState(null)[1],W=n.useState(!1),S=W[0],q=W[1];n.useEffect(function(){w&&w.selectAll("text").on("mouseover",function(t,e){var n=a.onWordMouseOver;z({element:this,props:t}),n&&n(t)}).on("mouseout",function(t,e){var n=a.onWordMouseOut;z(null),n&&n(t)})},[S,x]),n.useEffect(function(){w&&w.selectAll("text").attr("selected",function(){var t=this.innerHTML;return x.some(function(e){return e.props.text===t})?"true":""}).attr("blocked",function(){return null!=v&&v.includes(this.innerHTML)?"true":""}).attr("name",function(){var t,e=this.innerHTML;return(null==m||null==(t=m.find(function(t){return t.text===e}))?void 0:t.name)||""}).on("click",function(t,e){var n=a.onWordClick;!n||null!=v&&v.includes(t.text)||n({element:this,props:t})})},[S,x]);var O=n.useCallback(function(){q(!0)},[]),T=n.useMemo(function(){return x.filter(function(t){return t.element}).map(function(t){var e,n=t.element.parentElement,o=t.element.getBoundingClientRect(),i=o.left,a=o.top,u=o.width,l=n.getBoundingClientRect(),s=l.left,f=l.top,d=n.parentElement.getBoundingClientRect(),h=s-d.left,p=f-d.top,x=c.fontSizes,v=c.fontFamily,m=c.tagFontSize,y=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:m||"7px",fontFamily:v,right:g?Math.abs(x[0]-y)/2+"px":"0px",bottom:g?"5px":(x[0]-y)/2+"px"};return r.createElement("span",{style:{position:"absolute",left:i-s+h+"px",top:a-f+p+"px",textAlign:"right",width:u}},r.createElement("span",{style:b},t.props.value))})},[x,S]);return n.useEffect(function(){if(w){q(!1);var t=p(a,F),e=h({},B,{onWordClick:void 0,onWordMouseOver:void 0,onWordMouseOut:void 0},t),n=h({},I,c);k.current({callbacks:e,maxWords:l,options:n,selection:w,size:M,words:d,wordsToBlock:v,onRendered:O})}},[l,c,w,M,d,O]),r.createElement("div",{className:"ReactWordCloud",style:{height:"100%",width:"100%",position:"relative"}},r.createElement("div",h({ref:b,style:{height:"100%",width:"100%"}},y)),T)}L.defaultProps={callbacks:B,maxWords:100,minSize:[300,300],options:I,selectedWordsCloud:[]},exports.default=L,exports.defaultCallbacks=B,exports.defaultOptions=I;
//# sourceMappingURL=index.js.map