bubble-chart-js 1.0.7 → 1.0.9

package/dist/bubbleChart.cjs.js

@@ -1 +1 @@
-(()=>{"use strict";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{BubbleChart:()=>h,initializeChart:()=>c});let n="default";function o(t){const e=document.body;e?e.firstChild?e.insertBefore(t,e.firstChild):e.appendChild(t):console.error("Body element not found.")}function i(t,e){const n=e.getBoundingClientRect();return{mouseX:t.clientX-n.left,mouseY:t.clientY-n.top}}function r(t,e,n){return n.find((n=>Math.hypot(t-n.x,e-n.y)<n.radius))||null}class a{}a.TRANSPARENT="transparent";const l={forceStrength:.008,iterations:1e3,damping:.65,boundaryForce:.02,centerForce:.12,centerAttraction:.8,centerDamping:.3,centerRadiusBuffer:35};function d(t,e=14,n=400){const o=n>=700?1.25:n>=500?1.1:1;return Math.min(e*o,t/2)}function s(t){if(!function(t){return t?!(!Array.isArray(t.data)||0===t.data.length)||(console.error("Invalid or empty data array"),!1):(console.error("Invalid config object"),!1)}(t))return;let e=function(t){var e,n;const o=document.getElementById(t.canvasContainerId);if(!o)return console.error(`Canvas container with ID '${t.canvasContainerId}' not found.`),null;const i=document.createElement("canvas");return i.width=o.offsetWidth,i.height=o.offsetHeight,console.log(t.canvasBackgroundColor),Object.assign(i.style,{border:(null===(e=t.canvasBorderColor)||void 0===e?void 0:e.trim())?`1px solid #${t.canvasBorderColor}`:a.TRANSPARENT,background:(null===(n=t.canvasBackgroundColor)||void 0===n?void 0:n.trim())?`#${t.canvasBackgroundColor}`:a.TRANSPARENT,width:"100%",height:"100%",display:"block",imageRendering:"crisp-edges",aspectRatio:"1 / 1"}),i.style.setProperty("image-rendering","-moz-crisp-edges"),i.style.setProperty("image-rendering","-webkit-optimize-contrast"),i.style.setProperty("-ms-interpolation-mode","nearest-neighbor"),o.appendChild(i),i}(t);if(!e)return;const s=e.getContext("2d");if(!s)return void console.error("Invalid context");const u=function(t,e,n){const o=Math.min((e.width-10)/2,(e.height-10)/2),i=window.devicePixelRatio||1,r=e.getBoundingClientRect();e.width=r.width*i,e.height=r.height*i,e.style.width=r.width+"px",e.style.height=r.height+"px",n.scale(i,i);const a=r.width/2,d=r.height/2,s=[...t.data].sort(((t,e)=>e.value-t.value)).map((t=>Object.assign(Object.assign({},t),{radius:0,x:0,y:0,fixed:!1}))),u=s[0].value,c=Math.min(.5*o,70),h=Math.max(.3*c,25);s.forEach((t=>{const n=t.value/u;t.radius=h+n*(c-h),t.radius=Math.min(t.radius,(e.width-10)/2,(e.height-10)/2)})),s.forEach(((t,n)=>{if(0===n)t.x=a,t.y=d,t.fixed=!0;else{const o=s[0].radius+t.radius+3,i=Math.PI*(3-Math.sqrt(5)),r=e.width-5-t.radius,l=e.height-5-t.radius;t.x=Math.min(r,Math.max(5+t.radius,a+Math.cos(i*n)*o)),t.y=Math.min(l,Math.max(5+t.radius,d+Math.sin(i*n)*o)),t.fixed=!1}}));for(let t=0;t<l.iterations;t++)s.forEach(((t,n)=>{if(0===n){const e=a-t.x,n=d-t.y;return void(Math.hypot(e,n)>2&&(t.x+=e*l.centerDamping,t.y+=n*l.centerDamping))}let o=0,i=0;const r=t.radius+5;t.x<r?o+=(r-t.x)*l.boundaryForce:t.x>e.width-r&&(o+=(e.width-r-t.x)*l.boundaryForce),s.forEach((e=>{if(t===e)return;const n=t.x-e.x,r=t.y-e.y,s=Math.hypot(n,r),c=t.radius+e.radius;if(s<1.5*c){const t=l.forceStrength*(c/Math.max(s,.1));o+=n/s*t,i+=r/s*t}const h=a-t.x,f=d-t.y,m=Math.hypot(h,f),v=t.value/u*.02;t.x+=h/m*v,t.y+=f/m*v}));const c=a-t.x,h=d-t.y,f=Math.hypot(c,h),m=s[0].radius+t.radius+l.centerRadiusBuffer,v=(l.centerForce,Math.pow(t.value/u,.3),l.centerAttraction*(1-t.value/u)*(1-Math.min(1,f/m)));t.x+=c*v,t.y+=h*v,t.x+=o*(1-l.damping),t.y+=i*(1-l.damping)})),s.forEach(((t,e)=>{s.forEach(((n,o)=>{if(e>=o)return;if(0===e||0===o){const o=0===e?t:n,i=0===e?n:t,r=i.x-o.x,a=i.y-o.y,l=Math.hypot(r,a),d=o.radius+i.radius+2;if(l<d){const t=d-l,e=Math.atan2(a,r);i.x+=Math.cos(e)*t*.7,i.y+=Math.sin(e)*t*.7}return}const i=t.x-n.x,r=t.y-n.y,a=Math.hypot(i,r),d=t.radius+n.radius-5;if(a<d){const e=(d-a)*(.3+5*l.forceStrength),o=Math.atan2(r,i),s=n.radius/(t.radius+n.radius);t.fixed||(t.x+=Math.cos(o)*e*s,t.y+=Math.sin(o)*e*s),n.fixed||(n.x-=Math.cos(o)*e*(1-s),n.y-=Math.sin(o)*e*(1-s))}}))}));return s.forEach((t=>{const n=Math.max(5+t.radius,Math.min(e.width-5-t.radius,t.x)),o=Math.max(5+t.radius,Math.min(e.height-5-t.radius,t.y));(!t.fixed||Math.hypot(t.x-n,t.y-o)>2)&&(t.x=n,t.y=o)})),s}(t,e,s);function c(){e&&s?(s.clearRect(0,0,e.width,e.height),u.forEach((e=>{const{x:n,y:o,radius:i,bubbleColor:r,borderColor:a,borderThickness:l,opacity:u,fontColor:c,fontFamily:h,fontSize:f,fontStyle:m,fontWeight:v,textAlign:g,textTransform:p,textBaseline:y}=function(t,e){var n,o,i,r,a,l,s,u,c,h,f;return{x:t.x,y:t.y,radius:Math.max(t.radius,e.minRadius),bubbleColor:null!==(n=t.bubbleColor)&&void 0!==n?n:e.defaultBubbleColor,borderColor:null!==(o=t.borderColor)&&void 0!==o?o:"black",borderThickness:null!==(i=t.borderThickness)&&void 0!==i?i:.25,opacity:null!==(r=t.opacity)&&void 0!==r?r:1,fontFamily:null!==(a=t.fontFamily)&&void 0!==a?a:e.defaultFontFamily,fontStyle:null!==(l=t.fontStyle)&&void 0!==l?l:"normal",fontWeight:null!==(s=t.fontWeight)&&void 0!==s?s:400,textAlign:null!==(u=t.textAlign)&&void 0!==u?u:"center",textTransform:null!==(c=t.textTransform)&&void 0!==c?c:"none",fontColor:null!==(h=t.fontColor)&&void 0!==h?h:e.defaultFontColor,textBaseline:null!==(f=t.textBaseline)&&void 0!==f?f:"middle",fontSize:d(t.radius,e.fontSize,t.fontWeight)}}(e,t);s.beginPath(),s.arc(n,o,i,0,2*Math.PI),s.fillStyle=r,s.fill(),s.strokeStyle=a,s.lineWidth=l,s.stroke(),s.fillStyle=c,s.font=`${m} ${v} ${f}px ${h}`,s.textAlign=g,s.textBaseline=y;let x=e.label||"";if("uppercase"===p?x=x.toUpperCase():"lowercase"===p?x=x.toLowerCase():"capitalize"===p&&(x=x.replace(/\b\w/g,(t=>t.toUpperCase()))),t.textWrap){const r=1.5*i-10,a=1.2*f,l=function(t,e,n,o,i,r,a=14,l=2,d=5,s=1.2,u=400,c="normal",h="Arial"){const f=1.5*(i-d),m=a*s,v=Math.max(1,Math.floor(f/m)),g="auto"===o||void 0===o?v:Math.min(o,v);n=Math.max(0,n-l);const p=e.split(" ");let y="";const x=[];let b=!1,C=!1;for(const e of p){const o=y?`${y} ${e}`:e;if(t.font=`${u||""} ${c||""} ${a}px ${h}`,t.measureText(o).width<=n)y=o;else if(y.trim()&&x.push(y),y=e,t.measureText(y).width>n){let e=y;for(;t.measureText(e+"...").width>n&&e.length>0;)e=e.slice(0,-1);x.push(e+"..."),C=!0;break}if(x.length>=g){b=!0;break}}if(y&&x.length<g&&!C&&x.push(y),b&&x.length>0){let e=x[x.length-1];for(;t.measureText(e+"...").width>n&&e.length>0;)e=e.slice(0,-1);x[x.length-1]=e+"..."}return x}(s,e.label,r,t.maxLines,i),d=o-(l.length-1)*a/2;l.forEach(((t,e)=>s.fillText(t,n,d+e*a)))}else s.fillText(e.label,n,o)}))):console.warn("canvas or ctx is not valid")}function h(){const n=document.getElementById(t.canvasContainerId);n&&e&&(e.width=n.offsetWidth,e.height=n.offsetHeight,c())}let f;t.isResizeCanvasOnWindowSizeChange&&(h(),window.addEventListener("resize",h)),c(),t.showToolTip&&(f=function(t){var e,n,i,r,a,l,d,s,u,c,h,f,m,v,g,p,y,x;const b=null===(n=null===(e=t.data[0].toolTipConfig)||void 0===e?void 0:e.tooltipFormattedData)||void 0===n?void 0:n.trim();if(b){const t=document.createElement("div");t.innerHTML=b.trim();const e=t.firstElementChild;return o(e),e}const C=document.createElement("div");C.id="bubbleChartTooltip",C.style.display="none";const M=null!==(i=null==t?void 0:t.tooltipOptions)&&void 0!==i?i:{},w=(t,e)=>"number"==typeof t?`${t}px`:null!=t?t:e;return Object.assign(C.style,{position:"absolute",padding:w(M.padding,"8px"),margin:w(M.margin,"0"),background:null!==(r=M.backgroundColor)&&void 0!==r?r:"rgba(0, 0, 0, 0.85)",color:null!==(a=M.fontColor)&&void 0!==a?a:"white",borderRadius:"4px",pointerEvents:null!==(l=M.pointerEvents)&&void 0!==l?l:"none",fontFamily:null!==(d=M.fontFamily)&&void 0!==d?d:"Arial, sans-serif",fontSize:w(M.fontSize,"14px"),fontWeight:String(null!==(s=M.fontWeight)&&void 0!==s?s:"400"),fontStyle:null!==(u=M.fontStyle)&&void 0!==u?u:"normal",textAlign:null!==(c=M.textAlign)&&void 0!==c?c:"left",textDecoration:null!==(h=M.textDecoration)&&void 0!==h?h:"none",textTransform:null!==(f=M.textTransform)&&void 0!==f?f:"none",letterSpacing:w(M.letterSpacing,"normal"),border:(()=>{var t;if(!M.borderStyle)return"none";const e=w(M.borderWidth,"1px"),n=null!==(t=M.borderColor)&&void 0!==t?t:"transparent";return`${e} ${M.borderStyle} ${n}`})(),boxShadow:null!==(m=M.boxShadow)&&void 0!==m?m:"none",opacity:String(null!==(v=M.opacity)&&void 0!==v?v:1),maxWidth:w(M.maxWidth,"200px"),minWidth:w(M.minWidth,"auto"),maxHeight:w(M.maxHeight,"none"),minHeight:w(M.minHeight,"auto"),zIndex:String(null!==(g=M.zIndex)&&void 0!==g?g:1e3),transition:null!==(p=M.transition)&&void 0!==p?p:"opacity 0.2s",transform:null!==(y=M.transform)&&void 0!==y?y:"none",backdropFilter:null!==(x=M.backdropFilter)&&void 0!==x?x:"none"}),o(C),C}(t));let m=null;if(e.addEventListener("mousemove",(o=>{m||(m=requestAnimationFrame((()=>{(function(t,e,o,a,l){const{mouseX:d,mouseY:s}=i(t,o),u=r(d,s,e);(null==l?void 0:l.cursorType)&&(n=null==l?void 0:l.cursorType),a&&(u?function(t,e,o,i){e&&e.value&&o&&i&&(o.style.cursor=n,i.style.display="block",i.innerHTML=function(t){var e,n,o;if(!t)return"";const i=null===(n=null===(e=t.toolTipConfig)||void 0===e?void 0:e.tooltipText)||void 0===n?void 0:n.trim();if(i)return`<div>${i}</div>`;const r=null===(o=t.label)||void 0===o?void 0:o.trim();return r?`<div>${r}<br>Value: ${t.value}</div>`:`<div>${t.value}</div>`}(e),i.style.left=`${t.pageX+15}px`,i.style.top=t.pageY-30+"px",i.style.zIndex="9999")}(t,u,o,a):(o.style.cursor="default",a.style.display="none"))})(o,u,e,f,t),m=null})))})),t.onBubbleClick){let n=null;e.addEventListener("click",(o=>{n||(n=requestAnimationFrame((()=>{!function(t,e,n,o){const{mouseX:a,mouseY:l}=i(t,n),d=r(a,l,e);null!=d&&o.onBubbleClick&&o.onBubbleClick(d,t)}(o,u,e,t),n=null})))}))}}const u={defaultBubbleColor:"#3498DB",defaultFontColor:"#ffffff",minRadius:10,maxLines:"auto",textWrap:!0,isResizeCanvasOnWindowSizeChange:!0,fontSize:14,defaultFontFamily:"Arial",showToolTip:!0};function c(t={}){var e,n;if(!t)return void console.error("Configuration is not valid. Chart initialization aborted.");if(!t.data||0===t.data.length)return void console.error("No valid data provided. Chart initialization aborted.");const o=(i=Object.assign({canvasContainerId:null!==(e=t.canvasContainerId)&&void 0!==e?e:"chart-container",data:null!==(n=t.data)&&void 0!==n?n:[]},t),Object.assign(Object.assign({},u),i));var i;return s(o),o}class h{constructor(t){const e=c(t);e&&(this.configuration=e)}render(){this.configuration&&s(this.configuration)}}window.initializeChart=c,module.exports=e})();
+(()=>{"use strict";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{BubbleChart:()=>h,initializeChart:()=>c});let n="default";function o(t){const e=document.body;e?e.querySelector("#bubbleChartTooltip")||e.prepend(t):console.error("Body element not found.")}function i(t,e){const n=e.getBoundingClientRect();return{mouseX:t.clientX-n.left,mouseY:t.clientY-n.top}}function a(t,e,n){return n.find((n=>Math.hypot(t-n.x,e-n.y)<n.radius))||null}class r{}r.TRANSPARENT="transparent";const l={forceStrength:.008,iterations:1e3,damping:.65,boundaryForce:.02,centerForce:.12,centerAttraction:.8,centerDamping:.3,centerRadiusBuffer:35};function s(t,e=14,n=400,o=6){const i=n>=700?1.25:n>=500?1.1:1,a=Math.min(t/o,t/1.2);let r=Math.min(e*i,a,.8*t);return r=Math.max(r,Math.max(8,t/6)),Math.round(r)}function d(t){if(!function(t){return t?!(!Array.isArray(t.data)||0===t.data.length)||(console.error("Invalid or empty data array"),!1):(console.error("Invalid config object"),!1)}(t))return;let e=function(t){var e,n;const o=document.getElementById(t.canvasContainerId);if(!o)return console.error(`Canvas container with ID '${t.canvasContainerId}' not found.`),null;if(o.querySelector("canvas"))return console.error("A canvas already exists inside the container."),null;const i=document.createElement("canvas");return i.width=o.offsetWidth,i.height=o.offsetHeight,Object.assign(i.style,{border:(null===(e=t.canvasBorderColor)||void 0===e?void 0:e.trim())?`1px solid #${t.canvasBorderColor}`:r.TRANSPARENT,background:(null===(n=t.canvasBackgroundColor)||void 0===n?void 0:n.trim())?`#${t.canvasBackgroundColor}`:r.TRANSPARENT,width:"100%",height:"100%",display:"block",imageRendering:"crisp-edges",aspectRatio:"1 / 1"}),i.style.setProperty("image-rendering","-moz-crisp-edges"),i.style.setProperty("image-rendering","-webkit-optimize-contrast"),i.style.setProperty("-ms-interpolation-mode","nearest-neighbor"),o.appendChild(i),i}(t);if(!e)return;const d=e.getContext("2d");if(!d)return void console.error("Invalid context");const u=function(t,e,n){const o=Math.min((e.width-10)/2,(e.height-10)/2),i=window.devicePixelRatio||1,a=e.getBoundingClientRect();e.width=a.width*i,e.height=a.height*i,e.style.width=a.width+"px",e.style.height=a.height+"px",n.scale(i,i);const r=a.width/2,s=a.height/2,d=[...t.data].sort(((t,e)=>e.value-t.value)).map((t=>Object.assign(Object.assign({},t),{radius:0,x:0,y:0,fixed:!1}))),u=d[0].value,c=Math.min(.5*o,.2*Math.min(e.width,e.height)),h=Math.max(.3*c,.05*Math.min(e.width,e.height));d.forEach((t=>{const n=t.value/u;t.radius=h+n*(c-h),t.radius=Math.min(t.radius,(e.width-10)/2,(e.height-10)/2)})),d.forEach(((t,n)=>{if(0===n)t.x=r,t.y=s,t.fixed=!0;else{const o=d[0].radius+t.radius+3,i=Math.PI*(3-Math.sqrt(5)),a=e.width-5-t.radius,l=e.height-5-t.radius;t.x=Math.min(a,Math.max(5+t.radius,r+Math.cos(i*n)*o)),t.y=Math.min(l,Math.max(5+t.radius,s+Math.sin(i*n)*o)),t.fixed=!1}}));for(let t=0;t<l.iterations;t++)d.forEach(((t,n)=>{if(0===n){const e=r-t.x,n=s-t.y;return void(Math.hypot(e,n)>2&&(t.x+=e*l.centerDamping,t.y+=n*l.centerDamping))}let o=0,i=0;const a=t.radius+5;t.x<a?o+=(a-t.x)*l.boundaryForce:t.x>e.width-a&&(o+=(e.width-a-t.x)*l.boundaryForce),d.forEach((e=>{if(t===e)return;const n=t.x-e.x,a=t.y-e.y,d=Math.hypot(n,a),c=t.radius+e.radius;if(d<1.5*c){const t=l.forceStrength*(c/Math.max(d,.1));o+=n/d*t,i+=a/d*t}const h=r-t.x,f=s-t.y,m=Math.hypot(h,f),v=t.value/u*.02;t.x+=h/m*v,t.y+=f/m*v}));const c=r-t.x,h=s-t.y,f=Math.hypot(c,h),m=d[0].radius+t.radius+l.centerRadiusBuffer,v=(l.centerForce,Math.pow(t.value/u,.3),l.centerAttraction*(1-t.value/u)*(1-Math.min(1,f/m)));t.x+=c*v,t.y+=h*v,t.x+=o*(1-l.damping),t.y+=i*(1-l.damping)})),d.forEach(((t,e)=>{d.forEach(((n,o)=>{if(e>=o)return;if(0===e||0===o){const o=0===e?t:n,i=0===e?n:t,a=i.x-o.x,r=i.y-o.y,l=Math.hypot(a,r),s=o.radius+i.radius+2;if(l<s){const t=s-l,e=Math.atan2(r,a);i.x+=Math.cos(e)*t*.7,i.y+=Math.sin(e)*t*.7}return}const i=t.x-n.x,a=t.y-n.y,r=Math.hypot(i,a),s=t.radius+n.radius-5;if(r<s){const e=(s-r)*(.3+5*l.forceStrength),o=Math.atan2(a,i),d=n.radius/(t.radius+n.radius);t.fixed||(t.x+=Math.cos(o)*e*d,t.y+=Math.sin(o)*e*d),n.fixed||(n.x-=Math.cos(o)*e*(1-d),n.y-=Math.sin(o)*e*(1-d))}}))}));return d.forEach((t=>{const n=Math.max(5+t.radius,Math.min(e.width-5-t.radius,t.x)),o=Math.max(5+t.radius,Math.min(e.height-5-t.radius,t.y));(!t.fixed||Math.hypot(t.x-n,t.y-o)>2)&&(t.x=n,t.y=o)})),d}(t,e,d);function c(){e&&d?(d.clearRect(0,0,e.width,e.height),u.forEach((e=>{const{x:n,y:o,radius:i,bubbleColor:a,borderColor:r,borderThickness:l,opacity:u,fontColor:c,fontFamily:h,fontSize:f,fontStyle:m,fontWeight:v,textAlign:g,textTransform:y,textBaseline:p}=function(t,e){var n,o,i,a,r,l,d,u,c,h,f,m;return{x:t.x,y:t.y,radius:Math.max(t.radius||0,e.minRadius||10),bubbleColor:null!==(o=null!==(n=t.bubbleColor)&&void 0!==n?n:e.defaultBubbleColor)&&void 0!==o?o:"#3498db",borderColor:null!==(i=t.borderColor)&&void 0!==i?i:"black",borderThickness:Math.max(null!==(a=t.borderThickness)&&void 0!==a?a:.25,0),opacity:void 0!==t.opacity?Math.max(0,Math.min(1,t.opacity)):1,fontStyle:t.fontStyle||"normal",fontWeight:"number"==typeof t.fontWeight&&t.fontWeight>=100&&t.fontWeight<=900?t.fontWeight:400,textAlign:null!==(r=t.textAlign)&&void 0!==r?r:"center",textTransform:null!==(l=t.textTransform)&&void 0!==l?l:"none",fontColor:null!==(u=null!==(d=t.fontColor)&&void 0!==d?d:e.defaultFontColor)&&void 0!==u?u:"#000",textBaseline:null!==(c=t.textBaseline)&&void 0!==c?c:"middle",fontSize:Math.max(s(t.radius||e.minRadius||10,null!==(h=e.fontSize)&&void 0!==h?h:14,null!==(f=t.fontWeight)&&void 0!==f?f:400),8),fontFamily:t.fontFamily&&"string"==typeof t.fontFamily&&"Arial"!==t.fontFamily?`${t.fontFamily}, Arial, sans-serif`:`${null!==(m=e.defaultFontFamily)&&void 0!==m?m:"Arial"}, sans-serif`}}(e,t);d.beginPath(),d.arc(n,o,i,0,2*Math.PI),d.fillStyle=a,d.fill(),d.strokeStyle=r,d.lineWidth=l,d.stroke();const x=`${m} ${v} ${f}px ${h}`;d.fillStyle=c,d.font=x,d.textAlign=g,d.textBaseline=p;let b=e.label||"";if("uppercase"===y?b=b.toUpperCase():"lowercase"===y?b=b.toLowerCase():"capitalize"===y&&(b=b.replace(/\b\w/g,(t=>t.toUpperCase()))),t.textWrap){const a=1.5*i-10,r=1.2*f,l=function(t,e,n,o,i,a=14,r=400,l="normal",s="Arial",d=0,u=5,c=1.2){const h=1.5*(i-u),f=a*c,m=Math.max(1,Math.floor(h/f)),v="auto"===o||void 0===o?m:Math.min(o,m);n=Math.max(0,n-d);const g=e.split(" ");let y="";const p=[];let x=!1,b=!1;for(const e of g){const o=y?`${y} ${e}`:e;if(t.font=`${r||""} ${l||""} ${a}px ${s}`,t.measureText(o).width<=n)y=o;else if(y.trim()&&p.push(y),y=e,t.measureText(y).width>n){let e=y;for(;t.measureText(e+"...").width>n&&e.length>0;)e=e.slice(0,-1);p.push(e+"..."),b=!0;break}if(p.length>=v){x=!0;break}}if(y&&p.length<v&&!b&&p.push(y),x&&p.length>0){let e=p[p.length-1];for(;t.measureText(e+"...").width>n&&e.length>0;)e=e.slice(0,-1);p[p.length-1]=e+"..."}return p}(d,e.label,a,t.maxLines,i,f,v,m,h),s=o-(l.length-1)*r/2;l.forEach(((t,e)=>d.fillText(t,n,s+e*r)))}else d.fillText(e.label,n,o)}))):console.warn("canvas or ctx is not valid")}function h(){const n=document.getElementById(t.canvasContainerId);n&&e&&(e.width=n.offsetWidth,e.height=n.offsetHeight,c())}let f;t.isResizeCanvasOnWindowSizeChange&&(h(),window.addEventListener("resize",h)),c(),t.showToolTip&&(f=function(t){var e,n,i,a,r,l,s,d,u,c,h,f,m,v,g,y,p,x;const b=null===(n=null===(e=t.data[0].toolTipConfig)||void 0===e?void 0:e.tooltipFormattedData)||void 0===n?void 0:n.trim();if(b){const t=document.createElement("div");t.innerHTML=b.trim();const e=t.firstElementChild;return o(e),e}const M=document.createElement("div");M.id="bubbleChartTooltip",M.style.display="none";const C=null!==(i=null==t?void 0:t.tooltipOptions)&&void 0!==i?i:{},w=(t,e)=>"number"==typeof t?`${t}px`:null!=t?t:e;return Object.assign(M.style,{position:"absolute",padding:w(C.padding,"8px"),margin:w(C.margin,"0"),background:null!==(a=C.backgroundColor)&&void 0!==a?a:"rgba(0, 0, 0, 0.85)",color:null!==(r=C.fontColor)&&void 0!==r?r:"white",borderRadius:"4px",pointerEvents:null!==(l=C.pointerEvents)&&void 0!==l?l:"none",fontFamily:null!==(s=C.fontFamily)&&void 0!==s?s:"Arial, sans-serif",fontSize:w(C.fontSize,"14px"),fontWeight:String(null!==(d=C.fontWeight)&&void 0!==d?d:"400"),fontStyle:null!==(u=C.fontStyle)&&void 0!==u?u:"normal",textAlign:null!==(c=C.textAlign)&&void 0!==c?c:"left",textDecoration:null!==(h=C.textDecoration)&&void 0!==h?h:"none",textTransform:null!==(f=C.textTransform)&&void 0!==f?f:"none",letterSpacing:w(C.letterSpacing,"normal"),border:(()=>{var t;if(!C.borderStyle)return"none";const e=w(C.borderWidth,"1px"),n=null!==(t=C.borderColor)&&void 0!==t?t:"transparent";return`${e} ${C.borderStyle} ${n}`})(),boxShadow:null!==(m=C.boxShadow)&&void 0!==m?m:"none",opacity:String(null!==(v=C.opacity)&&void 0!==v?v:1),maxWidth:w(C.maxWidth,"200px"),minWidth:w(C.minWidth,"auto"),maxHeight:w(C.maxHeight,"none"),minHeight:w(C.minHeight,"auto"),zIndex:String(null!==(g=C.zIndex)&&void 0!==g?g:1e3),transition:null!==(y=C.transition)&&void 0!==y?y:"opacity 0.2s",transform:null!==(p=C.transform)&&void 0!==p?p:"none",backdropFilter:null!==(x=C.backdropFilter)&&void 0!==x?x:"none"}),o(M),M}(t));let m=null;if(e.addEventListener("mousemove",(o=>{m||(m=requestAnimationFrame((()=>{(function(t,e,o,r,l){const{mouseX:s,mouseY:d}=i(t,o),u=a(s,d,e);(null==l?void 0:l.cursorType)&&(n=null==l?void 0:l.cursorType),r&&(u?function(t,e,o,i){e&&e.value&&o&&i&&(o.style.cursor=n,i.style.display="block",i.innerHTML=function(t){var e,n,o;if(!t)return"";const i=null===(n=null===(e=t.toolTipConfig)||void 0===e?void 0:e.tooltipText)||void 0===n?void 0:n.trim();if(i)return`<div>${i}</div>`;const a=null===(o=t.label)||void 0===o?void 0:o.trim();return a?`<div>${a}<br>Value: ${t.value}</div>`:`<div>${t.value}</div>`}(e),i.style.left=`${t.pageX+15}px`,i.style.top=t.pageY-30+"px",i.style.zIndex="9999")}(t,u,o,r):(o.style.cursor="default",r.style.display="none"))})(o,u,e,f,t),m=null})))})),t.onBubbleClick){let n=null;e.addEventListener("click",(o=>{n||(n=requestAnimationFrame((()=>{!function(t,e,n,o){const{mouseX:r,mouseY:l}=i(t,n),s=a(r,l,e);null!=s&&o.onBubbleClick&&o.onBubbleClick(s,t)}(o,u,e,t),n=null})))}))}}const u={defaultBubbleColor:"#3498DB",defaultFontColor:"#ffffff",minRadius:10,maxLines:"auto",textWrap:!0,isResizeCanvasOnWindowSizeChange:!0,fontSize:14,defaultFontFamily:"Arial",showToolTip:!0};function c(t={}){var e,n;if(!t)return void console.error("Configuration is not valid. Chart initialization aborted.");if(!t.data||0===t.data.length)return void console.error("No valid data provided. Chart initialization aborted.");const o=(i=Object.assign({canvasContainerId:null!==(e=t.canvasContainerId)&&void 0!==e?e:"chart-container",data:null!==(n=t.data)&&void 0!==n?n:[]},t),Object.assign(Object.assign({},u),i));var i;return d(o),o}class h{constructor(t){const e=c(t);e&&(this.configuration=e)}render(){this.configuration&&d(this.configuration)}}window.initializeChart=c,module.exports=e})();

