npm - bubble-chart-js - Versions diffs - 1.0.19 → 2.0.0 - Mend

bubble-chart-js 1.0.19 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/README.md +1 -1
package/demo/glassmorphism.html +323 -0
package/demo/index.html +739 -0
package/dist/bubbleChart.cjs.js +1 -1
package/dist/bubbleChart.esm.js +1 -1
package/dist/bubbleChart.umd.js +1 -1
package/docs/documentation.html +438 -0
package/docs/examples.html +689 -0
package/docs/index.html +432 -0
package/docs/landing_test.html +337 -0
package/docs/playground.html +345 -0
package/docs/process_html.js +105 -0
package/docs/temp/5a86d.html +248 -0
package/docs/temp/b0cbe.html +276 -0
package/docs/temp/docs_desktop.html +341 -0
package/docs/temp/docs_mobile.html +291 -0
package/docs/temp/examples_desktop.html +372 -0
package/docs/temp/examples_mobile.html +317 -0
package/docs/temp/landing_desktop.html +337 -0
package/docs/temp/landing_mobile.html +270 -0
package/docs/temp/playground_desktop.html +283 -0
package/docs/temp/playground_mobile.html +236 -0
package/examples/test.html +194 -0
package/examples/test2.html +103 -0
package/package.json +7 -3
package/scripts/generate-fixtures.ts +45 -0
package/spec/config-defaults.json +16 -0
package/spec/fixtures/3-bubbles.expected.json +27 -0
package/spec/fixtures/3-bubbles.input.json +10 -0
package/spec/fixtures/equal-values.expected.json +34 -0
package/spec/fixtures/equal-values.input.json +11 -0
package/spec/fixtures/many-bubbles.expected.json +76 -0
package/spec/fixtures/many-bubbles.input.json +17 -0
package/spec/fixtures/single-bubble.expected.json +13 -0
package/spec/fixtures/single-bubble.input.json +8 -0
package/spec/physics.json +11 -0
package/tsconfig.scripts.json +8 -0
package/dist/canvas.d.ts +0 -5
package/dist/constants/app-constants.d.ts +0 -3
package/dist/constants/physics.d.ts +0 -10
package/dist/core/renderer.d.ts +0 -2
package/dist/features/text-wrapper.d.ts +0 -2
package/dist/features/tooltip.d.ts +0 -6
package/dist/index.d.ts +0 -8
package/dist/models/internal/data-item-info.d.ts +0 -7
package/dist/models/public/bubble-chart.d.ts +0 -6
package/dist/models/public/config/bubble-appearance.d.ts +0 -26
package/dist/models/public/config/font-options.d.ts +0 -46
package/dist/models/public/config/interaction-options.d.ts +0 -6
package/dist/models/public/config/tooltip-config.d.ts +0 -4
package/dist/models/public/config/tooltip-options.d.ts +0 -170
package/dist/models/public/configuration.d.ts +0 -30
package/dist/models/public/data-item.d.ts +0 -8
package/dist/services/chart-service.d.ts +0 -5
package/dist/services/render-service.d.ts +0 -3
package/dist/utils/config.d.ts +0 -12
package/dist/utils/helper.d.ts +0 -2
package/dist/utils/validation.d.ts +0 -5

package/docs/temp/examples_mobile.html ADDED Viewed

