fix(axis): Correct tick's position implementation (#457)

Specify axes names instead of the assumption. Fix #380 Close #457
naver · Jun 21, 2018 · 09547be · 09547be
1 parent 3682a83
commit 09547be
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 28 deletions.
diff --git a/spec/internals/axis-spec.js b/spec/internals/axis-spec.js
@@ -1120,5 +1120,24 @@ describe("AXIS", function() {
 				});
 			});
 		});
+
+		it("set options axis.rotated=true", () => {
+			args.axis.rotated = true;
+		});
+
+		it("should be rounded tick text values", () => {
+			const main = chart.internal.main;
+
+			["x", "y", "y2"].forEach(v => {
+				const pos = args.axis[v].tick.text.position;
+
+				main.selectAll(`.${CLASS[`axis${v.toUpperCase()}`]} tspan`).each(function() {
+					const tspan = d3.select(this);
+
+					expect(+tspan.attr("dx")).to.be.equal(pos.x);
+					expect(+tspan.attr("dy")).to.be.equal(pos.y + (v === "x" ? 3 : 0));
+				});
+			});
+		});
 	});
 });
diff --git a/src/axis/Axis.js b/src/axis/Axis.js
@@ -51,7 +51,7 @@ export default class Axis {
 			.style("text-anchor", this.textAnchorForY2AxisLabel.bind(this));
 	}
 
-	getXAxis(scale, orient, tickFormat,
+	getXAxis(axisName, scale, orient, tickFormat,
 		tickValues, withOuterTick, withoutTransition, withoutRotateTickText) {
 		const $$ = this.owner;
 		const config = $$.config;
@@ -61,6 +61,7 @@ export default class Axis {
 			withOuterTick,
 			withoutTransition,
 			config,
+			axisName,
 			tickMultiline: config.axis_x_tick_multiline,
 			tickWidth: config.axis_x_tick_width,
 			tickTextRotate: withoutRotateTickText ? 0 : config.axis_x_tick_rotate,
@@ -92,14 +93,15 @@ export default class Axis {
 		return axis;
 	}
 
-	getYAxis(scale, orient, tickFormat, tickValues,
+	getYAxis(axisName, scale, orient, tickFormat, tickValues,
 		withOuterTick, withoutTransition, withoutRotateTickText) {
 		const $$ = this.owner;
 		const config = $$.config;
 		const axisParams = {
 			withOuterTick,
 			withoutTransition,
 			config,
+			axisName,
 			tickTextRotate: withoutRotateTickText ? 0 : config.axis_y_tick_rotate
 		};
 		const axis = bbAxis(axisParams)
@@ -402,6 +404,7 @@ export default class Axis {
 			if (/^y2?$/.test(id)) {
 				scale = $$[id].copy().domain($$.getYDomain(targetsToShow, id));
 				axis = this.getYAxis(
+					id,
 					scale,
 					$$[`${id}Orient`],
 					config[`axis_${id}_tick_format`],
@@ -413,6 +416,7 @@ export default class Axis {
 			} else {
 				scale = $$.x.copy().domain($$.getXDomain(targetsToShow));
 				axis = this.getXAxis(
+					"x",
 					scale,
 					$$.xOrient,
 					$$.xAxisTickFormat,
@@ -421,6 +425,7 @@ export default class Axis {
 					true,
 					true
 				);
+
 				this.updateXAxisTickValues(targetsToShow, axis);
 			}
 

diff --git a/src/axis/bb.axis.js b/src/axis/bb.axis.js
@@ -43,25 +43,6 @@ const getSizeFor1Char = node => {
 	return (getSizeFor1Char.size = size);
 };
 
-/**
- * Get axis string by orient
- * @param {String} orient Orientation string - top|bottom|left|right
- * @param {Boolean} isRotate Whether chart is rotated
- * @return {String} x|y|y2
- * @private
- */
-const getAxisByOrient = (orient, isRotate) => (
-	isRotate ? {
-		left: "x",
-		bottom: "y",
-		top: "y2",
-	} : {
-		bottom: "x",
-		left: "y",
-		right: "y2"
-	}
-)[orient];
-
 export default function(params = {}) {
 	let scale = d3ScaleLinear();
 	let orient = "bottom";
@@ -316,9 +297,9 @@ export default function(params = {}) {
 			const textTransform = r => (r ? `rotate(${r})` : null);
 			const yForText = r => (r ? 11.5 - 2.5 * (r / 15) * (r > 0 ? 1 : -1) : tickLength);
 
-			// Get axis.tick.text.position option value
-			const axisType = getAxisByOrient(orient, rotate);
-			const tickTextPos = axisType ? params.config[`axis_${axisType}_tick_text_position`] : {x: 0, y: 0};
+			// get the axis' tick position configuration
+			const tickTextPos = params.axisName && /^(x|y|y2)$/.test(params.axisName) ?
+				params.config[`axis_${params.axisName}_tick_text_position`] : {x: 0, y: 0};
 
 			// set <tspan>'s position
 			tspan

diff --git a/src/internals/scale.js b/src/internals/scale.js
@@ -133,19 +133,19 @@ extend(ChartInternal.prototype, {
 		$$.y2AxisTickValues = $$.axis.getY2AxisTickValues();
 
 		$$.xAxis = $$.axis
-			.getXAxis($$.x, $$.xOrient, $$.xAxisTickFormat,
+			.getXAxis("x", $$.x, $$.xOrient, $$.xAxisTickFormat,
 				$$.xAxisTickValues, config.axis_x_tick_outer, withoutTransitionAtInit);
 
 		$$.subXAxis = $$.axis
-			.getXAxis($$.subX, $$.subXOrient, $$.xAxisTickFormat,
+			.getXAxis("subx", $$.subX, $$.subXOrient, $$.xAxisTickFormat,
 				$$.xAxisTickValues, config.axis_x_tick_outer);
 
 		$$.yAxis = $$.axis
-			.getYAxis($$.y, $$.yOrient, config.axis_y_tick_format,
+			.getYAxis("y", $$.y, $$.yOrient, config.axis_y_tick_format,
 				$$.yAxisTickValues, config.axis_y_tick_outer);
 
 		$$.y2Axis = $$.axis
-			.getYAxis($$.y2, $$.y2Orient, config.axis_y2_tick_format,
+			.getYAxis("y2", $$.y2, $$.y2Orient, config.axis_y2_tick_format,
 				$$.y2AxisTickValues, config.axis_y2_tick_outer);
 
 		// update for arc