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
  1. package/README.md +1 -1
  2. package/demo/glassmorphism.html +323 -0
  3. package/demo/index.html +739 -0
  4. package/dist/bubbleChart.cjs.js +1 -1
  5. package/dist/bubbleChart.esm.js +1 -1
  6. package/dist/bubbleChart.umd.js +1 -1
  7. package/docs/documentation.html +438 -0
  8. package/docs/examples.html +689 -0
  9. package/docs/index.html +432 -0
  10. package/docs/landing_test.html +337 -0
  11. package/docs/playground.html +345 -0
  12. package/docs/process_html.js +105 -0
  13. package/docs/temp/5a86d.html +248 -0
  14. package/docs/temp/b0cbe.html +276 -0
  15. package/docs/temp/docs_desktop.html +341 -0
  16. package/docs/temp/docs_mobile.html +291 -0
  17. package/docs/temp/examples_desktop.html +372 -0
  18. package/docs/temp/examples_mobile.html +317 -0
  19. package/docs/temp/landing_desktop.html +337 -0
  20. package/docs/temp/landing_mobile.html +270 -0
  21. package/docs/temp/playground_desktop.html +283 -0
  22. package/docs/temp/playground_mobile.html +236 -0
  23. package/examples/test.html +194 -0
  24. package/examples/test2.html +103 -0
  25. package/package.json +7 -3
  26. package/scripts/generate-fixtures.ts +45 -0
  27. package/spec/config-defaults.json +16 -0
  28. package/spec/fixtures/3-bubbles.expected.json +27 -0
  29. package/spec/fixtures/3-bubbles.input.json +10 -0
  30. package/spec/fixtures/equal-values.expected.json +34 -0
  31. package/spec/fixtures/equal-values.input.json +11 -0
  32. package/spec/fixtures/many-bubbles.expected.json +76 -0
  33. package/spec/fixtures/many-bubbles.input.json +17 -0
  34. package/spec/fixtures/single-bubble.expected.json +13 -0
  35. package/spec/fixtures/single-bubble.input.json +8 -0
  36. package/spec/physics.json +11 -0
  37. package/tsconfig.scripts.json +8 -0
  38. package/dist/canvas.d.ts +0 -5
  39. package/dist/constants/app-constants.d.ts +0 -3
  40. package/dist/constants/physics.d.ts +0 -10
  41. package/dist/core/renderer.d.ts +0 -2
  42. package/dist/features/text-wrapper.d.ts +0 -2
  43. package/dist/features/tooltip.d.ts +0 -6
  44. package/dist/index.d.ts +0 -8
  45. package/dist/models/internal/data-item-info.d.ts +0 -7
  46. package/dist/models/public/bubble-chart.d.ts +0 -6
  47. package/dist/models/public/config/bubble-appearance.d.ts +0 -26
  48. package/dist/models/public/config/font-options.d.ts +0 -46
  49. package/dist/models/public/config/interaction-options.d.ts +0 -6
  50. package/dist/models/public/config/tooltip-config.d.ts +0 -4
  51. package/dist/models/public/config/tooltip-options.d.ts +0 -170
  52. package/dist/models/public/configuration.d.ts +0 -30
  53. package/dist/models/public/data-item.d.ts +0 -8
  54. package/dist/services/chart-service.d.ts +0 -5
  55. package/dist/services/render-service.d.ts +0 -3
  56. package/dist/utils/config.d.ts +0 -12
  57. package/dist/utils/helper.d.ts +0 -2
  58. package/dist/utils/validation.d.ts +0 -5
