fix(arc): wrong right padding calculation

Correct wrong config option reference. state.legend_show --> config.legend_show Close #1545
naver · Jul 22, 2020 · f5a8602 · f5a8602
1 parent 8c2b680
commit f5a8602
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 40 deletions.
diff --git a/src/ChartInternal/internals/size.ts b/src/ChartInternal/internals/size.ts
@@ -322,7 +322,7 @@ export default {
 
 		// for arc
 		const hasGauge = $$.hasType("gauge");
-		const isLegendRight = state.legend_show && state.isLegendRight;
+		const isLegendRight = config.legend_show && state.isLegendRight;
 
 		state.arcWidth = state.width - (isLegendRight ? currLegend.width + 10 : 0);
 		state.arcHeight = state.height - (isLegendRight && !hasGauge ? 0 : 10);

diff --git a/test/shape/arc-spec.ts b/test/shape/arc-spec.ts
@@ -231,51 +231,73 @@ describe("SHAPE ARC", () => {
 		});
 	});
 
-	it("check for Pie's threshold data label text", done => {
-		const chart = util.generate({
-			data: {
-			  columns: [
-				  ["data1", 10],
-				  ["data2", 30],
-				  ["data3", 60]
-			  ],
-			  type: "pie"
-			},
-			pie: {
-			  label:{
-				  threshold: 0.2
-			  }
-			}
-		  });
-
-		const checkText = () => {
-			chart.$.arc.selectAll("text").each(function(d, i) {
-				expect(this.textContent).to.be.equal(expectedText[i]);
+	describe("Check position & data label text", () => {
+		it("check for Pie's threshold data label text", done => {
+			const chart = util.generate({
+				data: {
+				columns: [
+					["data1", 10],
+					["data2", 30],
+					["data3", 60]
+				],
+				type: "pie"
+				},
+				pie: {
+				label:{
+					threshold: 0.2
+				}
+				}
 			});
-		};
 
-		let expectedText = ["", "30.0%", "60.0%"];
+			const checkText = () => {
+				chart.$.arc.selectAll("text").each(function(d, i) {
+					expect(this.textContent).to.be.equal(expectedText[i]);
+				});
+			};
 
-		checkText();
+			let expectedText = ["", "30.0%", "60.0%"];
 
-		new Promise((resolve, reject) => {
-			// when
-			chart.toggle("data3");
-			expectedText = ["25.0%", "75.0%", ""];
+			checkText();
 
-			setTimeout(() => {
-				checkText();
-				resolve();
-			}, 200);
-		}).then(() => {
-			// when
-			chart.toggle("data3");
-			expectedText = ["", "30.0%", "60.0%"];
+			new Promise((resolve, reject) => {
+				// when
+				chart.toggle("data3");
+				expectedText = ["25.0%", "75.0%", ""];
 
-			setTimeout(() => {
-				checkText();
-				done();
-			}, 200);
+				setTimeout(() => {
+					checkText();
+					resolve();
+				}, 200);
+			}).then(() => {
+				// when
+				chart.toggle("data3");
+				expectedText = ["", "30.0%", "60.0%"];
+
+				setTimeout(() => {
+					checkText();
+					done();
+				}, 200);
+			});
+		});
+
+		it("check if Pie's size adjusts when legend is positioned to right.", () => {
+			const chart = util.generate({
+				data: {
+					columns: [
+						["data1-very very very very very very very very very very long name", 30],
+						["data2", 120]
+					],
+					type: "pie",
+				},
+				legend: {
+					position: "right"
+				}
+			});
+
+			const {arcWidth, arcHeight} = chart.internal.state;
+
+			expect(arcWidth).to.be.closeTo(284, 5);
+			expect(arcHeight).to.be.closeTo(476, 5);
 		});
 	});