bubble-chart-js 1.0.0

package/.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}

package/.gitattributes

@@ -0,0 +1,2 @@
+# Enforce LF line endings for all files
+* text=auto eol=lf

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "tabWidth": 2
+}

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# 📌 Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [Unreleased] - Initial Commit
+
+### 🚀 Added
+
+- **Project Setup**: Initialized the project with essential configurations.
+- **Stacked Bubble Chart**: Added initial implementation for rendering stacked bubble charts.
+- **Project Structure**: Organized code into modules (`models`, `services`, `core`, `constants`).
+- **Build Tools**: Configured TypeScript, Webpack, and Prettier for a streamlined development workflow.
+- **Live Server Support**: Ensured auto-compilation and live reloading for a better development experience.
+
+---
+
+**📝 Note:** This is the first commit to the repository. Future updates will include feature enhancements, bug fixes, and optimizations. Stay tuned! 🚀

package/README.md

@@ -0,0 +1,109 @@
+# bubbleChartJs
+
+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.
+
+### ✨ Why Use a Stacked Bubble Chart?
+
+Multi-Dimensional Data Representation – Visualizes multiple datasets at once.
+
+Better Group Comparisons – Highlights relationships between different categories.
+
+Enhanced Readability – Shows data trends with layered or clustered bubbles.
+
+Customizable & Interactive – Allows tooltips.
+
+### 🔧 Features
+
+✔️ Supports stacked or grouped bubble layouts
+
+✔️ Customizable bubble color
+
+✔️ Fully compatible with JavaScript & Typescript
+
+✔️ Interactive tooltips and hover effects
+
+### 📌 Use Cases
+
+Financial Analysis – Display investment risks vs. returns for multiple assets.
+
+Social Media Metrics – Visualize engagement levels across platforms.
+
+Scientific Research – Show relationships in grouped experimental data.
+
+## Installation
+
+You can install `bubbleChartJs` via npm:
+
+```sh
+npm install bubble-chart-js
+```
+
+## Usage
+
+### Basic Example
+
+```js
+import BubbleChart from "bubblechartjs";
+
+const config = {
+  canvasContainerId: "bubbleChartCanvas",
+  data: [
+    { label: "A", value: 100 },
+    { label: "B", value: 80 },
+    { label: "C", value: 60 },
+  ],
+  colorMap: {
+    A: "#ff5733",
+    B: "#33ff57",
+    C: "#3357ff",
+  },
+  defaultBubbleColor: "#cccccc",
+  fontSize: 14,
+  fontFamily: "Arial",
+  fontColor: "#000000",
+  minRadius: 10,
+  maxLines: 2,
+  textWrap: true,
+  isResizeCanvasOnWindowSizeChange: true,
+};
+
+initializeChart(config);
+```
+
+## Configuration Options
+
+The `BubbleChart` class accepts a configuration object with the following properties:
+
+## Configuration Options
+
+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`      |
+
+✔️ **Required**: These properties must be provided.
+✔️ **Optional**: If not provided, the default value will be used.
+
+## License
+
+This project is licensed under the MIT License.
+
+## Contributions
+
+Contributions, issues, and feature requests are welcome!
+
+---
+
+Made with ❤️ by Pragadeeshwaran

package/dist/bundle.js

@@ -0,0 +1,186 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./src/canvas.ts":
+/*!***********************!*\
+  !*** ./src/canvas.ts ***!
+  \***********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   createCanvas: () => (/* binding */ createCanvas)\n/* harmony export */ });\n/**\n * Creates and initializes the canvas inside the specified container.\n */\nfunction createCanvas(containerId) {\n    const canvasContainer = document.getElementById(containerId);\n    if (!canvasContainer) {\n        console.error(`Canvas container with ID '${containerId}' not found.`);\n        return null;\n    }\n    const canvas = document.createElement(\"canvas\");\n    canvas.width = canvasContainer.offsetWidth;\n    canvas.height = canvasContainer.offsetHeight;\n    canvasContainer.appendChild(canvas);\n    return canvas;\n}\n\n\n//# sourceURL=webpack://bubble-chart-js/./src/canvas.ts?");
+
+/***/ }),
+
+/***/ "./src/constants/physics.ts":
+/*!**********************************!*\
+  !*** ./src/constants/physics.ts ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PHYSICS: () => (/* binding */ PHYSICS)\n/* harmony export */ });\nconst PHYSICS = {\n    forceStrength: 0.015,\n    iterations: 1000,\n    damping: 0.55,\n    boundaryForce: 0.02,\n    centerForce: 0.12,\n    centerAttraction: 0.6,\n    centerDamping: 0.3,\n    centerRadiusBuffer: 35,\n};\n\n\n//# sourceURL=webpack://bubble-chart-js/./src/constants/physics.ts?");
+
+/***/ }),
+
+/***/ "./src/core/renderer.ts":
+/*!******************************!*\
+  !*** ./src/core/renderer.ts ***!
+  \******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   renderChart: () => (/* binding */ renderChart)\n/* harmony export */ });\n/* harmony import */ var _features_textWrapper__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../features/textWrapper */ \"./src/features/textWrapper.ts\");\n/* harmony import */ var _features_tooltip__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../features/tooltip */ \"./src/features/tooltip.ts\");\n/* harmony import */ var _utils_validation__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils/validation */ \"./src/utils/validation.ts\");\n/* harmony import */ var _canvas__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../canvas */ \"./src/canvas.ts\");\n/* harmony import */ var _services_renderService__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../services/renderService */ \"./src/services/renderService.ts\");\n/* harmony import */ var _utils_helper__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../utils/helper */ \"./src/utils/helper.ts\");\n\n\n\n\n\n\nfunction renderChart(config) {\n    if (!(0,_utils_validation__WEBPACK_IMPORTED_MODULE_2__.validateConfig)(config))\n        return;\n    // Create & setup canvas\n    let canvas = (0,_canvas__WEBPACK_IMPORTED_MODULE_3__.createCanvas)(config.canvasContainerId);\n    if (!canvas)\n        return;\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) {\n        console.error(\"Invalid context\");\n        return;\n    }\n    const sortedData = (0,_services_renderService__WEBPACK_IMPORTED_MODULE_4__.getChartData)(config, canvas, ctx);\n    function draw() {\n        if (!canvas || !ctx) {\n            console.warn(\"canvas or ctx is not valid\");\n            return;\n        }\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n        sortedData.forEach((item) => {\n            const color = config.colorMap[item.label] || config.defaultBubbleColor;\n            // Ensure radius is at least minRadius\n            const radius = Math.max(item.radius, config.minRadius);\n            ctx.beginPath();\n            ctx.arc(item.x, item.y, radius, 0, Math.PI * 2);\n            ctx.fillStyle = color;\n            ctx.fill();\n            ctx.strokeStyle = \"black\"; // Border color\n            ctx.lineWidth = 0.25; // Border thickness\n            ctx.stroke(); // Apply border\n            // Text styling\n            ctx.fillStyle = config.fontColor;\n            const fontSize = (0,_utils_helper__WEBPACK_IMPORTED_MODULE_5__.getFontSize)(radius, config.fontSize);\n            ctx.font = `${fontSize}px ${config.fontFamily}`;\n            ctx.textAlign = \"center\";\n            ctx.textBaseline = \"middle\";\n            const padding = 5; // Padding around text\n            const maxWidth = radius * 1.5 - padding * 2; // Adjusted for padding\n            if (config.textWrap) {\n                // Calculate vertical position for lines\n                const lineHeight = fontSize * 1.2;\n                // Dynamically determine lines if maxLines is not set\n                const lines = (0,_features_textWrapper__WEBPACK_IMPORTED_MODULE_0__.getWrappedLines)(ctx, item.label, maxWidth, config.maxLines, radius);\n                const startY = item.y - ((lines.length - 1) * lineHeight) / 2;\n                lines.forEach((line, index) => {\n                    ctx.fillText(line, item.x, startY + index * lineHeight);\n                });\n            }\n            else {\n                ctx.fillText(item.label, item.x, item.y);\n            }\n        });\n    }\n    // Robust approach that handles resizing:\n    function resizeCanvas() {\n        const canvasContainer = document.getElementById(config.canvasContainerId);\n        if (canvasContainer && canvas) {\n            canvas.width = canvasContainer.offsetWidth;\n            canvas.height = canvasContainer.offsetHeight;\n            draw(); // Call your drawing function\n        }\n    }\n    if (config.isResizeCanvasOnWindowSizeChange) {\n        resizeCanvas(); // Initial resize\n        window.addEventListener(\"resize\", resizeCanvas); // Resize on window resize\n    }\n    // Initial draw\n    draw();\n    if (config.showToolTip) {\n        const tooltip = (0,_features_tooltip__WEBPACK_IMPORTED_MODULE_1__.createTooltipElement)();\n        let animationFrameId = null;\n        canvas.addEventListener(\"mousemove\", (event) => {\n            if (animationFrameId)\n                return; // Prevent excessive calls\n            animationFrameId = requestAnimationFrame(() => {\n                (0,_features_tooltip__WEBPACK_IMPORTED_MODULE_1__.handleMouseMove)(event, sortedData, canvas, tooltip);\n                animationFrameId = null; // Reset after execution\n            });\n        });\n    }\n}\n\n\n//# sourceURL=webpack://bubble-chart-js/./src/core/renderer.ts?");
+
+/***/ }),
+
+/***/ "./src/features/textWrapper.ts":
+/*!*************************************!*\
+  !*** ./src/features/textWrapper.ts ***!
+  \*************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getWrappedLines: () => (/* binding */ getWrappedLines)\n/* harmony export */ });\nfunction getWrappedLines(ctx, text, maxLineWidth, maxAllowedLines, circleRadius, maxCharsPerWord = undefined) {\n    if (!text || maxLineWidth <= 0)\n        return [];\n    let words = text.split(/\\s+/);\n    // Set default for maxAllowedLines based on available space\n    maxAllowedLines = determineMaxLines(ctx, maxAllowedLines, circleRadius, maxLineWidth);\n    // Handle single-word case separately\n    if (words.length === 1) {\n        return [truncateTextToFit(ctx, words[0], maxLineWidth)];\n    }\n    if (maxCharsPerWord) {\n        // For Now dont allow default word truncation\n        // Set default for maxCharsPerWord if not provided\n        maxCharsPerWord = determineMaxCharsPerWord(ctx, maxCharsPerWord, maxLineWidth);\n        // Apply maxCharsPerWord truncation if needed\n        words = words.map((word) => truncateWord(word, maxCharsPerWord));\n    }\n    return wrapTextIntoLines(ctx, words, maxLineWidth, maxAllowedLines);\n}\n/**\n * Determines maxAllowedLines based on available space.\n */\nfunction determineMaxLines(ctx, maxAllowedLines, circleRadius, // TODO later account circleRadius to handleLabeltext-NoOfLines\nmaxLineWidth) {\n    if (maxAllowedLines && maxAllowedLines > 0)\n        return maxAllowedLines;\n    const fontSize = parseInt(ctx.font, 10) || 16;\n    const lineHeight = fontSize * 1.2;\n    return Math.floor(maxLineWidth / lineHeight) || 1; // Default: Fit within maxLineWidth\n}\n/**\n * Determines maxCharsPerWord based on maxLineWidth.\n */\nfunction determineMaxCharsPerWord(ctx, maxCharsPerWord, maxLineWidth) {\n    if (maxCharsPerWord && maxCharsPerWord > 0)\n        return maxCharsPerWord;\n    const avgCharWidth = ctx.measureText(\"W\").width || 8; // Approximate avg char width\n    return Math.floor(maxLineWidth / avgCharWidth); // Default: Fit within maxLineWidth\n}\n/**\n * Wraps text into multiple lines within maxLineWidth.\n */\nfunction wrapTextIntoLines(ctx, words, maxLineWidth, maxAllowedLines) {\n    const wrappedLines = [];\n    let currentLine = \"\";\n    for (const word of words) {\n        const testLine = currentLine ? `${currentLine} ${word}` : word;\n        const testWidth = ctx.measureText(testLine).width;\n        if (testWidth <= maxLineWidth) {\n            currentLine = testLine;\n        }\n        else {\n            if (currentLine)\n                wrappedLines.push(currentLine);\n            currentLine = word;\n            if (wrappedLines.length >= maxAllowedLines - 1)\n                break;\n        }\n    }\n    if (currentLine)\n        wrappedLines.push(currentLine);\n    return finalizeWrappedLines(ctx, wrappedLines, maxLineWidth, maxAllowedLines);\n}\n/**\n * Ensures the final wrapped lines do not exceed maxAllowedLines.\n */\nfunction finalizeWrappedLines(ctx, wrappedLines, maxLineWidth, maxAllowedLines) {\n    if (wrappedLines.length > maxAllowedLines) {\n        wrappedLines.length = maxAllowedLines;\n    }\n    // Truncate the last line if needed\n    if (wrappedLines.length === maxAllowedLines) {\n        wrappedLines[maxAllowedLines - 1] = truncateTextToFit(ctx, wrappedLines[maxAllowedLines - 1], maxLineWidth);\n    }\n    return wrappedLines.map((line) => ctx.measureText(line).width > maxLineWidth\n        ? truncateTextToFit(ctx, line, maxLineWidth)\n        : line);\n}\n/**\n * Truncates text with an ellipsis if it exceeds maxLineWidth.\n */\nfunction truncateTextToFit(ctx, text, maxLineWidth) {\n    text = text.trim();\n    if (!text)\n        return \"\"; // Handle empty or whitespace-only input\n    if (ctx.measureText(text).width <= maxLineWidth)\n        return text; // Return early if text fits\n    let left = 0, right = text.length;\n    // binary search\n    while (left < right) {\n        const mid = Math.ceil((left + right) / 2);\n        const truncated = text.slice(0, mid) + \"…\";\n        if (ctx.measureText(truncated).width > maxLineWidth) {\n            right = mid - 1; // Reduce size\n        }\n        else {\n            left = mid; // Expand size\n        }\n    }\n    return text.slice(0, left) + \"…\";\n}\n/**\n * Truncates a word to maxCharsPerWord with an ellipsis.\n */\nfunction truncateWord(word, maxCharsPerWord) {\n    return word.length > maxCharsPerWord\n        ? word.slice(0, maxCharsPerWord) + \"…\"\n        : word;\n}\n\n\n//# sourceURL=webpack://bubble-chart-js/./src/features/textWrapper.ts?");
+
+/***/ }),
+
+/***/ "./src/features/tooltip.ts":
+/*!*********************************!*\
+  !*** ./src/features/tooltip.ts ***!
+  \*********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   createTooltipElement: () => (/* binding */ createTooltipElement),\n/* harmony export */   handleMouseMove: () => (/* binding */ handleMouseMove)\n/* harmony export */ });\n// let hoveredItem: DataItemInfo | null = null;\nfunction createTooltipElement() {\n    const tooltip = document.createElement(\"div\");\n    tooltip.id = \"tooltip\";\n    tooltip.style.display = \"none\";\n    document.body.appendChild(tooltip);\n    return tooltip;\n}\nfunction handleMouseMove(event, data, canvas, tooltip) {\n    const { mouseX, mouseY } = getMousePosition(event, canvas);\n    const hoveredItem = findHoveredItem(mouseX, mouseY, data);\n    if (hoveredItem) {\n        updateTooltip(event, hoveredItem, canvas, tooltip);\n    }\n    else {\n        canvas.style.cursor = \"default\";\n        tooltip.style.display = \"none\";\n    }\n}\n/**\n * Gets the mouse position relative to the canvas.\n */\nfunction getMousePosition(event, canvas) {\n    const rect = canvas.getBoundingClientRect();\n    return {\n        mouseX: event.clientX - rect.left,\n        mouseY: event.clientY - rect.top,\n    };\n}\n/**\n * Finds the hovered item based on proximity to circles.\n */\nfunction findHoveredItem(mouseX, mouseY, data) {\n    return (data.find((item) => Math.hypot(mouseX - item.x, mouseY - item.y) < item.radius) || null);\n}\n/**\n * Updates the tooltip and cursor based on the hovered item.\n */\nfunction updateTooltip(event, hovered, canvas, tooltip) {\n    if ((hovered === null || hovered === void 0 ? void 0 : hovered.label) && (hovered === null || hovered === void 0 ? void 0 : hovered.value) && canvas && tooltip) {\n        canvas.style.cursor = \"pointer\";\n        tooltip.style.display = \"block\";\n        tooltip.innerHTML = `<div>${hovered.label}<br>Value: ${hovered.value}</div>`;\n        tooltip.style.left = `${event.pageX + 15}px`;\n        tooltip.style.top = `${event.pageY - 30}px`;\n        tooltip.style.zIndex = \"9999\";\n    }\n}\n\n\n//# sourceURL=webpack://bubble-chart-js/./src/features/tooltip.ts?");
+
+/***/ }),
+
+/***/ "./src/main.ts":
+/*!*********************!*\
+  !*** ./src/main.ts ***!
+  \*********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _services_chartService__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./services/chartService */ \"./src/services/chartService.ts\");\n\n// export { initializeChart };\n// @ts-ignore (Ignore TypeScript error for missing window prop)\nwindow.initializeChart = _services_chartService__WEBPACK_IMPORTED_MODULE_0__.initializeChart;\n\n\n//# sourceURL=webpack://bubble-chart-js/./src/main.ts?");
+
+/***/ }),
+
+/***/ "./src/services/chartService.ts":
+/*!**************************************!*\
+  !*** ./src/services/chartService.ts ***!
+  \**************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   initializeChart: () => (/* binding */ initializeChart)\n/* harmony export */ });\n/* harmony import */ var _core_renderer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/renderer */ \"./src/core/renderer.ts\");\n/* harmony import */ var _utils_config__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils/config */ \"./src/utils/config.ts\");\n\n\n/**\n * Initializes the chart, but stops execution if no valid data is provided.\n */\nfunction initializeChart(config = {}) {\n    var _a, _b;\n    if (!config.data || config.data.length === 0) {\n        console.warn(\"initializeChart: No valid data provided. Chart initialization aborted.\");\n        return;\n    }\n    const safeConfig = Object.assign({ canvasContainerId: (_a = config.canvasContainerId) !== null && _a !== void 0 ? _a : \"chart-container\", data: (_b = config.data) !== null && _b !== void 0 ? _b : [] }, config);\n    const finalConfig = (0,_utils_config__WEBPACK_IMPORTED_MODULE_1__.mergeConfig)(safeConfig);\n    (0,_core_renderer__WEBPACK_IMPORTED_MODULE_0__.renderChart)(finalConfig);\n}\n\n\n//# sourceURL=webpack://bubble-chart-js/./src/services/chartService.ts?");
+
+/***/ }),
+
+/***/ "./src/services/renderService.ts":
+/*!***************************************!*\
+  !*** ./src/services/renderService.ts ***!
+  \***************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getChartData: () => (/* binding */ getChartData)\n/* harmony export */ });\n/* harmony import */ var _constants_physics__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../constants/physics */ \"./src/constants/physics.ts\");\n\nfunction getChartData(config, canvas, ctx) {\n    // Add padding constant at the top\n    const CANVAS_PADDING = 5; // pixels of padding around all edges\n    // Calculate available space considering padding\n    const maxPossibleRadius = Math.min((canvas.width - CANVAS_PADDING * 2) / 2, (canvas.height - CANVAS_PADDING * 2) / 2);\n    // Calculate radii based on available space\n    // const availableWidth = canvas.width - CANVAS_PADDING * 2;\n    // const availableHeight = canvas.height - CANVAS_PADDING * 2;\n    // const canvasMinDimension = Math.min(availableWidth, availableHeight);\n    // Add this code for crisp rendering\n    const devicePixelRatio = window.devicePixelRatio || 1;\n    const rect = canvas.getBoundingClientRect();\n    // reduce width & height\n    // const rectWidth = rect.width - (rect.width / 100) * 10;\n    // const rectHeight = rect.height - (rect.height / 100) * 10;\n    canvas.width = rect.width * devicePixelRatio;\n    canvas.height = rect.height * devicePixelRatio;\n    canvas.style.width = rect.width + \"px\";\n    canvas.style.height = rect.height + \"px\";\n    ctx.scale(devicePixelRatio, devicePixelRatio);\n    // Modify center calculations\n    const centerX = rect.width / 2;\n    const centerY = rect.height / 2;\n    const sortedData = [...config.data]\n        .sort((a, b) => b.value - a.value)\n        .map((item) => (Object.assign(Object.assign({}, item), { radius: 0, x: 0, y: 0, fixed: false })));\n    const maxValue = sortedData[0].value;\n    // Define radius range dynamically\n    // const internalMinRadius = canvasMinDimension * 0.25; // 5% of smallest dimension\n    // const internalMaxRadius = canvasMinDimension * 0.65; // 15% of smallest dimension\n    const internalMaxRadius = Math.min(maxPossibleRadius * 1.0, // Use 80% of maximum possible space\n    100 // Absolute maximum\n    );\n    const internalMinRadius = Math.max(internalMaxRadius * 0.3, // Minimum 30% of max radius\n    30 // Absolute minimum\n    );\n    // Value-based radius calculation with padding consideration\n    sortedData.forEach((item) => {\n        // Calculate radius proportional to value and canvas size\n        const valueRatio = item.value / maxValue;\n        item.radius =\n            internalMinRadius + valueRatio * (internalMaxRadius - internalMinRadius);\n        // Ensure radius respects padding\n        item.radius = Math.min(item.radius, (canvas.width - CANVAS_PADDING * 2) / 2, (canvas.height - CANVAS_PADDING * 2) / 2);\n    });\n    // Add aspect ratio preservation in bubble positioning\n    sortedData.forEach((item, index) => {\n        if (index === 0) {\n            item.x = centerX;\n            item.y = centerY;\n            item.fixed = true;\n        }\n        else {\n            const baseDist = sortedData[0].radius + item.radius + 3;\n            // Replace with deterministic positioning using golden angle\n            const goldenAngle = Math.PI * (3 - Math.sqrt(5)); // ~137.5 degrees\n            // Calculate position with padding constraints\n            const maxX = canvas.width - CANVAS_PADDING - item.radius;\n            const maxY = canvas.height - CANVAS_PADDING - item.radius;\n            item.x = Math.min(maxX, Math.max(CANVAS_PADDING + item.radius, centerX + Math.cos(goldenAngle * index) * baseDist));\n            item.y = Math.min(maxY, Math.max(CANVAS_PADDING + item.radius, centerY + Math.sin(goldenAngle * index) * baseDist));\n            item.fixed = false;\n        }\n    });\n    // Physics simulation\n    // Adjust physics parameters for tighter packing\n    // Unified physics simulation and collision resolution\n    for (let i = 0; i < _constants_physics__WEBPACK_IMPORTED_MODULE_0__.PHYSICS.iterations; i++) {\n        // Main physics simulation\n        sortedData.forEach((current, index) => {\n            // Apply special handling for center bubble\n            if (index === 0) {\n                // Soft center positioning with spring-like behavior\n                const dx = centerX - current.x;\n                const dy = centerY - current.y;\n                const dist = Math.hypot(dx, dy);\n                // Only apply correction if significantly off-center\n                if (dist > 2) {\n                    current.x += dx * _constants_physics__WEBPACK_IMPORTED_MODULE_0__.PHYSICS.centerDamping;\n                    current.y += dy * _constants_physics__WEBPACK_IMPORTED_MODULE_0__.PHYSICS.centerDamping;\n                }\n                return;\n            }\n            let dxTotal = 0;\n            let dyTotal = 0;\n            // 1. Boundary constraints\n            const boundaryPadding = current.radius + CANVAS_PADDING;\n            if (current.x < boundaryPadding) {\n                dxTotal += (boundaryPadding - current.x) * _constants_physics__WEBPACK_IMPORTED_MODULE_0__.PHYSICS.boundaryForce;\n            }\n            else if (current.x > canvas.width - boundaryPadding) {\n                dxTotal +=\n                    (canvas.width - boundaryPadding - current.x) * _constants_physics__WEBPACK_IMPORTED_MODULE_0__.PHYSICS.boundaryForce;\n            }\n            // 2. Bubble repulsion with tight spacing\n            sortedData.forEach((other) => {\n                if (current === other)\n                    return;\n                // Add additional center attraction\n                const dx = centerX - current.x;\n                const dy = centerY - current.y;\n                const distance = Math.hypot(dx, dy);\n                // Value-based attraction strength (weaker for smaller values)\n                const attractionStrength = 0.02 * (current.value / maxValue);\n                current.x += (dx / distance) * attractionStrength;\n                current.y += (dy / distance) * attractionStrength;\n            });\n            // 3. Strong center attraction with value-based weighting\n            const dxCenter = centerX - current.x;\n            const dyCenter = centerY - current.y;\n            const centerDist = Math.hypot(dxCenter, dyCenter);\n            const minCenterDist = sortedData[0].radius + current.radius + _constants_physics__WEBPACK_IMPORTED_MODULE_0__.PHYSICS.centerRadiusBuffer;\n            const attraction = _constants_physics__WEBPACK_IMPORTED_MODULE_0__.PHYSICS.centerForce * (1 - Math.pow(current.value / maxValue, 0.3));\n            // Value-based attraction strength\n            const attractionStrength = _constants_physics__WEBPACK_IMPORTED_MODULE_0__.PHYSICS.centerAttraction *\n                (1 - current.value / maxValue) *\n                (1 - Math.min(1, centerDist / minCenterDist));\n            current.x += dxCenter * attractionStrength;\n            current.y += dyCenter * attractionStrength;\n        });\n        // Combined collision resolution\n        sortedData.forEach((current, i) => {\n            sortedData.forEach((other, j) => {\n                if (i >= j)\n                    return;\n                // Special handling for center bubble collisions\n                if (i === 0 || j === 0) {\n                    const centerBubble = i === 0 ? current : other;\n                    const normalBubble = i === 0 ? other : current;\n                    const dx = normalBubble.x - centerBubble.x;\n                    const dy = normalBubble.y - centerBubble.y;\n                    const distance = Math.hypot(dx, dy);\n                    const minDistance = centerBubble.radius + normalBubble.radius + 2;\n                    if (distance < minDistance) {\n                        const overlap = minDistance - distance;\n                        const angle = Math.atan2(dy, dx);\n                        // Only move the normal bubble\n                        normalBubble.x += Math.cos(angle) * overlap * 0.7;\n                        normalBubble.y += Math.sin(angle) * overlap * 0.7;\n                    }\n                    return;\n                }\n                const dx = current.x - other.x;\n                const dy = current.y - other.y;\n                const distance = Math.hypot(dx, dy);\n                const minDistance = current.radius + other.radius - 5; // Allow 2px overlap\n                if (distance < minDistance) {\n                    const overlap = (minDistance - distance) * 0.3; // Gentle correction\n                    const angle = Math.atan2(dy, dx);\n                    // Mass-weighted adjustment\n                    const massRatio = other.radius / (current.radius + other.radius);\n                    if (!current.fixed) {\n                        current.x += Math.cos(angle) * overlap * massRatio;\n                        current.y += Math.sin(angle) * overlap * massRatio;\n                    }\n                    if (!other.fixed) {\n                        other.x -= Math.cos(angle) * overlap * (1 - massRatio);\n                        other.y -= Math.sin(angle) * overlap * (1 - massRatio);\n                    }\n                }\n            });\n        });\n    }\n    // Modify boundary clamping to include center bubble\n    sortedData.forEach((bubble) => {\n        const clampedX = Math.max(CANVAS_PADDING + bubble.radius, Math.min(canvas.width - CANVAS_PADDING - bubble.radius, bubble.x));\n        const clampedY = Math.max(CANVAS_PADDING + bubble.radius, Math.min(canvas.height - CANVAS_PADDING - bubble.radius, bubble.y));\n        // Only update position if not fixed or moved significantly\n        if (!bubble.fixed ||\n            Math.hypot(bubble.x - clampedX, bubble.y - clampedY) > 2) {\n            bubble.x = clampedX;\n            bubble.y = clampedY;\n        }\n    });\n    return sortedData;\n}\n\n\n//# sourceURL=webpack://bubble-chart-js/./src/services/renderService.ts?");
+
+/***/ }),
+
+/***/ "./src/utils/config.ts":
+/*!*****************************!*\
+  !*** ./src/utils/config.ts ***!
+  \*****************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   DEFAULT_CONFIG: () => (/* binding */ DEFAULT_CONFIG),\n/* harmony export */   mergeConfig: () => (/* binding */ mergeConfig)\n/* harmony export */ });\n/**\n * Default configuration object.\n */\nconst DEFAULT_CONFIG = {\n    colorMap: {},\n    defaultBubbleColor: \"#3498db\",\n    fontColor: \"#ffffff\",\n    minRadius: 10,\n    maxLines: 3,\n    textWrap: true,\n    isResizeCanvasOnWindowSizeChange: true,\n    fontSize: 14,\n    fontFamily: \"Arial\",\n    showToolTip: true,\n};\n/**\n * Merges user config with defaults, ensuring `canvasContainerId` and `data` are required.\n */\nfunction mergeConfig(customConfig) {\n    return Object.assign(Object.assign({}, DEFAULT_CONFIG), customConfig);\n}\n\n\n//# sourceURL=webpack://bubble-chart-js/./src/utils/config.ts?");
+
+/***/ }),
+
+/***/ "./src/utils/helper.ts":
+/*!*****************************!*\
+  !*** ./src/utils/helper.ts ***!
+  \*****************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getFontSize: () => (/* binding */ getFontSize)\n/* harmony export */ });\nfunction getFontSize(radius, defaultFontSize = 14) {\n    return Math.min(defaultFontSize, radius / 2);\n}\n\n\n//# sourceURL=webpack://bubble-chart-js/./src/utils/helper.ts?");
+
+/***/ }),
+
+/***/ "./src/utils/validation.ts":
+/*!*********************************!*\
+  !*** ./src/utils/validation.ts ***!
+  \*********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   validateConfig: () => (/* binding */ validateConfig)\n/* harmony export */ });\n/**\n * Validates configuration and ensures required properties exist.\n */\nfunction validateConfig(config) {\n    if (!config) {\n        console.error(\"Invalid config object\");\n        return false;\n    }\n    if (!Array.isArray(config.data) || config.data.length === 0) {\n        console.error(\"Invalid or empty data array\");\n        return false;\n    }\n    return true;\n}\n\n\n//# sourceURL=webpack://bubble-chart-js/./src/utils/validation.ts?");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval devtool is used.
+/******/ 	var __webpack_exports__ = __webpack_require__("./src/main.ts");
+/******/ 	
+/******/ })()
+;

package/dist/canvas.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Creates and initializes the canvas inside the specified container.
+ */
+export declare function createCanvas(containerId: string): HTMLCanvasElement | null;

package/dist/constants/physics.d.ts

@@ -0,0 +1,10 @@
+export declare const PHYSICS: {
+    readonly forceStrength: 0.015;
+    readonly iterations: 1000;
+    readonly damping: 0.55;
+    readonly boundaryForce: 0.02;
+    readonly centerForce: 0.12;
+    readonly centerAttraction: 0.6;
+    readonly centerDamping: 0.3;
+    readonly centerRadiusBuffer: 35;
+};

package/dist/core/renderer.d.ts

@@ -0,0 +1,2 @@
+import { Configuration } from "../models/public/configuration";
+export declare function renderChart(config: Configuration): void;

package/dist/features/textWrapper.d.ts

@@ -0,0 +1 @@
+export declare function getWrappedLines(ctx: CanvasRenderingContext2D, text: string, maxLineWidth: number, maxAllowedLines: number | undefined, circleRadius: number, maxCharsPerWord?: number | undefined): string[];

package/dist/features/tooltip.d.ts

@@ -0,0 +1,3 @@
+import { DataItemInfo } from "../models/internal/dataItemInfo";
+export declare function createTooltipElement(): HTMLDivElement;
+export declare function handleMouseMove(event: MouseEvent, data: DataItemInfo[], canvas: HTMLCanvasElement, tooltip: HTMLDivElement): void;

package/dist/main.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/models/internal/dataItemInfo.d.ts

@@ -0,0 +1,7 @@
+import { DataItem } from "../public/dataItem";
+export interface DataItemInfo extends DataItem {
+    radius: number;
+    x: number;
+    y: number;
+    fixed: boolean;
+}

package/dist/models/public/configuration.d.ts

@@ -0,0 +1,15 @@
+import { DataItem } from "./dataItem";
+export interface Configuration {
+    canvasContainerId: string;
+    data: DataItem[];
+    colorMap: Record<string, string>;
+    defaultBubbleColor: string;
+    fontSize: number;
+    fontFamily: string;
+    fontColor: string;
+    minRadius: number;
+    maxLines: number;
+    textWrap: boolean;
+    isResizeCanvasOnWindowSizeChange: boolean;
+    showToolTip: boolean;
+}

package/dist/models/public/dataItem.d.ts

@@ -0,0 +1,4 @@
+export interface DataItem {
+    label: string;
+    value: number;
+}

package/dist/services/chartService.d.ts

@@ -0,0 +1,5 @@
+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;

package/dist/services/renderService.d.ts

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

package/dist/utils/config.d.ts

@@ -0,0 +1,12 @@
+import { Configuration } from "../models/public/configuration";
+/**
+ * Default configuration object.
+ */
+export declare const DEFAULT_CONFIG: Omit<Configuration, "canvasContainerId" | "data">;
+/**
+ * Merges user config with defaults, ensuring `canvasContainerId` and `data` are required.
+ */
+export declare function mergeConfig(customConfig: {
+    canvasContainerId: string;
+    data: Configuration["data"];
+} & Partial<Configuration>): Configuration;

package/dist/utils/helper.d.ts

@@ -0,0 +1 @@
+export declare function getFontSize(radius: number, defaultFontSize?: number): number;

package/dist/utils/validation.d.ts

@@ -0,0 +1,5 @@
+import { Configuration } from "../models/public/configuration";
+/**
+ * Validates configuration and ensures required properties exist.
+ */
+export declare function validateConfig(config: Configuration): boolean;

package/jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "node",
+  testMatch: ["**/*.test.ts"],
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "bubble-chart-js",
+  "version": "1.0.0",
+  "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/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run clean && webpack --mode development",
+    "watch": "webpack --watch",
+    "start": "webpack serve --open",
+    "lint": "eslint src/**/*.ts",
+    "lint:fix": "eslint src/**/*.ts --fix",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.14",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "jest": "^29.7.0",
+    "prettier": "^3.2.4",
+    "rimraf": "^6.0.1",
+    "ts-jest": "^29.2.6",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.7.3",
+    "webpack": "^5.98.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^4.15.1"
+  },
+  "author": "Pragadeeshwaran Pasupathi <pragadeeshwaran.pasupathi@gmail.com>",
+  "license": "MIT"
+}

package/src/canvas.ts

@@ -0,0 +1,17 @@
+/**
+ * Creates and initializes the canvas inside the specified container.
+ */
+export function createCanvas(containerId: string): HTMLCanvasElement | null {
+  const canvasContainer = document.getElementById(containerId);
+  if (!canvasContainer) {
+    console.error(`Canvas container with ID '${containerId}' not found.`);
+    return null;
+  }
+
+  const canvas = document.createElement("canvas") as HTMLCanvasElement;
+  canvas.width = canvasContainer.offsetWidth;
+  canvas.height = canvasContainer.offsetHeight;
+  canvasContainer.appendChild(canvas);
+
+  return canvas;
+}

package/src/constants/physics.ts

@@ -0,0 +1,10 @@
+export const PHYSICS = {
+  forceStrength: 0.015,
+  iterations: 1000,
+  damping: 0.55,
+  boundaryForce: 0.02,
+  centerForce: 0.12,
+  centerAttraction: 0.6,
+  centerDamping: 0.3,
+  centerRadiusBuffer: 35,
+} as const;