@@ -0,0 +1,194 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BubbleChartJS Test</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 20px;
11
+ background-color: #f4f4f9;
12
+ }
13
+ .container {
14
+ display: flex;
15
+ flex-direction: column;
16
+ gap: 20px;
17
+ max-width: 800px;
18
+ margin: 0 auto;
19
+ }
20
+ .controls {
21
+ display: flex;
22
+ gap: 10px;
23
+ padding: 15px;
24
+ background: white;
25
+ border-radius: 8px;
26
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
27
+ }
28
+ button {
29
+ padding: 8px 16px;
30
+ cursor: pointer;
31
+ border: none;
32
+ border-radius: 4px;
33
+ background-color: #007bff;
34
+ color: white;
35
+ font-weight: bold;
36
+ }
37
+ button:hover {
38
+ background-color: #0056b3;
39
+ }
40
+ button.danger {
41
+ background-color: #dc3545;
42
+ }
43
+ button.danger:hover {
44
+ background-color: #a71d2a;
45
+ }
46
+ #chart-container {
47
+ width: 100%;
48
+ height: 400px;
49
+ background: white;
50
+ border-radius: 8px;
51
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
52
+ position: relative; /* important for tooltip */
53
+ }
54
+ #log {
55
+ padding: 15px;
56
+ background: #333;
57
+ color: #0f0;
58
+ font-family: monospace;
59
+ border-radius: 8px;
60
+ min-height: 100px;
61
+ }
62
+ </style>
63
+ </head>
64
+ <body>
65
+ <div class="container">
66
+ <h2>BubbleChartJS Testing Playground</h2>
67
+
68
+ <div class="controls">
69
+ <button id="btn-update">Update Data (Dynamic Update)</button>
70
+ <button id="btn-destroy" class="danger">Destroy Chart</button>
71
+ <button id="btn-recreate">Recreate Chart</button>
72
+ <button id="btn-resize">Change Container Size (Responsive)</button>
73
+ </div>
74
+
75
+ <div id="chart-container"></div>
76
+
77
+ <div id="log">Logs will appear here...<br></div>
78
+ </div>
79
+
80
+ <!-- Load the UMD bundle -->
81
+ <script src="../dist/bubbleChart.umd.js?v=2"></script>
82
+
83
+ <script>
84
+ const logEl = document.getElementById('log');
85
+ function log(msg) {
86
+ logEl.innerHTML += `> ${msg}<br>`;
87
+ logEl.scrollTop = logEl.scrollHeight;
88
+ }
89
+
90
+ let chartInstance = null;
91
+
92
+ const dataset1 = [
93
+ { label: "Sales", value: 50 },
94
+ { label: "Marketing", value: 30 },
95
+ { label: "Engineering", value: 80 },
96
+ { label: "HR", value: 20 },
97
+ { label: "Customer Support", value: 45 }
98
+ ];
99
+
100
+ const dataset2 = [
101
+ { label: "Alpha", value: 90 },
102
+ { label: "Beta", value: 60 },
103
+ { label: "Gamma", value: 40 }
104
+ ];
105
+
106
+ function createChart(data) {
107
+ if (chartInstance) {
108
+ log("Chart already exists. Destroy it first.");
109
+ return;
110
+ }
111
+
112
+ log("Initializing chart...");
113
+ chartInstance = window.initializeChart({
114
+ canvasContainerId: "chart-container",
115
+ data: data,
116
+ minRadius: 20,
117
+ maxLines: 3,
118
+ textWrap: true,
119
+ isResizeCanvasOnWindowSizeChange: true, // Responsive Resize
120
+ colorPalette: ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEEAD"], // Custom Color Palette
121
+ defaultFontColor: "#ffffff",
122
+ fontSize: 14,
123
+ showToolTip: true,
124
+ tooltipOptions: {
125
+ backgroundColor: "rgba(0, 0, 0, 0.9)",
126
+ fontColor: "#fff",
127
+ // GLOBAL TOOLTIP FORMATTER
128
+ formatter: (item) => {
129
+ return `<div style="text-align: center;">
130
+ <strong>🔥 Custom Formatter 🔥</strong><br>
131
+ <i>${item.label}</i><br>
132
+ <span style="color: #4ECDC4; font-size: 1.2em;">${item.value} units</span>
133
+ </div>`;
134
+ }
135
+ },
136
+ // BUBBLE CLICK EVENT
137
+ onBubbleClick: (bubble, event) => {
138
+ log(`Clicked on bubble: ${bubble.label} (Value: ${bubble.value})`);
139
+ }
140
+ });
141
+ log("Chart initialized.");
142
+
143
+ // Debugging the instance structure
144
+ log(`Instance Type: ${chartInstance.constructor ? chartInstance.constructor.name : 'Unknown'}`);
145
+ log(`Has update: ${!!chartInstance.update}`);
146
+ log(`Has destroy: ${!!chartInstance.destroy}`);
147
+ let props = [];
148
+ for (let k in chartInstance) { props.push(k); }
149
+ log(`Properties: ${props.join(', ')}`);
150
+ }
151
+
152
+ // 1. Initial Render
153
+ createChart(dataset1);
154
+
155
+ // 2. Dynamic Update binding
156
+ document.getElementById('btn-update').addEventListener('click', () => {
157
+ if (chartInstance && chartInstance.update) {
158
+ log("Updating chart with new dataset...");
159
+ chartInstance.update(dataset2);
160
+ } else {
161
+ log("Cannot update: Chart instance not found or doesn't support update().");
162
+ }
163
+ });
164
+
165
+ // 3. Destroy Method binding
166
+ document.getElementById('btn-destroy').addEventListener('click', () => {
167
+ if (chartInstance && chartInstance.destroy) {
168
+ log("Destroying chart...");
169
+ chartInstance.destroy();
170
+ chartInstance = null;
171
+ } else {
172
+ log("Cannot destroy: Chart instance not found or doesn't support destroy().");
173
+ }
174
+ });
175
+
176
+ // 4. Recreate binding
177
+ document.getElementById('btn-recreate').addEventListener('click', () => {
178
+ createChart(dataset1);
179
+ });
180
+
181
+ // 5. Responsive Resize binding
182
+ // Test ResizeObserver or Window Resize behavior
183
+ document.getElementById('btn-resize').addEventListener('click', () => {
184
+ const container = document.getElementById('chart-container');
185
+ const newWidth = container.style.width === '50%' ? '100%' : '50%';
186
+ container.style.width = newWidth;
187
+ log(`Resized container to ${newWidth}. Check if chart resizes correctly.`);
188
+ // Simulate window resize to trigger the window scale logic, since ResizeObserver is not implemented yet
189
+ window.dispatchEvent(new Event('resize'));
190
+ });
191
+
192
+ </script>
193
+ </body>
194
+ </html>
@@ -0,0 +1,103 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Glassmorphism Bubble Chart</title>
8
+
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+
11
+ <script src="https://cdn.jsdelivr.net/npm/bubble-chart-js"></script>
12
+
13
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0"
14
+ rel="stylesheet" />
15
+
16
+ <style>
17
+ /* The ambient background glow that shines through the transparent canvas */
18
+ .glass-glow {
19
+ position: absolute;
20
+ top: 50%;
21
+ left: 50%;
22
+ transform: translate(-50%, -50%);
23
+ width: 70%;
24
+ height: 70%;
25
+ background: radial-gradient(circle, rgba(138, 180, 248, 0.15) 0%, rgba(15, 23, 42, 0) 70%);
26
+ pointer-events: none;
27
+ z-index: 0;
28
+ }
29
+
30
+ /* Adds a subtle drop shadow to the canvas itself to make the translucent bubbles pop */
31
+ #expense-chart canvas {
32
+ filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.3));
33
+ }
34
+ </style>
35
+ </head>
36
+
37
+ <body class="bg-[#0f1115] flex items-center justify-center min-h-screen font-sans">
38
+
39
+ <div
40
+ class="bg-[#161920] p-8 rounded-[2rem] shadow-2xl w-full max-w-3xl border border-white/5 relative overflow-hidden">
41
+
42
+ <div class="glass-glow"></div>
43
+
44
+ <h2 class="text-xl font-bold text-white mb-2 text-center tracking-wide relative z-10">Monthly Spending</h2>
45
+
46
+ <div id="expense-chart" class="w-full h-[500px] relative z-10"></div>
47
+ </div>
48
+
49
+ <script>
50
+ document.addEventListener("DOMContentLoaded", () => {
51
+
52
+ // 1. Define Data with RGBA Colors and Icon Labels
53
+ // We store the real category name in 'categoryName' so we can use it in the tooltip later
54
+ const expenseData = [
55
+ { label: "home", categoryName: "Housing", value: 2000, bubbleColor: "rgba(138, 224, 138, 0.85)", fontColor: "#ffffff" },
56
+ { label: "restaurant", categoryName: "Food", value: 800, bubbleColor: "rgba(255, 138, 138, 0.85)", fontColor: "#ffffff" },
57
+ { label: "shopping_bag", categoryName: "Shopping", value: 500, bubbleColor: "rgba(244, 208, 63, 0.85)", fontColor: "#ffffff" },
58
+ { label: "directions_car", categoryName: "Transport", value: 400, bubbleColor: "rgba(138, 180, 248, 0.85)", fontColor: "#ffffff" },
59
+ { label: "bolt", categoryName: "Utilities", value: 250, bubbleColor: "rgba(197, 138, 249, 0.85)", fontColor: "#ffffff" },
60
+ { label: "confirmation_number", categoryName: "Entertainment", value: 150, bubbleColor: "rgba(163, 228, 215, 0.85)", fontColor: "#ffffff" }
61
+ ];
62
+
63
+ if (typeof window.initializeChart === 'function') {
64
+ window.initializeChart({
65
+ canvasContainerId: "expense-chart",
66
+ data: expenseData,
67
+
68
+ // 2. Inject the Icon Font into the Canvas Rendering
69
+ fontFamily: "'Material Symbols Rounded', sans-serif",
70
+ fontSize: 24, // Size of the icons
71
+ minRadius: 35,
72
+ textWrap: true,
73
+ isResizeCanvasOnWindowSizeChange: true,
74
+ showToolTip: true,
75
+
76
+ // 3. Style the Tooltip to match the premium pill-shape
77
+ tooltipOptions: {
78
+ backgroundColor: "#111111", // Dark solid background
79
+ fontColor: "#ffffff",
80
+ formatter: (item) => {
81
+ // Because 'item.label' is now an icon name (e.g., "directions_car"),
82
+ // we look up the original data to get the actual word "Transport" for the tooltip.
83
+ const originalData = expenseData.find(d => d.label === item.label);
84
+ const categoryWord = originalData ? originalData.categoryName : item.label;
85
+
86
+ // Return the custom HTML tooltip.
87
+ // We force system-ui font here so it doesn't render as material icons!
88
+ return `<div style="font-family: system-ui, -apple-system, sans-serif; padding: 4px 6px;">
89
+ <strong style="font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;">
90
+ ${categoryWord}: $${item.value.toLocaleString()}
91
+ </strong>
92
+ </div>`;
93
+ }
94
+ }
95
+ });
96
+ } else {
97
+ console.error("bubbleChartJs failed to load.");
98
+ }
99
+ });
100
+ </script>
101
+ </body>
102
+
103
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bubble-chart-js",
3
- "version": "1.0.19",
3
+ "version": "2.0.0",
4
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.",
5
5
  "main": "dist/bubbleChart.cjs.js",
