fix(axis): Fix culling visibility on dynamic loading

Make text node's visibility to be updated from the possible visibility status. Ref #2582
naver · Mar 8, 2022 · 44277c0 · 44277c0
1 parent c44513e
commit 44277c0
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 5 deletions.
diff --git a/src/ChartInternal/Axis/Axis.ts b/src/ChartInternal/Axis/Axis.ts
@@ -941,6 +941,7 @@ class Axis {
 		const $$ = this.owner;
 		const {config, state: {clip, current}, $el} = $$;
 
+
 		["subX", "x", "y", "y2"].forEach(type => {
 			const axis = $el.axis[type];
 
@@ -966,13 +967,14 @@ class Axis {
 						}
 					}
 
-					tickNodes.each(function(d) {
-						if (tickValues.indexOf(d) % intervalForCulling) {
+					tickNodes
+						.each(function(d) {
 							const node = (lines ? this.querySelector("text") : this);
 
-							node && (node.style.display = "none");
-						}
-					});
+							if (node) {
+								node.style.display = tickValues.indexOf(d) % intervalForCulling ? "none" : null;
+							}
+						});
 				} else {
 					tickNodes.style("display", null);
 				}

diff --git a/test/internals/axis-spec.ts b/test/internals/axis-spec.ts
@@ -2627,6 +2627,79 @@ describe("AXIS", function() {
 				expect(axis[v].selectAll(selector).size()).to.be.equal(args.axis[v].tick.culling.max);
 			});
 		});
+
+		it("set options", () => {
+			args = {
+				data: {
+					x: "periods",
+					xFormat: "%Y",
+					type: "line",
+					columns: [
+						["periods", "2011", "2012", "2013", "2014", "2015","2016"],
+						["data1", 30, 200, 100, 170, 150, 250]
+					]
+				},
+			  axis: {
+				x: {
+				  tick: {
+					culling: {
+					  max: 8
+					}
+				  }
+				}
+			  }
+			}
+		});
+
+		it("tick text's culling visibility should work correctly", done => {
+			// count visibility text nodes
+			const countVisibility = () => {
+				let visible = 0;
+				let hidden = 0;
+
+				chart.internal.$el.axis.x.selectAll(".tick text")
+					.each(function() {
+						if (this.style.display === "none") {
+							hidden++;
+						} else {
+							visible++;
+						}
+					});
+
+				return {visible, hidden};
+			};
+
+			new Promise((resolve, reject) => {
+				// load new dataset
+				chart.load({
+					columns: [
+						["periods", "1999", "2000", "2001", "2002", "2003","2004","2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015","2016"],
+						["data1", 30, 200, 100, 170, 150, 250, 30, 200, 100, 170, 150, 250, 30, 200, 100, 170, 150, 250]
+					],
+					done: resolve
+				});
+			}).then(() => {
+				const {visible, hidden} = countVisibility();
+
+				expect(visible).to.equal(6);
+				expect(hidden).to.equal(12);				
+
+				return new Promise((resolve, reject) => {
+					// revert to original dataset
+					chart.load({
+						columns: args.data.columns,
+						done: resolve
+					});
+				});
+			}).then(() => {
+				const {visible, hidden} = countVisibility();
+
+				expect(visible).to.equal(6);
+				expect(hidden).to.equal(0);	
+
+				done();
+			});
+		});
 	});
 
 	describe("Axes tick padding", () => {