fix(axis): Fix on axis width sizing

Make sure to measure size with the final rendered axis tick text. Fix #920
naver · Jun 5, 2019 · 10f27e5 · 10f27e5
1 parent 2f5db62
commit 10f27e5
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/spec/internals/axis-spec.js b/spec/internals/axis-spec.js
@@ -71,7 +71,6 @@ describe("AXIS", function() {
 
 			expect(ticksSize).to.be.equal(3);
 		});
-
 	});
 
 	describe("axis.y.tick.values", () => {
@@ -1501,4 +1500,32 @@ describe("AXIS", function() {
 			checkY2Axes(true);
 		});
 	});
+
+	describe("y Axis size", () => {
+		before(() => {
+			args = {
+				data: {
+				  columns: [
+						  ["sample", 30, 200, 100, 400, 150, 2500]
+				  ]
+				},
+				axis: {
+				  y: {
+					tick: {
+					  format: function(x) { return d3.format("$,")(x); },
+					  count: 12
+					},
+				  }
+				}
+			};
+		});
+
+		it("check y Axis width sizing", () => {
+			const axisY = chart.$.main.select(`.${CLASS.axisY}`);
+
+			expect(axisY.node().getBoundingClientRect().width).to.be.equal(
+				axisY.select(".tick:nth-child(12)").node().getBoundingClientRect().width
+			);
+		});
+	});
 });
diff --git a/src/axis/Axis.js b/src/axis/Axis.js
@@ -9,7 +9,7 @@ import {
 	axisRight as d3AxisRight
 } from "d3-axis";
 import CLASS from "../config/classes";
-import {capitalize, isFunction, isString, isValue, isEmpty, isNumber, isObjectType} from "../internals/util";
+import {capitalize, isArray, isFunction, isString, isValue, isEmpty, isNumber, isObjectType} from "../internals/util";
 import AxisRenderer from "./AxisRenderer";
 
 const isHorizontal = ($$, forHorizontal) => {
@@ -527,16 +527,28 @@ export default class Axis {
 			const getFrom = isYAxis ? "getY" : "getX";
 
 			const scale = $$[id].copy().domain($$[`${getFrom}Domain`](targetsToShow, id));
-			const domain = scale.domain().toString();
+			const domain = scale.domain();
 
 			// do not compute if domain is same
-			if (currentTickMax.domain === domain) {
+			if (isArray(currentTickMax.domain) && currentTickMax.domain.every((v, i) => v === domain[i])) {
 				return currentTickMax.size;
 			} else {
 				currentTickMax.domain = domain;
 			}
 
 			const axis = this[`${getFrom}Axis`](id, scale, false, false, true);
+			const tickCount = config[`axis_${id}_tick_count`];
+
+			// Make to generate the final tick text to be rendered
+			// https://github.com/naver/billboard.js/issues/920
+			if (tickCount) {
+				axis.tickValues(
+					this.generateTickValues(
+						domain,
+						tickCount,
+						isYAxis ? $$.isTimeSeriesY() : $$.isTimeSeries()
+					));
+			}
 
 			!isYAxis && this.updateXAxisTickValues(targetsToShow, axis);