fix(axis): fix side-effects from #717 (#740)

x and y axis should be present even they're not shown. Ref #717 Close #740
naver · Jan 21, 2019 · 4eba766 · 4eba766
1 parent f8915e2
commit 4eba766
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 51 deletions.
diff --git a/spec/internals/axis-spec.js b/spec/internals/axis-spec.js
@@ -1202,6 +1202,38 @@ describe("AXIS", function() {
 		});
 	});
 
+	describe("Axis show", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400, 150],
+						["data2", 50, 20, 10, 40, 15]
+					]
+				},
+				axis: {
+					x: {
+						show: false
+					},
+					y: {
+						show: false
+					}
+				}
+			};
+		});
+
+		it("x and y axis should be hidden", () => {
+			const main = chart.$.main;
+			const internal = chart.internal;
+
+			expect(internal.x && internal.y).to.be.ok;
+
+			["x", "y"].forEach(v => {
+				expect(main.select(`.bb-axis-${v}`).style("visibility")).to.be.equal("hidden");
+			});
+		});
+	});
+
 	describe("Multi axes", () => {
 		before(() => {
 			args = {

diff --git a/src/axis/Axis.js b/src/axis/Axis.js
@@ -30,39 +30,41 @@ export default class Axis {
 		const config = $$.config;
 		const isRotated = config.axis_rotated;
 		const main = $$.main;
+		const target = ["x", "y"];
+
+		config.axis_y2_show && target.push("y2");
 
 		$$.axesList = {};
 
-		["x", "y", "y2"].filter(id => config[`axis_${id}_show`])
-			.forEach(v => {
-				const classAxis = getAxisClassName(v);
-				const classLabel = CLASS[`axis${capitalize(v)}Label`];
-
-				$$.axes[v] = main.append("g")
-					.attr("class", classAxis)
-					.attr("clip-path", () => {
-						let res = null;
-
-						if (v === "x") {
-							res = $$.clipPathForXAxis;
-						} else if (v === "y" && config.axis_y_inner) {
-							res = $$.clipPathForYAxis;
-						}
-
-						return res;
-					})
-					.attr("transform", $$.getTranslate(v))
-					.style("visibility", config[`axis_${v}_show`] ? "visible" : "hidden");
-
-				$$.axes[v].append("text")
-					.attr("class", classLabel)
-					.attr("transform", ["rotate(-90)", null][
-						v === "x" ? +!isRotated : +isRotated
-					])
-					.style("text-anchor", this.textAnchorForXAxisLabel.bind(this));
-
-				this.generateAxes(v);
-			});
+		target.forEach(v => {
+			const classAxis = getAxisClassName(v);
+			const classLabel = CLASS[`axis${capitalize(v)}Label`];
+
+			$$.axes[v] = main.append("g")
+				.attr("class", classAxis)
+				.attr("clip-path", () => {
+					let res = null;
+
+					if (v === "x") {
+						res = $$.clipPathForXAxis;
+					} else if (v === "y" && config.axis_y_inner) {
+						res = $$.clipPathForYAxis;
+					}
+
+					return res;
+				})
+				.attr("transform", $$.getTranslate(v))
+				.style("visibility", config[`axis_${v}_show`] ? "visible" : "hidden");
+
+			$$.axes[v].append("text")
+				.attr("class", classLabel)
+				.attr("transform", ["rotate(-90)", null][
+					v === "x" ? +!isRotated : +isRotated
+				])
+				.style("text-anchor", this.textAnchorForXAxisLabel.bind(this));
+
+			this.generateAxes(v);
+		});
 	}
 
 	/**

diff --git a/src/internals/scale.js b/src/internals/scale.js
@@ -125,34 +125,33 @@ extend(ChartInternal.prototype, {
 		$$.subYMax = isRotated ? $$.width2 : 1;
 
 		// update scales
-		if (config.axis_x_show) {
-			$$.x = $$.getX($$.xMin, $$.xMax, isInit ? undefined : $$.x.orgDomain(),
-				() => $$.xAxis.tickOffset());
-			$$.subX = $$.getX($$.xMin, $$.xMax, $$.orgXDomain, d => (d % 1 ? 0 : $$.subXAxis.tickOffset()));
+		// x Axis
+		$$.x = $$.getX($$.xMin, $$.xMax, isInit ? undefined : $$.x.orgDomain(),
+			() => $$.xAxis.tickOffset());
+		$$.subX = $$.getX($$.xMin, $$.xMax, $$.orgXDomain, d => (d % 1 ? 0 : $$.subXAxis.tickOffset()));
 
-			$$.xAxisTickFormat = $$.axis.getXAxisTickFormat();
-			$$.xAxisTickValues = $$.axis.getXAxisTickValues();
+		$$.xAxisTickFormat = $$.axis.getXAxisTickFormat();
+		$$.xAxisTickValues = $$.axis.getXAxisTickValues();
 
-			$$.xAxis = $$.axis
-				.getXAxis("x", $$.x, $$.xOrient, $$.xAxisTickFormat,
-					$$.xAxisTickValues, config.axis_x_tick_outer, withoutTransitionAtInit);
+		$$.xAxis = $$.axis
+			.getXAxis("x", $$.x, $$.xOrient, $$.xAxisTickFormat,
+				$$.xAxisTickValues, config.axis_x_tick_outer, withoutTransitionAtInit);
 
-			$$.subXAxis = $$.axis
-				.getXAxis("subx", $$.subX, $$.subXOrient, $$.xAxisTickFormat,
-					$$.xAxisTickValues, config.axis_x_tick_outer);
-		}
+		$$.subXAxis = $$.axis
+			.getXAxis("subx", $$.subX, $$.subXOrient, $$.xAxisTickFormat,
+				$$.xAxisTickValues, config.axis_x_tick_outer);
 
-		if (config.axis_y_show) {
-			$$.y = $$.getY($$.yMin, $$.yMax, isInit ? config.axis_y_default : $$.y.domain());
-			$$.subY = $$.getY($$.subYMin, $$.subYMax, isInit ? config.axis_y_default : $$.subY.domain());
+		// y Axis
+		$$.y = $$.getY($$.yMin, $$.yMax, isInit ? config.axis_y_default : $$.y.domain());
+		$$.subY = $$.getY($$.subYMin, $$.subYMax, isInit ? config.axis_y_default : $$.subY.domain());
 
-			$$.yAxisTickValues = $$.axis.getYAxisTickValues();
+		$$.yAxisTickValues = $$.axis.getYAxisTickValues();
 
-			$$.yAxis = $$.axis
-				.getYAxis("y", $$.y, $$.yOrient, config.axis_y_tick_format,
-					$$.yAxisTickValues, config.axis_y_tick_outer);
-		}
+		$$.yAxis = $$.axis
+			.getYAxis("y", $$.y, $$.yOrient, config.axis_y_tick_format,
+				$$.yAxisTickValues, config.axis_y_tick_outer);
 
+		// y2 Axis
 		if (config.axis_y2_show) {
 			$$.y2 = $$.getY($$.yMin, $$.yMax, isInit ? config.axis_y2_default : $$.y2.domain());
 			$$.subY2 = $$.getY($$.subYMin, $$.subYMax, isInit ? config.axis_y2_default : $$.subY2.domain());