bubble-chart-js 1.0.0

package/src/core/renderer.ts

@@ -0,0 +1,110 @@
+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
+      });
+    });
+  }
+}

package/src/features/textWrapper.ts

@@ -0,0 +1,168 @@
+export function getWrappedLines(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  maxLineWidth: number,
+  maxAllowedLines: number | undefined,
+  circleRadius: number,
+  maxCharsPerWord: number | undefined = undefined
+): string[] {
+  if (!text || maxLineWidth <= 0) return [];
+
+  let words = text.split(/\s+/);
+
+  // Set default for maxAllowedLines based on available space
+  maxAllowedLines = determineMaxLines(
+    ctx,
+    maxAllowedLines,
+    circleRadius,
+    maxLineWidth
+  );
+
+  // Handle single-word case separately
+  if (words.length === 1) {
+    return [truncateTextToFit(ctx, words[0], maxLineWidth)];
+  }
+
+  if (maxCharsPerWord) {
+    // For Now dont allow default word truncation
+    // Set default for maxCharsPerWord if not provided
+    maxCharsPerWord = determineMaxCharsPerWord(
+      ctx,
+      maxCharsPerWord,
+      maxLineWidth
+    );
+
+    // Apply maxCharsPerWord truncation if needed
+    words = words.map((word) => truncateWord(word, maxCharsPerWord!));
+  }
+
+  return wrapTextIntoLines(ctx, words, maxLineWidth, maxAllowedLines);
+}
+
+/**
+ * Determines maxAllowedLines based on available space.
+ */
+function determineMaxLines(
+  ctx: CanvasRenderingContext2D,
+  maxAllowedLines: number | undefined,
+  circleRadius: number, // TODO later account circleRadius to handleLabeltext-NoOfLines
+  maxLineWidth: number
+): number {
+  if (maxAllowedLines && maxAllowedLines > 0) return maxAllowedLines;
+
+  const fontSize = parseInt(ctx.font, 10) || 16;
+  const lineHeight = fontSize * 1.2;
+  return Math.floor(maxLineWidth / lineHeight) || 1; // Default: Fit within maxLineWidth
+}
+
+/**
+ * Determines maxCharsPerWord based on maxLineWidth.
+ */
+function determineMaxCharsPerWord(
+  ctx: CanvasRenderingContext2D,
+  maxCharsPerWord: number | undefined,
+  maxLineWidth: number
+): number {
+  if (maxCharsPerWord && maxCharsPerWord > 0) return maxCharsPerWord;
+
+  const avgCharWidth = ctx.measureText("W").width || 8; // Approximate avg char width
+  return Math.floor(maxLineWidth / avgCharWidth); // Default: Fit within maxLineWidth
+}
+
+/**
+ * Wraps text into multiple lines within maxLineWidth.
+ */
+function wrapTextIntoLines(
+  ctx: CanvasRenderingContext2D,
+  words: string[],
+  maxLineWidth: number,
+  maxAllowedLines: number
+): string[] {
+  const wrappedLines: string[] = [];
+  let currentLine = "";
+
+  for (const word of words) {
+    const testLine = currentLine ? `${currentLine} ${word}` : word;
+    const testWidth = ctx.measureText(testLine).width;
+
+    if (testWidth <= maxLineWidth) {
+      currentLine = testLine;
+    } else {
+      if (currentLine) wrappedLines.push(currentLine);
+      currentLine = word;
+      if (wrappedLines.length >= maxAllowedLines - 1) break;
+    }
+  }
+
+  if (currentLine) wrappedLines.push(currentLine);
+
+  return finalizeWrappedLines(ctx, wrappedLines, maxLineWidth, maxAllowedLines);
+}
+
+/**
+ * Ensures the final wrapped lines do not exceed maxAllowedLines.
+ */
+function finalizeWrappedLines(
+  ctx: CanvasRenderingContext2D,
+  wrappedLines: string[],
+  maxLineWidth: number,
+  maxAllowedLines: number
+): string[] {
+  if (wrappedLines.length > maxAllowedLines) {
+    wrappedLines.length = maxAllowedLines;
+  }
+
+  // Truncate the last line if needed
+  if (wrappedLines.length === maxAllowedLines) {
+    wrappedLines[maxAllowedLines - 1] = truncateTextToFit(
+      ctx,
+      wrappedLines[maxAllowedLines - 1],
+      maxLineWidth
+    );
+  }
+
+  return wrappedLines.map((line) =>
+    ctx.measureText(line).width > maxLineWidth
+      ? truncateTextToFit(ctx, line, maxLineWidth)
+      : line
+  );
+}
+
+/**
+ * Truncates text with an ellipsis if it exceeds maxLineWidth.
+ */
+function truncateTextToFit(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  maxLineWidth: number
+): string {
+  text = text.trim();
+  if (!text) return ""; // Handle empty or whitespace-only input
+  if (ctx.measureText(text).width <= maxLineWidth) return text; // Return early if text fits
+
+  let left = 0,
+    right = text.length;
+
+  // binary search
+  while (left < right) {
+    const mid = Math.ceil((left + right) / 2);
+    const truncated = text.slice(0, mid) + "…";
+
+    if (ctx.measureText(truncated).width > maxLineWidth) {
+      right = mid - 1; // Reduce size
+    } else {
+      left = mid; // Expand size
+    }
+  }
+
+  return text.slice(0, left) + "…";
+}
+
+/**
+ * Truncates a word to maxCharsPerWord with an ellipsis.
+ */
+function truncateWord(word: string, maxCharsPerWord: number): string {
+  return word.length > maxCharsPerWord
+    ? word.slice(0, maxCharsPerWord) + "…"
+    : word;
+}

