bubble-chart-js 1.0.2 → 1.0.4

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "bubble-chart-js",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "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",
+  "main": "dist/bubbleChart.cjs.js",
+  "module": "dist/bubbleChart.esm.js",
+  "browser": "dist/bubbleChart.umd.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "clean": "rimraf dist",
-    "build": "npm run clean && webpack --mode development",
+    "build": "npm run clean && webpack --mode production",
     "watch": "webpack --watch",
     "start": "webpack serve --open",
     "lint": "eslint src/**/*.ts",

package/tsconfig.json

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

package/webpack.config.js

@@ -1,28 +1,64 @@
 const path = require("path");
 
-module.exports = {
-  entry: "./src/main.ts", // Entry point for your application
-  output: {
-    filename: "bundle.js", // Output bundle file
-    path: path.resolve(__dirname, "dist"), // Output directory
-  },
+/** @type {import('webpack').Configuration} */
+const commonConfig = {
+  entry: "./src/index.ts",
+  target: "web",
   resolve: {
-    extensions: [".ts", ".js"], // Resolve TypeScript and JavaScript files
+    extensions: [".ts", ".js"],
   },
   module: {
     rules: [
       {
-        test: /\.ts$/, // Apply the loader to TypeScript files
+        test: /\.ts$/,
         use: "ts-loader",
         exclude: /node_modules/,
       },
     ],
   },
-  devServer: {
-    static: {
-      directory: path.join(__dirname, "dist"), // Serve files from the dist directory
+  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",
     },
-    compress: true,
-    port: 9000, // Port for the dev server
   },
 };
+
+module.exports = [umdConfig, esmConfig, cjsConfig];

package/dist/bundle.js

@@ -1,186 +0,0 @@
-/*
- * 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/features/textWrapper.d.ts

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

package/dist/main.d.ts

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

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

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

package/src/canvas.ts

@@ -1,17 +0,0 @@
-/**
- * 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

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

package/src/core/renderer.ts

@@ -1,110 +0,0 @@
-import { Configuration } from "../models/public/configuration";
-import { getWrappedLines } from "../features/textWrapper";
-import { createTooltipElement, handleMouseMove } from "../features/tooltip";
-import { validateConfig } from "../utils/validation";
-import { createCanvas } from "../canvas";
-import { getChartData } from "../services/renderService";
-import { getFontSize } from "../utils/helper";
-
-export function renderChart(config: Configuration) {
-  if (!validateConfig(config)) return;
-
-  // Create & setup canvas
-  let canvas = createCanvas(config.canvasContainerId);
-  if (!canvas) return;
-
-  const ctx = canvas.getContext("2d");
-
-  if (!ctx) {
-    console.error("Invalid context");
-    return;
-  }
-
-  const sortedData = getChartData(config, canvas, ctx);
-
-  function draw() {
-    if (!canvas || !ctx) {
-      console.warn("canvas or ctx is not valid");
-      return;
-    }
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    sortedData.forEach((item) => {
-      const color = config.colorMap[item.label] || config.defaultBubbleColor;
-
-      // Ensure radius is at least minRadius
-      const radius = Math.max(item.radius, config.minRadius);
-
-      ctx.beginPath();
-      ctx.arc(item.x, item.y, radius, 0, Math.PI * 2);
-      ctx.fillStyle = color;
-      ctx.fill();
-
-      ctx.strokeStyle = "black"; // Border color
-      ctx.lineWidth = 0.25; // Border thickness
-      ctx.stroke(); // Apply border
-
-      // Text styling
-      ctx.fillStyle = config.fontColor;
-      const fontSize = getFontSize(radius, config.fontSize);
-      ctx.font = `${fontSize}px ${config.fontFamily}`;
-      ctx.textAlign = "center";
-      ctx.textBaseline = "middle";
-
-      const padding = 5; // Padding around text
-      const maxWidth = radius * 1.5 - padding * 2; // Adjusted for padding
-
-      if (config.textWrap) {
-        // Calculate vertical position for lines
-        const lineHeight = fontSize * 1.2;
-
-        // Dynamically determine lines if maxLines is not set
-        const lines = getWrappedLines(
-          ctx,
-          item.label,
-          maxWidth,
-          config.maxLines,
-          radius
-        );
-        const startY = item.y - ((lines.length - 1) * lineHeight) / 2;
-
-        lines.forEach((line, index) => {
-          ctx.fillText(line, item.x, startY + index * lineHeight);
-        });
-      } else {
-        ctx.fillText(item.label, item.x, item.y);
-      }
-    });
-  }
-
-  // Robust approach that handles resizing:
-  function resizeCanvas() {
-    const canvasContainer = document.getElementById(config.canvasContainerId);
-    if (canvasContainer && canvas) {
-      canvas.width = canvasContainer.offsetWidth;
-      canvas.height = canvasContainer.offsetHeight;
-      draw(); // Call your drawing function
-    }
-  }
-
-  if (config.isResizeCanvasOnWindowSizeChange) {
-    resizeCanvas(); // Initial resize
-    window.addEventListener("resize", resizeCanvas); // Resize on window resize
-  }
-
-  // Initial draw
-  draw();
-
-  if (config.showToolTip) {
-    const tooltip = createTooltipElement();
-    let animationFrameId: number | null = null;
-    canvas.addEventListener("mousemove", (event) => {
-      if (animationFrameId) return; // Prevent excessive calls
-      animationFrameId = requestAnimationFrame(() => {
-        handleMouseMove(event, sortedData, canvas, tooltip);
-        animationFrameId = null; // Reset after execution
-      });
-    });
-  }
-}