bubble-chart-js 1.0.2 → 1.0.3

package/dist/features/tooltip.d.ts

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

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { initializeChart } from "./services/chartService";
+export { initializeChart };
+declare global {
+    interface Window {
+        initializeChart: typeof initializeChart;
+    }
+}

package/dist/{bundle.js → index.js}

@@ -16,7 +16,7 @@
   \***********************/
 /***/ ((__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?");
+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    Object.assign(canvas.style, {\n        border: \"1px solid #ddd\",\n        background: \"#f8f8f8\",\n        width: \"100%\",\n        height: \"100%\",\n        display: \"block\",\n        imageRendering: \"crisp-edges\",\n        aspectRatio: \"1 / 1\",\n    });\n    // Browser-specific image-rendering properties\n    canvas.style.setProperty(\"image-rendering\", \"-moz-crisp-edges\");\n    canvas.style.setProperty(\"image-rendering\", \"-webkit-optimize-contrast\");\n    canvas.style.setProperty(\"-ms-interpolation-mode\", \"nearest-neighbor\");\n    canvasContainer.appendChild(canvas);\n    return canvas;\n}\n\n\n//# sourceURL=webpack://bubble-chart-js/./src/canvas.ts?");
 
 /***/ }),
 
@@ -36,7 +36,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \******************************/
 /***/ ((__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?");
+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)(config.canvasContainerId);\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?");
 
 /***/ }),
 
@@ -56,17 +56,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \*********************************/
 /***/ ((__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?");
+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(canvasContainerId) {\n    const tooltip = document.createElement(\"div\");\n    tooltip.id = \"tooltip\";\n    tooltip.style.display = \"none\";\n    // Apply styles\n    Object.assign(tooltip.style, {\n        position: \"absolute\",\n        padding: \"8px\",\n        background: \"rgba(0, 0, 0, 0.85)\",\n        color: \"white\",\n        borderRadius: \"4px\",\n        pointerEvents: \"none\",\n        fontFamily: \"Arial, sans-serif\",\n        fontSize: \"14px\",\n        maxWidth: \"200px\",\n        transition: \"opacity 0.2s\",\n    });\n    if (canvasContainerId) {\n        const canvasContainer = document.getElementById(canvasContainerId);\n        if (canvasContainer) {\n            canvasContainer.appendChild(tooltip);\n            return tooltip;\n        }\n    }\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 ***!
-  \*********************/
+/***/ "./src/index.ts":
+/*!**********************!*\
+  !*** ./src/index.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?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   initializeChart: () => (/* reexport safe */ _services_chartService__WEBPACK_IMPORTED_MODULE_0__.initializeChart)\n/* harmony export */ });\n/* harmony import */ var _services_chartService__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./services/chartService */ \"./src/services/chartService.ts\");\n\n// Explicitly export for TypeScript\n\n// Assign to `window`\nwindow.initializeChart = _services_chartService__WEBPACK_IMPORTED_MODULE_0__.initializeChart;\n\n\n//# sourceURL=webpack://bubble-chart-js/./src/index.ts?");
 
 /***/ }),
 
@@ -180,7 +180,8 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /******/ 	// 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");
+/******/ 	var __webpack_exports__ = __webpack_require__("./src/index.ts");
+/******/ 	module.exports = __webpack_exports__;
 /******/ 	
 /******/ })()
 ;

package/package.json

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

package/src/canvas.ts

@@ -11,6 +11,22 @@ export function createCanvas(containerId: string): HTMLCanvasElement | null {
   const canvas = document.createElement("canvas") as HTMLCanvasElement;
   canvas.width = canvasContainer.offsetWidth;
   canvas.height = canvasContainer.offsetHeight;
+
+  Object.assign(canvas.style, {
+    border: "1px solid #ddd",
+    background: "#f8f8f8",
+    width: "100%",
+    height: "100%",
+    display: "block",
+    imageRendering: "crisp-edges",
+    aspectRatio: "1 / 1",
+  });
+
+  // Browser-specific image-rendering properties
+  canvas.style.setProperty("image-rendering", "-moz-crisp-edges");
+  canvas.style.setProperty("image-rendering", "-webkit-optimize-contrast");
+  canvas.style.setProperty("-ms-interpolation-mode", "nearest-neighbor");
+
   canvasContainer.appendChild(canvas);
 
   return canvas;

package/src/core/renderer.ts

@@ -97,7 +97,7 @@ export function renderChart(config: Configuration) {
   draw();
 
   if (config.showToolTip) {
-    const tooltip = createTooltipElement();
+    const tooltip = createTooltipElement(config.canvasContainerId);
     let animationFrameId: number | null = null;
     canvas.addEventListener("mousemove", (event) => {
       if (animationFrameId) return; // Prevent excessive calls

package/src/declaration.d.ts

@@ -0,0 +1 @@
+declare module "bubble-chart-js";

package/src/features/tooltip.ts

@@ -2,10 +2,36 @@ import { DataItemInfo } from "../models/internal/dataItemInfo";
 
 // let hoveredItem: DataItemInfo | null = null;
 
-export function createTooltipElement(): HTMLDivElement {
+export function createTooltipElement(
+  canvasContainerId: string
+): HTMLDivElement {
   const tooltip = document.createElement("div") as HTMLDivElement;
   tooltip.id = "tooltip";
   tooltip.style.display = "none";
+
+  // Apply styles
+  Object.assign(tooltip.style, {
+    position: "absolute",
+    padding: "8px",
+    background: "rgba(0, 0, 0, 0.85)",
+    color: "white",
+    borderRadius: "4px",
+    pointerEvents: "none",
+    fontFamily: "Arial, sans-serif",
+    fontSize: "14px",
+    maxWidth: "200px",
+    transition: "opacity 0.2s",
+  });
+
+  if (canvasContainerId) {
+    const canvasContainer = document.getElementById(
+      canvasContainerId
+    ) as HTMLDivElement;
+    if (canvasContainer) {
+      canvasContainer.appendChild(tooltip);
+      return tooltip;
+    }
+  }
   document.body.appendChild(tooltip);
   return tooltip;
 }

package/src/index.ts

@@ -0,0 +1,14 @@
+import { initializeChart } from "./services/chartService";
+
+// Explicitly export for TypeScript
+export { initializeChart };
+
+// Declare the global `window` property correctly
+declare global {
+  interface Window {
+    initializeChart: typeof initializeChart;
+  }
+}
+
+// Assign to `window`
+window.initializeChart = initializeChart;

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,10 +1,11 @@
 const path = require("path");
 
 module.exports = {
-  entry: "./src/main.ts", // Entry point for your application
+  entry: "./src/index.ts", // Entry point for your application
   output: {
-    filename: "bundle.js", // Output bundle file
+    filename: "index.js", // Change from bundle.js to index.js
     path: path.resolve(__dirname, "dist"), // Output directory
+    libraryTarget: "commonjs2", // Ensure it's exportable as an npm package
   },
   resolve: {
     extensions: [".ts", ".js"], // Resolve TypeScript and JavaScript files

package/dist/main.d.ts

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

package/src/main.ts

@@ -1,5 +0,0 @@
-import { initializeChart } from "./services/chartService";
-
-// export { initializeChart };
-// @ts-ignore (Ignore TypeScript error for missing window prop)
-window.initializeChart = initializeChart as any;