fix(radar): Fix data.onover/out callback

For radar type, data.onover/out should be called interacting
with the axis text element

Fix #768
Close #773

spec/interactions/interaction-spec.js

@@ -614,14 +614,14 @@ describe("INTERACTION", () => {
 			const eventRect = main.select(`.${CLASS.eventRect}-1`).node();
 
 			util.fireEvent(eventRect, "mouseover");
+			expect(spy1.calledTwice).to.be.true;
+
 			util.fireEvent(eventRect, "mouseout");
+			expect(spy2.calledTwice).to.be.true;
 		});
 
 		it("set options interaction.inputType.touch=true", () => {
 			args.interaction.inputType.touch = true;
-
-			spy1.resetHistory();
-			spy2.resetHistory();
 		});
 
 		it("should be called callbacks for touch events", done => {
@@ -639,5 +639,27 @@ describe("INTERACTION", () => {
 				done();
 			});
 		});
+
+		it("set options data.type=radar", () => {
+			args.data.type = "radar";
+			args.interaction.inputType.touch = false;
+		});
+
+		it("should be called callbacks for mouse events", () => {
+			const index = 2;
+			const main = chart.$.main;
+			const text = main.select(`.${CLASS.axis}-${index} text`).node();
+
+			util.fireEvent(text, "mouseover");
+			expect(spy1.calledTwice).to.be.true;
+
+			main.selectAll(`.${CLASS.EXPANDED}`).each(d => {
+				expect(d.index).to.be.equal(index);
+			});
+
+			util.fireEvent(text, "mouseout");
+			expect(spy2.calledTwice).to.be.true;
+			expect(main.selectAll(`.${CLASS.EXPANDED}`).size()).to.be.equal(0);
+		});
 	});
 });

src/shape/arc.js

@@ -594,7 +594,7 @@ extend(ChartInternal.prototype, {
 		}
 
 		// touch events
-		if (isTouch && $$.hasArcType()) {
+		if (isTouch && $$.hasArcType() && !$$.radars) {
 			const getEventArc = () => {
 				const touch = d3Event.changedTouches[0];
 				const eventArc = d3Select(document.elementFromPoint(touch.clientX, touch.clientY));

src/shape/radar.js

@@ -272,23 +272,43 @@ extend(ChartInternal.prototype, {
 
 		if (config.interaction_enabled) {
 			const isMouse = $$.inputType === "mouse";
+			const getIndex = () => {
+				const d = d3Select(d3Event.target).datum();
+
+				return d && Object.keys(d).length === 1 ? d.index : undefined;
+			};
+			const hide = () => {
+				const index = getIndex();
+				const noIndex = isUndefined(index);
+
+				if (isMouse || noIndex) {
+					this.hideTooltip();
+					this.unexpandCircles();
+
+					if (isMouse) {
+						$$.setOverOut(false, index);
+					} else if (noIndex) {
+						$$.callOverOutForTouch();
+					}
+				}
+			};
 
 			$$.radars.select(`.${CLASS.axis}`)
-				.on(`${isMouse ? "mouseover " : ""}click`, () => {
+				.on(isMouse ? "mouseover " : "touchstart", () => {
 					if ($$.transiting) { // skip while transiting
 						return;
 					}
 
-					const target = d3Select(d3Event.target);
-					const index = target.datum().index;
+					const index = getIndex();
 
 					$$.selectRectForSingle($$.svg.node(), null, index);
-					$$.setOver(index);
+					isMouse ? $$.setOverOut(true, index) : $$.callOverOutForTouch(index);
 				})
-				.on("mouseout", isMouse ? () => {
-					this.hideTooltip();
-					this.unexpandCircles();
-				} : null);
+				.on("mouseout", isMouse ? hide : null);
+
+			if (!isMouse) {
+				$$.svg.on("touchstart", hide);
+			}
 		}
 	},