fix(tooltip): Fix on ungrouped tooltip showing for custom shape (#548)

- Add 'use' tag as valid point type - Set stroke custom point css prop from none to inherit to be used on css theme Fix #547 Ref #241 Close #548
naver · Aug 20, 2018 · 9411758 · 9411758
1 parent b8a7474
commit 9411758
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 15 deletions.
diff --git a/spec/interactions/interaction-spec.js b/spec/interactions/interaction-spec.js
@@ -234,8 +234,8 @@ describe("INTERACTION", () => {
 					clientY: circle.y
 				}, chart);
 
-				expect(clicked).to.be.false;
-				expect(data).to.be.equal(null);
+				expect(clicked).to.be.true;
+				expect(data.value).to.be.equal(20);
 			});
 
 			it("set option data.type='area'", () => {

diff --git a/spec/internals/tooltip-spec.js b/spec/internals/tooltip-spec.js
@@ -39,15 +39,12 @@ describe("TOOLTIP", function() {
 	const spy2 = sinon.spy();
 
 	// hover chart
-	const hoverChart = (hoverChart, eventName = "mousemove") => {
+	const hoverChart = (hoverChart, eventName = "mousemove", pos = {clientX: 100, clientY: 100}) => {
 		const eventRect = hoverChart.$.main
 			.select(`.${CLASS.eventRect}-2`)
 			.node();
 
-		util.fireEvent(eventRect, eventName, {
-			clientX: 100,
-			clientY: 100
-		}, hoverChart);
+		util.fireEvent(eventRect, eventName, pos, hoverChart);
 	};
 
 	// check for the tooltip's ordering
@@ -577,4 +574,46 @@ describe("TOOLTIP", function() {
 			expect(pos.top).to.be.equal(args.tooltip.init.position.top);
 		});
 	});
+
+	describe("tooltip grouped=false", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 100, 400, 1000, 900, 500],
+						["data2", 20, 40, 500, 300, 200],
+						["data3", 80, 350, 800, 450, 500],
+						["data4", 150, 240, 300, 700, 300]
+					]
+				},
+				tooltip: {
+					grouped: false
+				},
+				point: {
+					pattern: [
+						"circle",
+						"rectangle",
+						"<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' />",
+						"<polygon points='2.5 0 0 5 5 5'></polygon>"
+					]
+				}
+			};
+		});
+
+		it("tooltip should be displayed", () => {
+			// check for custom point shape
+			hoverChart(chart, undefined, {clientX: 292, clientY: 107});
+
+			let value = +chart.$.tooltip.select(`.${CLASS.tooltipName}-data3 .value`).text();
+
+			expect(value).to.be.equal(800);
+
+			// check for circle point shape
+			hoverChart(chart, undefined, {clientX: 292, clientY: 34});
+
+			value = +chart.$.tooltip.select(`.${CLASS.tooltipName}-data1 .value`).text();
+
+			expect(value).to.be.equal(1000);
+		});
+	});
 });
diff --git a/spec/shape/shape.point-spec.js b/spec/shape/shape.point-spec.js
@@ -5,6 +5,7 @@
 /* eslint-disable */
 /* global describe, beforeEach, it, expect */
 import util from "../assets/util";
+import CLASS from "../../src/config/classes";
 
 describe("SHAPE POINT", () => {
 	let chart;
@@ -32,8 +33,8 @@ describe("SHAPE POINT", () => {
 		});
 
 		it("Should render svg circle elements", () => {
-			const target = chart.internal.svg.select(".bb-chart-line.bb-target-data1");
-			const circlesEl = target.select(".bb-circles-data1").node();
+			const target = chart.internal.svg.select(`.${CLASS.chartLine}.${CLASS.target}-data1`);
+			const circlesEl = target.select(`.${CLASS.circles}-data1`).node();
 			const circles = circlesEl.getElementsByTagName("circle");
 
 			expect(circles.length).to.be.equal(6);
@@ -57,8 +58,8 @@ describe("SHAPE POINT", () => {
 		});
 
 		it("Should render svg rect elements", () => {
-			const target = chart.internal.svg.select(".bb-chart-line.bb-target-data1");
-			const circlesEl = target.select(".bb-circles-data1").node();
+			const target = chart.internal.svg.select(`.${CLASS.chartLine}.${CLASS.target}-data1`);
+			const circlesEl = target.select(`.${CLASS.circles}-data1`).node();
 			const rects = circlesEl.getElementsByTagName("rect");
 
 			expect(rects.length).to.be.equal(6);
@@ -84,8 +85,8 @@ describe("SHAPE POINT", () => {
 		});
 
 		it("Should render svg \"use\" elements", () => {
-			const target = chart.internal.svg.select(".bb-chart-line.bb-target-data1");
-			const circlesEl = target.select(".bb-circles-data1").node();
+			const target = chart.internal.svg.select(`.${CLASS.chartLine}.${CLASS.target}-data1`);
+			const circlesEl = target.select(`.${CLASS.circles}-data1`).node();
 			const polygons = circlesEl.getElementsByTagName("use");
 
 			expect(polygons.length).to.be.equal(6);

diff --git a/src/shape/point.js b/src/shape/point.js
@@ -11,7 +11,7 @@ import {isFunction, isObjectType, extend, notEmpty} from "../internals/util";
 
 extend(ChartInternal.prototype, {
 	hasValidPointType(type) {
-		return /^(circle|rect(angle)?|polygon|ellipse)$/i.test(type || this.config.point_type);
+		return /^(circle|rect(angle)?|polygon|ellipse|use)$/i.test(type || this.config.point_type);
 	},
 
 	hasValidPointDrawMethods(type) {
@@ -37,7 +37,7 @@ extend(ChartInternal.prototype, {
 
 		clone.id = id;
 		clone.style.fill = "inherit";
-		clone.style.stroke = "none";
+		clone.style.stroke = "inherit";
 
 		$$.defs.node().appendChild(clone);
 	},