feat(point,bar): Intent to ship sensitivity

Implementation of the new senstivity option
- point.senstivity (was already existed as undocumented. Also updated
some work flow on this)
- bar.senstivity

Fix #831

spec/interactions/interaction-spec.js

@@ -291,7 +291,7 @@ describe("INTERACTION", () => {
 				const rect = main.select(`.${CLASS.eventRect}.${CLASS.eventRect}`).node();
 				const circle = main.select(`.${CLASS.circles}-data2 circle`).node().getBBox();
 				const delta = 50;
-
+console.log(JSON.stringify(args))
 				util.fireEvent(rect, "click", {
 					clientX: circle.x + delta,
 					clientY: circle.y + delta

spec/shape/shape.bar-spec.js

@@ -412,4 +412,49 @@ describe("SHAPE BAR", () => {
 			});
 		});
 	});
+
+	describe("bar sensitivity", () => {
+		before(() => {
+			args = {
+				size: {
+					width: 400,
+					height: 250
+				},
+				data: {
+					columns: [
+						["data1", 90, 40, 10],
+						["data2", 5, 5, 5],
+						["data3", 3, 3, 3],
+					],
+					groups: [["data1", "data2", "data3"]],
+					type: "bar"
+				},
+				tooltip: {
+					grouped: false
+				}
+			};
+		});
+
+		it("default sensitivity", () => {
+			chart.tooltip.show({
+				data: {x: 1, value: 3}
+			});
+
+			expect(chart.$.tooltip.selectAll(".name").size()).to.be.equal(2);
+		});
+
+		it("set options point.sensitivity=3", () => {
+			args.bar = {
+				sensitivity: 0
+			};
+		});
+
+		it("lowered sensitivity", () => {
+			chart.tooltip.show({
+				data: {x: 1, value: 3}
+			});
+
+			expect(chart.$.tooltip.selectAll(".name").size()).to.be.equal(1);
+		});
+	});
 });

spec/shape/shape.point-spec.js

@@ -147,4 +147,48 @@ describe("SHAPE POINT", () => {
 			}, 500);
 		});
 	});
+
+	describe("point sensitivity", () => {
+		before(() => {
+			args = {
+				size: {
+					width: 400,
+					height: 250
+				},
+				data: {
+					columns: [
+						["data1", 90, 40, 10],
+						["data2", 5, 5, 5],
+						["data3", 3, 3, 3]
+					],
+					groups: [["data1", "data2", "data3"]]
+				},
+				tooltip: {
+					grouped: false
+				}
+			};
+		});
+
+		it("default sensitivity", () => {
+			chart.tooltip.show({
+				data: {x: 1, value: 4}
+			});
+
+			expect(chart.$.tooltip.selectAll(".name").size()).to.be.equal(2);
+		});
+
+		it("set options point.sensitivity=3", () => {
+			args.point = {
+				sensitivity: 3
+			};
+		});
+
+		it("lowered sensitivity", () => {
+			chart.tooltip.show({
+				data: {x: 1, value: 4}
+			});
+
+			expect(chart.$.tooltip.selectAll(".name").size()).to.be.equal(1);
+		});
+	});
 });

src/config/Options.js

