fix(bar): fix bar radius for zero value

In a process where values dynamically change from positive value to zero, the transition appears wrongly if the Arc command removed from the exist path. To mitigate, maintain Arc command from path on this data flow. Fix #2642
naver · Apr 27, 2022 · 9aa7579 · 9aa7579
1 parent 4d7cdb8
commit 9aa7579
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 8 deletions.
diff --git a/src/ChartInternal/shape/bar.ts b/src/ChartInternal/shape/bar.ts
@@ -102,7 +102,7 @@ export default {
 		return [
 			$$.$T(bar, withTransition, getRandom())
 				.attr("d", d => (isNumber(d.value) || $$.isBarRangeType(d)) && drawFn(d))
-				.style("fill", this.color)
+				.style("fill", $$.color)
 				.style("opacity", null)
 		];
 	},
@@ -154,10 +154,10 @@ export default {
 			let radius = 0;
 
 			const isGrouped = $$.isGrouped(d.id);
-			const hasRadius = d.value !== 0 && getRadius;
-			const isRadiusData = hasRadius && isGrouped ? $$.isStackingRadiusData(d) : false;
+			// const hasRadius = d.value !== 0 && getRadius;
+			const isRadiusData = getRadius && isGrouped ? $$.isStackingRadiusData(d) : false;
 
-			if (hasRadius && (!isGrouped || isRadiusData)) {
+			if (getRadius && (!isGrouped || isRadiusData)) {
 				const index = isRotated ? indexY : indexX;
 				const barW = points[2][index] - points[0][index];
 
@@ -188,9 +188,16 @@ export default {
 	 */
 	isStackingRadiusData(d: IDataRow): boolean {
 		const $$ = this;
-		const {config, data} = $$;
+		const {$el, config, data, state} = $$;
 		const {id, index, value} = d;
 
+		// when the data is hidden, check if has rounded edges
+		if (state.hiddenTargetIds.indexOf(id) > -1) {
+			const target = $el.bar.filter(d => d.id === id && d.value === value);
+
+			return !target.empty() && /a\d+/i.test(target.attr("d"));
+		}
+
 		// Find same grouped ids
 		const keys = config.data_groups.find(v => v.indexOf(id) > -1);
 

diff --git a/test/shape/bar-spec.ts b/test/shape/bar-spec.ts
@@ -773,9 +773,9 @@ describe("SHAPE BAR", () => {
 		});
 
 		// https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#arcs
-		it("for zero value, Arc 'a' path command shouldn't be added ", () => {
-			expect(chart.$.bar.bars.attr("d").indexOf("a") === -1).to.be.true;
-		});
+		// it("for zero value, Arc 'a' path command shouldn't be added ", () => {
+		// 	expect(chart.$.bar.bars.attr("d").indexOf("a") === -1).to.be.true;
+		// });
 
 		it("set options", () => {
 			args.data.columns[0][0] = 2;
@@ -843,6 +843,37 @@ describe("SHAPE BAR", () => {
 
 			expect(radiusCount).to.be.equal(8);
 		});
+
+		it("set options", () => {
+			args = {				
+				data: {
+					columns: [
+						["d3", 3, 5, 8, 3, 9, 2]
+					],
+					type: "bar",
+					labels: false
+				},
+				bar: {
+					padding: 2,
+					radius: {
+						ratio: 0.2
+					}
+				}
+			};
+		});
+
+		it("path data should remain with Arc command with value 0(zero).", done => {
+			// when
+			chart.load({
+				columns: [["d3", 3, 5, 8, 3, 9, 0]],
+				done: function() {
+					const d = this.$.bar.bars.filter(":last-child").attr("d");
+
+					expect(/\sa\d+/.test(d)).to.be.true;
+					done();
+				}
+			});
+		})
 	});
 
 	describe("bar position", () => {