bubble-chart-js 1.0.9 → 1.0.10

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.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})();
+(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},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 i(t,e){if(!e)return console.error("Invalid containerId."),null;const n=document.getElementById(e);if(!n)return console.error("Container not found."),null;const i=n.parentElement;return i?i.querySelector("#bubbleChartTooltip")||(i.prepend(t),t):(console.error("Parent container not found."),null)}function o(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,i=6){const o=n>=700?1.25:n>=500?1.1:1,r=Math.min(t/i,t/1.2);let a=Math.min(e*o,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 i=document.getElementById(t.canvasContainerId);if(!i)return console.error(`Canvas container with ID '${t.canvasContainerId}' not found.`),null;if(i.querySelector("canvas"))return console.error("A canvas already exists inside the container."),null;const o=document.createElement("canvas");return o.width=i.offsetWidth,o.height=i.offsetHeight,Object.assign(o.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"}),o.style.setProperty("image-rendering","-moz-crisp-edges"),o.style.setProperty("image-rendering","-webkit-optimize-contrast"),o.style.setProperty("-ms-interpolation-mode","nearest-neighbor"),i.appendChild(o),o}(t);if(!e)return;const d=e.getContext("2d");if(!d)return void console.error("Invalid context");const u=function(t,e,n){const i=Math.min((e.width-10)/2,(e.height-10)/2),o=window.devicePixelRatio||1,r=e.getBoundingClientRect();e.width=r.width*o,e.height=r.height*o,e.style.width=r.width+"px",e.style.height=r.height+"px",n.scale(o,o);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*i,.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 i=d[0].radius+t.radius+3,o=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(o*n)*i)),t.y=Math.min(l,Math.max(5+t.radius,s+Math.sin(o*n)*i)),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 i=0,o=0;const r=t.radius+5;t.x<r?i+=(r-t.x)*l.boundaryForce:t.x>e.width-r&&(i+=(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));i+=n/d*t,o+=r/d*t}const h=a-t.x,f=s-t.y,y=Math.hypot(h,f),m=t.value/u*.02;t.x+=h/y*m,t.y+=f/y*m}));const c=a-t.x,h=s-t.y,f=Math.hypot(c,h),y=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/y)));t.x+=c*m,t.y+=h*m,t.x+=i*(1-l.damping),t.y+=o*(1-l.damping)})),d.forEach(((t,e)=>{d.forEach(((n,i)=>{if(e>=i)return;if(0===e||0===i){const i=0===e?t:n,o=0===e?n:t,r=o.x-i.x,a=o.y-i.y,l=Math.hypot(r,a),s=i.radius+o.radius+2;if(l<s){const t=s-l,e=Math.atan2(a,r);o.x+=Math.cos(e)*t*.7,o.y+=Math.sin(e)*t*.7}return}const o=t.x-n.x,r=t.y-n.y,a=Math.hypot(o,r),s=t.radius+n.radius-5;if(a<s){const e=(s-a)*(.3+5*l.forceStrength),i=Math.atan2(r,o),d=n.radius/(t.radius+n.radius);t.fixed||(t.x+=Math.cos(i)*e*d,t.y+=Math.sin(i)*e*d),n.fixed||(n.x-=Math.cos(i)*e*(1-d),n.y-=Math.sin(i)*e*(1-d))}}))}));return d.forEach((t=>{const n=Math.max(5+t.radius,Math.min(e.width-5-t.radius,t.x)),i=Math.max(5+t.radius,Math.min(e.height-5-t.radius,t.y));(!t.fixed||Math.hypot(t.x-n,t.y-i)>2)&&(t.x=n,t.y=i)})),d}(t,e,d);function c(){e&&d?(d.clearRect(0,0,e.width,e.height),u.forEach((e=>{const{x:n,y:i,radius:o,bubbleColor:r,borderColor:a,borderThickness:l,opacity:u,fontColor:c,fontFamily:h,fontSize:f,fontStyle:y,fontWeight:m,textAlign:v,textTransform:g,textBaseline:p}=function(t,e){var n,i,o,r,a,l,d,u,c,h,f,y;return{x:t.x,y:t.y,radius:Math.max(t.radius||0,e.minRadius||10),bubbleColor:null!==(i=null!==(n=t.bubbleColor)&&void 0!==n?n:e.defaultBubbleColor)&&void 0!==i?i:"#3498db",borderColor:null!==(o=t.borderColor)&&void 0!==o?o:"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!==(y=e.defaultFontFamily)&&void 0!==y?y:"Arial"}, sans-serif`}}(e,t);d.beginPath(),d.arc(n,i,o,0,2*Math.PI),d.fillStyle=r,d.fill(),d.strokeStyle=a,d.lineWidth=l,d.stroke();const x=`${y} ${m} ${f}px ${h}`;d.fillStyle=c,d.font=x,d.textAlign=v,d.textBaseline=p;let b=e.label||"";if("uppercase"===g?b=b.toUpperCase():"lowercase"===g?b=b.toLowerCase():"capitalize"===g&&(b=b.replace(/\b\w/g,(t=>t.toUpperCase()))),t.textWrap){const r=1.5*o-10,a=1.2*f,l=function(t,e,n,i,o,r=14,a=400,l="normal",s="Arial",d=0,u=5,c=1.2){const h=1.5*(o-u),f=r*c,y=Math.max(1,Math.floor(h/f)),m="auto"===i||void 0===i?y:Math.min(i,y);n=Math.max(0,n-d);const v=e.split(" ");let g="";const p=[];let x=!1,b=!1;for(const e of v){const i=g?`${g} ${e}`:e;if(t.font=`${a||""} ${l||""} ${r}px ${s}`,t.measureText(i).width<=n)g=i;else if(g.trim()&&p.push(g),g=e,t.measureText(g).width>n){let e=g;for(;t.measureText(e+"...").width>n&&e.length>0;)e=e.slice(0,-1);p.push(e+"..."),b=!0;break}if(p.length>=m){x=!0;break}}if(g&&p.length<m&&!b&&p.push(g),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,r,t.maxLines,o,f,m,y,h),s=i-(l.length-1)*a/2;l.forEach(((t,e)=>d.fillText(t,n,s+e*a)))}else d.fillText(e.label,n,i)}))):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,o,r,a,l,s,d,u,c,h,f,y,m,v,g,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 e=document.createElement("div");e.innerHTML=b.trim();const n=e.firstElementChild;return n.style.display="none",n.style.visibility="hidden",n.style.opacity="0",i(n,t.canvasContainerId)}const M=document.createElement("div");M.id="bubbleChartTooltip",M.style.display="none";const C=null!==(o=null==t?void 0:t.tooltipOptions)&&void 0!==o?o:{},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!==(y=C.boxShadow)&&void 0!==y?y:"none",maxWidth:w(C.maxWidth,"200px"),minWidth:w(C.minWidth,"auto"),maxHeight:w(C.maxHeight,"none"),minHeight:w(C.minHeight,"auto"),zIndex:String(null!==(m=C.zIndex)&&void 0!==m?m: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!==(p=C.backdropFilter)&&void 0!==p?p:"none",opacity:String(null!==(x=C.opacity)&&void 0!==x?x:1),display:"none",visibility:"hidden"}),i(M,t.canvasContainerId),M}(t));let y=null;if(e.addEventListener("mousemove",(i=>{y||(y=requestAnimationFrame((()=>{(function(t,e,i,a,l){const{mouseX:s,mouseY:d}=o(t,i),u=r(s,d,e);(null==l?void 0:l.cursorType)&&(n=null==l?void 0:l.cursorType),a&&(u?function(t,e,i,o){e&&e.value&&i&&o&&(i.style.cursor=n,o.style.display="block",o.innerHTML=function(t){var e,n,i;if(!t)return"";const o=null===(n=null===(e=t.toolTipConfig)||void 0===e?void 0:e.tooltipText)||void 0===n?void 0:n.trim();if(o)return`<div>${o}</div>`;const r=null===(i=t.label)||void 0===i?void 0:i.trim();return r?`<div>${r}<br>Value: ${t.value}</div>`:`<div>${t.value}</div>`}(e),o.style.left=`${t.pageX+15}px`,o.style.top=t.pageY-30+"px",o.style.zIndex="9999",o.style.visibility="visible",o.style.opacity="1")}(t,u,i,a):(i.style.cursor="default",a.style.display="none",a.style.visibility="hidden",a.style.opacity="0"))})(i,u,e,f,t),y=null})))})),t.onBubbleClick){let n=null;e.addEventListener("click",(i=>{n||(n=requestAnimationFrame((()=>{!function(t,e,n,i){const{mouseX:a,mouseY:l}=o(t,n),s=r(a,l,e);null!=s&&i.onBubbleClick&&i.onBubbleClick(s,t)}(i,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 i=(o=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),o));var o;return d(i),i}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.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};
+var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{$:()=>h,s:()=>c});let n="default";function i(t,e){if(!e)return console.error("Invalid containerId."),null;const n=document.getElementById(e);if(!n)return console.error("Container not found."),null;const i=n.parentElement;return i?i.querySelector("#bubbleChartTooltip")||(i.prepend(t),t):(console.error("Parent container not found."),null)}function o(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,i=6){const o=n>=700?1.25:n>=500?1.1:1,a=Math.min(t/i,t/1.2);let r=Math.min(e*o,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 i=document.getElementById(t.canvasContainerId);if(!i)return console.error(`Canvas container with ID '${t.canvasContainerId}' not found.`),null;if(i.querySelector("canvas"))return console.error("A canvas already exists inside the container."),null;const o=document.createElement("canvas");return o.width=i.offsetWidth,o.height=i.offsetHeight,Object.assign(o.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"}),o.style.setProperty("image-rendering","-moz-crisp-edges"),o.style.setProperty("image-rendering","-webkit-optimize-contrast"),o.style.setProperty("-ms-interpolation-mode","nearest-neighbor"),i.appendChild(o),o}(t);if(!e)return;const d=e.getContext("2d");if(!d)return void console.error("Invalid context");const u=function(t,e,n){const i=Math.min((e.width-10)/2,(e.height-10)/2),o=window.devicePixelRatio||1,a=e.getBoundingClientRect();e.width=a.width*o,e.height=a.height*o,e.style.width=a.width+"px",e.style.height=a.height+"px",n.scale(o,o);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*i,.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 i=d[0].radius+t.radius+3,o=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(o*n)*i)),t.y=Math.min(l,Math.max(5+t.radius,s+Math.sin(o*n)*i)),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 i=0,o=0;const a=t.radius+5;t.x<a?i+=(a-t.x)*l.boundaryForce:t.x>e.width-a&&(i+=(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));i+=n/d*t,o+=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+=i*(1-l.damping),t.y+=o*(1-l.damping)})),d.forEach(((t,e)=>{d.forEach(((n,i)=>{if(e>=i)return;if(0===e||0===i){const i=0===e?t:n,o=0===e?n:t,a=o.x-i.x,r=o.y-i.y,l=Math.hypot(a,r),s=i.radius+o.radius+2;if(l<s){const t=s-l,e=Math.atan2(r,a);o.x+=Math.cos(e)*t*.7,o.y+=Math.sin(e)*t*.7}return}const o=t.x-n.x,a=t.y-n.y,r=Math.hypot(o,a),s=t.radius+n.radius-5;if(r<s){const e=(s-r)*(.3+5*l.forceStrength),i=Math.atan2(a,o),d=n.radius/(t.radius+n.radius);t.fixed||(t.x+=Math.cos(i)*e*d,t.y+=Math.sin(i)*e*d),n.fixed||(n.x-=Math.cos(i)*e*(1-d),n.y-=Math.sin(i)*e*(1-d))}}))}));return d.forEach((t=>{const n=Math.max(5+t.radius,Math.min(e.width-5-t.radius,t.x)),i=Math.max(5+t.radius,Math.min(e.height-5-t.radius,t.y));(!t.fixed||Math.hypot(t.x-n,t.y-i)>2)&&(t.x=n,t.y=i)})),d}(t,e,d);function c(){e&&d?(d.clearRect(0,0,e.width,e.height),u.forEach((e=>{const{x:n,y:i,radius:o,bubbleColor:a,borderColor:r,borderThickness:l,opacity:u,fontColor:c,fontFamily:h,fontSize:f,fontStyle:m,fontWeight:v,textAlign:y,textTransform:g,textBaseline:p}=function(t,e){var n,i,o,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!==(i=null!==(n=t.bubbleColor)&&void 0!==n?n:e.defaultBubbleColor)&&void 0!==i?i:"#3498db",borderColor:null!==(o=t.borderColor)&&void 0!==o?o:"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,i,o,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=y,d.textBaseline=p;let b=e.label||"";if("uppercase"===g?b=b.toUpperCase():"lowercase"===g?b=b.toLowerCase():"capitalize"===g&&(b=b.replace(/\b\w/g,(t=>t.toUpperCase()))),t.textWrap){const a=1.5*o-10,r=1.2*f,l=function(t,e,n,i,o,a=14,r=400,l="normal",s="Arial",d=0,u=5,c=1.2){const h=1.5*(o-u),f=a*c,m=Math.max(1,Math.floor(h/f)),v="auto"===i||void 0===i?m:Math.min(i,m);n=Math.max(0,n-d);const y=e.split(" ");let g="";const p=[];let x=!1,b=!1;for(const e of y){const i=g?`${g} ${e}`:e;if(t.font=`${r||""} ${l||""} ${a}px ${s}`,t.measureText(i).width<=n)g=i;else if(g.trim()&&p.push(g),g=e,t.measureText(g).width>n){let e=g;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(g&&p.length<v&&!b&&p.push(g),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,o,f,v,m,h),s=i-(l.length-1)*r/2;l.forEach(((t,e)=>d.fillText(t,n,s+e*r)))}else d.fillText(e.label,n,i)}))):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,o,a,r,l,s,d,u,c,h,f,m,v,y,g,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 e=document.createElement("div");e.innerHTML=b.trim();const n=e.firstElementChild;return n.style.display="none",n.style.visibility="hidden",n.style.opacity="0",i(n,t.canvasContainerId)}const C=document.createElement("div");C.id="bubbleChartTooltip",C.style.display="none";const M=null!==(o=null==t?void 0:t.tooltipOptions)&&void 0!==o?o:{},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!==(a=M.backgroundColor)&&void 0!==a?a:"rgba(0, 0, 0, 0.85)",color:null!==(r=M.fontColor)&&void 0!==r?r:"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!==(m=M.boxShadow)&&void 0!==m?m:"none",maxWidth:w(M.maxWidth,"200px"),minWidth:w(M.minWidth,"auto"),maxHeight:w(M.maxHeight,"none"),minHeight:w(M.minHeight,"auto"),zIndex:String(null!==(v=M.zIndex)&&void 0!==v?v:1e3),transition:null!==(y=M.transition)&&void 0!==y?y:"opacity 0.2s",transform:null!==(g=M.transform)&&void 0!==g?g:"none",backdropFilter:null!==(p=M.backdropFilter)&&void 0!==p?p:"none",opacity:String(null!==(x=M.opacity)&&void 0!==x?x:1),display:"none",visibility:"hidden"}),i(C,t.canvasContainerId),C}(t));let m=null;if(e.addEventListener("mousemove",(i=>{m||(m=requestAnimationFrame((()=>{(function(t,e,i,r,l){const{mouseX:s,mouseY:d}=o(t,i),u=a(s,d,e);(null==l?void 0:l.cursorType)&&(n=null==l?void 0:l.cursorType),r&&(u?function(t,e,i,o){e&&e.value&&i&&o&&(i.style.cursor=n,o.style.display="block",o.innerHTML=function(t){var e,n,i;if(!t)return"";const o=null===(n=null===(e=t.toolTipConfig)||void 0===e?void 0:e.tooltipText)||void 0===n?void 0:n.trim();if(o)return`<div>${o}</div>`;const a=null===(i=t.label)||void 0===i?void 0:i.trim();return a?`<div>${a}<br>Value: ${t.value}</div>`:`<div>${t.value}</div>`}(e),o.style.left=`${t.pageX+15}px`,o.style.top=t.pageY-30+"px",o.style.zIndex="9999",o.style.visibility="visible",o.style.opacity="1")}(t,u,i,r):(i.style.cursor="default",r.style.display="none",r.style.visibility="hidden",r.style.opacity="0"))})(i,u,e,f,t),m=null})))})),t.onBubbleClick){let n=null;e.addEventListener("click",(i=>{n||(n=requestAnimationFrame((()=>{!function(t,e,n,i){const{mouseX:r,mouseY:l}=o(t,n),s=a(r,l,e);null!=s&&i.onBubbleClick&&i.onBubbleClick(s,t)}(i,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 i=(o=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),o));var o;return d(i),i}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.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})()));
+!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,e){if(!e)return console.error("Invalid containerId."),null;const n=document.getElementById(e);if(!n)return console.error("Container not found."),null;const o=n.parentElement;return o?o.querySelector("#bubbleChartTooltip")||(o.prepend(t),t):(console.error("Parent container not found."),null)}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,y=Math.hypot(h,f),m=t.value/u*.02;t.x+=h/y*m,t.y+=f/y*m}));const c=a-t.x,h=s-t.y,f=Math.hypot(c,h),y=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/y)));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:y,fontWeight:m,textAlign:v,textTransform:p,textBaseline:g}=function(t,e){var n,o,i,r,a,l,d,u,c,h,f,y;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!==(y=e.defaultFontFamily)&&void 0!==y?y:"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=`${y} ${m} ${f}px ${h}`;d.fillStyle=c,d.font=x,d.textAlign=v,d.textBaseline=g;let b=e.label||"";if("uppercase"===p?b=b.toUpperCase():"lowercase"===p?b=b.toLowerCase():"capitalize"===p&&(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,y=Math.max(1,Math.floor(h/f)),m="auto"===o||void 0===o?y:Math.min(o,y);n=Math.max(0,n-d);const v=e.split(" ");let p="";const g=[];let x=!1,b=!1;for(const e of v){const o=p?`${p} ${e}`:e;if(t.font=`${a||""} ${l||""} ${r}px ${s}`,t.measureText(o).width<=n)p=o;else if(p.trim()&&g.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);g.push(e+"..."),b=!0;break}if(g.length>=m){x=!0;break}}if(p&&g.length<m&&!b&&g.push(p),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,m,y,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,y,m,v,p,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 e=document.createElement("div");e.innerHTML=b.trim();const n=e.firstElementChild;return n.style.display="none",n.style.visibility="hidden",n.style.opacity="0",o(n,t.canvasContainerId)}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!==(y=M.boxShadow)&&void 0!==y?y:"none",maxWidth:w(M.maxWidth,"200px"),minWidth:w(M.minWidth,"auto"),maxHeight:w(M.maxHeight,"none"),minHeight:w(M.minHeight,"auto"),zIndex:String(null!==(m=M.zIndex)&&void 0!==m?m:1e3),transition:null!==(v=M.transition)&&void 0!==v?v:"opacity 0.2s",transform:null!==(p=M.transform)&&void 0!==p?p:"none",backdropFilter:null!==(g=M.backdropFilter)&&void 0!==g?g:"none",opacity:String(null!==(x=M.opacity)&&void 0!==x?x:1),display:"none",visibility:"hidden"}),o(C,t.canvasContainerId),C}(t));let y=null;if(e.addEventListener("mousemove",(o=>{y||(y=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",i.style.visibility="visible",i.style.opacity="1")}(t,u,o,a):(o.style.cursor="default",a.style.display="none",a.style.visibility="hidden",a.style.opacity="0"))})(o,u,e,f,t),y=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/tooltip.d.ts