package/dist/bubbleChart.esm.js

@@ -1 +1 @@
-var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{$:()=>h,s:()=>c});let n="default";function o(t){const e=document.body;e?e.firstChild?e.insertBefore(t,e.firstChild):e.appendChild(t):console.error("Body element not found.")}function i(t,e){const n=e.getBoundingClientRect();return{mouseX:t.clientX-n.left,mouseY:t.clientY-n.top}}function r(t,e,n){return n.find((n=>Math.hypot(t-n.x,e-n.y)<n.radius))||null}class a{}a.TRANSPARENT="transparent";const l={forceStrength:.008,iterations:1e3,damping:.65,boundaryForce:.02,centerForce:.12,centerAttraction:.8,centerDamping:.3,centerRadiusBuffer:35};function s(t,e=14,n=400){const o=n>=700?1.25:n>=500?1.1:1;return Math.min(e*o,t/2)}function d(t){if(!function(t){return t?!(!Array.isArray(t.data)||0===t.data.length)||(console.error("Invalid or empty data array"),!1):(console.error("Invalid config object"),!1)}(t))return;let e=function(t){var e,n;const o=document.getElementById(t.canvasContainerId);if(!o)return console.error(`Canvas container with ID '${t.canvasContainerId}' not found.`),null;const i=document.createElement("canvas");return i.width=o.offsetWidth,i.height=o.offsetHeight,console.log(t.canvasBackgroundColor),Object.assign(i.style,{border:(null===(e=t.canvasBorderColor)||void 0===e?void 0:e.trim())?`1px solid #${t.canvasBorderColor}`:a.TRANSPARENT,background:(null===(n=t.canvasBackgroundColor)||void 0===n?void 0:n.trim())?`#${t.canvasBackgroundColor}`:a.TRANSPARENT,width:"100%",height:"100%",display:"block",imageRendering:"crisp-edges",aspectRatio:"1 / 1"}),i.style.setProperty("image-rendering","-moz-crisp-edges"),i.style.setProperty("image-rendering","-webkit-optimize-contrast"),i.style.setProperty("-ms-interpolation-mode","nearest-neighbor"),o.appendChild(i),i}(t);if(!e)return;const d=e.getContext("2d");if(!d)return void console.error("Invalid context");const u=function(t,e,n){const o=Math.min((e.width-10)/2,(e.height-10)/2),i=window.devicePixelRatio||1,r=e.getBoundingClientRect();e.width=r.width*i,e.height=r.height*i,e.style.width=r.width+"px",e.style.height=r.height+"px",n.scale(i,i);const a=r.width/2,s=r.height/2,d=[...t.data].sort(((t,e)=>e.value-t.value)).map((t=>Object.assign(Object.assign({},t),{radius:0,x:0,y:0,fixed:!1}))),u=d[0].value,c=Math.min(.5*o,70),h=Math.max(.3*c,25);d.forEach((t=>{const n=t.value/u;t.radius=h+n*(c-h),t.radius=Math.min(t.radius,(e.width-10)/2,(e.height-10)/2)})),d.forEach(((t,n)=>{if(0===n)t.x=a,t.y=s,t.fixed=!0;else{const o=d[0].radius+t.radius+3,i=Math.PI*(3-Math.sqrt(5)),r=e.width-5-t.radius,l=e.height-5-t.radius;t.x=Math.min(r,Math.max(5+t.radius,a+Math.cos(i*n)*o)),t.y=Math.min(l,Math.max(5+t.radius,s+Math.sin(i*n)*o)),t.fixed=!1}}));for(let t=0;t<l.iterations;t++)d.forEach(((t,n)=>{if(0===n){const e=a-t.x,n=s-t.y;return void(Math.hypot(e,n)>2&&(t.x+=e*l.centerDamping,t.y+=n*l.centerDamping))}let o=0,i=0;const r=t.radius+5;t.x<r?o+=(r-t.x)*l.boundaryForce:t.x>e.width-r&&(o+=(e.width-r-t.x)*l.boundaryForce),d.forEach((e=>{if(t===e)return;const n=t.x-e.x,r=t.y-e.y,d=Math.hypot(n,r),c=t.radius+e.radius;if(d<1.5*c){const t=l.forceStrength*(c/Math.max(d,.1));o+=n/d*t,i+=r/d*t}const h=a-t.x,f=s-t.y,v=Math.hypot(h,f),m=t.value/u*.02;t.x+=h/v*m,t.y+=f/v*m}));const c=a-t.x,h=s-t.y,f=Math.hypot(c,h),v=d[0].radius+t.radius+l.centerRadiusBuffer,m=(l.centerForce,Math.pow(t.value/u,.3),l.centerAttraction*(1-t.value/u)*(1-Math.min(1,f/v)));t.x+=c*m,t.y+=h*m,t.x+=o*(1-l.damping),t.y+=i*(1-l.damping)})),d.forEach(((t,e)=>{d.forEach(((n,o)=>{if(e>=o)return;if(0===e||0===o){const o=0===e?t:n,i=0===e?n:t,r=i.x-o.x,a=i.y-o.y,l=Math.hypot(r,a),s=o.radius+i.radius+2;if(l<s){const t=s-l,e=Math.atan2(a,r);i.x+=Math.cos(e)*t*.7,i.y+=Math.sin(e)*t*.7}return}const i=t.x-n.x,r=t.y-n.y,a=Math.hypot(i,r),s=t.radius+n.radius-5;if(a<s){const e=(s-a)*(.3+5*l.forceStrength),o=Math.atan2(r,i),d=n.radius/(t.radius+n.radius);t.fixed||(t.x+=Math.cos(o)*e*d,t.y+=Math.sin(o)*e*d),n.fixed||(n.x-=Math.cos(o)*e*(1-d),n.y-=Math.sin(o)*e*(1-d))}}))}));return d.forEach((t=>{const n=Math.max(5+t.radius,Math.min(e.width-5-t.radius,t.x)),o=Math.max(5+t.radius,Math.min(e.height-5-t.radius,t.y));(!t.fixed||Math.hypot(t.x-n,t.y-o)>2)&&(t.x=n,t.y=o)})),d}(t,e,d);function c(){e&&d?(d.clearRect(0,0,e.width,e.height),u.forEach((e=>{const{x:n,y:o,radius:i,bubbleColor:r,borderColor:a,borderThickness:l,opacity:u,fontColor:c,fontFamily:h,fontSize:f,fontStyle:v,fontWeight:m,textAlign:g,textTransform:x,textBaseline:p}=function(t,e){var n,o,i,r,a,l,d,u,c,h,f;return{x:t.x,y:t.y,radius:Math.max(t.radius,e.minRadius),bubbleColor:null!==(n=t.bubbleColor)&&void 0!==n?n:e.defaultBubbleColor,borderColor:null!==(o=t.borderColor)&&void 0!==o?o:"black",borderThickness:null!==(i=t.borderThickness)&&void 0!==i?i:.25,opacity:null!==(r=t.opacity)&&void 0!==r?r:1,fontFamily:null!==(a=t.fontFamily)&&void 0!==a?a:e.defaultFontFamily,fontStyle:null!==(l=t.fontStyle)&&void 0!==l?l:"normal",fontWeight:null!==(d=t.fontWeight)&&void 0!==d?d:400,textAlign:null!==(u=t.textAlign)&&void 0!==u?u:"center",textTransform:null!==(c=t.textTransform)&&void 0!==c?c:"none",fontColor:null!==(h=t.fontColor)&&void 0!==h?h:e.defaultFontColor,textBaseline:null!==(f=t.textBaseline)&&void 0!==f?f:"middle",fontSize:s(t.radius,e.fontSize,t.fontWeight)}}(e,t);d.beginPath(),d.arc(n,o,i,0,2*Math.PI),d.fillStyle=r,d.fill(),d.strokeStyle=a,d.lineWidth=l,d.stroke(),d.fillStyle=c,d.font=`${v} ${m} ${f}px ${h}`,d.textAlign=g,d.textBaseline=p;let y=e.label||"";if("uppercase"===x?y=y.toUpperCase():"lowercase"===x?y=y.toLowerCase():"capitalize"===x&&(y=y.replace(/\b\w/g,(t=>t.toUpperCase()))),t.textWrap){const r=1.5*i-10,a=1.2*f,l=function(t,e,n,o,i,r,a=14,l=2,s=5,d=1.2,u=400,c="normal",h="Arial"){const f=1.5*(i-s),v=a*d,m=Math.max(1,Math.floor(f/v)),g="auto"===o||void 0===o?m:Math.min(o,m);n=Math.max(0,n-l);const x=e.split(" ");let p="";const y=[];let b=!1,C=!1;for(const e of x){const o=p?`${p} ${e}`:e;if(t.font=`${u||""} ${c||""} ${a}px ${h}`,t.measureText(o).width<=n)p=o;else if(p.trim()&&y.push(p),p=e,t.measureText(p).width>n){let e=p;for(;t.measureText(e+"...").width>n&&e.length>0;)e=e.slice(0,-1);y.push(e+"..."),C=!0;break}if(y.length>=g){b=!0;break}}if(p&&y.length<g&&!C&&y.push(p),b&&y.length>0){let e=y[y.length-1];for(;t.measureText(e+"...").width>n&&e.length>0;)e=e.slice(0,-1);y[y.length-1]=e+"..."}return y}(d,e.label,r,t.maxLines,i),s=o-(l.length-1)*a/2;l.forEach(((t,e)=>d.fillText(t,n,s+e*a)))}else d.fillText(e.label,n,o)}))):console.warn("canvas or ctx is not valid")}function h(){const n=document.getElementById(t.canvasContainerId);n&&e&&(e.width=n.offsetWidth,e.height=n.offsetHeight,c())}let f;t.isResizeCanvasOnWindowSizeChange&&(h(),window.addEventListener("resize",h)),c(),t.showToolTip&&(f=function(t){var e,n,i,r,a,l,s,d,u,c,h,f,v,m,g,x,p,y;const b=null===(n=null===(e=t.data[0].toolTipConfig)||void 0===e?void 0:e.tooltipFormattedData)||void 0===n?void 0:n.trim();if(b){const t=document.createElement("div");t.innerHTML=b.trim();const e=t.firstElementChild;return o(e),e}const C=document.createElement("div");C.id="bubbleChartTooltip",C.style.display="none";const M=null!==(i=null==t?void 0:t.tooltipOptions)&&void 0!==i?i:{},w=(t,e)=>"number"==typeof t?`${t}px`:null!=t?t:e;return Object.assign(C.style,{position:"absolute",padding:w(M.padding,"8px"),margin:w(M.margin,"0"),background:null!==(r=M.backgroundColor)&&void 0!==r?r:"rgba(0, 0, 0, 0.85)",color:null!==(a=M.fontColor)&&void 0!==a?a:"white",borderRadius:"4px",pointerEvents:null!==(l=M.pointerEvents)&&void 0!==l?l:"none",fontFamily:null!==(s=M.fontFamily)&&void 0!==s?s:"Arial, sans-serif",fontSize:w(M.fontSize,"14px"),fontWeight:String(null!==(d=M.fontWeight)&&void 0!==d?d:"400"),fontStyle:null!==(u=M.fontStyle)&&void 0!==u?u:"normal",textAlign:null!==(c=M.textAlign)&&void 0!==c?c:"left",textDecoration:null!==(h=M.textDecoration)&&void 0!==h?h:"none",textTransform:null!==(f=M.textTransform)&&void 0!==f?f:"none",letterSpacing:w(M.letterSpacing,"normal"),border:(()=>{var t;if(!M.borderStyle)return"none";const e=w(M.borderWidth,"1px"),n=null!==(t=M.borderColor)&&void 0!==t?t:"transparent";return`${e} ${M.borderStyle} ${n}`})(),boxShadow:null!==(v=M.boxShadow)&&void 0!==v?v:"none",opacity:String(null!==(m=M.opacity)&&void 0!==m?m:1),maxWidth:w(M.maxWidth,"200px"),minWidth:w(M.minWidth,"auto"),maxHeight:w(M.maxHeight,"none"),minHeight:w(M.minHeight,"auto"),zIndex:String(null!==(g=M.zIndex)&&void 0!==g?g:1e3),transition:null!==(x=M.transition)&&void 0!==x?x:"opacity 0.2s",transform:null!==(p=M.transform)&&void 0!==p?p:"none",backdropFilter:null!==(y=M.backdropFilter)&&void 0!==y?y:"none"}),o(C),C}(t));let v=null;if(e.addEventListener("mousemove",(o=>{v||(v=requestAnimationFrame((()=>{(function(t,e,o,a,l){const{mouseX:s,mouseY:d}=i(t,o),u=r(s,d,e);(null==l?void 0:l.cursorType)&&(n=null==l?void 0:l.cursorType),a&&(u?function(t,e,o,i){e&&e.value&&o&&i&&(o.style.cursor=n,i.style.display="block",i.innerHTML=function(t){var e,n,o;if(!t)return"";const i=null===(n=null===(e=t.toolTipConfig)||void 0===e?void 0:e.tooltipText)||void 0===n?void 0:n.trim();if(i)return`<div>${i}</div>`;const r=null===(o=t.label)||void 0===o?void 0:o.trim();return r?`<div>${r}<br>Value: ${t.value}</div>`:`<div>${t.value}</div>`}(e),i.style.left=`${t.pageX+15}px`,i.style.top=t.pageY-30+"px",i.style.zIndex="9999")}(t,u,o,a):(o.style.cursor="default",a.style.display="none"))})(o,u,e,f,t),v=null})))})),t.onBubbleClick){let n=null;e.addEventListener("click",(o=>{n||(n=requestAnimationFrame((()=>{!function(t,e,n,o){const{mouseX:a,mouseY:l}=i(t,n),s=r(a,l,e);null!=s&&o.onBubbleClick&&o.onBubbleClick(s,t)}(o,u,e,t),n=null})))}))}}const u={defaultBubbleColor:"#3498DB",defaultFontColor:"#ffffff",minRadius:10,maxLines:"auto",textWrap:!0,isResizeCanvasOnWindowSizeChange:!0,fontSize:14,defaultFontFamily:"Arial",showToolTip:!0};function c(t={}){var e,n;if(!t)return void console.error("Configuration is not valid. Chart initialization aborted.");if(!t.data||0===t.data.length)return void console.error("No valid data provided. Chart initialization aborted.");const o=(i=Object.assign({canvasContainerId:null!==(e=t.canvasContainerId)&&void 0!==e?e:"chart-container",data:null!==(n=t.data)&&void 0!==n?n:[]},t),Object.assign(Object.assign({},u),i));var i;return d(o),o}class h{constructor(t){const e=c(t);e&&(this.configuration=e)}render(){this.configuration&&d(this.configuration)}}window.initializeChart=c;var f=e.$,v=e.s;export{f as BubbleChart,v as initializeChart};
+var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{$:()=>h,s:()=>c});let n="default";function o(t){const e=document.body;e?e.querySelector("#bubbleChartTooltip")||e.prepend(t):console.error("Body element not found.")}function i(t,e){const n=e.getBoundingClientRect();return{mouseX:t.clientX-n.left,mouseY:t.clientY-n.top}}function a(t,e,n){return n.find((n=>Math.hypot(t-n.x,e-n.y)<n.radius))||null}class r{}r.TRANSPARENT="transparent";const l={forceStrength:.008,iterations:1e3,damping:.65,boundaryForce:.02,centerForce:.12,centerAttraction:.8,centerDamping:.3,centerRadiusBuffer:35};function s(t,e=14,n=400,o=6){const i=n>=700?1.25:n>=500?1.1:1,a=Math.min(t/o,t/1.2);let r=Math.min(e*i,a,.8*t);return r=Math.max(r,Math.max(8,t/6)),Math.round(r)}function d(t){if(!function(t){return t?!(!Array.isArray(t.data)||0===t.data.length)||(console.error("Invalid or empty data array"),!1):(console.error("Invalid config object"),!1)}(t))return;let e=function(t){var e,n;const o=document.getElementById(t.canvasContainerId);if(!o)return console.error(`Canvas container with ID '${t.canvasContainerId}' not found.`),null;if(o.querySelector("canvas"))return console.error("A canvas already exists inside the container."),null;const i=document.createElement("canvas");return i.width=o.offsetWidth,i.height=o.offsetHeight,Object.assign(i.style,{border:(null===(e=t.canvasBorderColor)||void 0===e?void 0:e.trim())?`1px solid #${t.canvasBorderColor}`:r.TRANSPARENT,background:(null===(n=t.canvasBackgroundColor)||void 0===n?void 0:n.trim())?`#${t.canvasBackgroundColor}`:r.TRANSPARENT,width:"100%",height:"100%",display:"block",imageRendering:"crisp-edges",aspectRatio:"1 / 1"}),i.style.setProperty("image-rendering","-moz-crisp-edges"),i.style.setProperty("image-rendering","-webkit-optimize-contrast"),i.style.setProperty("-ms-interpolation-mode","nearest-neighbor"),o.appendChild(i),i}(t);if(!e)return;const d=e.getContext("2d");if(!d)return void console.error("Invalid context");const u=function(t,e,n){const o=Math.min((e.width-10)/2,(e.height-10)/2),i=window.devicePixelRatio||1,a=e.getBoundingClientRect();e.width=a.width*i,e.height=a.height*i,e.style.width=a.width+"px",e.style.height=a.height+"px",n.scale(i,i);const r=a.width/2,s=a.height/2,d=[...t.data].sort(((t,e)=>e.value-t.value)).map((t=>Object.assign(Object.assign({},t),{radius:0,x:0,y:0,fixed:!1}))),u=d[0].value,c=Math.min(.5*o,.2*Math.min(e.width,e.height)),h=Math.max(.3*c,.05*Math.min(e.width,e.height));d.forEach((t=>{const n=t.value/u;t.radius=h+n*(c-h),t.radius=Math.min(t.radius,(e.width-10)/2,(e.height-10)/2)})),d.forEach(((t,n)=>{if(0===n)t.x=r,t.y=s,t.fixed=!0;else{const o=d[0].radius+t.radius+3,i=Math.PI*(3-Math.sqrt(5)),a=e.width-5-t.radius,l=e.height-5-t.radius;t.x=Math.min(a,Math.max(5+t.radius,r+Math.cos(i*n)*o)),t.y=Math.min(l,Math.max(5+t.radius,s+Math.sin(i*n)*o)),t.fixed=!1}}));for(let t=0;t<l.iterations;t++)d.forEach(((t,n)=>{if(0===n){const e=r-t.x,n=s-t.y;return void(Math.hypot(e,n)>2&&(t.x+=e*l.centerDamping,t.y+=n*l.centerDamping))}let o=0,i=0;const a=t.radius+5;t.x<a?o+=(a-t.x)*l.boundaryForce:t.x>e.width-a&&(o+=(e.width-a-t.x)*l.boundaryForce),d.forEach((e=>{if(t===e)return;const n=t.x-e.x,a=t.y-e.y,d=Math.hypot(n,a),c=t.radius+e.radius;if(d<1.5*c){const t=l.forceStrength*(c/Math.max(d,.1));o+=n/d*t,i+=a/d*t}const h=r-t.x,f=s-t.y,m=Math.hypot(h,f),v=t.value/u*.02;t.x+=h/m*v,t.y+=f/m*v}));const c=r-t.x,h=s-t.y,f=Math.hypot(c,h),m=d[0].radius+t.radius+l.centerRadiusBuffer,v=(l.centerForce,Math.pow(t.value/u,.3),l.centerAttraction*(1-t.value/u)*(1-Math.min(1,f/m)));t.x+=c*v,t.y+=h*v,t.x+=o*(1-l.damping),t.y+=i*(1-l.damping)})),d.forEach(((t,e)=>{d.forEach(((n,o)=>{if(e>=o)return;if(0===e||0===o){const o=0===e?t:n,i=0===e?n:t,a=i.x-o.x,r=i.y-o.y,l=Math.hypot(a,r),s=o.radius+i.radius+2;if(l<s){const t=s-l,e=Math.atan2(r,a);i.x+=Math.cos(e)*t*.7,i.y+=Math.sin(e)*t*.7}return}const i=t.x-n.x,a=t.y-n.y,r=Math.hypot(i,a),s=t.radius+n.radius-5;if(r<s){const e=(s-r)*(.3+5*l.forceStrength),o=Math.atan2(a,i),d=n.radius/(t.radius+n.radius);t.fixed||(t.x+=Math.cos(o)*e*d,t.y+=Math.sin(o)*e*d),n.fixed||(n.x-=Math.cos(o)*e*(1-d),n.y-=Math.sin(o)*e*(1-d))}}))}));return d.forEach((t=>{const n=Math.max(5+t.radius,Math.min(e.width-5-t.radius,t.x)),o=Math.max(5+t.radius,Math.min(e.height-5-t.radius,t.y));(!t.fixed||Math.hypot(t.x-n,t.y-o)>2)&&(t.x=n,t.y=o)})),d}(t,e,d);function c(){e&&d?(d.clearRect(0,0,e.width,e.height),u.forEach((e=>{const{x:n,y:o,radius:i,bubbleColor:a,borderColor:r,borderThickness:l,opacity:u,fontColor:c,fontFamily:h,fontSize:f,fontStyle:m,fontWeight:v,textAlign:g,textTransform:x,textBaseline:y}=function(t,e){var n,o,i,a,r,l,d,u,c,h,f,m;return{x:t.x,y:t.y,radius:Math.max(t.radius||0,e.minRadius||10),bubbleColor:null!==(o=null!==(n=t.bubbleColor)&&void 0!==n?n:e.defaultBubbleColor)&&void 0!==o?o:"#3498db",borderColor:null!==(i=t.borderColor)&&void 0!==i?i:"black",borderThickness:Math.max(null!==(a=t.borderThickness)&&void 0!==a?a:.25,0),opacity:void 0!==t.opacity?Math.max(0,Math.min(1,t.opacity)):1,fontStyle:t.fontStyle||"normal",fontWeight:"number"==typeof t.fontWeight&&t.fontWeight>=100&&t.fontWeight<=900?t.fontWeight:400,textAlign:null!==(r=t.textAlign)&&void 0!==r?r:"center",textTransform:null!==(l=t.textTransform)&&void 0!==l?l:"none",fontColor:null!==(u=null!==(d=t.fontColor)&&void 0!==d?d:e.defaultFontColor)&&void 0!==u?u:"#000",textBaseline:null!==(c=t.textBaseline)&&void 0!==c?c:"middle",fontSize:Math.max(s(t.radius||e.minRadius||10,null!==(h=e.fontSize)&&void 0!==h?h:14,null!==(f=t.fontWeight)&&void 0!==f?f:400),8),fontFamily:t.fontFamily&&"string"==typeof t.fontFamily&&"Arial"!==t.fontFamily?`${t.fontFamily}, Arial, sans-serif`:`${null!==(m=e.defaultFontFamily)&&void 0!==m?m:"Arial"}, sans-serif`}}(e,t);d.beginPath(),d.arc(n,o,i,0,2*Math.PI),d.fillStyle=a,d.fill(),d.strokeStyle=r,d.lineWidth=l,d.stroke();const p=`${m} ${v} ${f}px ${h}`;d.fillStyle=c,d.font=p,d.textAlign=g,d.textBaseline=y;let b=e.label||"";if("uppercase"===x?b=b.toUpperCase():"lowercase"===x?b=b.toLowerCase():"capitalize"===x&&(b=b.replace(/\b\w/g,(t=>t.toUpperCase()))),t.textWrap){const a=1.5*i-10,r=1.2*f,l=function(t,e,n,o,i,a=14,r=400,l="normal",s="Arial",d=0,u=5,c=1.2){const h=1.5*(i-u),f=a*c,m=Math.max(1,Math.floor(h/f)),v="auto"===o||void 0===o?m:Math.min(o,m);n=Math.max(0,n-d);const g=e.split(" ");let x="";const y=[];let p=!1,b=!1;for(const e of g){const o=x?`${x} ${e}`:e;if(t.font=`${r||""} ${l||""} ${a}px ${s}`,t.measureText(o).width<=n)x=o;else if(x.trim()&&y.push(x),x=e,t.measureText(x).width>n){let e=x;for(;t.measureText(e+"...").width>n&&e.length>0;)e=e.slice(0,-1);y.push(e+"..."),b=!0;break}if(y.length>=v){p=!0;break}}if(x&&y.length<v&&!b&&y.push(x),p&&y.length>0){let e=y[y.length-1];for(;t.measureText(e+"...").width>n&&e.length>0;)e=e.slice(0,-1);y[y.length-1]=e+"..."}return y}(d,e.label,a,t.maxLines,i,f,v,m,h),s=o-(l.length-1)*r/2;l.forEach(((t,e)=>d.fillText(t,n,s+e*r)))}else d.fillText(e.label,n,o)}))):console.warn("canvas or ctx is not valid")}function h(){const n=document.getElementById(t.canvasContainerId);n&&e&&(e.width=n.offsetWidth,e.height=n.offsetHeight,c())}let f;t.isResizeCanvasOnWindowSizeChange&&(h(),window.addEventListener("resize",h)),c(),t.showToolTip&&(f=function(t){var e,n,i,a,r,l,s,d,u,c,h,f,m,v,g,x,y,p;const b=null===(n=null===(e=t.data[0].toolTipConfig)||void 0===e?void 0:e.tooltipFormattedData)||void 0===n?void 0:n.trim();if(b){const t=document.createElement("div");t.innerHTML=b.trim();const e=t.firstElementChild;return o(e),e}const M=document.createElement("div");M.id="bubbleChartTooltip",M.style.display="none";const C=null!==(i=null==t?void 0:t.tooltipOptions)&&void 0!==i?i:{},w=(t,e)=>"number"==typeof t?`${t}px`:null!=t?t:e;return Object.assign(M.style,{position:"absolute",padding:w(C.padding,"8px"),margin:w(C.margin,"0"),background:null!==(a=C.backgroundColor)&&void 0!==a?a:"rgba(0, 0, 0, 0.85)",color:null!==(r=C.fontColor)&&void 0!==r?r:"white",borderRadius:"4px",pointerEvents:null!==(l=C.pointerEvents)&&void 0!==l?l:"none",fontFamily:null!==(s=C.fontFamily)&&void 0!==s?s:"Arial, sans-serif",fontSize:w(C.fontSize,"14px"),fontWeight:String(null!==(d=C.fontWeight)&&void 0!==d?d:"400"),fontStyle:null!==(u=C.fontStyle)&&void 0!==u?u:"normal",textAlign:null!==(c=C.textAlign)&&void 0!==c?c:"left",textDecoration:null!==(h=C.textDecoration)&&void 0!==h?h:"none",textTransform:null!==(f=C.textTransform)&&void 0!==f?f:"none",letterSpacing:w(C.letterSpacing,"normal"),border:(()=>{var t;if(!C.borderStyle)return"none";const e=w(C.borderWidth,"1px"),n=null!==(t=C.borderColor)&&void 0!==t?t:"transparent";return`${e} ${C.borderStyle} ${n}`})(),boxShadow:null!==(m=C.boxShadow)&&void 0!==m?m:"none",opacity:String(null!==(v=C.opacity)&&void 0!==v?v:1),maxWidth:w(C.maxWidth,"200px"),minWidth:w(C.minWidth,"auto"),maxHeight:w(C.maxHeight,"none"),minHeight:w(C.minHeight,"auto"),zIndex:String(null!==(g=C.zIndex)&&void 0!==g?g:1e3),transition:null!==(x=C.transition)&&void 0!==x?x:"opacity 0.2s",transform:null!==(y=C.transform)&&void 0!==y?y:"none",backdropFilter:null!==(p=C.backdropFilter)&&void 0!==p?p:"none"}),o(M),M}(t));let m=null;if(e.addEventListener("mousemove",(o=>{m||(m=requestAnimationFrame((()=>{(function(t,e,o,r,l){const{mouseX:s,mouseY:d}=i(t,o),u=a(s,d,e);(null==l?void 0:l.cursorType)&&(n=null==l?void 0:l.cursorType),r&&(u?function(t,e,o,i){e&&e.value&&o&&i&&(o.style.cursor=n,i.style.display="block",i.innerHTML=function(t){var e,n,o;if(!t)return"";const i=null===(n=null===(e=t.toolTipConfig)||void 0===e?void 0:e.tooltipText)||void 0===n?void 0:n.trim();if(i)return`<div>${i}</div>`;const a=null===(o=t.label)||void 0===o?void 0:o.trim();return a?`<div>${a}<br>Value: ${t.value}</div>`:`<div>${t.value}</div>`}(e),i.style.left=`${t.pageX+15}px`,i.style.top=t.pageY-30+"px",i.style.zIndex="9999")}(t,u,o,r):(o.style.cursor="default",r.style.display="none"))})(o,u,e,f,t),m=null})))})),t.onBubbleClick){let n=null;e.addEventListener("click",(o=>{n||(n=requestAnimationFrame((()=>{!function(t,e,n,o){const{mouseX:r,mouseY:l}=i(t,n),s=a(r,l,e);null!=s&&o.onBubbleClick&&o.onBubbleClick(s,t)}(o,u,e,t),n=null})))}))}}const u={defaultBubbleColor:"#3498DB",defaultFontColor:"#ffffff",minRadius:10,maxLines:"auto",textWrap:!0,isResizeCanvasOnWindowSizeChange:!0,fontSize:14,defaultFontFamily:"Arial",showToolTip:!0};function c(t={}){var e,n;if(!t)return void console.error("Configuration is not valid. Chart initialization aborted.");if(!t.data||0===t.data.length)return void console.error("No valid data provided. Chart initialization aborted.");const o=(i=Object.assign({canvasContainerId:null!==(e=t.canvasContainerId)&&void 0!==e?e:"chart-container",data:null!==(n=t.data)&&void 0!==n?n:[]},t),Object.assign(Object.assign({},u),i));var i;return d(o),o}class h{constructor(t){const e=c(t);e&&(this.configuration=e)}render(){this.configuration&&d(this.configuration)}}window.initializeChart=c;var f=e.$,m=e.s;export{f as BubbleChart,m as initializeChart};

