fix(bar): Fix bar radius on inverted axis

- Fix negative values drawn radius on rotated axis - Fix path command to draw correctly on inverted axis Fix #3054
naver · Jan 25, 2023 · 21b7004 · 21b7004
1 parent ddafcf0
commit 21b7004
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 4 deletions.
diff --git a/src/ChartInternal/shape/bar.ts b/src/ChartInternal/shape/bar.ts
@@ -172,7 +172,10 @@ export default {
 			const indexX = +isRotated;
 			const indexY = +!indexX;
 
-			const isNegative = d.value as number < 0;
+			const isUnderZero = d.value as number < 0;
+			const isInverted = config[`axis_${$$.axis.getId(d.id)}_inverted`];
+			const isNegative = (!isInverted && isUnderZero) || (isInverted && !isUnderZero);
+
 			const pathRadius = ["", ""];
 			let radius = 0;
 
@@ -197,7 +200,7 @@ export default {
 			// path string data shouldn't be containing new line chars
 			// https://github.com/naver/billboard.js/issues/530
 			const path = isRotated ?
-				`H${points[1][indexX] - radius} ${pathRadius[0]}V${points[2][indexY] - radius} ${pathRadius[1]}H${points[3][indexX]}` :
+				`H${points[1][indexX] + (isNegative ? radius : -radius)} ${pathRadius[0]}V${points[2][indexY] - radius} ${pathRadius[1]}H${points[3][indexX]}` :
 				`V${points[1][indexY] + (isNegative ? -radius : radius)} ${pathRadius[0]}H${points[2][indexX] - radius} ${pathRadius[1]}V${points[3][indexY]}`;
 
 			return `M${points[0][indexX]},${points[0][indexY]}${path}z`;

diff --git a/test/shape/bar-spec.ts b/test/shape/bar-spec.ts
@@ -618,7 +618,7 @@ describe("SHAPE BAR", () => {
 
 		it("check the rotated axis bar radius", () => {
 			checkRadius([
-				"M131.11111111111111,161.16666666666669H39.166666666666664 a10,10 1 0 0 -10,10V166.16666666666669 a10,10 1 0 0 10,10H131.11111111111111z",
+				"M131.11111111111111,161.16666666666669H59.166666666666664 a10,10 1 0 0 -10,10V166.16666666666669 a10,10 1 0 0 10,10H131.11111111111111z",
 				"M131.11111111111111,179.16666666666669H285 a10,10 0 0 1 10,10V184.16666666666669 a10,10 0 0 1 -10,10H131.11111111111111z"
 			]);
 		});
@@ -873,7 +873,55 @@ describe("SHAPE BAR", () => {
 					done();
 				}
 			});
-		})
+		});
+
+		it("set options", () => {
+			args = {				
+				data: {
+					columns: [
+						["data1", 250],
+						["data2", -250]
+					],
+					type: "bar"
+				},
+				bar: {
+					radius: {
+						ratio: 0.5
+					}
+				},
+				axis: {
+					rotated: true
+				}
+			};
+		});
+
+		it("radius should be rendered correclty on rotated axis", () => {
+			const expected = [
+				'M295,85.80000000000001H477.23333333333323 a63.599999999999994,63.599999999999994 0 0 1 63.599999999999994,63.599999999999994V149.4 a63.599999999999994,63.599999999999994 0 0 1 -63.599999999999994,63.599999999999994H295z',
+				'M295,213H112.76666666666665 a63.599999999999994,63.599999999999994 1 0 0 -63.599999999999994,63.599999999999994V276.6 a63.599999999999994,63.599999999999994 1 0 0 63.599999999999994,63.599999999999994H295z'
+			];
+
+			chart.$.bar.bars.each(function() {
+				expect(this.getAttribute("d")).to.be.equal(expected.shift());
+			});
+		});
+
+		it("set options: axis.y.inverted=true", () => {
+			args.axis.y = {
+				inverted: true
+			};
+		});
+
+		it("radius should be rendered correclty on rotated & inverted axis", () => {
+			const expected = [
+				'M295,85.80000000000001H112.76666666666668 a63.599999999999994,63.599999999999994 1 0 0 -63.599999999999994,63.599999999999994V149.4 a63.599999999999994,63.599999999999994 1 0 0 63.599999999999994,63.599999999999994H295z',
+				'M295,213H477.23333333333323 a63.599999999999994,63.599999999999994 0 0 1 63.599999999999994,63.599999999999994V276.6 a63.599999999999994,63.599999999999994 0 0 1 -63.599999999999994,63.599999999999994H295z'
+			];
+
+			chart.$.bar.bars.each(function() {
+				expect(this.getAttribute("d")).to.be.equal(expected.shift());
+			});
+		});
 	});
 
 	describe("bar linear gradient", () => {