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

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

import{__assign as t}from"tslib";import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import{useState as r,useRef as o,useEffect as a}from"react";var c=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return t.filter(Boolean).join(" ")},l=function(l){var s=l.data,u=l.width,d=void 0===u?"100%":u,h=l.height,x=void 0===h?400:h,f=l.colors,p=void 0===f?["#3b82f6","#60a5fa","#93c5fd","#bfdbfe","#dbeafe"]:f,b=l.backgroundColor,v=void 0===b?"transparent":b,y=l.className,g=void 0===y?"":y,m=l.bubbleClassName,k=void 0===m?"":m,w=l.tooltipClassName,M=void 0===w?"":w,A=l.xAxisLabel,C=void 0===A?"X-Axis":A,L=l.yAxisLabel,z=void 0===L?"Y-Axis":L,S=l.minRadius,B=void 0===S?10:S,R=l.maxRadius,N=void 0===R?50:R,W=l.showTooltip,I=void 0===W||W,T=l.formatValue,E=void 0===T?function(t){return t.toString()}:T,O=l.formatXAxisValue,X=l.formatYAxisValue,Y=l.onBubbleClick,V=l.xAxisTicks,F=void 0===V?5:V,j=l.yAxisTicks,D=void 0===j?5:j,U=l.bubbleSizeMultiplier,H=void 0===U?1:U,q=l.absoluteBubbleSize,G=void 0!==q&&q,J=l.tooltipContent,K=l.animated,P=void 0===K||K,Q=l.animationDuration,Z=void 0===Q?800:Q,$=r({width:0,height:0}),_=$[0],tt=$[1],et=r(null),it=et[0],nt=et[1],rt=r({x:0,y:0}),ot=rt[0],at=rt[1],ct=o(null),lt=r(!1),st=lt[0],ut=lt[1],dt=r(!1),ht=dt[0],xt=dt[1],ft=o(null),pt=o(null);a((function(){var t=function(){if(ct.current){var t=ct.current.getBoundingClientRect(),e=t.width,i=t.height;tt({width:e,height:i})}};return t(),window.addEventListener("resize",t),function(){window.removeEventListener("resize",t)}}),[]),a((function(){if(P){pt.current&&clearTimeout(pt.current);return ft.current=new IntersectionObserver((function(t){var e=t[0].isIntersecting;ut(e),e&&(xt(!1),pt.current=setTimeout((function(){xt(!0)}),100))}),{root:null,rootMargin:"0px",threshold:.1}),ct.current&&ft.current.observe(ct.current),function(){ft.current&&ft.current.disconnect(),pt.current&&clearTimeout(pt.current)}}}),[P]);var bt=s.map((function(t){return t.x})),vt=s.map((function(t){return t.y})),yt=s.map((function(t){return t.size})),gt=Math.min.apply(Math,bt),mt=Math.max.apply(Math,bt),kt=Math.min.apply(Math,vt),wt=Math.max.apply(Math,vt),Mt=Math.min.apply(Math,yt),At=Math.max.apply(Math,yt),Ct=function(t){return 60+(t-gt)/(mt-gt||1)*(_.width-120)},Lt=function(t){return _.height-60-(t-kt)/(wt-kt||1)*(_.height-120)},zt=function(t,e){var i,n;nt(e),at({x:t.clientX-((null===(i=ct.current)||void 0===i?void 0:i.getBoundingClientRect().left)||0),y:t.clientY-((null===(n=ct.current)||void 0===n?void 0:n.getBoundingClientRect().top)||0)-10})},St=function(t){var e,i;at({x:t.clientX-((null===(e=ct.current)||void 0===e?void 0:e.getBoundingClientRect().left)||0),y:t.clientY-((null===(i=ct.current)||void 0===i?void 0:i.getBoundingClientRect().top)||0)-10})},Bt=function(){nt(null)},Rt=O||E,Nt=X||E,Wt={container:{position:"relative",width:d,height:x,backgroundColor:v,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(ot.y,"px"),left:"".concat(ot.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"}},It=function(t,e,i){var n=(e-t)/(i-1);return Array.from({length:i},(function(e,i){return Number((t+n*i).toFixed(2))}))},Tt=It(gt,mt,F),Et=It(kt,wt,D);return console.log("Animation state:",{isInView:st,animationStarted:ht}),e("div",t({ref:ct,className:c("bubble-chart-container",g),style:Wt.container},{children:[_.width>0&&_.height>0&&e("svg",t({style:Wt.svg},{children:[Tt.map((function(t,e){var n=Ct(t);return i("line",{x1:n,y1:60,x2:n,y2:_.height-60,style:Wt.gridLine},"x-grid-".concat(e))})),Et.map((function(t,e){var n=Lt(t);return i("line",{x1:60,y1:n,x2:_.width-60,y2:n,style:Wt.gridLine},"y-grid-".concat(e))})),i("line",{x1:60,y1:_.height-60,x2:_.width-60,y2:_.height-60,style:Wt.xAxis}),Tt.map((function(n,r){var o=Ct(n);return e("g",{children:[i("line",{x1:o,y1:_.height-60,x2:o,y2:_.height-55,stroke:"#888",strokeWidth:1}),i("text",t({x:o,y:_.height-40,textAnchor:"middle",style:Wt.tickLabel},{children:Rt(n)}))]},"x-tick-".concat(r))})),i("line",{x1:60,y1:60,x2:60,y2:_.height-60,style:Wt.yAxis}),Et.map((function(n,r){var o=Lt(n);return e("g",{children:[i("line",{x1:55,y1:o,x2:60,y2:o,stroke:"#888",strokeWidth:1}),i("text",t({x:40,y:o+4,textAnchor:"end",style:Wt.tickLabel},{children:Nt(n)}))]},"y-tick-".concat(r))})),i("text",t({x:_.width/2,y:_.height-10,textAnchor:"middle",style:Wt.axisLabel},{children:C})),i("text",t({x:15,y:_.height/2,textAnchor:"middle",transform:"rotate(-90, 15, ".concat(_.height/2,")"),style:Wt.axisLabel},{children:z})),"// Inside your BubbleChart component where the bubbles are rendered",s.map((function(t,n){var r,o=Ct(t.x),a=Lt(t.y),l=(r=t.size,G?r*H:Mt===At?(B+N)/2:B+(r-Mt)/(At-Mt||1)*(N-B)*H),s=t.color||p[n%p.length],u=P?50*n%500:0;if(!P)return e("g",{children:[i("circle",{cx:o,cy:a,r:l+2,fill:s,opacity:.2}),i("circle",{cx:o,cy:a,r:l,fill:s,fillOpacity:.7,stroke:s,strokeWidth:1,className:c("bubble-chart-bubble",k),onMouseEnter:function(e){return zt(e,t)},onMouseMove:St,onMouseLeave:Bt,onClick:function(){return Y&&Y(t)},style:{cursor:Y?"pointer":"default"}})]},n);var d=st&&ht;return e("g",{children:[i("circle",{cx:o,cy:a,r:d?l+2:0,fill:s,opacity:.2,style:{transition:"r ".concat(Z,"ms cubic-bezier(0.25, 0.1, 0.25, 1) ").concat(u,"ms, opacity ").concat(Z,"ms ease ").concat(u,"ms")}}),i("circle",{cx:o,cy:a,r:d?l:0,fill:s,fillOpacity:d?.7:0,stroke:s,strokeWidth:1,className:c("bubble-chart-bubble",k),onMouseEnter:function(e){return zt(e,t)},onMouseMove:St,onMouseLeave:Bt,onClick:function(){return Y&&Y(t)},style:{cursor:Y?"pointer":"default",transition:"r ".concat(Z,"ms cubic-bezier(0.25, 0.1, 0.25, 1) ").concat(u,"ms, fill-opacity ").concat(Z,"ms ease ").concat(u,"ms")}})]},n)}))]})),I&&it&&i("div",t({className:c("bubble-chart-tooltip",M),style:Wt.tooltip},{children:J?J(it):e(n,{children:[it.label&&i("div",{children:i("strong",{children:it.label})}),e("div",{children:["X: ",Rt(it.x)]}),e("div",{children:["Y: ",Nt(it.y)]}),e("div",{children:["Size: ",E(it.size)]})]})}))]}))};export{l as BubbleChart};
//# sourceMappingURL=index.js.map