Merge branch 'master' into latest

demo/demo.js

@@ -1145,8 +1145,7 @@ var demos = {
 								multiline: false,
 								autorotate: true,
 								rotate: 15,
-								culling: false,
-								count: 10,
+								culling: false
 							}
 						}
 					}

package.json

@@ -120,17 +120,17 @@
     "d3-polygon": "^1.0.6",
     "d3-voronoi": "^1.1.4",
     "docdash": "^1.2.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.0.0",
     "eslint-config-naver": "^2.1.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.20.2",
     "exports-loader": "^0.7.0",
     "hammer-simulator": "0.0.1",
     "husky": "^4.2.3",
     "istanbul-instrumenter-loader": "^3.0.1",
-    "istanbul-lib-instrument": "^4.0.1",
+    "istanbul-lib-instrument": "^4.0.3",
     "jsdoc": "^3.6.3",
-    "karma": "^5.0.4",
+    "karma": "^5.0.9",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage-istanbul-reporter": "^3.0.2",
@@ -152,13 +152,13 @@
     "sinon": "^9.0.1",
     "string-replace-webpack-plugin": "^0.1.3",
     "style-loader": "^1.2.0",
-    "terser-webpack-plugin": "^3.0.0",
+    "terser-webpack-plugin": "^3.0.1",
     "webpack": "^4.42.1",
-    "webpack-bundle-analyzer": "^3.7.0",
+    "webpack-bundle-analyzer": "^3.8.0",
     "webpack-clean": "^1.2.4",
     "webpack-cli": "^3.3.11",
     "webpack-common-shake": "^2.1.0",
-    "webpack-dev-server": "^3.10.3",
+    "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^4.2.2",
     "webpackbar": "^4.0.0",
     "write-file-webpack-plugin": "^4.5.1"

spec/internals/axis-spec.js

@@ -75,6 +75,17 @@ describe("AXIS", function() {
 				).to.be.equal(expectedXPos[i]);
 			});
 		});
+
+		it("set option axis.x.tick.count=10", () => {
+			args.axis.x.tick.count = 10;
+		});
+
+		it("x Axis tick size shouldn't surpass real data size", () => {
+			const tickSize = chart.internal.axes.x.selectAll(".tick").size();
+
+			expect(tickSize).to.be.equal(chart.data()[0].values.length);
+			expect(tickSize).to.be.below(args.axis.x.tick.count);
+		});
 	});
 
 	describe("axis.y.tick.count", () => {

spec/internals/tooltip-spec.js

@@ -285,6 +285,72 @@ describe("TOOLTIP", function() {
 				expect(left).to.be.above(tooltipPos.left);
 			});
 		});
