fix(bar): Adjust bar width regardless tick count limit

Make to use data length, instead of tick elements' size on setting bar's width Fix #166 Close #182
naver · Nov 4, 2017 · 8f92d3e · 8f92d3e
1 parent cf49d71
commit 8f92d3e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 15 deletions.
diff --git a/spec/shape.bar-spec.js b/spec/shape.bar-spec.js
@@ -44,6 +44,8 @@ describe("SHAPE BAR", () => {
 		});
 
 		describe("with timeseries data", () => {
+			let barWidth = 0;
+
 			before(() => {
 				args = {
 					data: {
@@ -54,13 +56,13 @@ describe("SHAPE BAR", () => {
 							["data2", 50, 20, 10, 40, 15, 25],
 						],
 						groups: [
-							["data1", "data2"],
+							["data1", "data2"]
 						],
 						type: "bar"
 					},
 					axis: {
 						x: {
-							type: "timeseries",
+							type: "timeseries"
 						}
 					}
 				};
@@ -73,9 +75,27 @@ describe("SHAPE BAR", () => {
 					const rect = d3.select(this).node()
 						.getBoundingClientRect();
 
+					// Get bar width for the next test
+					if (i === 0) {
+						barWidth = rect.width;
+					}
+
 					expect(rect.bottom).to.be.closeTo(expectedBottom[i], 1); // change -1 => 1
 				});
 			});
+
+			it("set options axis.x.tick.count", () => {
+				args.axis.x.tick = {
+					count: 3
+				};
+			});
+
+			it("check for bar width regardless tick count limit", () => {
+				const width = chart.internal.main.select(".bb-bars-data1 .bb-bar").node()
+					.getBoundingClientRect().width;
+
+				expect(width).to.be.equal(barWidth);
+			});
 		});
 
 		describe("with category data", () => {

diff --git a/src/axis/bb.axis.js b/src/axis/bb.axis.js
@@ -466,7 +466,13 @@ export default function(params = {}) {
 		return tickOffset;
 	};
 
-	axis.tickInterval = function() {
+	/**
+	 * Get tick interval count
+	 * @private
+	 * @param {Number} size Total data size
+	 * @return {number}
+	 */
+	axis.tickInterval = function(size) {
 		let interval;
 
 		if (params.isCategory) {
@@ -476,7 +482,7 @@ export default function(params = {}) {
 				.node()
 				.getTotalLength() - outerTickSize * 2;
 
-			interval = length / axis.g.selectAll("line").size();
+			interval = length / (size || axis.g.selectAll("line").size());
 		}
 
 		return interval === Infinity ? 0 : interval;

diff --git a/src/internals/shape.bar.js b/src/internals/shape.bar.js
@@ -73,9 +73,12 @@ extend(ChartInternal.prototype, {
 	getBarW(axis, barTargetsNum) {
 		const $$ = this;
 		const config = $$.config;
-		const w = typeof config.bar_width === "number" ? config.bar_width : barTargetsNum ? (axis.tickInterval() * config.bar_width_ratio) / barTargetsNum : 0;
+		const w = typeof config.bar_width === "number" ?
+			config.bar_width : barTargetsNum ?
+				(axis.tickInterval($$.getMaxDataCount()) * config.bar_width_ratio) / barTargetsNum : 0;
 
-		return config.bar_width_max && w > config.bar_width_max ? config.bar_width_max : w;
+		return config.bar_width_max && w > config.bar_width_max ?
+			config.bar_width_max : w;
 	},
 
 	getBars(i, id) {
@@ -111,14 +114,12 @@ extend(ChartInternal.prototype, {
 
 			// switch points if axis is rotated, not applicable for sub chart
 			const indexX = config.axis_rotated ? 1 : 0;
-			const indexY = config.axis_rotated ? 0 : 1;
+			const indexY = +!indexX;
 
-			const path = `M ${points[0][indexX]},${points[0][indexY]}
-			L ${points[1][indexX]},${points[1][indexY]}
-			L ${points[2][indexX]},${points[2][indexY]}
-			L ${points[3][indexX]},${points[3][indexY]} z`;
-
-			return path;
+			return `M ${points[0][indexX]},${points[0][indexY]}
+				L ${points[1][indexX]},${points[1][indexY]}
+				L ${points[2][indexX]},${points[2][indexY]}
+				L ${points[3][indexX]},${points[3][indexY]} z`;
 		};
 	},
 
@@ -139,9 +140,12 @@ extend(ChartInternal.prototype, {
 			let posY = barY(d);
 
 			// fix posY not to overflow opposite quadrant
-			if ($$.config.axis_rotated) {
-				if ((d.value > 0 && posY < y0) || (d.value < 0 && y0 < posY)) { posY = y0; }
+			if ($$.config.axis_rotated && (
+				(d.value > 0 && posY < y0) || (d.value < 0 && y0 < posY)
+			)) {
+				posY = y0;
 			}
+
 			// 4 points that make a bar
 			return [
 				[posX, offset],