package/src/features/tooltip.ts

@@ -0,0 +1,69 @@
+import { DataItemInfo } from "../models/internal/dataItemInfo";
+
+// let hoveredItem: DataItemInfo | null = null;
+
+export function createTooltipElement(): HTMLDivElement {
+  const tooltip = document.createElement("div") as HTMLDivElement;
+  tooltip.id = "tooltip";
+  tooltip.style.display = "none";
+  document.body.appendChild(tooltip);
+  return tooltip;
+}
+
+export function handleMouseMove(
+  event: MouseEvent,
+  data: DataItemInfo[],
+  canvas: HTMLCanvasElement,
+  tooltip: HTMLDivElement
+) {
+  const { mouseX, mouseY } = getMousePosition(event, canvas);
+  const hoveredItem = findHoveredItem(mouseX, mouseY, data);
+
+  if (hoveredItem) {
+    updateTooltip(event, hoveredItem, canvas, tooltip);
+  } else {
+    canvas.style.cursor = "default";
+    tooltip.style.display = "none";
+  }
+}
+
+/**
+ * Gets the mouse position relative to the canvas.
+ */
+function getMousePosition(event: MouseEvent, canvas: HTMLCanvasElement) {
+  const rect = canvas.getBoundingClientRect();
+  return {
+    mouseX: event.clientX - rect.left,
+    mouseY: event.clientY - rect.top,
+  };
+}
+
+/**
+ * Finds the hovered item based on proximity to circles.
+ */
+function findHoveredItem(mouseX: number, mouseY: number, data: DataItemInfo[]) {
+  return (
+    data.find(
+      (item) => Math.hypot(mouseX - item.x, mouseY - item.y) < item.radius
+    ) || null
+  );
+}
+
+/**
+ * Updates the tooltip and cursor based on the hovered item.
+ */
+function updateTooltip(
+  event: MouseEvent,
+  hovered: DataItemInfo | null,
+  canvas: HTMLCanvasElement,
+  tooltip: HTMLDivElement
+) {
+  if (hovered?.label && hovered?.value && canvas && tooltip) {
+    canvas.style.cursor = "pointer";
+    tooltip.style.display = "block";
+    tooltip.innerHTML = `<div>${hovered.label}<br>Value: ${hovered.value}</div>`;
+    tooltip.style.left = `${event.pageX + 15}px`;
+    tooltip.style.top = `${event.pageY - 30}px`;
+    tooltip.style.zIndex = "9999";
+  }
+}

package/src/main.ts

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

package/src/models/internal/dataItemInfo.ts

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

package/src/models/public/configuration.ts

@@ -0,0 +1,16 @@
+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/src/models/public/dataItem.ts

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

package/src/services/chartService.ts

@@ -0,0 +1,24 @@
+import { Configuration } from "../models/public/configuration";
+import { renderChart } from "../core/renderer";
+import { mergeConfig } from "../utils/config";
+
+/**
+ * Initializes the chart, but stops execution if no valid data is provided.
+ */
+export function initializeChart(config: Partial<Configuration> = {}): void {
+  if (!config.data || config.data.length === 0) {
+    console.warn(
+      "initializeChart: No valid data provided. Chart initialization aborted."
+    );
+    return;
+  }
+
+  const safeConfig = {
+    canvasContainerId: config.canvasContainerId ?? "chart-container",
+    data: config.data ?? [],
+    ...config,
+  };
+
+  const finalConfig = mergeConfig(safeConfig);
+  renderChart(finalConfig);
+}

package/src/services/renderService.ts

