fix(tooltip): Fix wrong .tooltip.show() on rotated axis

- Adjust y coordinate for event on rotated axis - Update d3's format specifier doc link Fix #3476
naver · Oct 23, 2023 · 9b90c81 · 9b90c81
1 parent 041e144
commit 9b90c81
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 5 deletions.
diff --git a/src/ChartInternal/interactions/interaction.ts b/src/ChartInternal/interactions/interaction.ts
@@ -180,6 +180,7 @@ export default {
 
 		if (element) {
 			const isMultipleX = $$.isMultipleX();
+			const isRotated = config.axis_rotated;
 			let {width, left, top} = element.getBoundingClientRect();
 
 			if (hasAxis && !hasRadar && !isMultipleX) {
@@ -197,9 +198,11 @@ export default {
 			}
 
 			const x = left + (mouse ? mouse[0] : 0) + (
-				isMultipleX || config.axis_rotated ? 0 : (width / 2)
+				isMultipleX || isRotated ? 0 : (width / 2)
 			);
-			const y = top + (mouse ? mouse[1] : 0);
+
+			// value 4, is to adjust coordinate value set from: scale.ts - updateScales(): $$.getResettedPadding(1)
+			const y = top + (mouse ? mouse[1] : 0) + (isRotated ? 4 : 0);
 			const params = {
 				screenX: x,
 				screenY: y,

diff --git a/src/config/Options/axis/x.ts b/src/config/Options/axis/x.ts
@@ -120,7 +120,7 @@ export default {
 	 * @memberof Options
 	 * @type {Function|string}
 	 * @default undefined
-	 * @see [D3's time specifier](https://github.com/d3/d3-time-format#locale_format)
+	 * @see [D3's time specifier](https://d3js.org/d3-time-format#locale_format)
 	 * @example
 	 * axis: {
 	 *   x: {

diff --git a/src/config/Options/data/axis.ts b/src/config/Options/data/axis.ts
@@ -46,7 +46,7 @@ export default {
 	 *        type: "timeseries"
 	 *    }
 	 * }
-	 * @see [D3's time specifier](https://github.com/d3/d3-time-format#locale_format)
+	 * @see [D3's time specifier](https://d3js.org/d3-time-format#locale_format)
 	 */
 	data_xFormat: "%Y-%m-%d",
 

diff --git a/test/api/tooltip-spec.ts b/test/api/tooltip-spec.ts
@@ -363,4 +363,76 @@ describe("API tooltip", () => {
 			expect(tooltip.select(".value").text()).to.be.equal("34.6%");
 		});
 	});
+
+	describe("on rotated axis", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 150, 140, 110, 100, 300],
+						["data1", 30, 200, 100, 400, 150],
+						["data2", 130, 340, 200, 500, 250]
+					],
+					type: "line"
+				},
+				axis: {
+					rotated: true
+				}
+			};
+		});
+
+		function checkTooltip(x, categoryName?) {
+			const type = chart.config("axis.x.type");
+			let value = x;
+
+			// when
+			chart.tooltip.show({x});
+
+			let th = chart.$.tooltip.select("th").text();
+
+			if (type === "timeseries") {
+				value = chart.internal.format.xAxisTick(x);
+			}
+
+			expect(isNaN(th) ? th : +th).to.be.equal(categoryName ?? value);
+		}
+
+		it("check for indexed x axis type", () => {
+			chart.xs().data1.forEach(v => {
+				checkTooltip(v);
+			});
+		});
+
+		it("set options", () => {
+			args.data.x = "x";
+			args.data.columns.unshift(
+				["x", "2023-01-01", "2023-01-02", "2023-01-03", "2023-01-04", "2023-01-05"]
+			);
+			args.axis.x = {
+				type: "timeseries",
+				tick: {
+					format: "%Y-%m-%d"
+				}
+			};
+		});
+
+		it("check for timeseries x axis type", () => {
+			chart.xs().data1.forEach(v => {
+				checkTooltip(+v);
+			});
+		});
+
+		it("set options", () => {
+			args.data.columns[0] = ["x", "a", "b", "c", "d", "e"];
+			args.axis.x = {
+				type: "category"
+			};
+		});
+
+		it("check for category x axis type", () => {
+			chart.categories().forEach((v, i) => {
+				checkTooltip(i, v);
+			});
+		});
+	});
 });
diff --git a/test/internals/tooltip-spec.ts b/test/internals/tooltip-spec.ts
@@ -1887,7 +1887,7 @@ describe("TOOLTIP", function() {
 			chart.$.chart.style("margin-top", "100px");
 			chart.tooltip.show({index:1});
 
-			expect(chart.$.tooltip.select("th").text()).to.be.equal("0");
+			expect(chart.$.tooltip.select("th").text()).to.be.equal("1");
 
 			chart.$.chart.style("margin-top", null);
 		});