bubble-chart-js 1.0.13 → 1.0.17

package/CHANGELOG.md

@@ -15,3 +15,7 @@ All notable changes to this project will be documented in this file.
 ---
 
 **📝 Note:** This is the first commit to the repository. Future updates will include feature enhancements, bug fixes, and optimizations. Stay tuned! 🚀
+
+### Fixed
+
+- Fixed incorrect mouse coordinate detection on high-DPI displays by scaling with `devicePixelRatio`.

package/dist/bubbleChart.cjs.js

@@ -1 +1 @@
-(()=>{"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",n.style.position="absolute",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){if(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);const r=i.getBoundingClientRect();o.style.left=t.clientX-r.left+15+"px",o.style.top=t.clientY-r.top+15+"px",o.style.zIndex="999999",o.style.visibility="visible",o.style.opacity="1",o.style.position="absolute"}}(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})();
+(()=>{"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 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 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{width:u,height:c}=m(e,d),h=function(t,e,n){const o=Math.min((e-10)/2,(n-10)/2),i=e/2,a=n/2,r=[...t.data].sort((t,e)=>e.value-t.value).map(t=>Object.assign(Object.assign({},t),{radius:0,x:0,y:0,fixed:!1})),s=r[0].value,d=Math.min(.5*o,.2*Math.min(e,n)),u=Math.max(.3*d,.05*Math.min(e,n));r.forEach(t=>{const o=t.value/s;t.radius=u+o*(d-u),t.radius=Math.min(t.radius,(e-10)/2,(n-10)/2)}),r.forEach((t,o)=>{if(0===o)t.x=i,t.y=a,t.fixed=!0;else{const l=r[0].radius+t.radius+3,s=Math.PI*(3-Math.sqrt(5)),d=e-5-t.radius,u=n-5-t.radius;t.x=Math.min(d,Math.max(5+t.radius,i+Math.cos(s*o)*l)),t.y=Math.min(u,Math.max(5+t.radius,a+Math.sin(s*o)*l)),t.fixed=!1}});for(let t=0;t<l.iterations;t++)r.forEach((t,n)=>{if(0===n){const e=i-t.x,n=a-t.y;return void(Math.hypot(e,n)>2&&(t.x+=e*l.centerDamping,t.y+=n*l.centerDamping))}let o=0,d=0;const u=t.radius+5;t.x<u?o+=(u-t.x)*l.boundaryForce:t.x>e-u&&(o+=(e-u-t.x)*l.boundaryForce),r.forEach(e=>{if(t===e)return;const n=t.x-e.x,r=t.y-e.y,u=Math.hypot(n,r),c=t.radius+e.radius;if(u<1.5*c){const t=l.forceStrength*(c/Math.max(u,.1));o+=n/u*t,d+=r/u*t}const h=i-t.x,f=a-t.y,m=Math.hypot(h,f),y=t.value/s*.02;t.x+=h/m*y,t.y+=f/m*y});const c=i-t.x,h=a-t.y,f=Math.hypot(c,h),m=r[0].radius+t.radius+l.centerRadiusBuffer,y=(l.centerForce,Math.pow(t.value/s,.3),l.centerAttraction*(1-t.value/s)*(1-Math.min(1,f/m)));t.x+=c*y,t.y+=h*y,t.x+=o*(1-l.damping),t.y+=d*(1-l.damping)}),r.forEach((t,e)=>{r.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 r.forEach(t=>{const o=Math.max(5+t.radius,Math.min(e-5-t.radius,t.x)),i=Math.max(5+t.radius,Math.min(n-5-t.radius,t.y));(!t.fixed||Math.hypot(t.x-o,t.y-i)>2)&&(t.x=o,t.y=i)}),r}(t,u,c);function f(){e&&d?(m(e,d),d.clearRect(0,0,e.width,e.height),h.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:y,textAlign:v,textTransform:g,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} ${y} ${f}px ${h}`;d.fillStyle=c,d.font=x,d.imageSmoothingEnabled=!0,d.imageSmoothingQuality="high",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 a=1.5*i-10,r=1.4*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)),y="auto"===o||void 0===o?m:Math.min(o,m);n=Math.max(0,n-2*d);const v=e.split(" ");let g="";const p=[];let x=!1,b=!1;t.font=`${r||""} ${l||""} ${a}px ${s}`,t.imageSmoothingEnabled=!0,t.imageSmoothingQuality="high";for(const e of v){const o=g?`${g} ${e}`:e;if(t.measureText(o).width<=n)g=o;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>=y){x=!0;break}}if(g&&p.length<y&&!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,i,f,y,m,h),s=o-(l.length-1)*r/2;l.forEach((t,e)=>{const o=Math.round(n),i=Math.round(s+e*r);d.fillText(t,o,i)})}else d.fillText(e.label,Math.round(n),Math.round(o))})):console.warn("canvas or ctx is not valid")}function m(t,e){const n=window.devicePixelRatio||1,o=t.getBoundingClientRect();return t.width=o.width*n,t.height=o.height*n,t.style.width=`${o.width}px`,t.style.height=`${o.height}px`,e.setTransform(1,0,0,1,0,0),e.scale(n,n),{width:o.width,height:o.height,dpr:n}}function y(){const n=document.getElementById(t.canvasContainerId);n&&e&&(e.width=n.offsetWidth,e.height=n.offsetHeight,e.getContext("2d"),f())}let v;t.isResizeCanvasOnWindowSizeChange&&(y(),window.addEventListener("resize",y)),f(),t.showToolTip&&(v=function(t){var e,n,i,a,r,l,s,d,u,c,h,f,m,y,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",n.style.position="absolute",o(n,t.canvasContainerId)}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:{},S=(t,e)=>"number"==typeof t?`${t}px`:null!=t?t:e;return Object.assign(M.style,{position:"absolute",padding:S(C.padding,"8px"),margin:S(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:S(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:S(C.letterSpacing,"normal"),border:(()=>{var t;if(!C.borderStyle)return"none";const e=S(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",maxWidth:S(C.maxWidth,"200px"),minWidth:S(C.minWidth,"auto"),maxHeight:S(C.maxHeight,"none"),minHeight:S(C.minHeight,"auto"),zIndex:String(null!==(y=C.zIndex)&&void 0!==y?y: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"}),o(M,t.canvasContainerId),M}(t));let g=null;if(e.addEventListener("mousemove",o=>{g||(g=requestAnimationFrame(()=>{(function(t,e,o,r,l){const{mouseX:s,mouseY:d}=i(t,o),u=a(s,d,e);n=(null==l?void 0:l.cursorType)||"pointer",o.style.cursor="default",r&&(u?function(t,e,o,i){if(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);const a=o.getBoundingClientRect();i.style.left=t.clientX-a.left+15+"px",i.style.top=t.clientY-a.top+15+"px",i.style.zIndex="999999",i.style.visibility="visible",i.style.opacity="1",i.style.position="absolute"}}(t,u,o,r):(o.style.cursor="default",r.style.display="none",r.style.visibility="hidden",r.style.opacity="0"))})(o,h,e,v,t),g=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,h,e,t),n=null}))})}}const u={defaultBubbleColor:"#3498DB",defaultFontColor:"#ffffff",minRadius:10,maxLines:"auto",textWrap:!0,isResizeCanvasOnWindowSizeChange:!0,fontSize:14,defaultFontFamily:"Arial",showToolTip:!0};function c(t={}){var e,n;if(!t)return void console.error("Configuration is not valid. Chart initialization aborted.");if(!t.data||0===t.data.length)return void console.error("No valid data provided. Chart initialization aborted.");const o=(i=Object.assign({canvasContainerId:null!==(e=t.canvasContainerId)&&void 0!==e?e:"chart-container",data:null!==(n=t.data)&&void 0!==n?n:[]},t),Object.assign(Object.assign({},u),i));var i;return d(o),o}class h{constructor(t){const e=c(t);e&&(this.configuration=e)}render(){this.configuration&&d(this.configuration)}}window.initializeChart=c,module.exports=e})();

