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.
- 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
|
@@ -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": "
|
|
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 --
|
|
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/
|
|
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,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,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
|
+
}
|
package/dist/canvas.d.ts
DELETED
|
@@ -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
|
-
};
|
package/dist/core/renderer.d.ts
DELETED
|
@@ -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