fix(data): Handle spaced data name for label bg color

Suffix data id value to handle spaced data ids. fix #2160
naver · Jun 28, 2021 · 4ffb654 · 4ffb654
1 parent 2b813aa
commit 4ffb654
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/src/ChartInternal/internals/color.ts b/src/ChartInternal/internals/color.ts
@@ -177,7 +177,7 @@ export default {
 			}
 
 			ids.forEach(v => {
-				const id = `${state.datetimeId}-labels-bg-${v}`;
+				const id = `${state.datetimeId}-labels-bg${$$.getTargetSelectorSuffix(v)}`;
 
 				$el.defs.append("filter")
 					.attr("x", "0")

diff --git a/src/ChartInternal/internals/text.ts b/src/ChartInternal/internals/text.ts
@@ -161,8 +161,8 @@ export default {
 		let color: string = "";
 
 		if (isString(backgroundColor) || isObject(backgroundColor)) {
-			const id = isString(backgroundColor) ? "" : ("id" in d ? d.id : d.data.id);
-			const filter = $el.defs.select(["filter[id*='labels-bg-", "']"].join(id));
+			const id = isString(backgroundColor) ? "" : $$.getTargetSelectorSuffix(("id" in d ? d.id : d.data.id));
+			const filter = $el.defs.select(["filter[id*='labels-bg", "']"].join(id));
 
 			if (filter.size()) {
 				color = `url(#${filter.attr("id")})`;

diff --git a/test/internals/data-spec.ts b/test/internals/data-spec.ts
@@ -1848,7 +1848,7 @@ describe("DATA", () => {
 				args = {
 					data: {
 						columns: [
-							["data1", 30, 200, 100],
+							["data 1 2 3", 30, 200, 100],
 							["data2", 430, 300, 500]
 						],
 						labels: {
@@ -1888,19 +1888,19 @@ describe("DATA", () => {
 			it("set options data.type='pie'", () => {
 				args.data.type = "line";
 				args.data.labels.backgroundColors = {
-					data1: "red"
+					"data 1": "red"
 				};
 			});
 
 			it("should set filter definition and text nodes for line type", () => {
 				const {$el} = chart.internal;
-				const filter = $el.defs.select("filter[id*='labels-bg-data1']");
+				const filter = $el.defs.select("filter[id*='labels-bg-data-1']");
 				const filterId = filter.attr("id");
 
 				expect(filter.size()).to.be.equal(1);
 
 				$el.text.each(function(d) {
-					if (d.id === "data1") {
+					if (d.id === "data-1") {
 						expect(this.getAttribute("filter").indexOf(filterId) > -1).to.be.ok;
 					} else {
 						expect(this.getAttribute("filter")).to.be.null;