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