package/dist/bubbleChart.umd.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("BubbleChart",[],e):"object"==typeof exports?exports.BubbleChart=e():t.BubbleChart=e()}(this,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{BubbleChart:()=>h,initializeChart:()=>c});let n="default";function o(t){const e=document.body;e?e.firstChild?e.insertBefore(t,e.firstChild):e.appendChild(t):console.error("Body element not found.")}function i(t,e){const n=e.getBoundingClientRect();return{mouseX:t.clientX-n.left,mouseY:t.clientY-n.top}}function r(t,e,n){return n.find((n=>Math.hypot(t-n.x,e-n.y)<n.radius))||null}class a{}a.TRANSPARENT="transparent";const l={forceStrength:.008,iterations:1e3,damping:.65,boundaryForce:.02,centerForce:.12,centerAttraction:.8,centerDamping:.3,centerRadiusBuffer:35};function d(t,e=14,n=400){const o=n>=700?1.25:n>=500?1.1:1;return Math.min(e*o,t/2)}function s(t){if(!function(t){return t?!(!Array.isArray(t.data)||0===t.data.length)||(console.error("Invalid or empty data array"),!1):(console.error("Invalid config object"),!1)}(t))return;let e=function(t){var e,n;const o=document.getElementById(t.canvasContainerId);if(!o)return console.error(`Canvas container with ID '${t.canvasContainerId}' not found.`),null;const i=document.createElement("canvas");return i.width=o.offsetWidth,i.height=o.offsetHeight,console.log(t.canvasBackgroundColor),Object.assign(i.style,{border:(null===(e=t.canvasBorderColor)||void 0===e?void 0:e.trim())?`1px solid #${t.canvasBorderColor}`:a.TRANSPARENT,background:(null===(n=t.canvasBackgroundColor)||void 0===n?void 0:n.trim())?`#${t.canvasBackgroundColor}`:a.TRANSPARENT,width:"100%",height:"100%",display:"block",imageRendering:"crisp-edges",aspectRatio:"1 / 1"}),i.style.setProperty("image-rendering","-moz-crisp-edges"),i.style.setProperty("image-rendering","-webkit-optimize-contrast"),i.style.setProperty("-ms-interpolation-mode","nearest-neighbor"),o.appendChild(i),i}(t);if(!e)return;const s=e.getContext("2d");if(!s)return void console.error("Invalid context");const u=function(t,e,n){const o=Math.min((e.width-10)/2,(e.height-10)/2),i=window.devicePixelRatio||1,r=e.getBoundingClientRect();e.width=r.width*i,e.height=r.height*i,e.style.width=r.width+"px",e.style.height=r.height+"px",n.scale(i,i);const a=r.width/2,d=r.height/2,s=[...t.data].sort(((t,e)=>e.value-t.value)).map((t=>Object.assign(Object.assign({},t),{radius:0,x:0,y:0,fixed:!1}))),u=s[0].value,c=Math.min(.5*o,70),h=Math.max(.3*c,25);s.forEach((t=>{const n=t.value/u;t.radius=h+n*(c-h),t.radius=Math.min(t.radius,(e.width-10)/2,(e.height-10)/2)})),s.forEach(((t,n)=>{if(0===n)t.x=a,t.y=d,t.fixed=!0;else{const o=s[0].radius+t.radius+3,i=Math.PI*(3-Math.sqrt(5)),r=e.width-5-t.radius,l=e.height-5-t.radius;t.x=Math.min(r,Math.max(5+t.radius,a+Math.cos(i*n)*o)),t.y=Math.min(l,Math.max(5+t.radius,d+Math.sin(i*n)*o)),t.fixed=!1}}));for(let t=0;t<l.iterations;t++)s.forEach(((t,n)=>{if(0===n){const e=a-t.x,n=d-t.y;return void(Math.hypot(e,n)>2&&(t.x+=e*l.centerDamping,t.y+=n*l.centerDamping))}let o=0,i=0;const r=t.radius+5;t.x<r?o+=(r-t.x)*l.boundaryForce:t.x>e.width-r&&(o+=(e.width-r-t.x)*l.boundaryForce),s.forEach((e=>{if(t===e)return;const n=t.x-e.x,r=t.y-e.y,s=Math.hypot(n,r),c=t.radius+e.radius;if(s<1.5*c){const t=l.forceStrength*(c/Math.max(s,.1));o+=n/s*t,i+=r/s*t}const h=a-t.x,f=d-t.y,m=Math.hypot(h,f),v=t.value/u*.02;t.x+=h/m*v,t.y+=f/m*v}));const c=a-t.x,h=d-t.y,f=Math.hypot(c,h),m=s[0].radius+t.radius+l.centerRadiusBuffer,v=(l.centerForce,Math.pow(t.value/u,.3),l.centerAttraction*(1-t.value/u)*(1-Math.min(1,f/m)));t.x+=c*v,t.y+=h*v,t.x+=o*(1-l.damping),t.y+=i*(1-l.damping)})),s.forEach(((t,e)=>{s.forEach(((n,o)=>{if(e>=o)return;if(0===e||0===o){const o=0===e?t:n,i=0===e?n:t,r=i.x-o.x,a=i.y-o.y,l=Math.hypot(r,a),d=o.radius+i.radius+2;if(l<d){const t=d-l,e=Math.atan2(a,r);i.x+=Math.cos(e)*t*.7,i.y+=Math.sin(e)*t*.7}return}const i=t.x-n.x,r=t.y-n.y,a=Math.hypot(i,r),d=t.radius+n.radius-5;if(a<d){const e=(d-a)*(.3+5*l.forceStrength),o=Math.atan2(r,i),s=n.radius/(t.radius+n.radius);t.fixed||(t.x+=Math.cos(o)*e*s,t.y+=Math.sin(o)*e*s),n.fixed||(n.x-=Math.cos(o)*e*(1-s),n.y-=Math.sin(o)*e*(1-s))}}))}));return s.forEach((t=>{const n=Math.max(5+t.radius,Math.min(e.width-5-t.radius,t.x)),o=Math.max(5+t.radius,Math.min(e.height-5-t.radius,t.y));(!t.fixed||Math.hypot(t.x-n,t.y-o)>2)&&(t.x=n,t.y=o)})),s}(t,e,s);function c(){e&&s?(s.clearRect(0,0,e.width,e.height),u.forEach((e=>{const{x:n,y:o,radius:i,bubbleColor:r,borderColor:a,borderThickness:l,opacity:u,fontColor:c,fontFamily:h,fontSize:f,fontStyle:m,fontWeight:v,textAlign:p,textTransform:g,textBaseline:y}=function(t,e){var n,o,i,r,a,l,s,u,c,h,f;return{x:t.x,y:t.y,radius:Math.max(t.radius,e.minRadius),bubbleColor:null!==(n=t.bubbleColor)&&void 0!==n?n:e.defaultBubbleColor,borderColor:null!==(o=t.borderColor)&&void 0!==o?o:"black",borderThickness:null!==(i=t.borderThickness)&&void 0!==i?i:.25,opacity:null!==(r=t.opacity)&&void 0!==r?r:1,fontFamily:null!==(a=t.fontFamily)&&void 0!==a?a:e.defaultFontFamily,fontStyle:null!==(l=t.fontStyle)&&void 0!==l?l:"normal",fontWeight:null!==(s=t.fontWeight)&&void 0!==s?s:400,textAlign:null!==(u=t.textAlign)&&void 0!==u?u:"center",textTransform:null!==(c=t.textTransform)&&void 0!==c?c:"none",fontColor:null!==(h=t.fontColor)&&void 0!==h?h:e.defaultFontColor,textBaseline:null!==(f=t.textBaseline)&&void 0!==f?f:"middle",fontSize:d(t.radius,e.fontSize,t.fontWeight)}}(e,t);s.beginPath(),s.arc(n,o,i,0,2*Math.PI),s.fillStyle=r,s.fill(),s.strokeStyle=a,s.lineWidth=l,s.stroke(),s.fillStyle=c,s.font=`${m} ${v} ${f}px ${h}`,s.textAlign=p,s.textBaseline=y;let x=e.label||"";if("uppercase"===g?x=x.toUpperCase():"lowercase"===g?x=x.toLowerCase():"capitalize"===g&&(x=x.replace(/\b\w/g,(t=>t.toUpperCase()))),t.textWrap){const r=1.5*i-10,a=1.2*f,l=function(t,e,n,o,i,r,a=14,l=2,d=5,s=1.2,u=400,c="normal",h="Arial"){const f=1.5*(i-d),m=a*s,v=Math.max(1,Math.floor(f/m)),p="auto"===o||void 0===o?v:Math.min(o,v);n=Math.max(0,n-l);const g=e.split(" ");let y="";const x=[];let b=!1,C=!1;for(const e of g){const o=y?`${y} ${e}`:e;if(t.font=`${u||""} ${c||""} ${a}px ${h}`,t.measureText(o).width<=n)y=o;else if(y.trim()&&x.push(y),y=e,t.measureText(y).width>n){let e=y;for(;t.measureText(e+"...").width>n&&e.length>0;)e=e.slice(0,-1);x.push(e+"..."),C=!0;break}if(x.length>=p){b=!0;break}}if(y&&x.length<p&&!C&&x.push(y),b&&x.length>0){let e=x[x.length-1];for(;t.measureText(e+"...").width>n&&e.length>0;)e=e.slice(0,-1);x[x.length-1]=e+"..."}return x}(s,e.label,r,t.maxLines,i),d=o-(l.length-1)*a/2;l.forEach(((t,e)=>s.fillText(t,n,d+e*a)))}else s.fillText(e.label,n,o)}))):console.warn("canvas or ctx is not valid")}function h(){const n=document.getElementById(t.canvasContainerId);n&&e&&(e.width=n.offsetWidth,e.height=n.offsetHeight,c())}let f;t.isResizeCanvasOnWindowSizeChange&&(h(),window.addEventListener("resize",h)),c(),t.showToolTip&&(f=function(t){var e,n,i,r,a,l,d,s,u,c,h,f,m,v,p,g,y,x;const b=null===(n=null===(e=t.data[0].toolTipConfig)||void 0===e?void 0:e.tooltipFormattedData)||void 0===n?void 0:n.trim();if(b){const t=document.createElement("div");t.innerHTML=b.trim();const e=t.firstElementChild;return o(e),e}const C=document.createElement("div");C.id="bubbleChartTooltip",C.style.display="none";const M=null!==(i=null==t?void 0:t.tooltipOptions)&&void 0!==i?i:{},w=(t,e)=>"number"==typeof t?`${t}px`:null!=t?t:e;return Object.assign(C.style,{position:"absolute",padding:w(M.padding,"8px"),margin:w(M.margin,"0"),background:null!==(r=M.backgroundColor)&&void 0!==r?r:"rgba(0, 0, 0, 0.85)",color:null!==(a=M.fontColor)&&void 0!==a?a:"white",borderRadius:"4px",pointerEvents:null!==(l=M.pointerEvents)&&void 0!==l?l:"none",fontFamily:null!==(d=M.fontFamily)&&void 0!==d?d:"Arial, sans-serif",fontSize:w(M.fontSize,"14px"),fontWeight:String(null!==(s=M.fontWeight)&&void 0!==s?s:"400"),fontStyle:null!==(u=M.fontStyle)&&void 0!==u?u:"normal",textAlign:null!==(c=M.textAlign)&&void 0!==c?c:"left",textDecoration:null!==(h=M.textDecoration)&&void 0!==h?h:"none",textTransform:null!==(f=M.textTransform)&&void 0!==f?f:"none",letterSpacing:w(M.letterSpacing,"normal"),border:(()=>{var t;if(!M.borderStyle)return"none";const e=w(M.borderWidth,"1px"),n=null!==(t=M.borderColor)&&void 0!==t?t:"transparent";return`${e} ${M.borderStyle} ${n}`})(),boxShadow:null!==(m=M.boxShadow)&&void 0!==m?m:"none",opacity:String(null!==(v=M.opacity)&&void 0!==v?v:1),maxWidth:w(M.maxWidth,"200px"),minWidth:w(M.minWidth,"auto"),maxHeight:w(M.maxHeight,"none"),minHeight:w(M.minHeight,"auto"),zIndex:String(null!==(p=M.zIndex)&&void 0!==p?p:1e3),transition:null!==(g=M.transition)&&void 0!==g?g:"opacity 0.2s",transform:null!==(y=M.transform)&&void 0!==y?y:"none",backdropFilter:null!==(x=M.backdropFilter)&&void 0!==x?x:"none"}),o(C),C}(t));let m=null;if(e.addEventListener("mousemove",(o=>{m||(m=requestAnimationFrame((()=>{(function(t,e,o,a,l){const{mouseX:d,mouseY:s}=i(t,o),u=r(d,s,e);(null==l?void 0:l.cursorType)&&(n=null==l?void 0:l.cursorType),a&&(u?function(t,e,o,i){e&&e.value&&o&&i&&(o.style.cursor=n,i.style.display="block",i.innerHTML=function(t){var e,n,o;if(!t)return"";const i=null===(n=null===(e=t.toolTipConfig)||void 0===e?void 0:e.tooltipText)||void 0===n?void 0:n.trim();if(i)return`<div>${i}</div>`;const r=null===(o=t.label)||void 0===o?void 0:o.trim();return r?`<div>${r}<br>Value: ${t.value}</div>`:`<div>${t.value}</div>`}(e),i.style.left=`${t.pageX+15}px`,i.style.top=t.pageY-30+"px",i.style.zIndex="9999")}(t,u,o,a):(o.style.cursor="default",a.style.display="none"))})(o,u,e,f,t),m=null})))})),t.onBubbleClick){let n=null;e.addEventListener("click",(o=>{n||(n=requestAnimationFrame((()=>{!function(t,e,n,o){const{mouseX:a,mouseY:l}=i(t,n),d=r(a,l,e);null!=d&&o.onBubbleClick&&o.onBubbleClick(d,t)}(o,u,e,t),n=null})))}))}}const u={defaultBubbleColor:"#3498DB",defaultFontColor:"#ffffff",minRadius:10,maxLines:"auto",textWrap:!0,isResizeCanvasOnWindowSizeChange:!0,fontSize:14,defaultFontFamily:"Arial",showToolTip:!0};function c(t={}){var e,n;if(!t)return void console.error("Configuration is not valid. Chart initialization aborted.");if(!t.data||0===t.data.length)return void console.error("No valid data provided. Chart initialization aborted.");const o=(i=Object.assign({canvasContainerId:null!==(e=t.canvasContainerId)&&void 0!==e?e:"chart-container",data:null!==(n=t.data)&&void 0!==n?n:[]},t),Object.assign(Object.assign({},u),i));var i;return s(o),o}class h{constructor(t){const e=c(t);e&&(this.configuration=e)}render(){this.configuration&&s(this.configuration)}}return window.initializeChart=c,e})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("BubbleChart",[],e):"object"==typeof exports?exports.BubbleChart=e():t.BubbleChart=e()}(this,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{BubbleChart:()=>h,initializeChart:()=>c});let n="default";function o(t){const e=document.body;e?e.querySelector("#bubbleChartTooltip")||e.prepend(t):console.error("Body element not found.")}function i(t,e){const n=e.getBoundingClientRect();return{mouseX:t.clientX-n.left,mouseY:t.clientY-n.top}}function r(t,e,n){return n.find((n=>Math.hypot(t-n.x,e-n.y)<n.radius))||null}class a{}a.TRANSPARENT="transparent";const l={forceStrength:.008,iterations:1e3,damping:.65,boundaryForce:.02,centerForce:.12,centerAttraction:.8,centerDamping:.3,centerRadiusBuffer:35};function s(t,e=14,n=400,o=6){const i=n>=700?1.25:n>=500?1.1:1,r=Math.min(t/o,t/1.2);let a=Math.min(e*i,r,.8*t);return a=Math.max(a,Math.max(8,t/6)),Math.round(a)}function d(t){if(!function(t){return t?!(!Array.isArray(t.data)||0===t.data.length)||(console.error("Invalid or empty data array"),!1):(console.error("Invalid config object"),!1)}(t))return;let e=function(t){var e,n;const o=document.getElementById(t.canvasContainerId);if(!o)return console.error(`Canvas container with ID '${t.canvasContainerId}' not found.`),null;if(o.querySelector("canvas"))return console.error("A canvas already exists inside the container."),null;const i=document.createElement("canvas");return i.width=o.offsetWidth,i.height=o.offsetHeight,Object.assign(i.style,{border:(null===(e=t.canvasBorderColor)||void 0===e?void 0:e.trim())?`1px solid #${t.canvasBorderColor}`:a.TRANSPARENT,background:(null===(n=t.canvasBackgroundColor)||void 0===n?void 0:n.trim())?`#${t.canvasBackgroundColor}`:a.TRANSPARENT,width:"100%",height:"100%",display:"block",imageRendering:"crisp-edges",aspectRatio:"1 / 1"}),i.style.setProperty("image-rendering","-moz-crisp-edges"),i.style.setProperty("image-rendering","-webkit-optimize-contrast"),i.style.setProperty("-ms-interpolation-mode","nearest-neighbor"),o.appendChild(i),i}(t);if(!e)return;const d=e.getContext("2d");if(!d)return void console.error("Invalid context");const u=function(t,e,n){const o=Math.min((e.width-10)/2,(e.height-10)/2),i=window.devicePixelRatio||1,r=e.getBoundingClientRect();e.width=r.width*i,e.height=r.height*i,e.style.width=r.width+"px",e.style.height=r.height+"px",n.scale(i,i);const a=r.width/2,s=r.height/2,d=[...t.data].sort(((t,e)=>e.value-t.value)).map((t=>Object.assign(Object.assign({},t),{radius:0,x:0,y:0,fixed:!1}))),u=d[0].value,c=Math.min(.5*o,.2*Math.min(e.width,e.height)),h=Math.max(.3*c,.05*Math.min(e.width,e.height));d.forEach((t=>{const n=t.value/u;t.radius=h+n*(c-h),t.radius=Math.min(t.radius,(e.width-10)/2,(e.height-10)/2)})),d.forEach(((t,n)=>{if(0===n)t.x=a,t.y=s,t.fixed=!0;else{const o=d[0].radius+t.radius+3,i=Math.PI*(3-Math.sqrt(5)),r=e.width-5-t.radius,l=e.height-5-t.radius;t.x=Math.min(r,Math.max(5+t.radius,a+Math.cos(i*n)*o)),t.y=Math.min(l,Math.max(5+t.radius,s+Math.sin(i*n)*o)),t.fixed=!1}}));for(let t=0;t<l.iterations;t++)d.forEach(((t,n)=>{if(0===n){const e=a-t.x,n=s-t.y;return void(Math.hypot(e,n)>2&&(t.x+=e*l.centerDamping,t.y+=n*l.centerDamping))}let o=0,i=0;const r=t.radius+5;t.x<r?o+=(r-t.x)*l.boundaryForce:t.x>e.width-r&&(o+=(e.width-r-t.x)*l.boundaryForce),d.forEach((e=>{if(t===e)return;const n=t.x-e.x,r=t.y-e.y,d=Math.hypot(n,r),c=t.radius+e.radius;if(d<1.5*c){const t=l.forceStrength*(c/Math.max(d,.1));o+=n/d*t,i+=r/d*t}const h=a-t.x,f=s-t.y,m=Math.hypot(h,f),y=t.value/u*.02;t.x+=h/m*y,t.y+=f/m*y}));const c=a-t.x,h=s-t.y,f=Math.hypot(c,h),m=d[0].radius+t.radius+l.centerRadiusBuffer,y=(l.centerForce,Math.pow(t.value/u,.3),l.centerAttraction*(1-t.value/u)*(1-Math.min(1,f/m)));t.x+=c*y,t.y+=h*y,t.x+=o*(1-l.damping),t.y+=i*(1-l.damping)})),d.forEach(((t,e)=>{d.forEach(((n,o)=>{if(e>=o)return;if(0===e||0===o){const o=0===e?t:n,i=0===e?n:t,r=i.x-o.x,a=i.y-o.y,l=Math.hypot(r,a),s=o.radius+i.radius+2;if(l<s){const t=s-l,e=Math.atan2(a,r);i.x+=Math.cos(e)*t*.7,i.y+=Math.sin(e)*t*.7}return}const i=t.x-n.x,r=t.y-n.y,a=Math.hypot(i,r),s=t.radius+n.radius-5;if(a<s){const e=(s-a)*(.3+5*l.forceStrength),o=Math.atan2(r,i),d=n.radius/(t.radius+n.radius);t.fixed||(t.x+=Math.cos(o)*e*d,t.y+=Math.sin(o)*e*d),n.fixed||(n.x-=Math.cos(o)*e*(1-d),n.y-=Math.sin(o)*e*(1-d))}}))}));return d.forEach((t=>{const n=Math.max(5+t.radius,Math.min(e.width-5-t.radius,t.x)),o=Math.max(5+t.radius,Math.min(e.height-5-t.radius,t.y));(!t.fixed||Math.hypot(t.x-n,t.y-o)>2)&&(t.x=n,t.y=o)})),d}(t,e,d);function c(){e&&d?(d.clearRect(0,0,e.width,e.height),u.forEach((e=>{const{x:n,y:o,radius:i,bubbleColor:r,borderColor:a,borderThickness:l,opacity:u,fontColor:c,fontFamily:h,fontSize:f,fontStyle:m,fontWeight:y,textAlign:p,textTransform:v,textBaseline:g}=function(t,e){var n,o,i,r,a,l,d,u,c,h,f,m;return{x:t.x,y:t.y,radius:Math.max(t.radius||0,e.minRadius||10),bubbleColor:null!==(o=null!==(n=t.bubbleColor)&&void 0!==n?n:e.defaultBubbleColor)&&void 0!==o?o:"#3498db",borderColor:null!==(i=t.borderColor)&&void 0!==i?i:"black",borderThickness:Math.max(null!==(r=t.borderThickness)&&void 0!==r?r:.25,0),opacity:void 0!==t.opacity?Math.max(0,Math.min(1,t.opacity)):1,fontStyle:t.fontStyle||"normal",fontWeight:"number"==typeof t.fontWeight&&t.fontWeight>=100&&t.fontWeight<=900?t.fontWeight:400,textAlign:null!==(a=t.textAlign)&&void 0!==a?a:"center",textTransform:null!==(l=t.textTransform)&&void 0!==l?l:"none",fontColor:null!==(u=null!==(d=t.fontColor)&&void 0!==d?d:e.defaultFontColor)&&void 0!==u?u:"#000",textBaseline:null!==(c=t.textBaseline)&&void 0!==c?c:"middle",fontSize:Math.max(s(t.radius||e.minRadius||10,null!==(h=e.fontSize)&&void 0!==h?h:14,null!==(f=t.fontWeight)&&void 0!==f?f:400),8),fontFamily:t.fontFamily&&"string"==typeof t.fontFamily&&"Arial"!==t.fontFamily?`${t.fontFamily}, Arial, sans-serif`:`${null!==(m=e.defaultFontFamily)&&void 0!==m?m:"Arial"}, sans-serif`}}(e,t);d.beginPath(),d.arc(n,o,i,0,2*Math.PI),d.fillStyle=r,d.fill(),d.strokeStyle=a,d.lineWidth=l,d.stroke();const x=`${m} ${y} ${f}px ${h}`;d.fillStyle=c,d.font=x,d.textAlign=p,d.textBaseline=g;let b=e.label||"";if("uppercase"===v?b=b.toUpperCase():"lowercase"===v?b=b.toLowerCase():"capitalize"===v&&(b=b.replace(/\b\w/g,(t=>t.toUpperCase()))),t.textWrap){const r=1.5*i-10,a=1.2*f,l=function(t,e,n,o,i,r=14,a=400,l="normal",s="Arial",d=0,u=5,c=1.2){const h=1.5*(i-u),f=r*c,m=Math.max(1,Math.floor(h/f)),y="auto"===o||void 0===o?m:Math.min(o,m);n=Math.max(0,n-d);const p=e.split(" ");let v="";const g=[];let x=!1,b=!1;for(const e of p){const o=v?`${v} ${e}`:e;if(t.font=`${a||""} ${l||""} ${r}px ${s}`,t.measureText(o).width<=n)v=o;else if(v.trim()&&g.push(v),v=e,t.measureText(v).width>n){let e=v;for(;t.measureText(e+"...").width>n&&e.length>0;)e=e.slice(0,-1);g.push(e+"..."),b=!0;break}if(g.length>=y){x=!0;break}}if(v&&g.length<y&&!b&&g.push(v),x&&g.length>0){let e=g[g.length-1];for(;t.measureText(e+"...").width>n&&e.length>0;)e=e.slice(0,-1);g[g.length-1]=e+"..."}return g}(d,e.label,r,t.maxLines,i,f,y,m,h),s=o-(l.length-1)*a/2;l.forEach(((t,e)=>d.fillText(t,n,s+e*a)))}else d.fillText(e.label,n,o)}))):console.warn("canvas or ctx is not valid")}function h(){const n=document.getElementById(t.canvasContainerId);n&&e&&(e.width=n.offsetWidth,e.height=n.offsetHeight,c())}let f;t.isResizeCanvasOnWindowSizeChange&&(h(),window.addEventListener("resize",h)),c(),t.showToolTip&&(f=function(t){var e,n,i,r,a,l,s,d,u,c,h,f,m,y,p,v,g,x;const b=null===(n=null===(e=t.data[0].toolTipConfig)||void 0===e?void 0:e.tooltipFormattedData)||void 0===n?void 0:n.trim();if(b){const t=document.createElement("div");t.innerHTML=b.trim();const e=t.firstElementChild;return o(e),e}const M=document.createElement("div");M.id="bubbleChartTooltip",M.style.display="none";const C=null!==(i=null==t?void 0:t.tooltipOptions)&&void 0!==i?i:{},w=(t,e)=>"number"==typeof t?`${t}px`:null!=t?t:e;return Object.assign(M.style,{position:"absolute",padding:w(C.padding,"8px"),margin:w(C.margin,"0"),background:null!==(r=C.backgroundColor)&&void 0!==r?r:"rgba(0, 0, 0, 0.85)",color:null!==(a=C.fontColor)&&void 0!==a?a:"white",borderRadius:"4px",pointerEvents:null!==(l=C.pointerEvents)&&void 0!==l?l:"none",fontFamily:null!==(s=C.fontFamily)&&void 0!==s?s:"Arial, sans-serif",fontSize:w(C.fontSize,"14px"),fontWeight:String(null!==(d=C.fontWeight)&&void 0!==d?d:"400"),fontStyle:null!==(u=C.fontStyle)&&void 0!==u?u:"normal",textAlign:null!==(c=C.textAlign)&&void 0!==c?c:"left",textDecoration:null!==(h=C.textDecoration)&&void 0!==h?h:"none",textTransform:null!==(f=C.textTransform)&&void 0!==f?f:"none",letterSpacing:w(C.letterSpacing,"normal"),border:(()=>{var t;if(!C.borderStyle)return"none";const e=w(C.borderWidth,"1px"),n=null!==(t=C.borderColor)&&void 0!==t?t:"transparent";return`${e} ${C.borderStyle} ${n}`})(),boxShadow:null!==(m=C.boxShadow)&&void 0!==m?m:"none",opacity:String(null!==(y=C.opacity)&&void 0!==y?y:1),maxWidth:w(C.maxWidth,"200px"),minWidth:w(C.minWidth,"auto"),maxHeight:w(C.maxHeight,"none"),minHeight:w(C.minHeight,"auto"),zIndex:String(null!==(p=C.zIndex)&&void 0!==p?p:1e3),transition:null!==(v=C.transition)&&void 0!==v?v:"opacity 0.2s",transform:null!==(g=C.transform)&&void 0!==g?g:"none",backdropFilter:null!==(x=C.backdropFilter)&&void 0!==x?x:"none"}),o(M),M}(t));let m=null;if(e.addEventListener("mousemove",(o=>{m||(m=requestAnimationFrame((()=>{(function(t,e,o,a,l){const{mouseX:s,mouseY:d}=i(t,o),u=r(s,d,e);(null==l?void 0:l.cursorType)&&(n=null==l?void 0:l.cursorType),a&&(u?function(t,e,o,i){e&&e.value&&o&&i&&(o.style.cursor=n,i.style.display="block",i.innerHTML=function(t){var e,n,o;if(!t)return"";const i=null===(n=null===(e=t.toolTipConfig)||void 0===e?void 0:e.tooltipText)||void 0===n?void 0:n.trim();if(i)return`<div>${i}</div>`;const r=null===(o=t.label)||void 0===o?void 0:o.trim();return r?`<div>${r}<br>Value: ${t.value}</div>`:`<div>${t.value}</div>`}(e),i.style.left=`${t.pageX+15}px`,i.style.top=t.pageY-30+"px",i.style.zIndex="9999")}(t,u,o,a):(o.style.cursor="default",a.style.display="none"))})(o,u,e,f,t),m=null})))})),t.onBubbleClick){let n=null;e.addEventListener("click",(o=>{n||(n=requestAnimationFrame((()=>{!function(t,e,n,o){const{mouseX:a,mouseY:l}=i(t,n),s=r(a,l,e);null!=s&&o.onBubbleClick&&o.onBubbleClick(s,t)}(o,u,e,t),n=null})))}))}}const u={defaultBubbleColor:"#3498DB",defaultFontColor:"#ffffff",minRadius:10,maxLines:"auto",textWrap:!0,isResizeCanvasOnWindowSizeChange:!0,fontSize:14,defaultFontFamily:"Arial",showToolTip:!0};function c(t={}){var e,n;if(!t)return void console.error("Configuration is not valid. Chart initialization aborted.");if(!t.data||0===t.data.length)return void console.error("No valid data provided. Chart initialization aborted.");const o=(i=Object.assign({canvasContainerId:null!==(e=t.canvasContainerId)&&void 0!==e?e:"chart-container",data:null!==(n=t.data)&&void 0!==n?n:[]},t),Object.assign(Object.assign({},u),i));var i;return d(o),o}class h{constructor(t){const e=c(t);e&&(this.configuration=e)}render(){this.configuration&&d(this.configuration)}}return window.initializeChart=c,e})()));