@@ -1,6 +1,6 @@
 import { DataItemInfo } from "../models/internal/data-item-info";
 import { Configuration } from "../models/public/configuration";
-export declare function createTooltipElement(config: Configuration): HTMLDivElement;
+export declare function createTooltipElement(config: Configuration): HTMLDivElement | null;
 export declare function onBubbleClickEventHandler(// TODO : move to interactions.ts
 event: MouseEvent, data: DataItemInfo[], canvas: HTMLCanvasElement, config: Configuration): void;
 export declare function handleMouseMove(event: MouseEvent, data: DataItemInfo[], canvas: HTMLCanvasElement, tooltip: HTMLDivElement, config: Configuration): void;

package/index.html

@@ -14,6 +14,9 @@
 
 <body>
     <div id="bubbleChart" style="width: 478px; height: 389px;"></div>
+    <div class="">
+        <div id="bubbleChart1" style="width: 478px; height: 389px;"></div>
+    </div>
     <script>
         const data = [
             {
@@ -76,6 +79,140 @@
 
         document.addEventListener("DOMContentLoaded", function () {
             if (typeof initializeChart === "function") {
+                //                 const chartOptions = {
+                //                     canvasContainerId: 'bubbleChart',
+                //                     data: [
+                //                         {
+                //                             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: '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: '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: 'Request for Information Update',
+                //                             value: 73,
+                //                             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: 'Supply Issues',
+                //                             value: 96,
+                //                             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: 'Smart Services',
+                //                             value: 119,
+                //                             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: '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: '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: '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>
+                // `,
+                //                             },
+                //                         },
+                //                     ],
+                //                     defaultFontFamily: 'Roboto',
+                //                     onBubbleClick: (bubbleData, event) => {
+                //                         alert(`You clicked on: ${bubbleData.label}`);
+                //                     },
+                //                     tooltipOptions: {
+                //                         // fontStyle: 'italic',
+                //                         // fontWeight: 800,
+                //                         // textAlign: 'center',
+                //                         // textDecoration: 'underline',
+                //                         // textTransform: 'uppercase',
+                //                         // fontColor: '#FFF',
+                //                     },
+                //                 }
                 const chartOptions = {
                     canvasContainerId: 'bubbleChart',
                     data: [
@@ -85,12 +222,6 @@
                             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: 'Reconnection',
@@ -98,12 +229,6 @@
                             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: 'Refund Request',
@@ -111,12 +236,6 @@
                             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: 'Request for Information Update',
@@ -124,12 +243,6 @@
                             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: 'Supply Issues',
@@ -137,12 +250,6 @@
                             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: 'Smart Services',
@@ -150,12 +257,6 @@
                             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: 'High Consumption',
@@ -163,12 +264,6 @@
                             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: 'Billing Inquiry',
@@ -176,12 +271,6 @@
                             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: 'Wrong Bill',
@@ -189,12 +278,6 @@
                             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>
-`,
-                            },
                         },
                     ],
                     defaultFontFamily: 'Roboto',
@@ -212,8 +295,89 @@
                 }
 
 
+                const chartOptions1 = {
+                    canvasContainerId: 'bubbleChart1',
+                    data: [
+                        {
+                            label: 'Activation of supply for Electricity and Water',
+                            value: 307,
+                            bubbleColor: '#024831',
+                            fontColor: '#FFFFFF',
+                            fontWeight: 600,
+                        },
+                        {
+                            label: 'Reconnection',
+                            value: 114,
+                            bubbleColor: '#03714d',
+                            fontColor: '#FFF',
+                            fontWeight: 600,
+                        },
+                        {
+                            label: 'Refund Request',
+                            value: 92,
+                            bubbleColor: '#03714d',
+                            fontColor: '#000',
+                            fontWeight: 400,
+                        },
+                        {
+                            label: 'Request for Information Update',
+                            value: 73,
+                            bubbleColor: '#049e6b',
+                            fontColor: '#000',
+                            fontWeight: 400,
+                        },
+                        {
+                            label: 'Supply Issues',
+                            value: 96,
+                            bubbleColor: '#31b086',
+                            fontColor: '#000',
+                            fontWeight: 400,
+                        },
+                        {
+                            label: 'Smart Services',
+                            value: 119,
+                            bubbleColor: '#03875c',
+                            fontColor: '#000',
+                            fontWeight: 400,
+                        },
+                        {
+                            label: 'High Consumption',
+                            value: 87,
+                            bubbleColor: '#03875c',
+                            fontColor: '#000',
+                            fontWeight: 400,
+                        },
+                        {
+                            label: 'Billing Inquiry',
+                            value: 103,
+                            bubbleColor: '#03875c',
+                            fontColor: '#000',
+                            fontWeight: 400,
+                        },
+                        {
+                            label: 'Wrong Bill',
+                            value: 92,
+                            bubbleColor: '#03875c',
+                            fontColor: '#000',
+                            fontWeight: 400,
+                        },
+                    ],
+                    defaultFontFamily: 'Roboto',
+                    onBubbleClick: (bubbleData, event) => {
+                        alert(`You clicked on: ${bubbleData.label}`);
+                    },
+                    tooltipOptions: {
+                        // fontStyle: 'italic',
+                        // fontWeight: 800,
+                        // textAlign: 'center',
+                        // textDecoration: 'underline',
+                        // textTransform: 'uppercase',
+                        // fontColor: '#FFF',
+                    },
+                }
+
                 initializeChart(chartOptions);
-                initializeChart(chartOptions);
+                initializeChart(chartOptions1);
             } else {
                 console.error("initializeChart is not defined");
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bubble-chart-js",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "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",