fix(tooltip): fix arc's tooltip interaction

- fix tooltip.show() api not working for arc types
- fix tooltip.init option not working for arc types

Fix #1859

src/Chart/api/tooltip.ts

@@ -25,6 +25,7 @@ const tooltip = {
 	 *
 	 * @example
 	 *  // show the 2nd x Axis coordinate tooltip
+	 *  // for Arc(gauge, donut & pie) and radar type, approch showing tooltip by using "index" number.
 	 *  chart.tooltip.show({
 	 *    index: 1
 	 *  });

src/ChartInternal/ChartInternal.ts

@@ -433,6 +433,7 @@ export default class ChartInternal {
 			callFn(config.data_onmax, $$.api, minMax.max);
 		}
 
+		config.tooltip_show && $$.initShowTooltip();
 		state.rendered = true;
 	}
 

src/ChartInternal/interactions/interaction.ts

@@ -183,13 +183,17 @@ export default {
 	 */
 	dispatchEvent(type: string, index: number, mouse): void {
 		const $$ = this;
-		const {config, state: {eventReceiver, hasRadar}, $el: {eventRect, radar}} = $$;
+		const {config, state: {eventReceiver, hasAxis, hasRadar}, $el: {eventRect, arcs, radar}} = $$;
 		const isMultipleX = $$.isMultipleX();
-		const element = (hasRadar ? radar.axes.select(`.${CLASS.axis}-${index} text`) : eventRect).node();
+		const element = (
+			hasRadar ? radar.axes.select(`.${CLASS.axis}-${index} text`) : (
+				eventRect || arcs.selectAll(`.${CLASS.target} path`).filter((d, i) => i === index)
+			)
+		).node();
 
 		let {width, left, top} = element.getBoundingClientRect();
 
-		if (!hasRadar && !isMultipleX) {
+		if (hasAxis && !hasRadar && !isMultipleX) {
 			const coords = eventReceiver.coords[index];
 
 			width = coords.w;

src/ChartInternal/internals/tooltip.ts

@@ -18,9 +18,8 @@ export default {
 	initTooltip() {
 		const $$ = this;
 		const {config, $el} = $$;
-		const {bindto} = config.tooltip_contents;
 
-		$el.tooltip = d3Select(bindto);
+		$el.tooltip = d3Select(config.tooltip_contents.bindto);
 
 		if ($el.tooltip.empty()) {
 			$el.tooltip = $el.chart
@@ -32,9 +31,18 @@ export default {
 				.style("display", "none");
 		}
 
+		$$.bindTooltipResizePos();
+	},
+
+	initShowTooltip() {
+		const $$ = this;
+		const {config, $el, state: {hasAxis, hasRadar}} = $$;
+
 		// Show tooltip if needed
 		if (config.tooltip_init_show) {
-			if ($$.axis.isTimeSeries() && isString(config.tooltip_init_x)) {
+			const isArc = !(hasAxis && hasRadar);
+
+			if ($$.axis && $$.axis.isTimeSeries() && isString(config.tooltip_init_x)) {
 				const targets = $$.data.targets[0];
 				let i;
 				let val;
@@ -50,21 +58,29 @@ export default {
 				config.tooltip_init_x = i;
 			}
 
+			let data = $$.data.targets.map(d => {
+				const x = isArc ? 0 : config.tooltip_init_x;
+
+				return $$.addName(d.values[x]);
+			});
+
+			if (isArc) {
+				data = [data[config.tooltip_init_x]];
+			}
+
 			$el.tooltip.html($$.getTooltipHTML(
-				$$.data.targets.map(d => $$.addName(d.values[config.tooltip_init_x])),
-				$$.axis.getXAxisTickFormat(),
+				data,
+				$$.axis && $$.axis.getXAxisTickFormat(),
 				$$.getYFormat($$.hasArcType(null, ["radar"])),
 				$$.color
 			));
 
-			if (!bindto) {
+			if (!config.tooltip_contents.bindto) {
 				$el.tooltip.style("top", config.tooltip_init_position.top)
 					.style("left", config.tooltip_init_position.left)
 					.style("display", "block");
 			}
 		}
-
-		$$.bindTooltipResizePos();
 	},
 
 	/**
@@ -92,7 +108,7 @@ export default {
 	 */
 	getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color): string {
 		const $$ = this;
-		const {api, config} = $$;
+		const {api, config, state} = $$;
 
 		let [titleFormat, nameFormat, valueFormat] = ["title", "name", "value"].map(v => {
 			const fn = config[`tooltip_format_${v}`];
@@ -159,7 +175,8 @@ export default {
 			}
 
 			if (isUndefined(text)) {
-				const title = sanitise(titleFormat ? titleFormat(row.x) : row.x);
+				const title = (state.hasAxis || state.hasRadar) &&
+					sanitise(titleFormat ? titleFormat(row.x) : row.x);
 
 				text = tplProcess(tpl[0], {
 					CLASS_TOOLTIP: CLASS.tooltip,
@@ -169,6 +186,10 @@ export default {
 				});
 			}
 
+			if (!row.ratio && $$.$el.arcs) {
+				row.ratio = $$.getRatio("arc", $$.$el.arcs.select(`path.${CLASS.arc}-${row.id}`).data()[0]);
+			}
+
 			param = [row.ratio, row.id, row.index, d];
 			value = sanitise(valueFormat(getRowValue(row), ...param));
 

src/ChartInternal/shape/arc.ts

@@ -319,7 +319,7 @@ export default {
 
 	convertToArcData(d): object {
 		return this.addName({
-			id: d.data.id,
+			id: d.data ? d.data.id : d.id,
 			value: d.value,
 			ratio: this.getRatio("arc", d),
 			index: d.index,

src/config/Options/common/tooltip.ts

@@ -44,7 +44,7 @@ export default {
 	 *    - 'key' name is used as substitution within template as '{=KEY}'
 	 *    - The value array length should match with the data length
 	 * @property {boolean} [tooltip.init.show=false] Show tooltip at the initialization.
-	 * @property {number} [tooltip.init.x=0] Set x Axis index to be shown at the initialization.
+	 * @property {number} [tooltip.init.x=0] Set x Axis index(or index for Arc(donut, gauge, pie) types) to be shown at the initialization.
 	 * @property {object} [tooltip.init.position={top: "0px",left: "50px"}] Set the position of tooltip at the initialization.
 	 * @property {Function} [tooltip.onshow] Set a callback that will be invoked before the tooltip is shown.
 	 * @property {Function} [tooltip.onhide] Set a callback that will be invoked before the tooltip is hidden.
@@ -128,7 +128,7 @@ export default {
 	 *      // show at the initialization
 	 *      init: {
 	 *          show: true,
-	 *          x: 2,
+	 *          x: 2, // x Axis index(or index for Arc(donut, gauge, pie) types)
 	 *          position: {
 	 *              top: "150px",
 	 *              left: "250px"

test/api/tooltip-spec.ts

@@ -218,4 +218,50 @@ describe("API tooltip", () => {
 			}
 		});
 	});
+
+	describe("tooltip.show() for arc types", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 100],
+						["data2", 90],
+						["data3", 50],
+						["data4", 20]
+					],
+					type: "pie",
+				}
+			};
+		});
+
+		it("should show tooltip correctly", done => {
+			setTimeout(() => {
+				const {tooltip} = chart.$;
+
+				// when
+				chart.tooltip.show({index:2});
+
+				expect(tooltip.select(".name").text()).to.be.equal("data3");
+				expect(tooltip.select(".value").text()).to.be.equal("19.2%");
+
+				done();
+			}, 500);
+		});
+
+		it("set options tooltip.init", () => {
+			args.tooltip = {
+				init: {
+					show: true,
+					x: 1
+				}
+			};
+		});
+
+		it("should show tooltip at initialization", () => {
+			const {tooltip} = chart.$;
+
+			expect(tooltip.select(".name").text()).to.be.equal("data2");
+			expect(tooltip.select(".value").text()).to.be.equal("34.6%");
+		});
+	});
 });