package/dist/features/text-wrapper.d.ts

@@ -1,3 +1,2 @@
-export declare function getWrappedLines(ctx: CanvasRenderingContext2D, text: string, maxLineWidth: number, maxAllowedLines: number | "auto" | undefined, radius: number, maxCharsPerWord?: number | undefined, // TODO :  need support
-fontSize?: number, // TODO :  take all default values from constants
-horizontalPadding?: number, verticalPadding?: number, lineHeightFactor?: number, fontWeight?: number, fontStyle?: "normal" | "italic" | "oblique", fontFamily?: string): string[];
+export declare function getWrappedLines(ctx: CanvasRenderingContext2D, text: string, maxLineWidth: number, maxAllowedLines: number | "auto" | undefined, radius: number, fontSize?: number, // TODO :  take all default values from constants
+fontWeight?: number, fontStyle?: "normal" | "italic" | "oblique", fontFamily?: string, horizontalPadding?: number, verticalPadding?: number, lineHeightFactor?: number, maxCharsPerWord?: number | undefined): string[];

package/dist/utils/helper.d.ts

@@ -1 +1,2 @@
-export declare function getFontSize(radius: number, fontSize?: number, fontWeight?: number): number;
+export declare function getFontSize(radius: number, fontSize?: number, fontWeight?: number, avgCharsPerLine?: number): number;
+export declare function isFontAvailable(font: string, fontSize?: string): boolean;