@@ -2676,20 +2676,21 @@ export default class Options {
 			 * @memberof Options
 			 * @type {Object}
 			 * @property {Boolean} [point.show=true] Whether to show each point in line.
-			 * @property {Number|Function} [point.r=2.5] The radius size of each point.<br>
+			 * @property {Number|Function} [point.r=2.5] The radius size of each point.
 			 *  - **NOTE:** Disabled for 'bubble' type
 			 * @property {Boolean} [point.focus.expand.enabled=true] Whether to expand each point on focus.
-			 * @property {Number} [point.focus.expand.r=point.r*1.75] The radius size of each point on focus.<br>
+			 * @property {Number} [point.focus.expand.r=point.r*1.75] The radius size of each point on focus.
 			 *  - **NOTE:** For 'bubble' type, the default is `bubbleSize*1.15`
+			 * @property {Number} [point.sensitivity=10] The senstivity value for interaction boundary.
 			 * @property {Number} [point.select.r=point.r*4] The radius size of each point on selected.
-			 * @property {String} [point.type="circle"] The type of point to be drawn<br>
+			 * @property {String} [point.type="circle"] The type of point to be drawn
 			 * - **NOTE:**
 			 *  - If chart has 'bubble' type, only circle can be used.
 			 *  - For IE, non circle point expansions are not supported due to lack of transform support.
 			 * - **Available Values:**
 			 *  - circle
 			 *  - rectangle
-			 * @property {Array} [point.pattern=[]] The type of point or svg shape as string, to be drawn for each line<br>
+			 * @property {Array} [point.pattern=[]] The type of point or svg shape as string, to be drawn for each line
 			 * - **NOTE:**
 			 *  - This is an `experimental` feature and can have some unexpected behaviors.
 			 *  - If chart has 'bubble' type, only circle can be used.
@@ -2721,6 +2722,9 @@ export default class Options {
 			 *          r: 3
 			 *      },
 			 *
+			 *      // having lower value, means how closer to be for interaction
+			 *      sensitivity: 3,
+			 *
 			 *      // valid values are "circle" or "rectangle"
 			 *      type: "rectangle",
 			 *
@@ -2789,6 +2793,7 @@ export default class Options {
 			 * @property {Number} [bar.radius] Set the radius of bar edge in pixel.
 			 * - **NOTE:** Works only for non-stacked bar
 			 * @property {Number} [bar.radius.ratio] Set the radius ratio of bar edge in relative the bar's width.
+ 			 * @property {Number} [bar.sensitivity=2] The senstivity offset value for interaction boundary.
 			 * @property {Number} [bar.width] Change the width of bar chart.
 			 * @property {Number} [bar.width.ratio=0.6] Change the width of bar chart by ratio.
 			 * @property {Number} [bar.width.max] The maximum width value for ratio.
@@ -2814,6 +2819,9 @@ export default class Options {
 			 *          ratio: 0.5
 			 *      }
 			 *
+			 *      // will not have offset between each bar elements for interaction
+			 *      sensitivity: 0,
+			 *
 			 *      width: 10,
 			 *
 			 *      // or
@@ -2837,6 +2845,7 @@ export default class Options {
 			bar_padding: 0,
 			bar_radius: undefined,
 			bar_radius_ratio: undefined,
+			bar_sensitivity: 2,
 			bar_width: undefined,
 			bar_width_ratio: 0.6,
 			bar_width_max: undefined,

src/shape/bar.js

@@ -214,7 +214,7 @@ extend(ChartInternal.prototype, {
 		const [seg0, seg1] = list;
 		const x = Math.min(seg0.x, seg1.x);
 		const y = Math.min(seg0.y, seg1.y);
-		const offset = 2;
+		const offset = this.config.bar_sensitivity;
 		const {width, height} = that.getBBox();
 		const sx = x - offset;
 		const ex = x + width + offset;

src/shape/line.js

@@ -693,7 +693,11 @@ extend(ChartInternal.prototype, {
 			cy = y;
 		}
 
-		return Math.sqrt(Math.pow(cx - mouse[0], 2) + Math.pow(cy - mouse[1], 2)) < r;
+		const is = Math.sqrt(
+			Math.pow(cx - mouse[0], 2) + Math.pow(cy - mouse[1], 2)
+		) < (r || this.config.point_sensitivity);
+
+		return is;
 	},
 
 	isWithinStep(that, y) {

src/shape/shape.js

@@ -165,7 +165,7 @@ extend(ChartInternal.prototype, {
 		} else if ($$.hasValidPointType(that.nodeName)) {
 			isWithin = $$.isStepType(d) ?
 				$$.isWithinStep(that, $$.getYScale(d.id)(d.value)) :
-				$$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
+				$$.isWithinCircle(that, $$.isBubbleType(d) ? $$.pointSelectR(d) * 1.5 : 0);
 		} else if (that.nodeName === "path") {
 			isWithin = shape.classed(CLASS.bar) ? $$.isWithinBar(that) : true;
 		}

types/options.d.ts

@@ -274,6 +274,11 @@ export interface ChartOptions {
 			 */
 			ratio?: number;
 		};
+
+		/**
+		 * The senstivity offset value for interaction boundary.
+		 */
+		sensitivity?: number;
 	};
 
 	bubble?: {
@@ -947,6 +952,11 @@ export interface PointOptions {
 		r?: number;
 	};
 
+	/**
+	 * The senstivity value for interaction boundary.
+	 */
+	sensitivity?: number;
+
 	/**
 	 * The type of point to be drawn
 	 * - NOTE: If chart has 'bubble' type, only circle can be used.