From 0cc638a5ad28aeda472c551cd91f75add0eba0a8 Mon Sep 17 00:00:00 2001
From: Jae Sung Park <alberto.park@gmail.com>
Date: Wed, 23 Oct 2024 11:51:28 +0900
Subject: [PATCH] refactor(bar): handle clip-path updates (#3905)

clip-path style should be updated according the data toggles

Ref #3903
---
 src/ChartInternal/shape/bar.ts |  4 ++-
 test/shape/bar-spec.ts         | 48 ++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/ChartInternal/shape/bar.ts b/src/ChartInternal/shape/bar.ts
index 60aaba1e6..ed9c27420 100644
--- a/src/ChartInternal/shape/bar.ts
+++ b/src/ChartInternal/shape/bar.ts
@@ -230,7 +230,9 @@ export default {
 					}
 				}
 
-				d.clipPath = `inset(${clipPath})`;
+				if (clipPath) {
+					d.clipPath = `inset(${clipPath})`;
+				}
 			}
 
 			// path string data shouldn't be containing new line chars
diff --git a/test/shape/bar-spec.ts b/test/shape/bar-spec.ts
index 66b8f683b..d08637e3d 100644
--- a/test/shape/bar-spec.ts
+++ b/test/shape/bar-spec.ts
@@ -1149,6 +1149,54 @@ describe("SHAPE BAR", () => {
 				}
 			});
 		});
+
+		it("set options", () => {
+			args = {
+				data: {
+					columns: [
+						["data1", -80],
+						["data2", 80],
+						["data3", -120]
+					],
+					type: "bar",
+					groups: [
+						[
+							"data1",
+							"data2"
+						]
+					],
+					order: "desc"
+				},
+				bar: {
+					radius: {
+						ratio: 0.5
+					}
+				},
+				transition: {
+					duration: 0
+				}
+			};
+		});
+
+		it("clip-path style should be updated", () => {
+			// when
+			chart.hide("data3");
+			
+			chart.$.bar.bars.each(function(d) {
+				if (d.id !== "data3") {
+					expect(this.style.clipPath.length > 0).to.be.true;
+				} else {
+					expect(this.style.clipPath).to.be.equal("");
+				}					
+			});
+
+			// when
+			chart.show("data3");
+
+			chart.$.bar.bars.each(function(d) {
+				expect(this.style.clipPath).to.be.equal("");
+			});
+		})
 	});
 
 	describe("bar linear gradient", () => {