6
6
  "module": "dist/bubbleChart.esm.js",
@@ -12,7 +12,8 @@
12
12
  "clean": "rimraf dist",
13
13
  "build": "npm run clean && webpack --mode production",
14
14
  "watch": "webpack --watch",
15
- "start": "webpack serve --open",
15
+ "start": "webpack serve --config-name demo",
16
+ "demo": "webpack serve --config-name demo",
16
17
  "lint": "eslint src/**/*.ts",
17
18
  "lint:fix": "eslint src/**/*.ts --fix",
18
19
  "test": "jest"
@@ -40,11 +41,14 @@
40
41
  "author": "Pragadeeshwaran Pasupathi <pragadeeshwaran.pasupathi@gmail.com>",
41
42
  "repository": {
42
43
  "type": "git",
43
- "url": "https://github.com/Praga-Dev/bubbleChartJS.git"
44
+ "url": "git+https://github.com/praga-dev/bubble-chart-js.git"
44
45
  },
45
46
  "license": "MIT",
46
47
  "keywords": [
48
+ "bubble",
49
+ "chart",
47
50
  "bubble chart",
51
+ "bubble chart js",
48
52
  "chartjs",
49
53
  "chart.js",
50
54
  "visualization",
@@ -0,0 +1,45 @@
1
+ /**
2
+ * Conformance Test Fixture Generator
3
+ *
4
+ * Run with: npx ts-node --project tsconfig.json scripts/generate-fixtures.ts
5
+ *
6
+ * Reads all input fixtures from spec/fixtures/, runs them through the layout engine,
7
+ * and writes the expected output alongside each input file.
8
+ */
9
+
10
+ import * as fs from 'fs';
11
+ import * as path from 'path';
12
+ import { computeLayout } from '../src/core/layout-engine';
13
+
14
+ const fixturesDir = path.join(__dirname, '..', 'spec', 'fixtures');
15
+
16
+ const inputFiles = fs
17
+ .readdirSync(fixturesDir)
18
+ .filter((f) => f.endsWith('.input.json'));
19
+
20
+ for (const inputFile of inputFiles) {
21
+ const inputPath = path.join(fixturesDir, inputFile);
22
+ const input = JSON.parse(fs.readFileSync(inputPath, 'utf8'));
23
+
24
+ const result = computeLayout(input.data, input.width, input.height);
25
+
26
+ const expected = {
27
+ specVersion: input.specVersion || '1.0',
28
+ tolerance: 1.0,
29
+ nodes: result.map((node) => ({
30
+ label: node.label,
31
+ x: Math.round(node.x * 100) / 100,
32
+ y: Math.round(node.y * 100) / 100,
33
+ radius: Math.round(node.radius * 100) / 100,
34
+ fixed: node.fixed,
35
+ })),
36
+ };
37
+
38
+ const expectedFile = inputFile.replace('.input.json', '.expected.json');
39
+ const expectedPath = path.join(fixturesDir, expectedFile);
40
+
41
+ fs.writeFileSync(expectedPath, JSON.stringify(expected, null, 2) + '\n');
42
+ console.log(`Generated: ${expectedFile} (${expected.nodes.length} nodes)`);
43
+ }
44
+
45
+ console.log('Done! All expected fixtures generated.');
@@ -0,0 +1,16 @@
1
+ {
2
+ "specVersion": "1.0",
3
+ "defaultBubbleColor": "#3498DB",
4
+ "defaultFontColor": "#ffffff",
5
+ "minRadius": 10,
6
+ "maxLines": "auto",
7
+ "textWrap": true,
8
+ "fontSize": 14,
9
+ "defaultFontFamily": "Arial",
10
+ "showTooltip": true,
11
+ "enableResize": true,
12
+ "borderThickness": 0.25,
13
+ "borderColor": "#000000",
14
+ "opacity": 1.0,
15
+ "canvasPadding": 5
16
+ }
@@ -0,0 +1,27 @@
1
+ {
2
+ "specVersion": "1.0",
3
+ "tolerance": 1,
4
+ "nodes": [
5
+ {
6
+ "label": "Alpha",
7
+ "x": 400,
8
+ "y": 300,
9
+ "radius": 120,
10
+ "fixed": true
11
+ },
12
+ {
13
+ "label": "Beta",
14
+ "x": 256.6,
15
+ "y": 431.37,
16
+ "radius": 78,
17
+ "fixed": false
18
+ },
19
+ {
20
+ "label": "Gamma",
21
+ "x": 414.9,
22
+ "y": 130.26,
23
+ "radius": 57,
24
+ "fixed": false
25
+ }
26
+ ]
27
+ }
@@ -0,0 +1,10 @@
1
+ {
2
+ "specVersion": "1.0",
3
+ "width": 800,
4
+ "height": 600,
5
+ "data": [
6
+ { "label": "Alpha", "value": 100 },
7
+ { "label": "Beta", "value": 50 },
8
+ { "label": "Gamma", "value": 25 }
9
+ ]
10
+ }
@@ -0,0 +1,34 @@
1
+ {
2
+ "specVersion": "1.0",
3
+ "tolerance": 1,
4
+ "nodes": [
5
+ {
6
+ "label": "A",
7
+ "x": 400,
8
+ "y": 300,
9
+ "radius": 120,
10
+ "fixed": true
11
+ },
12
+ {
13
+ "label": "B",
14
+ "x": 220.61,
15
+ "y": 462.39,
16
+ "radius": 120,
17
+ "fixed": false
18
+ },
19
+ {
20
+ "label": "C",
21
+ "x": 429.16,
22
+ "y": 125,
23
+ "radius": 120,
24
+ "fixed": false
25
+ },
26
+ {
27
+ "label": "D",
28
+ "x": 557.26,
29
+ "y": 475,
30
+ "radius": 120,
31
+ "fixed": false
32
+ }
33
+ ]
34
+ }
@@ -0,0 +1,11 @@
1
+ {
2
+ "specVersion": "1.0",
3
+ "width": 800,
4
+ "height": 600,
5
+ "data": [
6
+ { "label": "A", "value": 50 },
7
+ { "label": "B", "value": 50 },
8
+ { "label": "C", "value": 50 },
9
+ { "label": "D", "value": 50 }
10
+ ]
11
+ }
@@ -0,0 +1,76 @@
1
+ {
2
+ "specVersion": "1.0",
3
+ "tolerance": 1,
4
+ "nodes": [
5
+ {
6
+ "label": "Item 1",
7
+ "x": 400,
8
+ "y": 300,
9
+ "radius": 120,
10
+ "fixed": true
11
+ },
12
+ {
13
+ "label": "Item 2",
14
+ "x": 196.17,
15
+ "y": 483.4,
16
+ "radius": 111.6,
17
+ "fixed": false
18
+ },
19
+ {
20
+ "label": "Item 3",
21
+ "x": 447,
22
+ "y": 108.2,
23
+ "radius": 103.2,
24
+ "fixed": false
25
+ },
26
+ {
27
+ "label": "Item 4",
28
+ "x": 529.65,
29
+ "y": 469.88,
30
+ "radius": 94.8,
31
+ "fixed": false
32
+ },
33
+ {
34
+ "label": "Item 5",
35
+ "x": 201.83,
36
+ "y": 250.78,
37
+ "radius": 86.4,
38
+ "fixed": false
39
+ },
40
+ {
41
+ "label": "Item 6",
42
+ "x": 570.74,
43
+ "y": 206.71,
44
+ "radius": 78,
45
+ "fixed": false
46
+ },
47
+ {
48
+ "label": "Item 7",
49
+ "x": 371.14,
50
+ "y": 482.56,
51
+ "radius": 69.6,
52
+ "fixed": false
53
+ },
54
+ {
55
+ "label": "Item 8",
56
+ "x": 304.85,
57
+ "y": 152.82,
58
+ "radius": 61.2,
59
+ "fixed": false
60
+ },
61
+ {
62
+ "label": "Item 9",
63
+ "x": 562.52,
64
+ "y": 331.74,
65
+ "radius": 52.8,
66
+ "fixed": false
67
+ },
68
+ {
69
+ "label": "Item 10",
70
+ "x": 257.75,
71
+ "y": 362.86,
72
+ "radius": 44.4,
73
+ "fixed": false
74
+ }
75
+ ]
76
+ }
@@ -0,0 +1,17 @@
1
+ {
2
+ "specVersion": "1.0",
3
+ "width": 800,
4
+ "height": 600,
5
+ "data": [
6
+ { "label": "Item 1", "value": 100 },
7
+ { "label": "Item 2", "value": 90 },
8
+ { "label": "Item 3", "value": 80 },
9
+ { "label": "Item 4", "value": 70 },
10
+ { "label": "Item 5", "value": 60 },
11
+ { "label": "Item 6", "value": 50 },
12
+ { "label": "Item 7", "value": 40 },
13
+ { "label": "Item 8", "value": 30 },
14
+ { "label": "Item 9", "value": 20 },
15
+ { "label": "Item 10", "value": 10 }
16
+ ]
17
+ }
@@ -0,0 +1,13 @@
1
+ {
2
+ "specVersion": "1.0",
3
+ "tolerance": 1,
4
+ "nodes": [
5
+ {
6
+ "label": "Solo",
7
+ "x": 400,
8
+ "y": 300,
9
+ "radius": 120,
10
+ "fixed": true
11
+ }
12
+ ]
13
+ }
@@ -0,0 +1,8 @@
1
+ {
2
+ "specVersion": "1.0",
3
+ "width": 800,
4
+ "height": 600,
5
+ "data": [
6
+ { "label": "Solo", "value": 100 }
7
+ ]
8
+ }
@@ -0,0 +1,11 @@
1
+ {
2
+ "specVersion": "1.0",
3
+ "forceStrength": 0.008,
4
+ "iterations": 1000,
5
+ "damping": 0.65,
6
+ "boundaryForce": 0.02,
7
+ "centerForce": 0.12,
8
+ "centerAttraction": 0.8,
9
+ "centerDamping": 0.3,
10
+ "centerRadiusBuffer": 35
11
+ }
@@ -0,0 +1,8 @@
1
+ {
2
+ "extends": "./tsconfig.json",
3
+ "compilerOptions": {
4
+ "module": "CommonJS",
5
+ "outDir": "./dist-scripts"
6
+ },
7
+ "include": ["scripts/**/*", "src/**/*", "spec/**/*.json"]
8
+ }
package/dist/canvas.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import { Configuration } from "./models/public/configuration";
2
- /**
3
- * Creates and initializes the canvas inside the specified container.
4
- */
5
- export declare function createCanvas(config: Configuration): HTMLCanvasElement | null;
@@ -1,3 +0,0 @@
1
- export declare class AppConstants {
2
- static readonly TRANSPARENT = "transparent";
3
- }
@@ -1,10 +0,0 @@
1
- export declare const PHYSICS: {
2
- readonly forceStrength: 0.008;
3
- readonly iterations: 1000;
4
- readonly damping: 0.65;
5
- readonly boundaryForce: 0.02;
6
- readonly centerForce: 0.12;
7
- readonly centerAttraction: 0.8;
8
- readonly centerDamping: 0.3;
9
- readonly centerRadiusBuffer: 35;
10
- };
@@ -1,2 +0,0 @@
1
- import { Configuration } from "../models/public/configuration";
2
- export declare function renderChart(config: Configuration): void;
@@ -1,2 +0,0 @@
1
- export declare function getWrappedLines(ctx: CanvasRenderingContext2D, text: string, maxLineWidth: number, maxAllowedLines: number | "auto" | undefined, radius: number, fontSize?: number, // TODO : take all default values from constants
2
- fontWeight?: number, fontStyle?: "normal" | "italic" | "oblique", fontFamily?: string, horizontalPadding?: number, verticalPadding?: number, lineHeightFactor?: number, maxCharsPerWord?: number | undefined): string[];
@@ -1,6 +0,0 @@
1
- import { DataItemInfo } from "../models/internal/data-item-info";
2
- import { Configuration } from "../models/public/configuration";
3
- export declare function createTooltipElement(config: Configuration): HTMLDivElement | null;
4
- export declare function onBubbleClickEventHandler(// TODO : move to interactions.ts
5
- event: MouseEvent, data: DataItemInfo[], canvas: HTMLCanvasElement, config: Configuration): void;
6
- export declare function handleMouseMove(event: MouseEvent, data: DataItemInfo[], canvas: HTMLCanvasElement, tooltip: HTMLDivElement, config: Configuration): void;
package/dist/index.d.ts DELETED
@@ -1,8 +0,0 @@
1
- import { BubbleChart } from "./models/public/bubble-chart";
2
- import { initializeChart } from "./services/chart-service";
3
- export { initializeChart, BubbleChart };
4
- declare global {
5
- interface Window {
6
- initializeChart: typeof initializeChart;
7
- }
8
- }