fix(tooltip): Fix mid value showing for area-range type (#598)

Fix on wrong mid value appending Fix #597 Close #598
naver · Oct 1, 2018 · a9d615b · a9d615b
1 parent 1067f28
commit a9d615b
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 4 deletions.
diff --git a/spec/internals/tooltip-spec.js b/spec/internals/tooltip-spec.js
@@ -634,4 +634,49 @@ describe("TOOLTIP", function() {
 				});
 		});
 	});
+
+	describe("tooltip for area-range", () => {
+		before(() => {
+			args = {
+				data: {
+					x: "x",
+					columns: [
+						["x", "2013-01-01", "2013-01-02", "2013-01-03", "2013-01-04", "2013-01-05", "2013-01-06"],
+						["data1", [150, 140, 110],
+							[155, 130, 115],
+							[160, 135, 120],
+							[135, 120, 110],
+							[180, 150, 130],
+							[199, 160, 125]
+						],
+						["data2", 130, 340, 200, 500, 250, 350]
+					],
+					types: {
+						data1: "area-line-range"
+					}
+				},
+				axis: {
+					x: {
+						type: "timeseries",
+						tick: {
+							format: "%Y-%m-%d"
+						}
+					}
+				}
+			};
+		});
+
+		it("area-ranged type tooltip should be displayed correctly", () => {
+			// check for custom point shape
+			hoverChart(chart, undefined, {clientX: 185, clientY: 107});
+
+			let value = chart.$.tooltip.select(`.${CLASS.tooltipName}-data1 .value`).text();
+
+			expect(value).to.be.equal("Mid: 135 High: 160 Low: 120");
+
+			value = +chart.$.tooltip.select(`.${CLASS.tooltipName}-data2 .value`).text();
+
+			expect(value).to.be.equal(200);
+		});
+	});
 });
diff --git a/src/internals/tooltip.js b/src/internals/tooltip.js
@@ -121,15 +121,14 @@ extend(ChartInternal.prototype, {
 			}
 
 			param = [row.ratio, row.id, row.index, d];
+			value = sanitise(valueFormat(getRowValue(row), ...param));
 
 			if ($$.isAreaRangeType(row)) {
-				value = ["high", "low"].map(v => sanitise(
+				const [high, low] = ["high", "low"].map(v => sanitise(
 					valueFormat($$.getAreaRangeData(row, v), ...param)
 				));
 
-				value = `<b>Mid:</b> ${value} <b>High:</b> ${value[0]} <b>Low:</b> ${value[1]}`;
-			} else {
-				value = sanitise(valueFormat(getRowValue(row), ...param));
+				value = `<b>Mid:</b> ${value} <b>High:</b> ${high} <b>Low:</b> ${low}`;
 			}
 
 			if (value !== undefined) {