fix(grid): Fix y grid to show for log axis type

Make to use generated ticks for grid display. Fix #2710
naver · Jun 3, 2022 · d0b8cbd · d0b8cbd
1 parent 1bd4f4a
commit d0b8cbd
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 6 deletions.
diff --git a/src/ChartInternal/Axis/AxisRenderer.ts b/src/ChartInternal/Axis/AxisRenderer.ts
@@ -13,6 +13,7 @@ export default class AxisRenderer {
 	private config;
 	private params;
 	private g;
+	private generatedTicks: (Date|number)[];
 
 	constructor(params: any = {}) {
 		const config = {
@@ -113,6 +114,9 @@ export default class AxisRenderer {
 				// count of tick data in array
 				const ticks = config.tickValues || helper.generateTicks(scale1, isLeftRight);
 
+				// set generated ticks
+				ctx.generatedTicks = ticks;
+
 				// update selection
 				let tick: d3Selection = g.selectAll(".tick")
 					.data(ticks, scale1);
@@ -228,6 +232,28 @@ export default class AxisRenderer {
 		this.g = $g;
 	}
 
+	/**
+	 * Get generated ticks
+	 * @param {number} count Count of ticks
+	 * @returns {Array} Generated ticks
+	 * @private
+	 */
+	getGeneratedTicks(count: number): (Date|number)[] {
+		const len = this.generatedTicks.length - 1;
+		let res = this.generatedTicks;
+
+		if (len > count) {
+			const interval = Math.round((len / count) - 0.1);
+
+			res = this.generatedTicks
+				.map((v, i) => (i % interval === 0 ? v : null))
+				.filter(v => v !== null)
+				.splice(0, count) as (Date|number)[];
+		}
+
+		return res;
+	}
+
 	/**
 	 * Get tick x/y coordinate
 	 * @returns {{x: number, y: number}}
@@ -505,7 +531,7 @@ export default class AxisRenderer {
 		return this;
 	}
 
-	tickValues(x?): AxisRenderer | (number|Date|string)[] {
+	tickValues(x?: (number|Date|string)[]|Function): AxisRenderer | (number|Date|string)[] {
 		const {config} = this;
 
 		if (isFunction(x)) {

diff --git a/src/ChartInternal/internals/grid.ts b/src/ChartInternal/internals/grid.ts
@@ -133,10 +133,12 @@ export default {
 
 	updateYGrid(): void {
 		const $$ = this;
-		const {config, state, $el: {grid, main}} = $$;
+		const {axis, config, scale, state, $el: {grid, main}} = $$;
 		const isRotated = config.axis_rotated;
-		const gridValues = $$.axis.y.tickValues() || $$.scale.y.ticks(config.grid_y_ticks);
-		const pos = d => Math.ceil($$.scale.y(d));
+		const pos = d => Math.ceil(scale.y(d));
+
+		const gridValues =
+			axis.y.getGeneratedTicks(config.grid_y_ticks) || $$.scale.y.ticks(config.grid_y_ticks);
 
 		grid.y = main.select(`.${$GRID.ygrids}`)
 			.selectAll(`.${$GRID.ygrid}`)

diff --git a/test/internals/grid-spec.ts b/test/internals/grid-spec.ts
@@ -162,7 +162,7 @@ describe("GRID", function() {
 			});
 
 			expect(ygrids.size()).to.be.equal(1);
-			expect(ygrids.selectAll(`.${$GRID.ygrid}`).size()).to.be.equal(5);
+			expect(ygrids.selectAll(`.${$GRID.ygrid}`).size()).to.be.equal(3);
 
 			chart.$.main.select(`.${$AXIS.axisY}`).selectAll(".tick").each(function(d, i) {
 				let y: any = d3Select(this).attr("transform").match(/\d+\)/);
@@ -171,12 +171,72 @@ describe("GRID", function() {
 					y = parseInt(y[0]);
 				}
 
-				expect(y).to.be.closeTo(expectedYs[i], 1);
+				if (expectedYs[i]) {
+					expect(y).to.be.closeTo(expectedYs[i], 1);
+				}
 			});
 		});
+
+		it("set options", () => {
+			args = {
+				data: {
+					columns: [
+					["data1", 100, 50, 150, 200, 100, 350, 58, 210, 80, 126],
+					["data2", 305, 350, 55, 25, 335, 29, 258, 310, 180, 226],
+					["data3", 223, 121, 259, 247, 53, 159, 95, 111, 307, 337]
+					],
+					type: "line",
+					labels: true
+				},
+				axis: {
+					y: {
+					type: "log",
+					max: 400
+					}
+				},
+				grid: {
+					y: {
+					show: true
+					}
+				}
+			};
+		});
+
+		it("grid lines should fully generated for log type y axis", () => {
+			const gridLen = chart.$.grid.y.size();
+			const tickLen = chart.internal.$el.axis.y.selectAll(".tick").size();
+
+			expect(gridLen).to.be.equal(tickLen);
+		});
 	});
 
 	describe("front option", () => {
+		before(() => {
+			args = {
+				data:{
+					columns:[
+						["data1",30,200,100,400,150,250]
+					]
+				},
+				axis:{
+					y:{
+						tick:{
+							count: 5
+						}
+					}
+				},
+				grid:{
+					y:{
+						show: true,
+						lines:[
+							{"value":2,"text":"Label on 2"}
+						],
+						ticks: 3
+					}
+				}
+			};
+		});
+
 		it("grid element should positioned before chart element", () => {
 			const grid = chart.$.main.select(`.${$GRID.grid}`).node();
 			const nextSiblingClassName = grid.nextSibling.getAttribute("class");