@@ -0,0 +1,317 @@
+<!DOCTYPE html>
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Examples Gallery | BubbleChart.js</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&amp;family=Inter:wght@400;500;600&amp;family=Space+Grotesk:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    colors: {
+                        "tertiary-fixed-dim": "#33ec7b",
+                        "on-surface-variant": "#a6aabf",
+                        "surface": "#090e1c",
+                        "secondary-fixed": "#f2c1ff",
+                        "error": "#ff716c",
+                        "on-primary-container": "#004253",
+                        "on-tertiary-fixed-variant": "#00662e",
+                        "on-error": "#490006",
+                        "on-secondary-fixed-variant": "#792c97",
+                        "error-container": "#9f0519",
+                        "on-background": "#e1e4fa",
+                        "on-tertiary-container": "#005b29",
+                        "inverse-primary": "#00687f",
+                        "primary-dim": "#00c3ed",
+                        "primary": "#72dcff",
+                        "inverse-surface": "#faf8ff",
+                        "on-secondary": "#4c0068",
+                        "surface-container-lowest": "#000000",
+                        "background": "#090e1c",
+                        "secondary-fixed-dim": "#ebadff",
+                        "on-secondary-container": "#f1bfff",
+                        "secondary": "#dd8bfb",
+                        "primary-fixed": "#00d2ff",
+                        "on-error-container": "#ffa8a3",
+                        "tertiary-container": "#49fb87",
+                        "surface-bright": "#242b43",
+                        "on-primary-fixed": "#002c38",
+                        "error-dim": "#d7383b",
+                        "inverse-on-surface": "#505466",
+                        "on-primary": "#004c5e",
+                        "surface-container-low": "#0d1323",
+                        "tertiary-dim": "#33ec7b",
+                        "on-primary-fixed-variant": "#004c5e",
+                        "secondary-container": "#6e208c",
+                        "surface-variant": "#1e253b",
+                        "on-secondary-fixed": "#580078",
+                        "surface-container": "#13192b",
+                        "primary-container": "#00d2ff",
+                        "outline-variant": "#434759",
+                        "surface-container-high": "#181f33",
+                        "surface-dim": "#090e1c",
+                        "tertiary": "#a6ffb5",
+                        "on-tertiary": "#00652e",
+                        "outline": "#707588",
+                        "secondary-dim": "#ce7eec",
+                        "on-surface": "#e1e4fa",
+                        "tertiary-fixed": "#49fb87",
+                        "surface-container-highest": "#1e253b",
+                        "primary-fixed-dim": "#00c3ed",
+                        "on-tertiary-fixed": "#00461e",
+                        "surface-tint": "#72dcff"
+                    },
+                    fontFamily: {
+                        "headline": ["Manrope"],
+                        "body": ["Inter"],
+                        "label": ["Space Grotesk"]
+                    },
+                    borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
+                },
+            },
+        }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+        .glass-card {
+            background: rgba(30, 37, 59, 0.6);
+            backdrop-filter: blur(12px);
+        }
+        .neon-glow-primary {
+            box-shadow: 0 0 20px rgba(114, 220, 255, 0.15);
+        }
+        .bubble-gradient {
+            background: linear-gradient(135deg, rgba(114, 220, 255, 0.2) 0%, rgba(221, 139, 251, 0.1) 100%);
+        }
+    </style>
+<style>
+    body {
+      min-height: max(884px, 100dvh);
+    }
+  </style>
+  </head>
+<body class="bg-background text-on-surface font-body selection:bg-primary/30 selection:text-primary">
+<!-- TopAppBar -->
+<header class="fixed top-0 w-full z-50 bg-[#090e1c]/60 backdrop-blur-xl flex justify-between items-center px-6 h-16 w-full shadow-2xl shadow-black/40">
+<div class="flex items-center gap-3 active:scale-95 duration-200 transition-colors hover:bg-[#1e253b]/40 p-2 rounded-lg">
+<span class="material-symbols-outlined text-[#72dcff]">menu</span>
+</div>
+<h1 class="text-xl font-extrabold tracking-tighter text-[#72dcff] font-manrope">BubbleChart.js</h1>
+<div class="flex items-center gap-3 active:scale-95 duration-200 transition-colors hover:bg-[#1e253b]/40 p-2 rounded-lg">
+<span class="material-symbols-outlined text-[#72dcff]">search</span>
+</div>
+</header>
+<main class="pt-24 pb-32 px-6">
+<!-- Hero Section -->
+<section class="mb-12">
+<div class="inline-block px-3 py-1 rounded-full bg-secondary-container/30 text-secondary text-[10px] font-label uppercase tracking-widest mb-4">
+                Curated Demos
+            </div>
+<h2 class="text-4xl font-headline font-extrabold text-on-surface tracking-tight leading-tight mb-3">
+                Examples <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">Gallery</span>
+</h2>
+<p class="text-on-surface-variant text-sm leading-relaxed max-w-[90%] font-body">
+                Explore a collection of interactive bubble layouts. High performance, beautifully rendered, and fully customizable.
+            </p>
+</section>
+<!-- Gallery Grid (Vertical Stack for Mobile) -->
+<div class="flex flex-col gap-8">
+<!-- Example 1: Basic -->
+<article class="glass-card rounded-xl overflow-hidden border border-outline-variant/15 flex flex-col group">
+<div class="h-48 bubble-gradient relative overflow-hidden flex items-center justify-center">
+<div class="absolute w-24 h-24 rounded-full bg-primary/20 blur-2xl -top-4 -left-4"></div>
+<div class="absolute w-16 h-16 rounded-full bg-secondary/20 blur-xl bottom-4 right-8"></div>
+<!-- Mock Bubble UI -->
+<div class="flex gap-2">
+<div class="w-12 h-12 rounded-full border border-primary/40 bg-primary/10 flex items-center justify-center">
+<span class="material-symbols-outlined text-primary text-sm">circle</span>
+</div>
+<div class="w-16 h-16 rounded-full border border-secondary/40 bg-secondary/10 flex items-center justify-center -mt-4">
+<span class="material-symbols-outlined text-secondary text-lg">circle</span>
+</div>
+<div class="w-10 h-10 rounded-full border border-tertiary/40 bg-tertiary/10 flex items-center justify-center">
+<span class="material-symbols-outlined text-tertiary text-xs">circle</span>
+</div>
+</div>
+</div>
+<div class="p-6">
+<h3 class="text-lg font-headline font-bold text-on-surface mb-2">Basic bubble chart</h3>
+<p class="text-on-surface-variant text-xs mb-6 font-body">The essential starter setup for hierarchical data visualization.</p>
+<div class="flex gap-3">
+<button class="flex-1 py-3 px-4 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed text-xs font-bold tracking-tight shadow-lg shadow-primary/20 active:translate-y-0.5 transition-all">
+                            Quick Preview
+                        </button>
+<button class="w-12 h-11 rounded-lg bg-surface-variant/40 flex items-center justify-center border border-outline-variant/15 active:scale-95 transition-all">
+<span class="material-symbols-outlined text-on-surface-variant">code</span>
+</button>
+</div>
+</div>
+</article>
+<!-- Example 2: Glass Theme -->
+<article class="glass-card rounded-xl overflow-hidden border border-outline-variant/15 flex flex-col group">
+<div class="h-48 bg-surface-container-lowest relative overflow-hidden flex items-center justify-center">
+<div class="absolute inset-0 opacity-30" style="background-image: radial-gradient(circle at 50% 50%, #72dcff 0%, transparent 60%);"></div>
+<div class="w-32 h-32 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 flex items-center justify-center">
+<div class="w-16 h-16 rounded-full bg-primary/40 blur-lg"></div>
+</div>
+</div>
+<div class="p-6">
+<h3 class="text-lg font-headline font-bold text-on-surface mb-2">Glass theme</h3>
+<p class="text-on-surface-variant text-xs mb-6 font-body">Frosted glass effects applied to each data node for modern UIs.</p>
+<div class="flex gap-3">
+<button class="flex-1 py-3 px-4 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed text-xs font-bold tracking-tight shadow-lg shadow-primary/20 active:translate-y-0.5 transition-all">
+                            Quick Preview
+                        </button>
+<button class="w-12 h-11 rounded-lg bg-surface-variant/40 flex items-center justify-center border border-outline-variant/15 active:scale-95 transition-all">
+<span class="material-symbols-outlined text-on-surface-variant">code</span>
+</button>
+</div>
+</div>
+</article>
+<!-- Example 3: Physics Layout -->
+<article class="glass-card rounded-xl overflow-hidden border border-outline-variant/15 flex flex-col group">
+<div class="h-48 bg-surface-container-low relative overflow-hidden flex items-center justify-center">
+<div class="flex gap-4 items-center">
+<div class="w-8 h-8 rounded-full bg-tertiary shadow-[0_0_15px_#a6ffb5]"></div>
+<div class="w-6 h-6 rounded-full bg-secondary shadow-[0_0_10px_#dd8bfb]"></div>
+<div class="w-10 h-10 rounded-full bg-primary shadow-[0_0_20px_#72dcff]"></div>
+</div>
+<!-- Vector lines connecting them -->
+<svg class="absolute inset-0 w-full h-full opacity-20" viewbox="0 0 200 100">
+<line stroke="white" stroke-width="1" x1="100" x2="60" y1="50" y2="30"></line>
+<line stroke="white" stroke-width="1" x1="100" x2="140" y1="50" y2="70"></line>
+</svg>
+</div>
+<div class="p-6">
+<h3 class="text-lg font-headline font-bold text-on-surface mb-2">Physics layout</h3>
+<p class="text-on-surface-variant text-xs mb-6 font-body">Dynamic collision detection and fluid motion animations.</p>
+<div class="flex gap-3">
+<button class="flex-1 py-3 px-4 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed text-xs font-bold tracking-tight shadow-lg shadow-primary/20 active:translate-y-0.5 transition-all">
+                            Quick Preview
+                        </button>
+<button class="w-12 h-11 rounded-lg bg-surface-variant/40 flex items-center justify-center border border-outline-variant/15 active:scale-95 transition-all">
+<span class="material-symbols-outlined text-on-surface-variant">code</span>
+</button>
+</div>
+</div>
+</article>
+<!-- Example 4: Large Dataset -->
+<article class="glass-card rounded-xl overflow-hidden border border-outline-variant/15 flex flex-col group">
+<div class="h-48 bg-surface-container-high relative overflow-hidden p-4">
+<div class="grid grid-cols-8 gap-1 h-full opacity-40">
+<!-- Tiny mock bubbles -->
+<div class="bg-primary/40 rounded-full aspect-square"></div>
+<div class="bg-secondary/40 rounded-full aspect-square scale-75"></div>
+<div class="bg-tertiary/40 rounded-full aspect-square"></div>
+<div class="bg-primary/40 rounded-full aspect-square scale-50"></div>
+<div class="bg-secondary/40 rounded-full aspect-square"></div>
+<div class="bg-tertiary/40 rounded-full aspect-square scale-90"></div>
+<div class="bg-primary/40 rounded-full aspect-square"></div>
+<div class="bg-secondary/40 rounded-full aspect-square scale-110"></div>
+<div class="bg-primary/40 rounded-full aspect-square scale-75"></div>
+<div class="bg-secondary/40 rounded-full aspect-square"></div>
+<div class="bg-tertiary/40 rounded-full aspect-square scale-50"></div>
+<div class="bg-primary/40 rounded-full aspect-square scale-90"></div>
+<div class="bg-secondary/40 rounded-full aspect-square"></div>
+<div class="bg-tertiary/40 rounded-full aspect-square scale-125"></div>
+<div class="bg-primary/40 rounded-full aspect-square"></div>
+<div class="bg-secondary/40 rounded-full aspect-square scale-75"></div>
+<div class="bg-tertiary/40 rounded-full aspect-square"></div>
+<div class="bg-primary/40 rounded-full aspect-square scale-50"></div>
+<div class="bg-secondary/40 rounded-full aspect-square"></div>
+<div class="bg-tertiary/40 rounded-full aspect-square scale-90"></div>
+<div class="bg-primary/40 rounded-full aspect-square"></div>
+<div class="bg-secondary/40 rounded-full aspect-square scale-110"></div>
+<div class="bg-primary/40 rounded-full aspect-square scale-75"></div>
+<div class="bg-secondary/40 rounded-full aspect-square"></div>
+</div>
+</div>
+<div class="p-6">
+<h3 class="text-lg font-headline font-bold text-on-surface mb-2">Large dataset (100+)</h3>
+<p class="text-on-surface-variant text-xs mb-6 font-body">Canvas-optimized rendering for thousands of nodes at 60fps.</p>
+<div class="flex gap-3">
+<button class="flex-1 py-3 px-4 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed text-xs font-bold tracking-tight shadow-lg shadow-primary/20 active:translate-y-0.5 transition-all">
+                            Quick Preview
+                        </button>
+<button class="w-12 h-11 rounded-lg bg-surface-variant/40 flex items-center justify-center border border-outline-variant/15 active:scale-95 transition-all">
+<span class="material-symbols-outlined text-on-surface-variant">code</span>
+</button>
+</div>
+</div>
+</article>
+<!-- Example 5: Custom Colors -->
+<article class="glass-card rounded-xl overflow-hidden border border-outline-variant/15 flex flex-col group">
+<div class="h-48 bg-surface relative overflow-hidden flex items-center justify-center">
+<div class="flex gap-2">
+<div class="w-8 h-8 rounded bg-[#ff716c]"></div>
+<div class="w-8 h-8 rounded bg-[#72dcff]"></div>
+<div class="w-8 h-8 rounded bg-[#dd8bfb]"></div>
+<div class="w-8 h-8 rounded bg-[#a6ffb5]"></div>
+</div>
+</div>
+<div class="p-6">
+<h3 class="text-lg font-headline font-bold text-on-surface mb-2">Custom colors</h3>
+<p class="text-on-surface-variant text-xs mb-6 font-body">Easily map data attributes to brand-specific color palettes.</p>
+<div class="flex gap-3">
+<button class="flex-1 py-3 px-4 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed text-xs font-bold tracking-tight shadow-lg shadow-primary/20 active:translate-y-0.5 transition-all">
+                            Quick Preview
+                        </button>
+<button class="w-12 h-11 rounded-lg bg-surface-variant/40 flex items-center justify-center border border-outline-variant/15 active:scale-95 transition-all">
+<span class="material-symbols-outlined text-on-surface-variant">code</span>
+</button>
+</div>
+</div>
+</article>
+<!-- Example 6: Interactive Events -->
+<article class="glass-card rounded-xl overflow-hidden border border-outline-variant/15 flex flex-col group">
+<div class="h-48 bg-[#000] relative overflow-hidden flex flex-col items-center justify-center">
+<div class="w-20 h-20 rounded-full border-2 border-dashed border-primary/50 flex items-center justify-center">
+<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">touch_app</span>
+</div>
+<div class="mt-4 px-3 py-1 bg-primary/10 rounded-full border border-primary/20">
+<span class="text-[10px] text-primary font-label uppercase">onClick() fired</span>
+</div>
+</div>
+<div class="p-6">
+<h3 class="text-lg font-headline font-bold text-on-surface mb-2">Interactive events</h3>
+<p class="text-on-surface-variant text-xs mb-6 font-body">Deep dive into tap, hover, and drag events with native callbacks.</p>
+<div class="flex gap-3">
+<button class="flex-1 py-3 px-4 rounded-lg bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed text-xs font-bold tracking-tight shadow-lg shadow-primary/20 active:translate-y-0.5 transition-all">
+                            Quick Preview
+                        </button>
+<button class="w-12 h-11 rounded-lg bg-surface-variant/40 flex items-center justify-center border border-outline-variant/15 active:scale-95 transition-all">
+<span class="material-symbols-outlined text-on-surface-variant">code</span>
+</button>
+</div>
+</div>
+</article>
+</div>
+</main>
+<!-- BottomNavBar -->
+<nav class="fixed bottom-0 left-0 w-full z-50 bg-[#090e1c]/80 backdrop-blur-2xl border-t border-[#434759]/15 flex justify-around items-center h-20 px-4 pb-safe shadow-[0_-10px_30px_rgba(0,0,0,0.5)]">
+<div class="flex flex-col items-center justify-center text-[#e1e4fa]/50 px-3 py-1 hover:text-[#dd8bfb] transition-all active:translate-y-0.5 duration-150">
+<span class="material-symbols-outlined">dashboard</span>
+<span class="font-space-grotesk text-[10px] uppercase tracking-widest mt-1">Gallery</span>
+</div>
+<div class="flex flex-col items-center justify-center text-[#e1e4fa]/50 px-3 py-1 hover:text-[#dd8bfb] transition-all active:translate-y-0.5 duration-150">
+<span class="material-symbols-outlined">description</span>
+<span class="font-space-grotesk text-[10px] uppercase tracking-widest mt-1">Docs</span>
+</div>
+<!-- ACTIVE TAB: Examples -->
+<div class="flex flex-col items-center justify-center text-[#72dcff] bg-[#72dcff]/10 rounded-xl px-3 py-1 active:translate-y-0.5 duration-150">
+<span class="material-symbols-outlined">bubble_chart</span>
+<span class="font-space-grotesk text-[10px] uppercase tracking-widest mt-1">Examples</span>
+</div>
+<div class="flex flex-col items-center justify-center text-[#e1e4fa]/50 px-3 py-1 hover:text-[#dd8bfb] transition-all active:translate-y-0.5 duration-150">
+<span class="material-symbols-outlined">code</span>
+<span class="font-space-grotesk text-[10px] uppercase tracking-widest mt-1">Code</span>
+</div>
+</nav>
+</body></html>