bubble-chart-js 1.0.4 → 1.0.6

package/CHANGELOG.md

@@ -2,8 +2,6 @@
 
 All notable changes to this project will be documented in this file.
 
-
-
 ## [Unreleased] - Initial Commit
 
 ### 🚀 Added

package/README.md

@@ -34,7 +34,7 @@ Scientific Research – Show relationships in grouped experimental data.
 
 Here’s an example of the bubble chart generated using this package:
 
-![Stacked Bubble Chart Example](./assets/bubble-chart.png)
+![Stacked Bubble Chart Example](https://github.com/Praga-Dev/bubbleChartJS/blob/HEAD/assets/bubble-chart.png)
 
 ## Installation
 
@@ -93,20 +93,19 @@ The `BubbleChart` class accepts a configuration object with the following proper
 
 The `BubbleChart` class accepts a configuration object with the following properties:
 
-| Property                           | Type                     | Required | Optional | Description                                                         | Default     |
-| ---------------------------------- | ------------------------ | -------- | -------- | ------------------------------------------------------------------- | ----------- |
-| `canvasContainerId`                | `string`                 | ✔️ Yes   | ❌ No    | The ID of the container where the chart will be rendered.           | `-`         |
-| `data`                             | `DataItem[]`             | ✔️ Yes   | ❌ No    | An array of objects containing `label` and `value` for each bubble. | `-`         |
-| `colorMap`                         | `Record<string, string>` | ❌ No    | ✔️ Yes   | A mapping of labels to specific bubble colors.                      | `{}`        |
-| `defaultBubbleColor`               | `string`                 | ❌ No    | ✔️ Yes   | Default color for bubbles if not specified in `colorMap`.           | `"#3498db"` |
-| `fontSize`                         | `number`                 | ❌ No    | ✔️ Yes   | Font size for bubble labels.                                        | `14`        |
-| `fontFamily`                       | `string`                 | ❌ No    | ✔️ Yes   | Font family for text rendering.                                     | `"Arial"`   |
-| `fontColor`                        | `string`                 | ❌ No    | ✔️ Yes   | Color of the text inside bubbles.                                   | `"#ffffff"` |
-| `minRadius`                        | `number`                 | ❌ No    | ✔️ Yes   | Minimum radius for the bubbles.                                     | `10`        |
-| `maxLines`                         | `number`                 | ❌ No    | ✔️ Yes   | Maximum number of lines allowed for text wrapping.                  | `3`         |
-| `textWrap`                         | `boolean`                | ❌ No    | ✔️ Yes   | Enables or disables text wrapping inside bubbles.                   | `true`      |
-| `isResizeCanvasOnWindowSizeChange` | `boolean`                | ❌ No    | ✔️ Yes   | Whether the chart should resize when the window size changes.       | `true`      |
-| `showToolTip`                      | `boolean`                | ❌ No    | ✔️ Yes   | Whether the chart should display the tooltip or not.                | `true`      |
+| Property                           | Type         | Required | Optional | Description                                                         | Default     |
+| ---------------------------------- | ------------ | -------- | -------- | ------------------------------------------------------------------- | ----------- |
+| `canvasContainerId`                | `string`     | ✔️ Yes   | ❌ No    | The ID of the container where the chart will be rendered.           | `-`         |
+| `data`                             | `DataItem[]` | ✔️ Yes   | ❌ No    | An array of objects containing `label` and `value` for each bubble. | `-`         |
+| `defaultBubbleColor`               | `string`     | ❌ No    | ✔️ Yes   | Default color for bubbles if not specified in `colorMap`.           | `"#3498db"` |
+| `fontSize`                         | `number`     | ❌ No    | ✔️ Yes   | Font size for bubble labels.                                        | `14`        |
+| `fontFamily`                       | `string`     | ❌ No    | ✔️ Yes   | Font family for text rendering.                                     | `"Arial"`   |
+| `fontColor`                        | `string`     | ❌ No    | ✔️ Yes   | Color of the text inside bubbles.                                   | `"#ffffff"` |
+| `minRadius`                        | `number`     | ❌ No    | ✔️ Yes   | Minimum radius for the bubbles.                                     | `10`        |
+| `maxLines`                         | `number`     | ❌ No    | ✔️ Yes   | Maximum number of lines allowed for text wrapping.                  | `3`         |
+| `textWrap`                         | `boolean`    | ❌ No    | ✔️ Yes   | Enables or disables text wrapping inside bubbles.                   | `true`      |
+| `isResizeCanvasOnWindowSizeChange` | `boolean`    | ❌ No    | ✔️ Yes   | Whether the chart should resize when the window size changes.       | `true`      |
+| `showToolTip`                      | `boolean`    | ❌ No    | ✔️ Yes   | Whether the chart should display the tooltip or not.                | `true`      |
 
 ✔️ **Required**: These properties must be provided.
 ✔️ **Optional**: If not provided, the default value will be used.

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

package/dist/bubbleChart.esm.js

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

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

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

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

package/dist/features/tooltip.d.ts

@@ -1,4 +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 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/dist/index.d.ts

@@ -1,5 +1,6 @@
+import { BubbleChart } from "./models/public/bubble-chart";
 import { initializeChart } from "./services/chart-service";
-export { initializeChart };
+export { initializeChart, BubbleChart };
 declare global {
     interface Window {
         initializeChart: typeof initializeChart;

package/dist/models/public/bubble-chart.d.ts

@@ -0,0 +1,6 @@
+import { Configuration } from "./configuration";
+export declare class BubbleChart {
+    configuration: Configuration;
+    constructor(config: Configuration);
+    render(): void;
+}

package/dist/models/public/config/bubble-appearance.d.ts

@@ -1,9 +1,3 @@
-export interface BubbleAppearance {
-    bubbleColor?: string;
-    borderThickness?: number;
-    borderColor?: string;
-    opacity?: number;
-}
 /**
  * Defines the appearance properties for a bubble.
  */

package/dist/models/public/config/interaction-options.d.ts

@@ -2,4 +2,5 @@ export interface InteractionOptions {
     showToolTip?: boolean;
     isResizeCanvasOnWindowSizeChange?: boolean;
     cursorType?: "default" | "pointer" | "grab" | "crosshair" | "move" | "not-allowed" | "help";
+    onBubbleClick?: (bubbleData: any, event: MouseEvent) => void;
 }

package/dist/services/chart-service.d.ts

@@ -2,4 +2,4 @@ import { Configuration } from "../models/public/configuration";
 /**
  * Initializes the chart, but stops execution if no valid data is provided.
  */
-export declare function initializeChart(config?: Partial<Configuration>): void;
+export declare function initializeChart(config?: Partial<Configuration>): Configuration | undefined;

package/index.html

@@ -12,61 +12,129 @@
 </head>
 
 <body>
-    <div id="bubbleChart" style="width: 667px; height: 632px;"></div>
+    <div id="bubbleChart" style="width: 470px; height: 350px;border: 1px solid red;"></div>
     <script>
         document.addEventListener("DOMContentLoaded", function () {
             if (typeof initializeChart === "function") {
+                //                 const toolTipConfig = {
+                //                     tooltipText: 'Sample Tooltip',
+                //                     tooltipFormattedData: `<div style="position: absolute; display: block; border-style: solid; z-index: 99999999; will-change: transform; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgb(30, 30, 47); border-width: 1px; border-radius: 8px; color: rgb(237, 237, 237); font: 12px / 18px Arial, sans-serif; padding: 10px 12px; top: 0px; left: 0px; transform: translate3d(4px, 4px, 0px); border-color: transparent; overflow: visible; white-space: normal; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; pointer-events: none;">
+                //   Sample Tooltip
+                // </div>
+                // `
+                //                 }
 
-                // Sample data
-                // const data = [
-                //     { label: 'Activation of supply for Electricity and Water', value: 45000, bubbleColor: "#024831", fontColor: '#FFFFFF', fontWeight: 600 },
-                //     { label: 'Reconnection', value: 28500, bubbleColor: "#03714d", fontColor: '#FFF', fontWeight: 600 },
-                //     { label: 'Refund Request', value: 22500, bubbleColor: "#03714d", fontColor: '#000', fontWeight: 400 },
-                //     { label: 'Request for Information Update', value: 28500, bubbleColor: "#049e6b", fontColor: '#000', fontWeight: 400 },
-                //     { label: 'Supply Issues', value: 25500, bubbleColor: "#31b086", fontColor: '#000', fontWeight: 400 },
-                //     { label: 'Smart Services', value: 26500, bubbleColor: "#03875c", fontColor: '#000', fontWeight: 400 },
-                // ];
+                //                 const tooltipOptions = {
+                //                     fontStyle: 'italic',
+                //                     fontWeight: 800,
+                //                     textAlign: 'center',
+                //                     textDecoration: 'underline',
+                //                     textTransform: "uppercase",
+                //                     fontColor: '#FFF'
+                //                 }
 
-                const toolTipConfig = {
-                    tooltipText: 'Sample Tooltip',
-                    tooltipFormattedData: `<div style="position: absolute; display: block; border-style: solid; z-index: 99999999; will-change: transform; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgb(30, 30, 47); border-width: 1px; border-radius: 8px; color: rgb(237, 237, 237); font: 12px / 18px Arial, sans-serif; padding: 10px 12px; top: 0px; left: 0px; transform: translate3d(4px, 4px, 0px); border-color: transparent; overflow: visible; white-space: normal; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 10px; pointer-events: none;">
-  Sample Tooltip
-</div>
-`
-                }
+                //                 const data = [
+                //                     { label: "Biryani Battles", "value": 89, bubbleColor: "#ff5733" },
+                //                     { label: "Chai vs. Coffee", "value": 70, bubbleColor: "#c70039" },
+                //                     { label: "Bollywood Blockbusters", "value": 90, bubbleColor: "#900c3f" },
+                //                     { label: "IPL Fever", "value": 85, bubbleColor: "#ffc300" },
+                //                     { label: "Himalayan Treks", "value": 65, bubbleColor: "#4caf50" },
+                //                     { label: "Diwali Firecrackers", "value": 95, bubbleColor: "#ff8c00" },
+                //                     { label: "Street Food Craze", "value": 75, bubbleColor: "#e91e63" },
+                //                     { label: "Fastest Century Records", "value": 88, bubbleColor: "#3f51b5" },
+                //                     { label: "Royal Enfield Craze", "value": 60, bubbleColor: "#795548" },
+                //                     { label: "Digital Payment Boom", "value": 93, bubbleColor: "#00bcd4" }
+                //                 ];
 
-                const tooltipOptions = {
-                    fontStyle: 'italic',
-                    fontWeight: 800,
-                    textAlign: 'center',
-                    textDecoration: 'underline',
-                    textTransform: "uppercase",
-                    fontColor: '#FFF'
-                }
+                //                 const chartoptions = {
+                //                     canvasContainerId: 'bubbleChart',
+                //                     data: data,
+                //                     fontSize: 14,
+                //                     maxLines: 2,
+                //                     tooltipOptions: tooltipOptions,
+                //                 }
 
-                const data = [
-                    { label: "Biryani Battles", "value": 89, bubbleColor: "#ff5733" },
-                    { label: "Chai vs. Coffee", "value": 70, bubbleColor: "#c70039" },
-                    { label: "Bollywood Blockbusters", "value": 90, bubbleColor: "#900c3f" },
-                    { label: "IPL Fever", "value": 85, bubbleColor: "#ffc300" },
-                    { label: "Himalayan Treks", "value": 65, bubbleColor: "#4caf50" },
-                    { label: "Diwali Firecrackers", "value": 95, bubbleColor: "#ff8c00" },
-                    { label: "Street Food Craze", "value": 75, bubbleColor: "#e91e63" },
-                    { label: "Fastest Century Records", "value": 88, bubbleColor: "#3f51b5" },
-                    { label: "Royal Enfield Craze", "value": 60, bubbleColor: "#795548" },
-                    { label: "Digital Payment Boom", "value": 93, bubbleColor: "#00bcd4" }
-                ];
+                const handleBubbleClick = (bubbleData, event) => {
+                    console.log("Bubble clicked:", bubbleData);
+                    alert(`You clicked on: ${bubbleData.label}`);
+                };
 
-                const chartoptions = {
+                // Initialize chart
+                const chartOptions = {
                     canvasContainerId: 'bubbleChart',
-                    data: data,
-                    fontSize: 14,
-                    maxLines: 2,
-                    tooltipOptions: tooltipOptions,
+                    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',
+                        },
+                        {
+                            label: 'Request for Information Update',
+                            value: 73,
+                            bubbleColor: '#049e6b',
+                            fontColor: '#000',
+                        },
+                        {
+                            label: 'Supply Issues',
+                            value: 96,
+                            bubbleColor: '#31b086',
+                            fontColor: '#000',
+                        },
+                        {
+                            label: 'Smart Services',
+                            value: 119,
+                            bubbleColor: '#03875c',
+                            fontColor: '#000',
+                        },
+                        {
+                            label: 'High Consumption',
+                            value: 87,
+                            bubbleColor: '#03875c',
+                            fontColor: '#000',
+                        },
+                        {
+                            label: 'Billing Consumption',
+                            value: 103,
+                            bubbleColor: '#03875c',
+                            fontColor: '#000',
+                        },
+                        {
+                            label: 'Wrong Bill',
+                            value: 92,
+                            bubbleColor: '#03875c',
+                            fontColor: '#000',
+                        },
+                    ],
+                    fontSize: 10,
+                    defaultFontFamily: 'Roboto',
+                    onBubbleClick: handleBubbleClick,
+                    tooltipOptions: {
+                        // fontStyle: 'italic',
+                        // fontWeight: 800,
+                        // textAlign: 'center',
+                        // textDecoration: 'underline',
+                        // textTransform: 'uppercase',
+                        // fontColor: '#FFF',
+                    },
                 }
 
-                // Initialize chart
-                initializeChart(chartoptions);
+
+                initializeChart(chartOptions);
             } else {
                 console.error("initializeChart is not defined");
             }

package/package.json

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

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES6",
-    "module": "ESNext",
-    "declaration": true,
-    "declarationDir": "./dist",
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "**/*.test.ts"]
-}

package/webpack.config.js

@@ -1,64 +0,0 @@
-const path = require("path");
-
-/** @type {import('webpack').Configuration} */
-const commonConfig = {
-  entry: "./src/index.ts",
-  target: "web",
-  resolve: {
-    extensions: [".ts", ".js"],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        use: "ts-loader",
-        exclude: /node_modules/,
-      },
-    ],
-  },
-  optimization: {
-    minimize: true,
-  },
-};
-
-/** UMD Build (Browser + Node.js) */
-const umdConfig = {
-  ...commonConfig,
-  output: {
-    path: path.resolve(__dirname, "dist"),
-    filename: "bubbleChart.umd.js",
-    library: "BubbleChart",
-    libraryTarget: "umd",
-    globalObject: "this",
-    umdNamedDefine: true,
-  },
-};
-
-/** ESM Build (Modern JavaScript) */
-const esmConfig = {
-  ...commonConfig,
-  output: {
-    path: path.resolve(__dirname, "dist"),
-    filename: "bubbleChart.esm.js",
-    library: {
-      type: "module",
-    },
-  },
-  experiments: {
-    outputModule: true, // Required for ESM builds
-  },
-};
-
-/** CommonJS Build (Node.js) */
-const cjsConfig = {
-  ...commonConfig,
-  output: {
-    path: path.resolve(__dirname, "dist"),
-    filename: "bubbleChart.cjs.js",
-    library: {
-      type: "commonjs2",
-    },
-  },
-};
-
-module.exports = [umdConfig, esmConfig, cjsConfig];