@aniruddha1806/bubble-chart/dist/cjs/index.js

A customizable, responsive bubble chart component for React with TypeScript support

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react/jsx-runtime"),i=require("react"),n=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return e.filter(Boolean).join(" ")};exports.BubbleChart=function(r){var o=r.data,s=r.width,a=void 0===s?"100%":s,c=r.height,l=void 0===c?400:c,u=r.colors,d=void 0===u?["#3b82f6","#60a5fa","#93c5fd","#bfdbfe","#dbeafe"]:u,x=r.backgroundColor,h=void 0===x?"transparent":x,f=r.className,b=void 0===f?"":f,p=r.bubbleClassName,g=void 0===p?"":p,v=r.tooltipClassName,y=void 0===v?"":v,m=r.xAxisLabel,j=void 0===m?"X-Axis":m,k=r.yAxisLabel,w=void 0===k?"Y-Axis":k,M=r.minRadius,A=void 0===M?10:M,S=r.maxRadius,C=void 0===S?50:S,_=r.showTooltip,L=void 0===_||_,z=r.formatValue,R=void 0===z?function(e){return e.toString()}:z,B=r.formatXAxisValue,N=r.formatYAxisValue,W=r.onBubbleClick,E=r.xAxisTicks,I=void 0===E?5:E,O=r.yAxisTicks,T=void 0===O?5:O,X=r.bubbleSizeMultiplier,Y=void 0===X?1:X,F=r.absoluteBubbleSize,V=void 0!==F&&F,q=r.tooltipContent,D=r.animated,U=void 0===D||D,H=r.animationDuration,P=void 0===H?800:H,G=i.useState({width:0,height:0}),J=G[0],K=G[1],Q=i.useState(null),Z=Q[0],$=Q[1],ee=i.useState({x:0,y:0}),te=ee[0],ie=ee[1],ne=i.useRef(null),re=i.useState(!1),oe=re[0],se=re[1],ae=i.useState(!1),ce=ae[0],le=ae[1],ue=i.useRef(null),de=i.useRef(null);i.useEffect((function(){var e=function(){if(ne.current){var e=ne.current.getBoundingClientRect(),t=e.width,i=e.height;K({width:t,height:i})}};return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[]),i.useEffect((function(){if(U){de.current&&clearTimeout(de.current);return ue.current=new IntersectionObserver((function(e){var t=e[0].isIntersecting;se(t),t&&(le(!1),de.current=setTimeout((function(){le(!0)}),100))}),{root:null,rootMargin:"0px",threshold:.1}),ne.current&&ue.current.observe(ne.current),function(){ue.current&&ue.current.disconnect(),de.current&&clearTimeout(de.current)}}}),[U]);var xe=o.map((function(e){return e.x})),he=o.map((function(e){return e.y})),fe=o.map((function(e){return e.size})),be=Math.min.apply(Math,xe),pe=Math.max.apply(Math,xe),ge=Math.min.apply(Math,he),ve=Math.max.apply(Math,he),ye=Math.min.apply(Math,fe),me=Math.max.apply(Math,fe),je=function(e){return 60+(e-be)/(pe-be||1)*(J.width-120)},ke=function(e){return J.height-60-(e-ge)/(ve-ge||1)*(J.height-120)},we=function(e,t){var i,n;$(t),ie({x:e.clientX-((null===(i=ne.current)||void 0===i?void 0:i.getBoundingClientRect().left)||0),y:e.clientY-((null===(n=ne.current)||void 0===n?void 0:n.getBoundingClientRect().top)||0)-10})},Me=function(e){var t,i;ie({x:e.clientX-((null===(t=ne.current)||void 0===t?void 0:t.getBoundingClientRect().left)||0),y:e.clientY-((null===(i=ne.current)||void 0===i?void 0:i.getBoundingClientRect().top)||0)-10})},Ae=function(){$(null)},Se=B||R,Ce=N||R,_e={container:{position:"relative",width:a,height:l,backgroundColor:h,borderRadius:"8px",padding:"8px",fontFamily:"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"},svg:{width:"100%",height:"100%",overflow:"visible"},tooltip:{position:"absolute",top:"".concat(te.y,"px"),left:"".concat(te.x,"px"),transform:"translate(-50%, -100%)",backgroundColor:"rgba(0, 0, 0, 0.8)",color:"white",padding:"8px 12px",borderRadius:"4px",fontSize:"14px",pointerEvents:"none",zIndex:10,whiteSpace:"nowrap",boxShadow:"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"},xAxis:{stroke:"#888",strokeWidth:1},yAxis:{stroke:"#888",strokeWidth:1},axisLabel:{fill:"#444",fontSize:"14px",fontWeight:"600"},tickLabel:{fill:"#666",fontSize:"11px"},gridLine:{stroke:"#e5e5e5",strokeWidth:1,strokeDasharray:"4,4"}},Le=function(e,t,i){var n=(t-e)/(i-1);return Array.from({length:i},(function(t,i){return Number((e+n*i).toFixed(2))}))},ze=Le(be,pe,I),Re=Le(ge,ve,T);return console.log("Animation state:",{isInView:oe,animationStarted:ce}),t.jsxs("div",e.__assign({ref:ne,className:n("bubble-chart-container",b),style:_e.container},{children:[J.width>0&&J.height>0&&t.jsxs("svg",e.__assign({style:_e.svg},{children:[ze.map((function(e,i){var n=je(e);return t.jsx("line",{x1:n,y1:60,x2:n,y2:J.height-60,style:_e.gridLine},"x-grid-".concat(i))})),Re.map((function(e,i){var n=ke(e);return t.jsx("line",{x1:60,y1:n,x2:J.width-60,y2:n,style:_e.gridLine},"y-grid-".concat(i))})),t.jsx("line",{x1:60,y1:J.height-60,x2:J.width-60,y2:J.height-60,style:_e.xAxis}),ze.map((function(i,n){var r=je(i);return t.jsxs("g",{children:[t.jsx("line",{x1:r,y1:J.height-60,x2:r,y2:J.height-55,stroke:"#888",strokeWidth:1}),t.jsx("text",e.__assign({x:r,y:J.height-40,textAnchor:"middle",style:_e.tickLabel},{children:Se(i)}))]},"x-tick-".concat(n))})),t.jsx("line",{x1:60,y1:60,x2:60,y2:J.height-60,style:_e.yAxis}),Re.map((function(i,n){var r=ke(i);return t.jsxs("g",{children:[t.jsx("line",{x1:55,y1:r,x2:60,y2:r,stroke:"#888",strokeWidth:1}),t.jsx("text",e.__assign({x:40,y:r+4,textAnchor:"end",style:_e.tickLabel},{children:Ce(i)}))]},"y-tick-".concat(n))})),t.jsx("text",e.__assign({x:J.width/2,y:J.height-10,textAnchor:"middle",style:_e.axisLabel},{children:j})),t.jsx("text",e.__assign({x:15,y:J.height/2,textAnchor:"middle",transform:"rotate(-90, 15, ".concat(J.height/2,")"),style:_e.axisLabel},{children:w})),"// Inside your BubbleChart component where the bubbles are rendered",o.map((function(e,i){var r,o=je(e.x),s=ke(e.y),a=(r=e.size,V?r*Y:ye===me?(A+C)/2:A+(r-ye)/(me-ye||1)*(C-A)*Y),c=e.color||d[i%d.length],l=U?50*i%500:0;if(!U)return t.jsxs("g",{children:[t.jsx("circle",{cx:o,cy:s,r:a+2,fill:c,opacity:.2}),t.jsx("circle",{cx:o,cy:s,r:a,fill:c,fillOpacity:.7,stroke:c,strokeWidth:1,className:n("bubble-chart-bubble",g),onMouseEnter:function(t){return we(t,e)},onMouseMove:Me,onMouseLeave:Ae,onClick:function(){return W&&W(e)},style:{cursor:W?"pointer":"default"}})]},i);var u=oe&&ce;return t.jsxs("g",{children:[t.jsx("circle",{cx:o,cy:s,r:u?a+2:0,fill:c,opacity:.2,style:{transition:"r ".concat(P,"ms cubic-bezier(0.25, 0.1, 0.25, 1) ").concat(l,"ms, opacity ").concat(P,"ms ease ").concat(l,"ms")}}),t.jsx("circle",{cx:o,cy:s,r:u?a:0,fill:c,fillOpacity:u?.7:0,stroke:c,strokeWidth:1,className:n("bubble-chart-bubble",g),onMouseEnter:function(t){return we(t,e)},onMouseMove:Me,onMouseLeave:Ae,onClick:function(){return W&&W(e)},style:{cursor:W?"pointer":"default",transition:"r ".concat(P,"ms cubic-bezier(0.25, 0.1, 0.25, 1) ").concat(l,"ms, fill-opacity ").concat(P,"ms ease ").concat(l,"ms")}})]},i)}))]})),L&&Z&&t.jsx("div",e.__assign({className:n("bubble-chart-tooltip",y),style:_e.tooltip},{children:q?q(Z):t.jsxs(t.Fragment,{children:[Z.label&&t.jsx("div",{children:t.jsx("strong",{children:Z.label})}),t.jsxs("div",{children:["X: ",Se(Z.x)]}),t.jsxs("div",{children:["Y: ",Ce(Z.y)]}),t.jsxs("div",{children:["Size: ",R(Z.size)]})]})}))]}))};
//# sourceMappingURL=index.js.map