@@ -0,0 +1,262 @@
+import { PHYSICS } from "../constants/physics";
+import { DataItemInfo } from "../models/internal/dataItemInfo";
+import { Configuration } from "../models/public/configuration";
+
+export function getChartData(
+  config: Configuration,
+  canvas: HTMLCanvasElement,
+  ctx: CanvasRenderingContext2D
+) {
+  // Add padding constant at the top
+  const CANVAS_PADDING = 5; // pixels of padding around all edges
+
+  // Calculate available space considering padding
+  const maxPossibleRadius = Math.min(
+    (canvas.width - CANVAS_PADDING * 2) / 2,
+    (canvas.height - CANVAS_PADDING * 2) / 2
+  );
+
+  // Calculate radii based on available space
+  // const availableWidth = canvas.width - CANVAS_PADDING * 2;
+  // const availableHeight = canvas.height - CANVAS_PADDING * 2;
+  // const canvasMinDimension = Math.min(availableWidth, availableHeight);
+
+  // Add this code for crisp rendering
+  const devicePixelRatio = window.devicePixelRatio || 1;
+  const rect = canvas.getBoundingClientRect();
+
+  // reduce width & height
+  // const rectWidth = rect.width - (rect.width / 100) * 10;
+  // const rectHeight = rect.height - (rect.height / 100) * 10;
+
+  canvas.width = rect.width * devicePixelRatio;
+  canvas.height = rect.height * devicePixelRatio;
+
+  canvas.style.width = rect.width + "px";
+  canvas.style.height = rect.height + "px";
+
+  ctx.scale(devicePixelRatio, devicePixelRatio);
+
+  // Modify center calculations
+  const centerX = rect.width / 2;
+  const centerY = rect.height / 2;
+
+  const sortedData: DataItemInfo[] = [...config.data]
+    .sort((a, b) => b.value - a.value)
+    .map((item) => ({
+      ...item,
+      radius: 0,
+      x: 0,
+      y: 0,
+      fixed: false,
+    }));
+
+  const maxValue = sortedData[0].value;
+
+  // Define radius range dynamically
+  // const internalMinRadius = canvasMinDimension * 0.25; // 5% of smallest dimension
+  // const internalMaxRadius = canvasMinDimension * 0.65; // 15% of smallest dimension
+
+  const internalMaxRadius = Math.min(
+    maxPossibleRadius * 1.0, // Use 80% of maximum possible space
+    100 // Absolute maximum
+  );
+
+  const internalMinRadius = Math.max(
+    internalMaxRadius * 0.3, // Minimum 30% of max radius
+    30 // Absolute minimum
+  );
+
+  // Value-based radius calculation with padding consideration
+  sortedData.forEach((item) => {
+    // Calculate radius proportional to value and canvas size
+    const valueRatio = item.value / maxValue;
+    item.radius =
+      internalMinRadius + valueRatio * (internalMaxRadius - internalMinRadius);
+
+    // Ensure radius respects padding
+    item.radius = Math.min(
+      item.radius,
+      (canvas.width - CANVAS_PADDING * 2) / 2,
+      (canvas.height - CANVAS_PADDING * 2) / 2
+    );
+  });
+
+  // Add aspect ratio preservation in bubble positioning
+  sortedData.forEach((item, index) => {
+    if (index === 0) {
+      item.x = centerX;
+      item.y = centerY;
+      item.fixed = true;
+    } else {
+      const baseDist = sortedData[0].radius + item.radius + 3;
+
+      // Replace with deterministic positioning using golden angle
+      const goldenAngle = Math.PI * (3 - Math.sqrt(5)); // ~137.5 degrees
+
+      // Calculate position with padding constraints
+      const maxX = canvas.width - CANVAS_PADDING - item.radius;
+      const maxY = canvas.height - CANVAS_PADDING - item.radius;
+
+      item.x = Math.min(
+        maxX,
+        Math.max(
+          CANVAS_PADDING + item.radius,
+          centerX + Math.cos(goldenAngle * index) * baseDist
+        )
+      );
+      item.y = Math.min(
+        maxY,
+        Math.max(
+          CANVAS_PADDING + item.radius,
+          centerY + Math.sin(goldenAngle * index) * baseDist
+        )
+      );
+
+      item.fixed = false;
+    }
+  });
+
+  // Physics simulation
+  // Adjust physics parameters for tighter packing
+
+  // Unified physics simulation and collision resolution
+  for (let i = 0; i < PHYSICS.iterations; i++) {
+    // Main physics simulation
+    sortedData.forEach((current, index) => {
+      // Apply special handling for center bubble
+      if (index === 0) {
+        // Soft center positioning with spring-like behavior
+        const dx = centerX - current.x;
+        const dy = centerY - current.y;
+        const dist = Math.hypot(dx, dy);
+
+        // Only apply correction if significantly off-center
+        if (dist > 2) {
+          current.x += dx * PHYSICS.centerDamping;
+          current.y += dy * PHYSICS.centerDamping;
+        }
+        return;
+      }
+
+      let dxTotal = 0;
+      let dyTotal = 0;
+
+      // 1. Boundary constraints
+      const boundaryPadding = current.radius + CANVAS_PADDING;
+      if (current.x < boundaryPadding) {
+        dxTotal += (boundaryPadding - current.x) * PHYSICS.boundaryForce;
+      } else if (current.x > canvas.width - boundaryPadding) {
+        dxTotal +=
+          (canvas.width - boundaryPadding - current.x) * PHYSICS.boundaryForce;
+      }
+
+      // 2. Bubble repulsion with tight spacing
+      sortedData.forEach((other) => {
+        if (current === other) return;
+
+        // Add additional center attraction
+        const dx = centerX - current.x;
+        const dy = centerY - current.y;
+        const distance = Math.hypot(dx, dy);
+
+        // Value-based attraction strength (weaker for smaller values)
+        const attractionStrength = 0.02 * (current.value / maxValue);
+
+        current.x += (dx / distance) * attractionStrength;
+        current.y += (dy / distance) * attractionStrength;
+      });
+
+      // 3. Strong center attraction with value-based weighting
+      const dxCenter = centerX - current.x;
+      const dyCenter = centerY - current.y;
+      const centerDist = Math.hypot(dxCenter, dyCenter);
+      const minCenterDist =
+        sortedData[0].radius + current.radius + PHYSICS.centerRadiusBuffer;
+      const attraction =
+        PHYSICS.centerForce * (1 - Math.pow(current.value / maxValue, 0.3));
+
+      // Value-based attraction strength
+      const attractionStrength =
+        PHYSICS.centerAttraction *
+        (1 - current.value / maxValue) *
+        (1 - Math.min(1, centerDist / minCenterDist));
+
+      current.x += dxCenter * attractionStrength;
+      current.y += dyCenter * attractionStrength;
+    });
+
+    // Combined collision resolution
+    sortedData.forEach((current, i) => {
+      sortedData.forEach((other, j) => {
+        if (i >= j) return;
+
+        // Special handling for center bubble collisions
+        if (i === 0 || j === 0) {
+          const centerBubble = i === 0 ? current : other;
+          const normalBubble = i === 0 ? other : current;
+
+          const dx = normalBubble.x - centerBubble.x;
+          const dy = normalBubble.y - centerBubble.y;
+          const distance = Math.hypot(dx, dy);
+          const minDistance = centerBubble.radius + normalBubble.radius + 2;
+
+          if (distance < minDistance) {
+            const overlap = minDistance - distance;
+            const angle = Math.atan2(dy, dx);
+
+            // Only move the normal bubble
+            normalBubble.x += Math.cos(angle) * overlap * 0.7;
+            normalBubble.y += Math.sin(angle) * overlap * 0.7;
+          }
+          return;
+        }
+
+        const dx = current.x - other.x;
+        const dy = current.y - other.y;
+        const distance = Math.hypot(dx, dy);
+        const minDistance = current.radius + other.radius - 5; // Allow 2px overlap
+
+        if (distance < minDistance) {
+          const overlap = (minDistance - distance) * 0.3; // Gentle correction
+          const angle = Math.atan2(dy, dx);
+
+          // Mass-weighted adjustment
+          const massRatio = other.radius / (current.radius + other.radius);
+          if (!current.fixed) {
+            current.x += Math.cos(angle) * overlap * massRatio;
+            current.y += Math.sin(angle) * overlap * massRatio;
+          }
+          if (!other.fixed) {
+            other.x -= Math.cos(angle) * overlap * (1 - massRatio);
+            other.y -= Math.sin(angle) * overlap * (1 - massRatio);
+          }
+        }
+      });
+    });
+  }
+
+  // Modify boundary clamping to include center bubble
+  sortedData.forEach((bubble) => {
+    const clampedX = Math.max(
+      CANVAS_PADDING + bubble.radius,
+      Math.min(canvas.width - CANVAS_PADDING - bubble.radius, bubble.x)
+    );
+
+    const clampedY = Math.max(
+      CANVAS_PADDING + bubble.radius,
+      Math.min(canvas.height - CANVAS_PADDING - bubble.radius, bubble.y)
+    );
+
+    // Only update position if not fixed or moved significantly
+    if (
+      !bubble.fixed ||
+      Math.hypot(bubble.x - clampedX, bubble.y - clampedY) > 2
+    ) {
+      bubble.x = clampedX;
+      bubble.y = clampedY;
+    }
+  });
+
+  return sortedData;
+}