package/index.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bubble JS</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
 
     <!-- <script type="module" src="./dist/index.js"></script> -->
     <script src="./dist/bubbleChart.umd.js" defer></script>
@@ -12,110 +13,190 @@
 </head>
 
 <body>
-    <div id="bubbleChart" style="width: 470px; height: 350px;border: 1px solid red;"></div>
+    <div id="bubbleChart" style="width: 478px; height: 389px;"></div>
     <script>
+        const data = [
+            {
+                label: 'Rocket Fuel Orders',
+                value: 207,
+                bubbleColor: '#ff5733',
+                fontColor: '#FFFFFF',
+                fontWeight: 600,
+            },
+            {
+                label: 'Time Machine Repairs',
+                value: 154,
+                bubbleColor: '#c70039',
+                fontColor: '#FFF',
+                fontWeight: 600,
+            },
+            {
+                label: 'AI Overlord Complaints',
+                value: 192,
+                bubbleColor: '#900c3f',
+                fontColor: '#000',
+            },
+            {
+                label: 'Quantum Internet Activation',
+                value: 73,
+                bubbleColor: '#ffc300',
+                fontColor: '#000',
+            },
+            {
+                label: 'Zero-Gravity Plumbing Issues',
+                value: 96,
+                bubbleColor: '#4caf50',
+                fontColor: '#000',
+            },
+            {
+                label: 'Hologram Tech Support',
+                value: 119,
+                bubbleColor: '#ff8c00',
+                fontColor: '#000',
+            },
+            {
+                label: 'Teleportation Delay Reports',
+                value: 87,
+                bubbleColor: '#03875c',
+                fontColor: '#000',
+            },
+            {
+                label: 'Neural Chip Upgrades',
+                value: 163,
+                bubbleColor: '#3f51b5',
+                fontColor: '#000',
+            },
+            {
+                label: 'Intergalactic Toll Fees',
+                value: 132,
+                bubbleColor: '#795548',
+                fontColor: '#000',
+            },
+        ];
+
         document.addEventListener("DOMContentLoaded", function () {
             if (typeof initializeChart === "function") {
-                //                 const toolTipConfig = {
-                //                     tooltipText: 'Sample Tooltip',
-                //                     tooltipFormattedData: `<div style="position: absolute; display: block; border-style: solid; z-index: 99999999; will-change: transform; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgb(30, 30, 47); border-width: 1px; border-radius: 8px; color: rgb(237, 237, 237); font: 12px / 18px Arial, sans-serif; padding: 10px 12px; top: 0px; left: 0px; transform: translate3d(4px, 4px, 0px); border-color: transparent; overflow: visible; white-space: normal; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; pointer-events: none;">
-                //   Sample Tooltip
-                // </div>
-                // `
-                //                 }
-
-                //                 const tooltipOptions = {
-                //                     fontStyle: 'italic',
-                //                     fontWeight: 800,
-                //                     textAlign: 'center',
-                //                     textDecoration: 'underline',
-                //                     textTransform: "uppercase",
-                //                     fontColor: '#FFF'
-                //                 }
-
-                //                 const data = [
-                //                     { label: "Biryani Battles", "value": 89, bubbleColor: "#ff5733" },
-                //                     { label: "Chai vs. Coffee", "value": 70, bubbleColor: "#c70039" },
-                //                     { label: "Bollywood Blockbusters", "value": 90, bubbleColor: "#900c3f" },
-                //                     { label: "IPL Fever", "value": 85, bubbleColor: "#ffc300" },
-                //                     { label: "Himalayan Treks", "value": 65, bubbleColor: "#4caf50" },
-                //                     { label: "Diwali Firecrackers", "value": 95, bubbleColor: "#ff8c00" },
-                //                     { label: "Street Food Craze", "value": 75, bubbleColor: "#e91e63" },
-                //                     { label: "Fastest Century Records", "value": 88, bubbleColor: "#3f51b5" },
-                //                     { label: "Royal Enfield Craze", "value": 60, bubbleColor: "#795548" },
-                //                     { label: "Digital Payment Boom", "value": 93, bubbleColor: "#00bcd4" }
-                //                 ];
-
-                //                 const chartoptions = {
-                //                     canvasContainerId: 'bubbleChart',
-                //                     data: data,
-                //                     fontSize: 14,
-                //                     maxLines: 2,
-                //                     tooltipOptions: tooltipOptions,
-                //                 }
-
-                // Initialize chart
                 const chartOptions = {
                     canvasContainerId: 'bubbleChart',
                     data: [
                         {
-                            label: 'Rocket Fuel Orders',
-                            value: 207,
-                            bubbleColor: '#ff5733',
+                            label: 'Activation of supply for Electricity and Water',
+                            value: 307,
+                            bubbleColor: '#024831',
                             fontColor: '#FFFFFF',
                             fontWeight: 600,
+                            toolTipConfig: {
+                                tooltipFormattedData: `<div style="position: absolute; display: block; border-style: solid; z-index: 99999999; will-change: transform; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgb(30, 30, 47); border-width: 1px; border-radius: 8px; color: rgb(237, 237, 237); font: 12px / 18px Arial, sans-serif; padding: 10px 12px; top: 0px; left: 0px; transform: translate3d(4px, 4px, 0px); border-color: transparent; overflow: visible; white-space: normal; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; pointer-events: none;">
+  Activation of supply for Electricity and Water
+</div>
+`,
+                            },
                         },
                         {
-                            label: 'Time Machine Repairs',
-                            value: 154,
-                            bubbleColor: '#c70039',
+                            label: 'Reconnection',
+                            value: 114,
+                            bubbleColor: '#03714d',
                             fontColor: '#FFF',
                             fontWeight: 600,
+                            toolTipConfig: {
+                                tooltipFormattedData: `<div style="position: absolute; display: block; border-style: solid; z-index: 99999999; will-change: transform; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgb(30, 30, 47); border-width: 1px; border-radius: 8px; color: rgb(237, 237, 237); font: 12px / 18px Arial, sans-serif; padding: 10px 12px; top: 0px; left: 0px; transform: translate3d(4px, 4px, 0px); border-color: transparent; overflow: visible; white-space: normal; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; pointer-events: none;">
+  Reconnection
+</div>
+`,
+                            },
                         },
                         {
-                            label: 'AI Overlord Complaints',
-                            value: 192,
-                            bubbleColor: '#900c3f',
+                            label: 'Refund Request',
+                            value: 92,
+                            bubbleColor: '#03714d',
                             fontColor: '#000',
+                            fontWeight: 400,
+                            toolTipConfig: {
+                                tooltipFormattedData: `<div style="position: absolute; display: block; border-style: solid; z-index: 99999999; will-change: transform; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgb(30, 30, 47); border-width: 1px; border-radius: 8px; color: rgb(237, 237, 237); font: 12px / 18px Arial, sans-serif; padding: 10px 12px; top: 0px; left: 0px; transform: translate3d(4px, 4px, 0px); border-color: transparent; overflow: visible; white-space: normal; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; pointer-events: none;">
+  Refund Request
+</div>
+`,
+                            },
                         },
                         {
-                            label: 'Quantum Internet Activation',
+                            label: 'Request for Information Update',
                             value: 73,
-                            bubbleColor: '#ffc300',
+                            bubbleColor: '#049e6b',
                             fontColor: '#000',
+                            fontWeight: 400,
+                            toolTipConfig: {
+                                tooltipFormattedData: `<div style="position: absolute; display: block; border-style: solid; z-index: 99999999; will-change: transform; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgb(30, 30, 47); border-width: 1px; border-radius: 8px; color: rgb(237, 237, 237); font: 12px / 18px Arial, sans-serif; padding: 10px 12px; top: 0px; left: 0px; transform: translate3d(4px, 4px, 0px); border-color: transparent; overflow: visible; white-space: normal; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; pointer-events: none;">
+  Request for Information Update
+</div>
+`,
+                            },
                         },
                         {
-                            label: 'Zero-Gravity Plumbing Issues',
+                            label: 'Supply Issues',
                             value: 96,
-                            bubbleColor: '#4caf50',
+                            bubbleColor: '#31b086',
                             fontColor: '#000',
+                            fontWeight: 400,
+                            toolTipConfig: {
+                                tooltipFormattedData: `<div style="position: absolute; display: block; border-style: solid; z-index: 99999999; will-change: transform; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgb(30, 30, 47); border-width: 1px; border-radius: 8px; color: rgb(237, 237, 237); font: 12px / 18px Arial, sans-serif; padding: 10px 12px; top: 0px; left: 0px; transform: translate3d(4px, 4px, 0px); border-color: transparent; overflow: visible; white-space: normal; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; pointer-events: none;">
+  Supply Issues
+</div>
+`,
+                            },
                         },
                         {
-                            label: 'Hologram Tech Support',
+                            label: 'Smart Services',
                             value: 119,
-                            bubbleColor: '#ff8c00',
+                            bubbleColor: '#03875c',
                             fontColor: '#000',
+                            fontWeight: 400,
+                            toolTipConfig: {
+                                tooltipFormattedData: `<div style="position: absolute; display: block; border-style: solid; z-index: 99999999; will-change: transform; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgb(30, 30, 47); border-width: 1px; border-radius: 8px; color: rgb(237, 237, 237); font: 12px / 18px Arial, sans-serif; padding: 10px 12px; top: 0px; left: 0px; transform: translate3d(4px, 4px, 0px); border-color: transparent; overflow: visible; white-space: normal; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; pointer-events: none;">
+  Smart Services
+</div>
+`,
+                            },
                         },
                         {
-                            label: 'Teleportation Delay Reports',
+                            label: 'High Consumption',
                             value: 87,
                             bubbleColor: '#03875c',
                             fontColor: '#000',
+                            fontWeight: 400,
+                            toolTipConfig: {
+                                tooltipFormattedData: `<div style="position: absolute; display: block; border-style: solid; z-index: 99999999; will-change: transform; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgb(30, 30, 47); border-width: 1px; border-radius: 8px; color: rgb(237, 237, 237); font: 12px / 18px Arial, sans-serif; padding: 10px 12px; top: 0px; left: 0px; transform: translate3d(4px, 4px, 0px); border-color: transparent; overflow: visible; white-space: normal; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; pointer-events: none;">
+  Smart Services
+</div>
+`,
+                            },
                         },
                         {
-                            label: 'Neural Chip Upgrades',
-                            value: 163,
-                            bubbleColor: '#3f51b5',
+                            label: 'Billing Inquiry',
+                            value: 103,
+                            bubbleColor: '#03875c',
                             fontColor: '#000',
+                            fontWeight: 400,
+                            toolTipConfig: {
+                                tooltipFormattedData: `<div style="position: absolute; display: block; border-style: solid; z-index: 99999999; will-change: transform; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgb(30, 30, 47); border-width: 1px; border-radius: 8px; color: rgb(237, 237, 237); font: 12px / 18px Arial, sans-serif; padding: 10px 12px; top: 0px; left: 0px; transform: translate3d(4px, 4px, 0px); border-color: transparent; overflow: visible; white-space: normal; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; pointer-events: none;">
+  Smart Services
+</div>
+`,
+                            },
                         },
                         {
-                            label: 'Intergalactic Toll Fees',
-                            value: 132,
-                            bubbleColor: '#795548',
+                            label: 'Wrong Bill',
+                            value: 92,
+                            bubbleColor: '#03875c',
                             fontColor: '#000',
+                            fontWeight: 400,
+                            toolTipConfig: {
+                                tooltipFormattedData: `<div style="position: absolute; display: block; border-style: solid; z-index: 99999999; will-change: transform; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgb(30, 30, 47); border-width: 1px; border-radius: 8px; color: rgb(237, 237, 237); font: 12px / 18px Arial, sans-serif; padding: 10px 12px; top: 0px; left: 0px; transform: translate3d(4px, 4px, 0px); border-color: transparent; overflow: visible; white-space: normal; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; pointer-events: none;">
+  Smart Services
+</div>
+`,
+                            },
                         },
                     ],
-                    fontSize: 10,
                     defaultFontFamily: 'Roboto',
                     onBubbleClick: (bubbleData, event) => {
                         alert(`You clicked on: ${bubbleData.label}`);
@@ -131,6 +212,7 @@
                 }
 
 
+                initializeChart(chartOptions);
                 initializeChart(chartOptions);
             } else {
                 console.error("initializeChart is not defined");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bubble-chart-js",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "bubbleChartJs is a lightweight, customizable JavaScript library for creating stacked bubble charts. It arranges bubbles based on their values, with the largest bubble positioned at the top and surrounding bubbles decreasing in size accordingly.",
   "main": "dist/bubbleChart.cjs.js",
   "module": "dist/bubbleChart.esm.js",