fix(regions): Fix applying regions class

update ".bb-region rect" rule to not interfere applying regions.class rule Fix naver#3611
netil · Jan 23, 2024 · 7e4fa71 · 7e4fa71
1 parent a52dba3
commit 7e4fa71
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 9 deletions.
diff --git a/src/module/util.ts b/src/module/util.ts
@@ -477,12 +477,12 @@ const toArray = (v: CSSStyleDeclaration | any): any => [].slice.call(v);
  * @private
  */
 function addCssRules(style, selector: string, prop: string[]): number {
-	const {rootSelctor, sheet} = style;
+	const {rootSelector = "", sheet} = style;
 	const getSelector = s => s
 		.replace(/\s?(bb-)/g, ".$1")
 		.replace(/\.+/g, ".");
 
-	const rule = `${rootSelctor} ${getSelector(selector)} {${prop.join(";")}}`;
+	const rule = `${rootSelector} ${getSelector(selector)} {${prop.join(";")}}`;
 
 	return sheet[sheet.insertRule ? "insertRule" : "addRule"](
 		rule,

diff --git a/src/scss/billboard.scss b/src/scss/billboard.scss
@@ -136,8 +136,9 @@
 }
 /*-- Region --*/
 .bb-region {
+	fill: steelblue;
+
 	rect {
-		fill: steelblue;
 		fill-opacity: .1;
 	}
 }

diff --git a/src/scss/theme/dark.scss b/src/scss/theme/dark.scss
@@ -162,8 +162,9 @@ rect.bb-circle, use.bb-circle {
 
 /*-- Region --*/
 .bb-region {
+    fill: steelblue;
+
     rect {
-        fill: steelblue;
         fill-opacity: 0.5;
     }    
 

diff --git a/src/scss/theme/datalab.scss b/src/scss/theme/datalab.scss
@@ -147,8 +147,9 @@ $text-font-size: 11px;
 
 /*-- Region --*/
 .bb-region {
+    fill: steelblue;
+
     rect {
-        fill: steelblue;
         fill-opacity: 0.1;
     }
 

diff --git a/src/scss/theme/graph.scss b/src/scss/theme/graph.scss
@@ -158,8 +158,9 @@ rect.bb-circle, use.bb-circle {
 
 /*-- Region --*/
 .bb-region {
+    fill: steelblue;
+
     rect {
-        fill: steelblue;
         fill-opacity: 0.1;
     }
 

diff --git a/src/scss/theme/insight.scss b/src/scss/theme/insight.scss
@@ -154,8 +154,9 @@ rect.bb-circle, use.bb-circle {
 
 /*-- Region --*/
 .bb-region {
+    fill: steelblue;
+
     rect {
-        fill: steelblue;
         fill-opacity: 0.1;
     }
 

diff --git a/src/scss/theme/modern.scss b/src/scss/theme/modern.scss
@@ -156,8 +156,9 @@ rect.bb-circle, use.bb-circle {
 
 /*-- Region --*/
 .bb-region {
+    fill: #71808d;
+
     rect {
-        fill: #71808d;
         fill-opacity: 0.1;
     }
 

diff --git a/test/assets/common.css b/test/assets/common.css
@@ -11,3 +11,7 @@
     align-items: center;
     justify-content: center;
 }
+
+.regions_class1{
+    fill: red;
+}
diff --git a/test/internals/rergions-spec.ts b/test/internals/rergions-spec.ts
@@ -4,6 +4,7 @@
  */
 /* eslint-disable */
 import {expect} from "chai";
+import {window} from "../../src/module/browser";
 import util from "../assets/util";
 
 // exported to be used from /test/api/region-spec.ts
@@ -131,13 +132,20 @@ describe("REGIONS", function() {
 			const {$el, scale} = chart.internal;
 
 			setTimeout(() => {
-				$el.region.list.each(function(d) {
+				$el.region.list.each(function(d, i) {
 					const axis = scale[d.axis];
 					const isX = d.axis === "x";
 					const rect = this.querySelector("rect");
 					const start = +rect.getAttribute(isX ? "x" : "y");
 					const size = +rect.getAttribute(isX ? "width" : "height");
 
+					// first <rect> should apply .regions_class1 rule
+					if (i === 0) {
+						const {fill} = window.getComputedStyle(this.querySelector("rect"));
+
+						expect(fill).to.be.equal("rgb(255, 0, 0)");
+					}
+
 					// check the diemsion
 					expect(start).to.be.equal(axis(isX ? d.start : d.end));
 					expect(start + size).to.be.equal(axis(isX ? d.end : d.start));