+
+		describe("Narrow width container's tooltip position", () => {
+			const orgArgs = args;
+
+			before(() => {
+				args = {
+					"transition":{
+						"duration":0
+					  },
+					  "axis":{
+						"x":{
+						  "type":"category"
+						},
+						"rotated":true
+					  },
+					  "data":{
+						"json":[
+						  {
+							"region":"South and Central America",
+							"A":10.34,
+							"B":22.62,
+							"Total":32.96
+						  },
+						  {
+							"region":"North America",
+							"A":7.73,
+							"B":22.64,
+							"Total":30.37
+						  },
+						  {
+							"region":"East and South East Asia",
+							"A":12.28,
+							"B":15.02,
+							"Total":27.299999999999997
+						  },
+						  {
+							"region":"Europe",
+							"A":9.72,
+							"B":14.42,
+							"Total":24.14
+						  }
+						],
+						"type":"bar",
+						"keys":{
+						  "x":"region",
+						  "value":["region", "A"]
+						}
+					}
+				};
+
+				chart.$.chart.style("width", "200px");
+			});
+
+			after(() => {
+				// revert
+				chart.$.chart.style("width", "640px");
+				args = orgArgs;
+			});
+
+			it("tooltip shoundn't be positioned out of viewport", () => {
+				// when
+				chart.tooltip.show({x: 2});
+
+				expect(chart.$.tooltip.style("left")).to.equal("0px");
+			});
+		});
 	});
 
 	describe("tooltip positionFunction", () => {

src/axis/Axis.js

@@ -241,12 +241,19 @@ export default class Axis {
 		const $$ = this.owner;
 		const config = $$.config;
 		const fit = config.axis_x_tick_fit;
-		const count = config.axis_x_tick_count;
+		let count = config.axis_x_tick_count;
 		let values;
 
 		if (fit || (count && fit)) {
+			values = $$.mapTargetsToUniqueXs(targets);
+
+			// if given count is greater than the value length, then limit the count.
+			if ($$.isCategorized() && count > values.length) {
+				count = values.length;
+			}
+
 			values = this.generateTickValues(
-				$$.mapTargetsToUniqueXs(targets),
+				values,
 				count,
 				$$.isTimeSeries()
 			);
@@ -674,12 +681,6 @@ export default class Axis {
 
 	generateTickValues(values, tickCount, forTimeSeries) {
 		let tickValues = values;
-		let start;
-		let end;
-		let count;
-		let interval;
-		let i;
-		let tickValue;
 
 		if (tickCount) {
 			const targetCount = isFunction(tickCount) ? tickCount() : tickCount;
@@ -692,15 +693,16 @@ export default class Axis {
 			} else if (targetCount > 2) {
 				const isCategorized = this.owner.isCategorized();
 
-				count = targetCount - 2;
-				start = values[0];
-				end = values[values.length - 1];
-				interval = (end - start) / (count + 1);
+				const count = targetCount - 2;
+				const start = values[0];
+				const end = values[values.length - 1];
+				const interval = (end - start) / (count + 1);
+				let tickValue;
 
 				// re-construct unique values
 				tickValues = [start];
 
-				for (i = 0; i < count; i++) {
+				for (let i = 0; i < count; i++) {
 					tickValue = +start + interval * (i + 1);
 					tickValues.push(
 						forTimeSeries ? new Date(tickValue) : (

src/axis/AxisRenderer.js

@@ -40,26 +40,24 @@ export default class AxisRenderer {
 	 */
 	create(g) {
 		const ctx = this;
-		const config = this.config;
-		const params = this.params;
-		const helperInst = this.helper;
-		const scale = helperInst.scale;
-		const orient = config.orient;
+		const {config, helper, params} = this;
+		const {scale} = helper;
+		const {orient} = config;
 		const splitTickText = this.splitTickText.bind(this);
 		const isLeftRight = /^(left|right)$/.test(orient);
 		const isTopBottom = /^(top|bottom)$/.test(orient);
 
 		// line/text enter and path update
-		const tickTransform = helperInst.getTickTransformSetter(isTopBottom ? "x" : "y");
-		const axisPx = tickTransform === helperInst.axisX ? "y" : "x";
+		const tickTransform = helper.getTickTransformSetter(isTopBottom ? "x" : "y");
+		const axisPx = tickTransform === helper.axisX ? "y" : "x";
 		const sign = /^(top|left)$/.test(orient) ? -1 : 1;
 
 		// tick text helpers
 		const rotate = params.tickTextRotate;
 
 		this.config.range = scale.rangeExtent ?
 			scale.rangeExtent() :
-			helperInst.scaleExtent((params.orgXScale || scale).range());
+			helper.scaleExtent((params.orgXScale || scale).range());
 
 		const {innerTickSize, tickLength, range} = config;
 
@@ -81,7 +79,7 @@ export default class AxisRenderer {
 		g.each(function() {
 			const g = d3Select(this);
 			let scale0 = this.__chart__ || scale;
-			let scale1 = helperInst.copyScale();
+			let scale1 = helper.copyScale();
 
 			$g = g;
 			this.__chart__ = scale1;
@@ -95,7 +93,7 @@ export default class AxisRenderer {
 			// enter + update selection
 			path.enter().append("path")
 				.attr("class", "domain")
-				.merge(helperInst.transitionise(path))
+				.merge(helper.transitionise(path))
 				.attr("d", () => {
 					const outerTickSized = config.outerTickSize * sign;
 
@@ -106,7 +104,7 @@ export default class AxisRenderer {
 
 			if (tickShow.tick || tickShow.text) {
 				// count of tick data in array
-				const ticks = config.tickValues || helperInst.generateTicks(scale1, isLeftRight);
+				const ticks = config.tickValues || helper.generateTicks(scale1, isLeftRight);
 
 				// update selection
 				let tick = g.selectAll(".tick")
@@ -136,8 +134,8 @@ export default class AxisRenderer {
 					.data((d, index) => {
 						const split = params.tickMultiline ?
 							splitTickText(d, scale1, ticks, isLeftRight, sizeFor1Char.w) : (
-								isArray(helperInst.textFormatted(d)) ?
-									helperInst.textFormatted(d).concat() : [helperInst.textFormatted(d)]
+								isArray(helper.textFormatted(d)) ?
+									helper.textFormatted(d).concat() : [helper.textFormatted(d)]
 							);
 
 						counts[index] = split.length;
@@ -211,7 +209,7 @@ export default class AxisRenderer {
 				}
 
 				tickTransform(tickEnter, scale0);
-				tickTransform(helperInst.transitionise(tick).style("opacity", "1"), scale1);
+				tickTransform(helper.transitionise(tick).style("opacity", "1"), scale1);
 			}
 		});
 

src/config/Options.js

@@ -1300,7 +1300,7 @@ export default class Options {
 			 * @memberof Options
 			 * @type {Object}
 			 * @property {String|Object|Function} [color.onover] Set the color value for each data point when mouse/touch onover event occurs.
-			 * @property {Array} [color.pattern=[]] custom color pattern
+			 * @property {Array|null} [color.pattern=[]] Set custom color pattern. Passing `null` will not set a color for these elements, which requires the usage of custom CSS-based theming to work.
 			 * @property {Function} [color.tiles] if defined, allows use svg's patterns to fill data area. It should return an array of [SVGPatternElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGPatternElement).
 			 *  - **NOTE:** The pattern element's id will be defined as `bb-colorize-pattern-$COLOR-VALUE`.<br>
 			 *    ex. When color pattern value is `['red', '#fff']` and defined 2 patterns,then ids for pattern elements are:<br>

src/internals/ChartInternal.js

@@ -268,7 +268,6 @@ export default class ChartInternal {
 
 		$$.clipChart = $$.appendClip($$.defs, $$.clipId);
 		$$.clipXAxis = $$.appendClip($$.defs, $$.clipIdForXAxis);
-		$$.clipXAxisTickTexts = $$.appendClip($$.defs, $$.clipIdForXAxisTickTexts);
 		$$.clipYAxis = $$.appendClip($$.defs, $$.clipIdForYAxis);
 		$$.clipGrid = $$.appendClip($$.defs, $$.clipIdForGrid);
 
@@ -547,7 +546,9 @@ export default class ChartInternal {
 			$$.margin3.left = $$.arcWidth / 2 + $$.radiusExpanded * 1.1;
 		}
 
-		!hasArc && config.axis_x_show && $$.updateXAxisTickClip();
+		if (!hasArc && config.axis_x_show && config.axis_x_tick_autorotate) {
+			$$.updateXAxisTickClip();
+		}
 	}
 
 	/**

src/internals/clip.js

@@ -126,8 +126,13 @@ extend(ChartInternal.prototype, {
 		const $$ = this;
 		const newXAxisHeight = $$.getHorizontalAxisHeight("x");
 
-		$$.clipIdForXAxisTickTexts = `${$$.clipId}-xaxisticktexts`;
-		$$.clipPathForXAxisTickTexts = $$.getClipPath($$.clipIdForXAxisTickTexts);
+		if ($$.defs && !$$.clipXAxisTickTexts) {
+			const clipId = `${$$.clipId}-xaxisticktexts`;
+
+			$$.clipXAxisTickTexts = $$.appendClip($$.defs, clipId);
+			$$.clipPathForXAxisTickTexts = $$.getClipPath(clipId);
+			$$.clipIdForXAxisTickTexts = clipId;
+		}
 
 		if (!$$.config.axis_x_tick_multiline &&
 			$$.getAxisTickRotate("x") &&

src/internals/text.js

@@ -364,7 +364,7 @@ extend(ChartInternal.prototype, {
 			const overlapsX = Math.ceil(Math.abs(translate.e - coordinate.e)) <
 				Math.ceil(nodeForWidth.node().getComputedTextLength());
 			const overlapsY = Math.ceil(Math.abs(translate.f - coordinate.f)) <
-				parseInt(textNode.style("font-size"), 0);
+				parseInt(textNode.style("font-size"), 10);
 
 			filteredTextNode.classed(CLASS.TextOverlapping, overlapsX && overlapsY);
 		});

src/internals/tooltip.js

@@ -270,11 +270,16 @@ extend(ChartInternal.prototype, {
 			top -= hasGauge ? tHeight * 3 : tHeight + 30;
 		}
 
-		if (top < 0) {
-			top = 0;
-		}
+		const pos = {top, left};
+
+		// make sure to not be positioned out of viewport
+		Object.keys(pos).forEach(v => {
+			if (pos[v] < 0) {
+				pos[v] = 0;
+			}
+		});
 
-		return {top, left};
+		return pos;
 	},
 
 	/**

types/options.d.ts

@@ -94,8 +94,10 @@ export interface ChartOptions {
 	color?: {
 		/**
 		 * Set custom color pattern.
+		 *
+		 * Passing 'null' will not set a color for these elements, which requires the usage of custom CSS-based theming to work.
 		 */
-		pattern?: string[];
+		pattern?: (string|null)[];
 
 		/**
 		 * color threshold for gauge and tooltip color
@@ -740,7 +742,7 @@ export interface AreaLinearGradientOptions {
 
 	/**
 	 * The ramp of colors to use on a gradient
-	 * 
+	 *
 	 * offset, stop-color, stop-opacity
 	 * - setting 'null' for stop-color, will set its original data color
 	 * - setting 'function' for stop-color, will pass data id as argument. It should return color string or null value