fix(axis): Adjust axes range

Adjust range at the time of generation & time of update. Fix #859
naver · May 3, 2019 · 0130519 · 0130519
1 parent 1668463
commit 0130519
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/spec/internals/axis-spec.js b/spec/internals/axis-spec.js
@@ -1349,9 +1349,7 @@ describe("AXIS", function() {
 							{
 								tick: {
 									outer: false,
-									format: function(x) {
-									  return x + "%";
-									},
+									format: x => `${x}%`,
 									count: 2
 								}
 							}
@@ -1371,6 +1369,13 @@ describe("AXIS", function() {
 			}
 		});
 
+		const checkRange = id => {
+			const range = chart.internal[id].range();
+			const axisRange = chart.internal.axesList[id][0].scale().range();
+
+			return range.every((v, i) => v === axisRange[i]);
+		};
+
 		const checkXAxes = rotated => {
 			const main = chart.$.main;
 			const xAxisY = util.parseNum(main.select(`.${CLASS.axis}-x`).attr("transform"));
@@ -1382,6 +1387,8 @@ describe("AXIS", function() {
 			axis1.selectAll(".tick text").each(function() {
 				expect(+this.textContent).to.be.equal(tickValue += 0.5);
 			});
+
+			expect(checkRange("x")).to.be.true;
 		};
 
 		const checkYAxes = rotated => {
@@ -1408,6 +1415,8 @@ describe("AXIS", function() {
 					expect(this.textContent).to.be.equal(expectedTickValue[i][j]);
 				});
 			});
+
+			expect(checkRange("y")).to.be.true;
 		};
 
 		const checkY2Axes = rotated => {
@@ -1422,6 +1431,8 @@ describe("AXIS", function() {
 			axis1.selectAll(".tick text").each(function(d, i) {
 				expect(+this.textContent).to.be.equal(expectedTickValues[i]);
 			});
+
+			expect(checkRange("y2")).to.be.true;
 		};
 
 		it("check for axes generation", () => {

diff --git a/src/axis/Axis.js b/src/axis/Axis.js
@@ -133,7 +133,17 @@ export default class Axis {
 		const config = $$.config;
 
 		Object.keys($$.axesList).forEach(id => {
+			const range = $$[id].range();
+
 			$$.axesList[id].forEach((v, i) => {
+				const axisRange = v.scale().range();
+
+				// adjust range value with the current
+				// https://github.com/naver/billboard.js/issues/859
+				if (!range.every((v, i) => v === axisRange[i])) {
+					v.scale().range(range);
+				}
+
 				const className = `${getAxisClassName(id)}-${i + 1}`;
 				let g = $$.main.select(`.${className.replace(/\s/, ".")}`);
 

diff --git a/src/internals/size.js b/src/internals/size.js
@@ -117,8 +117,7 @@ extend(ChartInternal.prototype, {
 		} else if (config.axis_rotated) {
 			padding = defaultPadding + legendWidthOnRight;
 		} else if (!config.axis_y2_show || config.axis_y2_inner) { // && !config.axis_rotated
-			padding = 2 +
-				legendWidthOnRight +
+			padding = 2 + legendWidthOnRight +
 				($$.axis.getY2AxisLabelPosition().isOuter ? 20 : 0);
 		} else {
 			padding = ceil10(axisWidth) + legendWidthOnRight;
@@ -181,8 +180,7 @@ extend(ChartInternal.prototype, {
 		const svgRect = leftAxis && hasLeftAxisRect ? leftAxis.getBoundingClientRect() : {right: 0};
 		const chartRect = $$.selectChart.node().getBoundingClientRect();
 		const hasArc = $$.hasArcType();
-		const svgLeft = svgRect.right -
-			chartRect.left -
+		const svgLeft = svgRect.right - chartRect.left -
 			(hasArc ? 0 : $$.getCurrentPaddingLeft(withoutRecompute));
 
 		return svgLeft > 0 ? svgLeft : 0;