feat(option): Intent to ship bar.padding option (#370)

Add padding between bars Fix #335 Close #370
naver · Apr 10, 2018 · 6671e63 · 6671e63
1 parent 67c8305
commit 6671e63
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 9 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -1960,6 +1960,42 @@ var demos = {
 			}
 		]
 	},
+	BarChartOptions: {
+		Width: {
+			options: {
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400, 150, 250],
+						["data2", 130, 100, 140, 200, 150, 50],
+						["data3", 130, 100, 140, 200, 150, 50]
+					],
+					type: "bar"
+				},
+				bar: {
+					width: {
+						ratio: 0.9,
+						max: 30
+					}
+				}
+			}
+		},
+		Padding: {
+			options: {
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400, 150, 250],
+						["data2", 130, 250, 140, 200, 150, 50],
+						["data3", 100, 200, 340, 300, 250, 250],
+						["data4", 80, 230, 240, 100, 350, 150]
+					],
+					type: "bar"
+				},
+				bar: {
+					padding: 3
+				}
+			}
+		}
+	},
 	ChartOptions: {
 		ChartSize: {
 			options: {

diff --git a/spec/shape/shape.bar-spec.js b/spec/shape/shape.bar-spec.js
@@ -291,4 +291,43 @@ describe("SHAPE BAR", () => {
 			expect(() => util.fireEvent(bar, "click")).to.not.throw();
 		});
 	});
+
+	describe("options", () => {
+		const width = 15;
+		const padding = 3;
+
+		before(() => {
+			args = {
+				data: {
+					type: "bar",
+					columns: [
+						["data1", 30, 200, 100, 400, 150, 250],
+						["data2", 130, 340, 200, 500, 250, 350]
+					]
+				},
+				bar: {
+					width: width,
+					padding: padding
+				}
+			};
+		});
+
+		it(`bar width should be ${width}px`, () => {
+			const internal = chart.internal;
+			const barWidth = internal.main.select(`.${CLASS.chartBar} path.${CLASS.shape}`)
+				.node().getBBox().width;
+
+			expect(barWidth).to.be.equal(width);
+		});
+
+		it(`bar padding should be ${padding}px`, () => {
+			const internal = chart.internal;
+			const bar1 = internal.main.select(`.${CLASS.chartBar}.${CLASS.target}-data1 path.${CLASS.shape}`)
+				.node().getBBox().x + width;
+			const bar2 = internal.main.select(`.${CLASS.chartBar}.${CLASS.target}-data2 path.${CLASS.shape}`)
+				.node().getBBox().x;
+
+			expect(bar2 - bar1).to.be.equal(padding);
+		});
+	});
 });
diff --git a/src/axis/Axis.js b/src/axis/Axis.js
@@ -547,13 +547,15 @@ export default class Axis {
 				start = values[0];
 				end = values[values.length - 1];
 				interval = (end - start) / (count + 1);
+
 				// re-construct unique values
 				tickValues = [start];
 
 				for (i = 0; i < count; i++) {
 					tickValue = +start + interval * (i + 1);
 					tickValues.push(forTimeSeries ? new Date(tickValue) : tickValue);
 				}
+
 				tickValues.push(end);
 			}
 		}

diff --git a/src/config/Options.js b/src/config/Options.js
@@ -2257,23 +2257,26 @@ export default class Options {
 			 * @type {Object}
 			 * @property {Number} [bar.width] Change the width of bar chart.
 			 * @property {Number} [bar.width.ratio=0.6] Change the width of bar chart by ratio.
-			 * @property {Number} [bar.width.max]
+			 * @property {Number} [bar.width.max] The maximum width value for ratio.
 			 * @property {Boolean} [bar.zerobased=true] Set if min or max value will be 0 on bar chart.
+			 * @property {Boolean} [bar.padding=0] The padding pixel value between each bar.
 			 * @example
 			 *  bar: {
 			 *      width: 10,
 			 *      // or
 			 *      width: {
 			 *          ratio: 0.2,
-			 *          max: 200
+			 *          max: 20
 			 *      },
-			 *      zerobased: false
+			 *      zerobased: false,
+			 *      padding: 1
 			 *  }
 			 */
 			bar_width: undefined,
 			bar_width_ratio: 0.6,
 			bar_width_max: undefined,
 			bar_zerobased: true,
+			bar_padding: 0,
 
 			/**
 			 * Set bubble options

diff --git a/src/shape/shape.js b/src/shape/shape.js
@@ -33,36 +33,55 @@ extend(ChartInternal.prototype, {
 		const config = $$.config;
 		const indices = {};
 		let i = 0;
-		let j;
-		let k;
 
 		$$.filterTargetsToShow($$.data.targets.filter(typeFilter, $$)).forEach(d => {
-			for (j = 0; j < config.data_groups.length; j++) {
+			for (let j = 0; j < config.data_groups.length; j++) {
 				if (config.data_groups[j].indexOf(d.id) < 0) {
 					continue;
 				}
 
-				for (k = 0; k < config.data_groups[j].length; k++) {
+				for (let k = 0; k < config.data_groups[j].length; k++) {
 					if (config.data_groups[j][k] in indices) {
 						indices[d.id] = indices[config.data_groups[j][k]];
 						break;
 					}
 				}
 			}
-			if (isUndefined(indices[d.id])) { indices[d.id] = i++; }
+
+			if (isUndefined(indices[d.id])) {
+				indices[d.id] = i++;
+			}
 		});
+
 		indices.__max__ = i - 1;
+
 		return indices;
 	},
 
 	getShapeX(offset, targetsNum, indices, isSub) {
 		const $$ = this;
 		const scale = isSub ? $$.subX : ($$.zoomScale ? $$.zoomScale : $$.x);
+		const barPadding = $$.config.bar_padding;
 
 		return d => {
 			const index = d.id in indices ? indices[d.id] : 0;
+			let x = d.x || d.x === 0 ?
+				scale(d.x) - offset * (targetsNum / 2 - index) : 0;
+
+			// adjust x position for bar.padding option
+			if (offset && x && targetsNum > 1 && barPadding) {
+				if (index) {
+					x += barPadding * index;
+				}
+
+				if (targetsNum > 2) {
+					x -= (targetsNum - 1) * barPadding / 2;
+				} else if (targetsNum === 2) {
+					x -= barPadding / 2;
+				}
+			}
 
-			return d.x || d.x === 0 ? scale(d.x) - offset * (targetsNum / 2 - index) : 0;
+			return x;
 		};
 	},