package/dist/bubbleChart.esm.js

@@ -1 +1 @@
-let t="default";function n(t,n){if(!n)return console.error("Invalid containerId."),null;const e=document.getElementById(n);if(!e)return console.error("Container not found."),null;const i=e.parentElement;return i?i.querySelector("#bubbleChartTooltip")||(i.prepend(t),t):(console.error("Parent container not found."),null)}function e(t,n){const e=n.getBoundingClientRect();return{mouseX:t.clientX-e.left,mouseY:t.clientY-e.top}}function i(t,n,e){return e.find(e=>Math.hypot(t-e.x,n-e.y)<e.radius)||null}class o{}o.TRANSPARENT="transparent";function a(t,n=14,e=400,i=6){const o=e>=700?1.25:e>=500?1.1:1,a=Math.min(t/i,t/1.2);let r=Math.min(n*o,a,.8*t);return r=Math.max(r,Math.max(8,t/6)),Math.round(r)}function r(r){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)}(r))return;let l=function(t){var n,e;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 a=document.createElement("canvas");return a.width=i.offsetWidth,a.height=i.offsetHeight,Object.assign(a.style,{border:(null===(n=t.canvasBorderColor)||void 0===n?void 0:n.trim())?`1px solid #${t.canvasBorderColor}`:o.TRANSPARENT,background:(null===(e=t.canvasBackgroundColor)||void 0===e?void 0:e.trim())?`#${t.canvasBackgroundColor}`:o.TRANSPARENT,width:"100%",height:"100%",display:"block",imageRendering:"crisp-edges",aspectRatio:"1 / 1"}),a.style.setProperty("image-rendering","-moz-crisp-edges"),a.style.setProperty("image-rendering","-webkit-optimize-contrast"),a.style.setProperty("-ms-interpolation-mode","nearest-neighbor"),i.appendChild(a),a}(r);if(!l)return;const s=l.getContext("2d");if(!s)return void console.error("Invalid context");const d=function(t,n,e){const i=Math.min((n.width-10)/2,(n.height-10)/2),o=window.devicePixelRatio||1,a=n.getBoundingClientRect();n.width=a.width*o,n.height=a.height*o,n.style.width=a.width+"px",n.style.height=a.height+"px",e.scale(o,o);const r=a.width/2,l=a.height/2,s=[...t.data].sort((t,n)=>n.value-t.value).map(t=>Object.assign(Object.assign({},t),{radius:0,x:0,y:0,fixed:!1})),d=s[0].value,u=Math.min(.5*i,.2*Math.min(n.width,n.height)),c=Math.max(.3*u,.05*Math.min(n.width,n.height));s.forEach(t=>{const e=t.value/d;t.radius=c+e*(u-c),t.radius=Math.min(t.radius,(n.width-10)/2,(n.height-10)/2)}),s.forEach((t,e)=>{if(0===e)t.x=r,t.y=l,t.fixed=!0;else{const i=s[0].radius+t.radius+3,o=Math.PI*(3-Math.sqrt(5)),a=n.width-5-t.radius,d=n.height-5-t.radius;t.x=Math.min(a,Math.max(5+t.radius,r+Math.cos(o*e)*i)),t.y=Math.min(d,Math.max(5+t.radius,l+Math.sin(o*e)*i)),t.fixed=!1}});for(let t=0;t<1e3;t++)s.forEach((t,e)=>{if(0===e){const n=r-t.x,e=l-t.y;return void(Math.hypot(n,e)>2&&(t.x+=.3*n,t.y+=.3*e))}let i=0,o=0;const a=t.radius+5;t.x<a?i+=.02*(a-t.x):t.x>n.width-a&&(i+=.02*(n.width-a-t.x)),s.forEach(n=>{if(t===n)return;const e=t.x-n.x,a=t.y-n.y,s=Math.hypot(e,a),u=t.radius+n.radius;if(s<1.5*u){const t=u/Math.max(s,.1)*.008;i+=e/s*t,o+=a/s*t}const c=r-t.x,h=l-t.y,f=Math.hypot(c,h),v=t.value/d*.02;t.x+=c/f*v,t.y+=h/f*v});const u=r-t.x,c=l-t.y,h=Math.hypot(u,c),f=s[0].radius+t.radius+35,v=(Math.pow(t.value/d,.3),.8*(1-t.value/d)*(1-Math.min(1,h/f)));t.x+=u*v,t.y+=c*v,t.x+=.35*i,t.y+=.35*o}),s.forEach((t,n)=>{s.forEach((e,i)=>{if(n>=i)return;if(0===n||0===i){const i=0===n?t:e,o=0===n?e: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,n=Math.atan2(r,a);o.x+=Math.cos(n)*t*.7,o.y+=Math.sin(n)*t*.7}return}const o=t.x-e.x,a=t.y-e.y,r=Math.hypot(o,a),l=t.radius+e.radius-5;if(r<l){const n=(l-r)*(.3+.04),i=Math.atan2(a,o),s=e.radius/(t.radius+e.radius);t.fixed||(t.x+=Math.cos(i)*n*s,t.y+=Math.sin(i)*n*s),e.fixed||(e.x-=Math.cos(i)*n*(1-s),e.y-=Math.sin(i)*n*(1-s))}})});return s.forEach(t=>{const e=Math.max(5+t.radius,Math.min(n.width-5-t.radius,t.x)),i=Math.max(5+t.radius,Math.min(n.height-5-t.radius,t.y));(!t.fixed||Math.hypot(t.x-e,t.y-i)>2)&&(t.x=e,t.y=i)}),s}(r,l,s);function u(){l&&s?(s.clearRect(0,0,l.width,l.height),d.forEach(t=>{const{x:n,y:e,radius:i,bubbleColor:o,borderColor:l,borderThickness:d,opacity:u,fontColor:c,fontFamily:h,fontSize:f,fontStyle:v,fontWeight:y,textAlign:m,textTransform:x,textBaseline:p}=function(t,n){var e,i,o,r,l,s,d,u,c,h,f,v;return{x:t.x,y:t.y,radius:Math.max(t.radius||0,n.minRadius||10),bubbleColor:null!==(i=null!==(e=t.bubbleColor)&&void 0!==e?e:n.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!==(l=t.textAlign)&&void 0!==l?l:"center",textTransform:null!==(s=t.textTransform)&&void 0!==s?s:"none",fontColor:null!==(u=null!==(d=t.fontColor)&&void 0!==d?d:n.defaultFontColor)&&void 0!==u?u:"#000",textBaseline:null!==(c=t.textBaseline)&&void 0!==c?c:"middle",fontSize:Math.max(a(t.radius||n.minRadius||10,null!==(h=n.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!==(v=n.defaultFontFamily)&&void 0!==v?v:"Arial"}, sans-serif`}}(t,r);s.beginPath(),s.arc(n,e,i,0,2*Math.PI),s.fillStyle=o,s.fill(),s.strokeStyle=l,s.lineWidth=d,s.stroke();const g=`${v} ${y} ${f}px ${h}`;s.fillStyle=c,s.font=g,s.textAlign=m,s.textBaseline=p;let b=t.label||"";if("uppercase"===x?b=b.toUpperCase():"lowercase"===x?b=b.toLowerCase():"capitalize"===x&&(b=b.replace(/\b\w/g,t=>t.toUpperCase())),r.textWrap){const o=1.5*i-10,a=1.2*f,l=function(t,n,e,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,v=Math.max(1,Math.floor(h/f)),y="auto"===i||void 0===i?v:Math.min(i,v);e=Math.max(0,e-d);const m=n.split(" ");let x="";const p=[];let g=!1,b=!1;for(const n of m){const i=x?`${x} ${n}`:n;if(t.font=`${r||""} ${l||""} ${a}px ${s}`,t.measureText(i).width<=e)x=i;else if(x.trim()&&p.push(x),x=n,t.measureText(x).width>e){let n=x;for(;t.measureText(n+"...").width>e&&n.length>0;)n=n.slice(0,-1);p.push(n+"..."),b=!0;break}if(p.length>=y){g=!0;break}}if(x&&p.length<y&&!b&&p.push(x),g&&p.length>0){let n=p[p.length-1];for(;t.measureText(n+"...").width>e&&n.length>0;)n=n.slice(0,-1);p[p.length-1]=n+"..."}return p}(s,t.label,o,r.maxLines,i,f,y,v,h),d=e-(l.length-1)*a/2;l.forEach((t,e)=>s.fillText(t,n,d+e*a))}else s.fillText(t.label,n,e)})):console.warn("canvas or ctx is not valid")}function c(){const t=document.getElementById(r.canvasContainerId);t&&l&&(l.width=t.offsetWidth,l.height=t.offsetHeight,u())}let h;r.isResizeCanvasOnWindowSizeChange&&(c(),window.addEventListener("resize",c)),u(),r.showToolTip&&(h=function(t){var e,i,o,a,r,l,s,d,u,c,h,f,v,y,m,x,p,g;const b=null===(i=null===(e=t.data[0].toolTipConfig)||void 0===e?void 0:e.tooltipFormattedData)||void 0===i?void 0:i.trim();if(b){const e=document.createElement("div");e.innerHTML=b.trim();const i=e.firstElementChild;return i.style.display="none",i.style.visibility="hidden",i.style.opacity="0",i.style.position="absolute",n(i,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,n)=>"number"==typeof t?`${t}px`:null!=t?t:n;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 n=w(C.borderWidth,"1px"),e=null!==(t=C.borderColor)&&void 0!==t?t:"transparent";return`${n} ${C.borderStyle} ${e}`})(),boxShadow:null!==(v=C.boxShadow)&&void 0!==v?v:"none",maxWidth:w(C.maxWidth,"200px"),minWidth:w(C.minWidth,"auto"),maxHeight:w(C.maxHeight,"none"),minHeight:w(C.minHeight,"auto"),zIndex:String(null!==(y=C.zIndex)&&void 0!==y?y:1e3),transition:null!==(m=C.transition)&&void 0!==m?m:"opacity 0.2s",transform:null!==(x=C.transform)&&void 0!==x?x:"none",backdropFilter:null!==(p=C.backdropFilter)&&void 0!==p?p:"none",opacity:String(null!==(g=C.opacity)&&void 0!==g?g:1),display:"none",visibility:"hidden"}),n(M,t.canvasContainerId),M}(r));let f=null;if(l.addEventListener("mousemove",n=>{f||(f=requestAnimationFrame(()=>{(function(n,o,a,r,l){const{mouseX:s,mouseY:d}=e(n,a),u=i(s,d,o);(null==l?void 0:l.cursorType)&&(t=null==l?void 0:l.cursorType),r&&u?function(n,e,i,o){if(e&&e.value&&i&&o){i.style.cursor=t,o.style.display="block",o.innerHTML=function(t){var n,e,i;if(!t)return"";const o=null===(e=null===(n=t.toolTipConfig)||void 0===n?void 0:n.tooltipText)||void 0===e?void 0:e.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);const a=i.getBoundingClientRect();o.style.left=n.clientX-a.left+15+"px",o.style.top=n.clientY-a.top+15+"px",o.style.zIndex="999999",o.style.visibility="visible",o.style.opacity="1",o.style.position="absolute"}}(n,u,a,r):(a.style.cursor="default",r.style.display="none",r.style.visibility="hidden",r.style.opacity="0")})(n,d,l,h,r),f=null}))}),r.onBubbleClick){let t=null;l.addEventListener("click",n=>{t||(t=requestAnimationFrame(()=>{!function(t,n,o,a){const{mouseX:r,mouseY:l}=e(t,o),s=i(r,l,n);null!=s&&a.onBubbleClick&&a.onBubbleClick(s,t)}(n,d,l,r),t=null}))})}}const l={defaultBubbleColor:"#3498DB",defaultFontColor:"#ffffff",minRadius:10,maxLines:"auto",textWrap:!0,isResizeCanvasOnWindowSizeChange:!0,fontSize:14,defaultFontFamily:"Arial",showToolTip:!0};function s(t={}){var n,e;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!==(n=t.canvasContainerId)&&void 0!==n?n:"chart-container",data:null!==(e=t.data)&&void 0!==e?e:[]},t),Object.assign(Object.assign({},l),o));var o;return r(i),i}class d{constructor(t){const n=s(t);n&&(this.configuration=n)}render(){this.configuration&&r(this.configuration)}}window.initializeChart=s;export{d as BubbleChart,s as initializeChart};
+let t="default";function n(t,n){if(!n)return console.error("Invalid containerId."),null;const e=document.getElementById(n);if(!e)return console.error("Container not found."),null;const o=e.parentElement;return o?o.querySelector("#bubbleChartTooltip")||(o.prepend(t),t):(console.error("Parent container not found."),null)}function e(t,n){const e=n.getBoundingClientRect();return{mouseX:t.clientX-e.left,mouseY:t.clientY-e.top}}function o(t,n,e){return e.find(e=>Math.hypot(t-e.x,n-e.y)<e.radius)||null}class i{}i.TRANSPARENT="transparent";function a(t,n=14,e=400,o=6){const i=e>=700?1.25:e>=500?1.1:1,a=Math.min(t/o,t/1.2);let r=Math.min(n*i,a,.8*t);return r=Math.max(r,Math.max(8,t/6)),Math.round(r)}function r(r){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)}(r))return;let l=function(t){var n,e;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 a=document.createElement("canvas");return Object.assign(a.style,{border:(null===(n=t.canvasBorderColor)||void 0===n?void 0:n.trim())?`1px solid #${t.canvasBorderColor}`:i.TRANSPARENT,background:(null===(e=t.canvasBackgroundColor)||void 0===e?void 0:e.trim())?`#${t.canvasBackgroundColor}`:i.TRANSPARENT,width:"100%",height:"100%",display:"block",imageRendering:"crisp-edges",aspectRatio:"1 / 1"}),a.style.setProperty("image-rendering","-moz-crisp-edges"),a.style.setProperty("image-rendering","-webkit-optimize-contrast"),a.style.setProperty("-ms-interpolation-mode","nearest-neighbor"),o.appendChild(a),a}(r);if(!l)return;const s=l.getContext("2d");if(!s)return void console.error("Invalid context");const{width:d,height:u}=f(l,s),c=function(t,n,e){const o=Math.min((n-10)/2,(e-10)/2),i=n/2,a=e/2,r=[...t.data].sort((t,n)=>n.value-t.value).map(t=>Object.assign(Object.assign({},t),{radius:0,x:0,y:0,fixed:!1})),l=r[0].value,s=Math.min(.5*o,.2*Math.min(n,e)),d=Math.max(.3*s,.05*Math.min(n,e));r.forEach(t=>{const o=t.value/l;t.radius=d+o*(s-d),t.radius=Math.min(t.radius,(n-10)/2,(e-10)/2)}),r.forEach((t,o)=>{if(0===o)t.x=i,t.y=a,t.fixed=!0;else{const l=r[0].radius+t.radius+3,s=Math.PI*(3-Math.sqrt(5)),d=n-5-t.radius,u=e-5-t.radius;t.x=Math.min(d,Math.max(5+t.radius,i+Math.cos(s*o)*l)),t.y=Math.min(u,Math.max(5+t.radius,a+Math.sin(s*o)*l)),t.fixed=!1}});for(let t=0;t<1e3;t++)r.forEach((t,e)=>{if(0===e){const n=i-t.x,e=a-t.y;return void(Math.hypot(n,e)>2&&(t.x+=.3*n,t.y+=.3*e))}let o=0,s=0;const d=t.radius+5;t.x<d?o+=.02*(d-t.x):t.x>n-d&&(o+=.02*(n-d-t.x)),r.forEach(n=>{if(t===n)return;const e=t.x-n.x,r=t.y-n.y,d=Math.hypot(e,r),u=t.radius+n.radius;if(d<1.5*u){const t=u/Math.max(d,.1)*.008;o+=e/d*t,s+=r/d*t}const c=i-t.x,h=a-t.y,f=Math.hypot(c,h),m=t.value/l*.02;t.x+=c/f*m,t.y+=h/f*m});const u=i-t.x,c=a-t.y,h=Math.hypot(u,c),f=r[0].radius+t.radius+35,m=(Math.pow(t.value/l,.3),.8*(1-t.value/l)*(1-Math.min(1,h/f)));t.x+=u*m,t.y+=c*m,t.x+=.35*o,t.y+=.35*s}),r.forEach((t,n)=>{r.forEach((e,o)=>{if(n>=o)return;if(0===n||0===o){const o=0===n?t:e,i=0===n?e: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,n=Math.atan2(r,a);i.x+=Math.cos(n)*t*.7,i.y+=Math.sin(n)*t*.7}return}const i=t.x-e.x,a=t.y-e.y,r=Math.hypot(i,a),l=t.radius+e.radius-5;if(r<l){const n=(l-r)*(.3+.04),o=Math.atan2(a,i),s=e.radius/(t.radius+e.radius);t.fixed||(t.x+=Math.cos(o)*n*s,t.y+=Math.sin(o)*n*s),e.fixed||(e.x-=Math.cos(o)*n*(1-s),e.y-=Math.sin(o)*n*(1-s))}})});return r.forEach(t=>{const o=Math.max(5+t.radius,Math.min(n-5-t.radius,t.x)),i=Math.max(5+t.radius,Math.min(e-5-t.radius,t.y));(!t.fixed||Math.hypot(t.x-o,t.y-i)>2)&&(t.x=o,t.y=i)}),r}(r,d,u);function h(){l&&s?(f(l,s),s.clearRect(0,0,l.width,l.height),c.forEach(t=>{const{x:n,y:e,radius:o,bubbleColor:i,borderColor:l,borderThickness:d,opacity:u,fontColor:c,fontFamily:h,fontSize:f,fontStyle:m,fontWeight:y,textAlign:v,textTransform:x,textBaseline:g}=function(t,n){var e,o,i,r,l,s,d,u,c,h,f,m;return{x:t.x,y:t.y,radius:Math.max(t.radius||0,n.minRadius||10),bubbleColor:null!==(o=null!==(e=t.bubbleColor)&&void 0!==e?e:n.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!==(l=t.textAlign)&&void 0!==l?l:"center",textTransform:null!==(s=t.textTransform)&&void 0!==s?s:"none",fontColor:null!==(u=null!==(d=t.fontColor)&&void 0!==d?d:n.defaultFontColor)&&void 0!==u?u:"#000",textBaseline:null!==(c=t.textBaseline)&&void 0!==c?c:"middle",fontSize:Math.max(a(t.radius||n.minRadius||10,null!==(h=n.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=n.defaultFontFamily)&&void 0!==m?m:"Arial"}, sans-serif`}}(t,r);s.beginPath(),s.arc(n,e,o,0,2*Math.PI),s.fillStyle=i,s.fill(),s.strokeStyle=l,s.lineWidth=d,s.stroke();const p=`${m} ${y} ${f}px ${h}`;s.fillStyle=c,s.font=p,s.imageSmoothingEnabled=!0,s.imageSmoothingQuality="high",s.textAlign=v,s.textBaseline=g;let b=t.label||"";if("uppercase"===x?b=b.toUpperCase():"lowercase"===x?b=b.toLowerCase():"capitalize"===x&&(b=b.replace(/\b\w/g,t=>t.toUpperCase())),r.textWrap){const i=1.5*o-10,a=1.4*f,l=function(t,n,e,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)),y="auto"===o||void 0===o?m:Math.min(o,m);e=Math.max(0,e-2*d);const v=n.split(" ");let x="";const g=[];let p=!1,b=!1;t.font=`${r||""} ${l||""} ${a}px ${s}`,t.imageSmoothingEnabled=!0,t.imageSmoothingQuality="high";for(const n of v){const o=x?`${x} ${n}`:n;if(t.measureText(o).width<=e)x=o;else if(x.trim()&&g.push(x),x=n,t.measureText(x).width>e){let n=x;for(;t.measureText(n+"...").width>e&&n.length>0;)n=n.slice(0,-1);g.push(n+"..."),b=!0;break}if(g.length>=y){p=!0;break}}if(x&&g.length<y&&!b&&g.push(x),p&&g.length>0){let n=g[g.length-1];for(;t.measureText(n+"...").width>e&&n.length>0;)n=n.slice(0,-1);g[g.length-1]=n+"..."}return g}(s,t.label,i,r.maxLines,o,f,y,m,h),d=e-(l.length-1)*a/2;l.forEach((t,e)=>{const o=Math.round(n),i=Math.round(d+e*a);s.fillText(t,o,i)})}else s.fillText(t.label,Math.round(n),Math.round(e))})):console.warn("canvas or ctx is not valid")}function f(t,n){const e=window.devicePixelRatio||1,o=t.getBoundingClientRect();return t.width=o.width*e,t.height=o.height*e,t.style.width=`${o.width}px`,t.style.height=`${o.height}px`,n.setTransform(1,0,0,1,0,0),n.scale(e,e),{width:o.width,height:o.height,dpr:e}}function m(){const t=document.getElementById(r.canvasContainerId);t&&l&&(l.width=t.offsetWidth,l.height=t.offsetHeight,l.getContext("2d"),h())}let y;r.isResizeCanvasOnWindowSizeChange&&(m(),window.addEventListener("resize",m)),h(),r.showToolTip&&(y=function(t){var e,o,i,a,r,l,s,d,u,c,h,f,m,y,v,x,g,p;const b=null===(o=null===(e=t.data[0].toolTipConfig)||void 0===e?void 0:e.tooltipFormattedData)||void 0===o?void 0:o.trim();if(b){const e=document.createElement("div");e.innerHTML=b.trim();const o=e.firstElementChild;return o.style.display="none",o.style.visibility="hidden",o.style.opacity="0",o.style.position="absolute",n(o,t.canvasContainerId)}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,n)=>"number"==typeof t?`${t}px`:null!=t?t:n;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 n=w(C.borderWidth,"1px"),e=null!==(t=C.borderColor)&&void 0!==t?t:"transparent";return`${n} ${C.borderStyle} ${e}`})(),boxShadow:null!==(m=C.boxShadow)&&void 0!==m?m:"none",maxWidth:w(C.maxWidth,"200px"),minWidth:w(C.minWidth,"auto"),maxHeight:w(C.maxHeight,"none"),minHeight:w(C.minHeight,"auto"),zIndex:String(null!==(y=C.zIndex)&&void 0!==y?y:1e3),transition:null!==(v=C.transition)&&void 0!==v?v:"opacity 0.2s",transform:null!==(x=C.transform)&&void 0!==x?x:"none",backdropFilter:null!==(g=C.backdropFilter)&&void 0!==g?g:"none",opacity:String(null!==(p=C.opacity)&&void 0!==p?p:1),display:"none",visibility:"hidden"}),n(M,t.canvasContainerId),M}(r));let v=null;if(l.addEventListener("mousemove",n=>{v||(v=requestAnimationFrame(()=>{(function(n,i,a,r,l){const{mouseX:s,mouseY:d}=e(n,a),u=o(s,d,i);t=(null==l?void 0:l.cursorType)||"pointer",a.style.cursor="default",r&&(u?function(n,e,o,i){if(e&&e.value&&o&&i){o.style.cursor=t,i.style.display="block",i.innerHTML=function(t){var n,e,o;if(!t)return"";const i=null===(e=null===(n=t.toolTipConfig)||void 0===n?void 0:n.tooltipText)||void 0===e?void 0:e.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);const a=o.getBoundingClientRect();i.style.left=n.clientX-a.left+15+"px",i.style.top=n.clientY-a.top+15+"px",i.style.zIndex="999999",i.style.visibility="visible",i.style.opacity="1",i.style.position="absolute"}}(n,u,a,r):(a.style.cursor="default",r.style.display="none",r.style.visibility="hidden",r.style.opacity="0"))})(n,c,l,y,r),v=null}))}),r.onBubbleClick){let t=null;l.addEventListener("click",n=>{t||(t=requestAnimationFrame(()=>{!function(t,n,i,a){const{mouseX:r,mouseY:l}=e(t,i),s=o(r,l,n);null!=s&&a.onBubbleClick&&a.onBubbleClick(s,t)}(n,c,l,r),t=null}))})}}const l={defaultBubbleColor:"#3498DB",defaultFontColor:"#ffffff",minRadius:10,maxLines:"auto",textWrap:!0,isResizeCanvasOnWindowSizeChange:!0,fontSize:14,defaultFontFamily:"Arial",showToolTip:!0};function s(t={}){var n,e;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!==(n=t.canvasContainerId)&&void 0!==n?n:"chart-container",data:null!==(e=t.data)&&void 0!==e?e:[]},t),Object.assign(Object.assign({},l),i));var i;return r(o),o}class d{constructor(t){const n=s(t);n&&(this.configuration=n)}render(){this.configuration&&r(this.configuration)}}window.initializeChart=s;export{d as BubbleChart,s 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,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",n.style.position="absolute",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){if(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);const r=o.getBoundingClientRect();i.style.left=t.clientX-r.left+15+"px",i.style.top=t.clientY-r.top+15+"px",i.style.zIndex="999999",i.style.visibility="visible",i.style.opacity="1",i.style.position="absolute"}}(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})());
+!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 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{width:u,height:c}=m(e,d),h=function(t,e,n){const o=Math.min((e-10)/2,(n-10)/2),i=e/2,r=n/2,a=[...t.data].sort((t,e)=>e.value-t.value).map(t=>Object.assign(Object.assign({},t),{radius:0,x:0,y:0,fixed:!1})),s=a[0].value,d=Math.min(.5*o,.2*Math.min(e,n)),u=Math.max(.3*d,.05*Math.min(e,n));a.forEach(t=>{const o=t.value/s;t.radius=u+o*(d-u),t.radius=Math.min(t.radius,(e-10)/2,(n-10)/2)}),a.forEach((t,o)=>{if(0===o)t.x=i,t.y=r,t.fixed=!0;else{const l=a[0].radius+t.radius+3,s=Math.PI*(3-Math.sqrt(5)),d=e-5-t.radius,u=n-5-t.radius;t.x=Math.min(d,Math.max(5+t.radius,i+Math.cos(s*o)*l)),t.y=Math.min(u,Math.max(5+t.radius,r+Math.sin(s*o)*l)),t.fixed=!1}});for(let t=0;t<l.iterations;t++)a.forEach((t,n)=>{if(0===n){const e=i-t.x,n=r-t.y;return void(Math.hypot(e,n)>2&&(t.x+=e*l.centerDamping,t.y+=n*l.centerDamping))}let o=0,d=0;const u=t.radius+5;t.x<u?o+=(u-t.x)*l.boundaryForce:t.x>e-u&&(o+=(e-u-t.x)*l.boundaryForce),a.forEach(e=>{if(t===e)return;const n=t.x-e.x,a=t.y-e.y,u=Math.hypot(n,a),c=t.radius+e.radius;if(u<1.5*c){const t=l.forceStrength*(c/Math.max(u,.1));o+=n/u*t,d+=a/u*t}const h=i-t.x,f=r-t.y,m=Math.hypot(h,f),y=t.value/s*.02;t.x+=h/m*y,t.y+=f/m*y});const c=i-t.x,h=r-t.y,f=Math.hypot(c,h),m=a[0].radius+t.radius+l.centerRadiusBuffer,y=(l.centerForce,Math.pow(t.value/s,.3),l.centerAttraction*(1-t.value/s)*(1-Math.min(1,f/m)));t.x+=c*y,t.y+=h*y,t.x+=o*(1-l.damping),t.y+=d*(1-l.damping)}),a.forEach((t,e)=>{a.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 a.forEach(t=>{const o=Math.max(5+t.radius,Math.min(e-5-t.radius,t.x)),i=Math.max(5+t.radius,Math.min(n-5-t.radius,t.y));(!t.fixed||Math.hypot(t.x-o,t.y-i)>2)&&(t.x=o,t.y=i)}),a}(t,u,c);function f(){e&&d?(m(e,d),d.clearRect(0,0,e.width,e.height),h.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.imageSmoothingEnabled=!0,d.imageSmoothingQuality="high",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.4*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-2*d);const p=e.split(" ");let v="";const g=[];let x=!1,b=!1;t.font=`${a||""} ${l||""} ${r}px ${s}`,t.imageSmoothingEnabled=!0,t.imageSmoothingQuality="high";for(const e of p){const o=v?`${v} ${e}`:e;if(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)=>{const o=Math.round(n),i=Math.round(s+e*a);d.fillText(t,o,i)})}else d.fillText(e.label,Math.round(n),Math.round(o))})):console.warn("canvas or ctx is not valid")}function m(t,e){const n=window.devicePixelRatio||1,o=t.getBoundingClientRect();return t.width=o.width*n,t.height=o.height*n,t.style.width=`${o.width}px`,t.style.height=`${o.height}px`,e.setTransform(1,0,0,1,0,0),e.scale(n,n),{width:o.width,height:o.height,dpr:n}}function y(){const n=document.getElementById(t.canvasContainerId);n&&e&&(e.width=n.offsetWidth,e.height=n.offsetHeight,e.getContext("2d"),f())}let p;t.isResizeCanvasOnWindowSizeChange&&(y(),window.addEventListener("resize",y)),f(),t.showToolTip&&(p=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 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",n.style.position="absolute",o(n,t.canvasContainerId)}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:{},S=(t,e)=>"number"==typeof t?`${t}px`:null!=t?t:e;return Object.assign(M.style,{position:"absolute",padding:S(C.padding,"8px"),margin:S(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:S(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:S(C.letterSpacing,"normal"),border:(()=>{var t;if(!C.borderStyle)return"none";const e=S(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",maxWidth:S(C.maxWidth,"200px"),minWidth:S(C.minWidth,"auto"),maxHeight:S(C.maxHeight,"none"),minHeight:S(C.minHeight,"auto"),zIndex:String(null!==(y=C.zIndex)&&void 0!==y?y:1e3),transition:null!==(p=C.transition)&&void 0!==p?p:"opacity 0.2s",transform:null!==(v=C.transform)&&void 0!==v?v:"none",backdropFilter:null!==(g=C.backdropFilter)&&void 0!==g?g:"none",opacity:String(null!==(x=C.opacity)&&void 0!==x?x:1),display:"none",visibility:"hidden"}),o(M,t.canvasContainerId),M}(t));let v=null;if(e.addEventListener("mousemove",o=>{v||(v=requestAnimationFrame(()=>{(function(t,e,o,a,l){const{mouseX:s,mouseY:d}=i(t,o),u=r(s,d,e);n=(null==l?void 0:l.cursorType)||"pointer",o.style.cursor="default",a&&(u?function(t,e,o,i){if(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);const r=o.getBoundingClientRect();i.style.left=t.clientX-r.left+15+"px",i.style.top=t.clientY-r.top+15+"px",i.style.zIndex="999999",i.style.visibility="visible",i.style.opacity="1",i.style.position="absolute"}}(t,u,o,a):(o.style.cursor="default",a.style.display="none",a.style.visibility="hidden",a.style.opacity="0"))})(o,h,e,p,t),v=null}))}),t.onBubbleClick){let n=null;e.addEventListener("click",o=>{n||(n=requestAnimationFrame(()=>{!function(t,e,n,o){const{mouseX:a,mouseY:l}=i(t,n),s=r(a,l,e);null!=s&&o.onBubbleClick&&o.onBubbleClick(s,t)}(o,h,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/services/render-service.d.ts

@@ -1,3 +1,3 @@
 import { DataItemInfo } from "../models/internal/data-item-info";
 import { Configuration } from "../models/public/configuration";
-export declare function getChartData(config: Configuration, canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D): DataItemInfo[];
+export declare function getChartData(config: Configuration, width: number, height: number): DataItemInfo[];

package/index.html

@@ -16,8 +16,8 @@
             position: relative;
             overflow: hidden;
             /* Same as Angular */
-            width: 600px;
-            height: 400px;
+            width: 532px;
+            height: 322px;
             border: 1px solid red;
         }
 
@@ -122,153 +122,19 @@
 
         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: [
                         {
                             label: 'Activation of supply for Electricity and Water',
-                            value: 307,
+                            value: 3007,
                             bubbleColor: '#024831',
                             fontColor: '#FFFFFF',
                             fontWeight: 600,
                         },
                         {
                             label: 'Reconnection',
-                            value: 114,
+                            value: 1141,
                             bubbleColor: '#03714d',
                             fontColor: '#FFF',
                             fontWeight: 600,
@@ -282,46 +148,39 @@
                         },
                         {
                             label: 'Request for Information Update',
-                            value: 73,
+                            value: 731,
                             bubbleColor: '#049e6b',
                             fontColor: '#000',
                             fontWeight: 400,
                         },
                         {
                             label: 'Supply Issues',
-                            value: 96,
+                            value: 961,
                             bubbleColor: '#31b086',
                             fontColor: '#000',
                             fontWeight: 400,
                         },
                         {
                             label: 'Smart Services',
-                            value: 119,
+                            value: 1119,
                             bubbleColor: '#03875c',
                             fontColor: '#000',
                             fontWeight: 400,
                         },
                         {
                             label: 'High Consumption',
-                            value: 87,
+                            value: 187,
                             bubbleColor: '#03875c',
                             fontColor: '#000',
                             fontWeight: 400,
                         },
                         {
                             label: 'Billing Inquiry',
-                            value: 103,
+                            value: 1103,
                             bubbleColor: '#03875c',
                             fontColor: '#000',
                             fontWeight: 400,
-                        },
-                        {
-                            label: 'Wrong Bill',
-                            value: 92,
-                            bubbleColor: '#03875c',
-                            fontColor: '#000',
-                            fontWeight: 400,
-                        },
+                        }
                     ],
                     defaultFontFamily: 'Roboto',
                     onBubbleClick: (bubbleData, event) => {
@@ -422,7 +281,7 @@
                 }
 
                 initializeChart(chartOptions);
-                initializeChart(chartOptions1);
+                // initializeChart(chartOptions1);
             } else {
                 console.error("initializeChart is not defined");
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bubble-chart-js",
-  "version": "1.0.13",
+  "version": "1.0.17",
   "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",
@@ -24,7 +24,10 @@
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "glob": "^11.1.0",
     "jest": "^29.7.0",
+    "js-yaml": "^3.14.2",
+    "node-forge": "^1.3.2",
     "prettier": "^3.2.4",
     "rimraf": "^6.0.1",
     "ts-jest": "^29.2.6",
@@ -32,7 +35,7 @@
     "typescript": "^5.7.3",
     "webpack": "^5.98.0",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.2.1"
   },
   "author": "Pragadeeshwaran Pasupathi <pragadeeshwaran.pasupathi@gmail.com>",
   "repository": {