Merge branch 'master' into next

naver · Sep 7, 2023 · f7593c8 · f7593c8
2 parents 4d31149 + 990fcf7
commit f7593c8
Show file tree

Hide file tree

Showing 23 changed files with 1,201 additions and 480 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,24 +1,9 @@
-# [3.10.0-next.1](https://github.com/naver/billboard.js/compare/3.9.3...3.10.0-next.1) (2023-09-04)
+## [3.9.4](https://github.com/naver/billboard.js/compare/3.9.3...3.9.4) (2023-09-04)
 
 
 ### Bug Fixes
 
-* **api:** Fix to return indexed categories ([55c17c6](https://github.com/naver/billboard.js/commit/55c17c6c99fcdaca0ba2a323506709ab3d44e41a)), closes [#3365](https://github.com/naver/billboard.js/issues/3365)
-* **bar:** Fix stacking bar position on multiple xs ([216da62](https://github.com/naver/billboard.js/commit/216da626bf5e774575513122e0816f60a64f042a)), closes [#3372](https://github.com/naver/billboard.js/issues/3372)
-* **candlestick:** Fix rendering on rotated axis ([17f5058](https://github.com/naver/billboard.js/commit/17f5058a3a6b2acfd5c9ee9c4c9f1d13be102693)), closes [#3387](https://github.com/naver/billboard.js/issues/3387)
-* **clip:** Fix x axis hide on title.bottom ([beec1bb](https://github.com/naver/billboard.js/commit/beec1bbdf3f6962dad02ac775a2d13d3b2fbb8eb)), closes [#3364](https://github.com/naver/billboard.js/issues/3364)
-* **shape:** Fix circleY() undefined error ([f4ac3f1](https://github.com/naver/billboard.js/commit/f4ac3f1cb8e1f87c9bbd998ab66ff97b61080d51)), closes [#3388](https://github.com/naver/billboard.js/issues/3388)
-* **subchart, zoom:** Fix returning domain value ([90338ec](https://github.com/naver/billboard.js/commit/90338eced7c9545f2ceb443bebbd857ac58a674c)), closes [#3347](https://github.com/naver/billboard.js/issues/3347)
-* **subchart:** Fix handlebar position ([b897cbb](https://github.com/naver/billboard.js/commit/b897cbbcecc43f460566f2eb88fe9a5ee985bcaf)), closes [#3358](https://github.com/naver/billboard.js/issues/3358)
-* **title:** fix title text center align ([b254a61](https://github.com/naver/billboard.js/commit/b254a61533620bd7c55648499b1dd8cc22795336)), closes [#3363](https://github.com/naver/billboard.js/issues/3363)
-* **tooltip:** Fix tooltip.format.value call ([f7d587d](https://github.com/naver/billboard.js/commit/f7d587de26c6ceb026110328ef6d605f42fa563b)), closes [#3371](https://github.com/naver/billboard.js/issues/3371)
-* **tooltip:** Fix tootip display on tooltip.init ([98e6f8b](https://github.com/naver/billboard.js/commit/98e6f8b29d63544ba01fd37564fe2b40d9a04214)), closes [#3369](https://github.com/naver/billboard.js/issues/3369)
-
-
-### Features
-
-* **api:** Intent to ship subchart method ([976f04a](https://github.com/naver/billboard.js/commit/976f04a93df40bb756bba87c0f0afa5411ac12ba)), closes [#3342](https://github.com/naver/billboard.js/issues/3342)
-* **regions:** Intent to ship regions.label ([b4e3bc2](https://github.com/naver/billboard.js/commit/b4e3bc29f2e78d6547ce695f9ecc6aadf90c22a9)), closes [#3319](https://github.com/naver/billboard.js/issues/3319)
+* **tooltip:** Fix error throw when tooltip.show=false is set ([4081a90](https://github.com/naver/billboard.js/commit/4081a9002af565ed1e8bc8c2435dadc78b4db1f8)), closes [#3396](https://github.com/naver/billboard.js/issues/3396)
 
 ## [3.9.3](https://github.com/naver/billboard.js/compare/3.9.2...3.9.3) (2023-08-09)
 

diff --git a/demo/demo.js b/demo/demo.js
@@ -3383,8 +3383,8 @@ d3.select(".chart_area")
 					pattern: [
 						"circle",
 						"rectangle",
-						"<polygon points='2.5 0 0 5 5 5'></polygon>",
-						"<polygon points='2.5 0 0 2.5 2.5 5 5 2.5 2.5 0'></polygon>"
+						"<polygon points='4 0 0 8 8 8'></polygon>",
+						"<polygon points='4 0 0 4 4 8 8 4 4 0'></polygon>"
 					]
 				},
 				legend: {
@@ -3740,8 +3740,8 @@ d3.select(".chart_area")
 					pattern: [
 						"circle",
 						"rectangle",
-						"<polygon points='2.5 0 0 2.5 2.5 5 5 2.5 2.5 0'></polygon>",
-						"<polygon points='2.5 0 0 5 5 5'></polygon>",
+						"<polygon points='5 0 0 5 5 10 10 5 5 0'></polygon>",
+						"<polygon points='5 0 0 10 10 10'></polygon>",
 						"<g><circle cx='10' cy='10' r='10'></circle><rect x='5' y='5' width='10' height='10' style='fill:#fff'></rect></g>"
 					]
 				}
@@ -3758,7 +3758,7 @@ d3.select(".chart_area")
 				},
 				point: {
 					pattern: [
-						"<polygon points='2.5 0 0 2.5 2.5 5 5 2.5 2.5 0'></polygon>"
+						"<polygon points='5 0 0 5 5 10 10 5 5 0'></polygon>"
 					]
 				}
 			}
@@ -3810,7 +3810,7 @@ d3.select(".chart_area")
 				},
 				point: {
 					pattern: [
-						"<path d='m3.937502,2.348755c1.314192,-3.618047 6.463238,0 0,4.651779c-6.463238,-4.651779 -1.314192,-8.269826 0,-4.651779z' />"
+						"<path d='m4 3 c3 -5 8 1 0 5 c-8 -4 -3 -10 0 -5z' />"
 					]
 				}
 			}
@@ -3826,7 +3826,7 @@ d3.select(".chart_area")
 				},
 				point: {
 					pattern: [
-						"<polygon points='2.5 0 0 5 5 5'></polygon>"
+						"<polygon points='5 0 0 10 10 10'></polygon>"
 					]
 				}
 			}
@@ -3946,6 +3946,71 @@ d3.select(".chart_area")
 				}
 			}
 		],
+		RadialGradientPoint: [			
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", 30, 200, 100, 400, 100, 250],
+							["data2", 130, 100, 130, 200, 150, 50]
+						],
+						type: "scatter"
+					},
+					point: {
+						r: 20,
+						radialGradient: true,
+						opacity: 1,
+						sensitivity: "radius"
+					},
+					axis: {
+						x: {
+							type: "category"
+						}
+					}
+				}
+			},
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", 30, 200, 100, 400, 100, 250],
+							["data2", 130, 100, 130, 200, 150, 50]
+						],
+						type: "bubble"
+					},
+					point: {
+						r: 10,
+						radialGradient: {
+							cx: 0.5,
+							cy: 0.5,
+							r: 0.5,
+							stops: [
+								[0.3, "#fff", 0.8],
+								[0.6, "green", 0.35],
+								[1, null, 1]
+							]
+						},
+						opacity: 1,
+						sensitivity: "radius"
+					}
+				}
+			},
+			{
+				options: {
+					data: {
+						columns: [
+							["data1", 30, 200, 100, 400, 100, 250],
+							["data2", 130, 100, 130, 200, 150, 50]
+						],
+						type: "line"
+					},
+					point: {
+						r: 7,
+						radialGradient: true,
+					}
+				}
+			}
+		],
 		RectanglePoints: {
 			options: {
 				data: {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "billboard.js",
-	"version": "3.10.0-next.1",
+	"version": "3.9.4",
 	"description": "Re-usable easy interface JavaScript chart library, based on D3 v4+",
 	"homepage": "https://naver.github.io/billboard.js/",
 	"main": "dist/billboard.js",
@@ -102,14 +102,14 @@
 		"d3-zoom": "^3.0.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.22.11",
-		"@babel/eslint-parser": "^7.22.11",
+		"@babel/core": "^7.22.15",
+		"@babel/eslint-parser": "^7.22.15",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
 		"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-		"@babel/plugin-transform-runtime": "^7.22.10",
-		"@babel/preset-env": "^7.22.10",
-		"@babel/preset-typescript": "^7.22.11",
-		"@babel/runtime": "^7.22.11",
+		"@babel/plugin-transform-runtime": "^7.22.15",
+		"@babel/preset-env": "^7.22.15",
+		"@babel/preset-typescript": "^7.22.15",
+		"@babel/runtime": "^7.22.15",
 		"@commitlint/cli": "17.7.1",
 		"@commitlint/config-conventional": "^17.7.0",
 		"@rollup/plugin-babel": "^6.0.3",
@@ -122,12 +122,12 @@
 		"@semantic-release/git": "^10.0.1",
 		"@semantic-release/npm": "^10.0.5",
 		"@semantic-release/release-notes-generator": "^11.0.7",
-		"@types/chai": "^4.3.5",
+		"@types/chai": "^4.3.6",
 		"@types/d3": "^7.4.0",
 		"@types/mocha": "^10.0.1",
 		"@types/sinon": "^10.0.16",
-		"@typescript-eslint/eslint-plugin": "^6.5.0",
-		"@typescript-eslint/parser": "^6.5.0",
+		"@typescript-eslint/eslint-plugin": "^6.6.0",
+		"@typescript-eslint/parser": "^6.6.0",
 		"babel-helper-modules": "^6.0.0",
 		"babel-loader": "^9.1.3",
 		"babel-plugin-add-module-exports": "^1.0.4",
@@ -152,12 +152,12 @@
 		"d3-delaunay": "^6.0.4",
 		"d3-format": "^3.1.0",
 		"d3-polygon": "^3.0.1",
-		"docdash": "^2.0.1",
+		"docdash": "^2.0.2",
 		"dtslint": "^4.2.1",
 		"eslint": "^8.48.0",
 		"eslint-config-naver": "^2.1.0",
 		"eslint-plugin-import": "^2.28.1",
-		"eslint-plugin-jsdoc": "^46.5.0",
+		"eslint-plugin-jsdoc": "^46.5.1",
 		"eslint-webpack-plugin": "^4.0.1",
 		"exports-loader": "^4.0.0",
 		"hammer-simulator": "0.0.1",
@@ -194,7 +194,7 @@
 		"tslib": "^2.6.2",
 		"typescript": "5.2.2",
 		"webpack": "^5.88.2",
-		"webpack-bundle-analyzer": "^4.9.0",
+		"webpack-bundle-analyzer": "^4.9.1",
 		"webpack-clean": "^1.2.5",
 		"webpack-cli": "^5.1.4",
 		"webpack-common-shake": "^2.1.0",

diff --git a/src/ChartInternal/interactions/eventrect.ts b/src/ChartInternal/interactions/eventrect.ts
@@ -436,7 +436,7 @@ export default {
 	 */
 	unselectRect(): void {
 		const $$ = this;
-		const {config, $el: {circle, tooltip}} = $$;
+		const {$el: {circle, tooltip}} = $$;
 
 		$$.$el.svg.select(`.${$EVENT.eventRect}`).style("cursor", null);
 		$$.hideGridFocus();
@@ -446,7 +446,7 @@ export default {
 			$$._handleLinkedCharts(false);
 		}
 
-		circle && !config.point_focus_only && $$.unexpandCircles();
+		circle && !$$.isPointFocusOnly() && $$.unexpandCircles();
 		$$.expandBarTypeShapes(false);
 	},
 
@@ -517,7 +517,7 @@ export default {
 
 					// do nothing while dragging/flowing
 					if (state.dragging || state.flowing || $$.hasArcType() || eventOnSameIdx) {
-						eventOnSameIdx && $$.setTooltipPosition();
+						config.tooltip_show && eventOnSameIdx && $$.setTooltipPosition();
 						return;
 					}
 

diff --git a/src/ChartInternal/interactions/interaction.ts b/src/ChartInternal/interactions/interaction.ts
@@ -104,7 +104,7 @@ export default {
 				$$.cache.add(KEY.setOverOut, last);
 			} else {
 				if (isOver) {
-					config.point_focus_only && hasRadar ?
+					$$.isPointFocusOnly() && hasRadar ?
 						$$.showCircleFocus($$.getAllValuesOnIndex(d, true)) :
 						$$.setExpand(d, null, true);
 				}

diff --git a/src/ChartInternal/internals/clip.ts b/src/ChartInternal/internals/clip.ts
@@ -61,12 +61,11 @@ export default {
 		const h = (isRotated ? (margin.top + height) + 10 : margin.bottom) + 20;
 
 		const x = isRotated ? -(1 + left) : -(left - 1);
-		const y = -Math.max(15, margin.bottom);
 		const w = isRotated ? margin.left + 20 : width + 10 + left;
 
 		node
 			.attr("x", x)
-			.attr("y", y)
+			.attr("y", -2)
 			.attr("width", w)
 			.attr("height", h);
 	},

diff --git a/src/ChartInternal/internals/color.ts b/src/ChartInternal/internals/color.ts
@@ -204,7 +204,9 @@ export default {
 	},
 
 	/**
-	 * Update linear gradient definition (for area & bar only)
+	 * Update linear/radial gradient definition
+	 * - linear: area & bar only
+	 * - radial: type which has data points only
 	 * @private
 	 */
 	updateLinearGradient(): void {
@@ -213,31 +215,55 @@ export default {
 
 		targets.forEach(d => {
 			const id = `${datetimeId}-gradient${$$.getTargetSelectorSuffix(d.id)}`;
+			const radialGradient = $$.hasPointType() && config.point_radialGradient;
 			const supportedType = ($$.isAreaType(d) && "area") || ($$.isBarType(d) && "bar");
-			const isRotated = config.axis_rotated;
 
-			if (supportedType && defs.select(`#${id}`).empty()) {
+			if ((radialGradient || supportedType) && defs.select(`#${id}`).empty()) {
 				const color = $$.color(d);
-				const {
-					x = isRotated ? [1, 0] : [0, 0],
-					y = isRotated ? [0, 0] : [0, 1],
-					stops = [[0, color, 1], [1, color, 0]]
-				} = config[`${supportedType}_linearGradient`];
-
-				const linearGradient = defs.append("linearGradient")
-					.attr("id", `${id}`)
-					.attr("x1", x[0])
-					.attr("x2", x[1])
-					.attr("y1", y[0])
-					.attr("y2", y[1]);
-
-				stops.forEach(v => {
-					const stopColor = isFunction(v[1]) ? v[1].bind($$.api)(d.id) : v[1];
-
-					linearGradient.append("stop")
-						.attr("offset", v[0])
-						.attr("stop-color", stopColor || color)
-						.attr("stop-opacity", v[2]);
+				const gradient = {
+					defs: <null|d3Selection>null,
+					stops: <[number, string|Function|null, number][]>[]
+				};
+
+				if (radialGradient) {
+					const {
+						cx = 0.3,
+						cy = 0.3,
+						r = 0.7,
+						stops = [[0.1, color, 0], [0.9, color, 1]]
+					} = radialGradient;
+
+					gradient.stops = stops;
+					gradient.defs = defs.append("radialGradient")
+						.attr("id", `${id}`)
+						.attr("cx", cx)
+						.attr("cy", cy)
+						.attr("r", r);
+				} else {
+					const isRotated = config.axis_rotated;
+					const {
+						x = isRotated ? [1, 0] : [0, 0],
+						y = isRotated ? [0, 0] : [0, 1],
+						stops = [[0, color, 1], [1, color, 0]]
+					} = config[`${supportedType}_linearGradient`];
+
+					gradient.stops = stops;
+					gradient.defs = defs.append("linearGradient")
+						.attr("id", `${id}`)
+						.attr("x1", x[0])
+						.attr("x2", x[1])
+						.attr("y1", y[0])
+						.attr("y2", y[1]);
+				}
+
+				gradient.stops.forEach((v: [number, string|Function|null, number]) => {
+					const [offset, stopColor, stopOpacity] = v;
+					const colorValue = isFunction(stopColor) ? stopColor.bind($$.api)(d.id) : stopColor;
+
+					gradient.defs && gradient.defs.append("stop")
+						.attr("offset", offset)
+						.attr("stop-color", colorValue || color)
+						.attr("stop-opacity", stopOpacity);
 				});
 			}
 		});

diff --git a/src/ChartInternal/internals/redraw.ts b/src/ChartInternal/internals/redraw.ts
@@ -201,7 +201,7 @@ export default {
 				list.push($$.redrawText(xForText, yForText, flow, withTransition));
 		}
 
-		if (($$.hasPointType() || hasRadar) && !config.point_focus_only) {
+		if (($$.hasPointType() || hasRadar) && !$$.isPointFocusOnly()) {
 			$$.redrawCircle && list.push($$.redrawCircle(cx, cy, withTransition, flowFn));
 		}
 

diff --git a/src/ChartInternal/internals/selection.ts b/src/ChartInternal/internals/selection.ts
@@ -160,7 +160,7 @@ export default {
 			let toggledShape;
 
 			if (!config.data_selection_multiple) {
-				const focusOnly = config.point_focus_only;
+				const focusOnly = $$.isPointFocusOnly();
 				let selector = `.${focusOnly ? $SELECT.selectedCircles : $SHAPE.shapes}`;
 
 				if (config.data_selection_grouped) {