fix(size): enhance applying height value

When bound element's height specified other than 'px' unit, determine height value taking same logic as width's. Fix #2086
naver · May 14, 2021 · 0664a60 · 0664a60
1 parent 2b50443
commit 0664a60
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 10 deletions.
diff --git a/src/ChartInternal/internals/size.ts b/src/ChartInternal/internals/size.ts
@@ -124,9 +124,9 @@ export default {
 	getParentRectValue(key): number {
 		const offsetName = `offset${capitalize(key)}`;
 		let parent = this.$el.chart.node();
-		let v;
+		let v = 0;
 
-		while (!v && parent && parent.tagName !== "BODY") {
+		while (v < 30 && parent && parent.tagName !== "BODY") {
 			try {
 				v = parent.getBoundingClientRect()[key];
 			} catch (e) {
@@ -140,13 +140,11 @@ export default {
 			parent = parent.parentNode;
 		}
 
-		if (key === "width") {
-			// Sometimes element's width value is incorrect(ex. flex container)
-			// In this case, use body's offsetWidth instead.
-			const bodyWidth = document.body.offsetWidth;
+		// Sometimes element's dimension value is incorrect(ex. flex container)
+		// In this case, use body's offset instead.
+		const bodySize = document.body[offsetName];
 
-			v > bodyWidth && (v = bodyWidth);
-		}
+		v > bodySize && (v = bodySize);
 
 		return v;
 	},
@@ -156,9 +154,16 @@ export default {
 	},
 
 	getParentHeight(): number {
-		const h = this.$el.chart.style("height");
+		const h: string = this.$el.chart.style("height");
+		let height = 0;
+
+		if (h) {
+			height = /px$/.test(h) ?
+				parseInt(h, 10) :
+				this.getParentRectValue("height");
+		}
 
-		return h.indexOf("px") > 0 ? parseInt(h, 10) : 0;
+		return height;
 	},
 
 	getSvgLeft(withoutRecompute?: boolean): number {

diff --git a/test/internals/bb-spec.ts b/test/internals/bb-spec.ts
@@ -229,6 +229,23 @@ describe("Interface & initialization", () => {
 				done();
 			}, 200);
 		});
+
+		it("should set correct height value", () => {
+			const height = 450;
+			container.innerHTML = `<div style="height:${height}px;width:500px"><div id="chartHeight" style="height:100%"></div></div>`;
+
+			chart = util.generate({
+				bindto: "#chartHeight",
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400],
+						["data2", 500, 800, 500, 2000]
+					]
+				}
+			});
+
+			expect(chart.$.chart.node().getBoundingClientRect().height).to.be.equal(height);
+		});
 	});
 
 	describe("set defaults options", () => {