feat(bar): Intent to ship variant width

Implement bar.width.dataset feature to allow specify width for each dataset Fix #720 Close #724
naver · Jan 8, 2019 · ae46c85 · ae46c85
1 parent 4e6d39d
commit ae46c85
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 43 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -2279,6 +2279,28 @@ d3.select(".chart_area")
 					}
 				}
 			}
+		},
+		BarWidthVariant: {
+			options: {
+				data: {
+					columns: [
+						["data1", 378, 200, 175, 400, 150, 321],
+						["data2", 130, 100, 140, 200, 257, 294],
+						["data3", 190, 220, 340, 259, 368, 222]
+					],
+					type: "bar"
+				},
+				bar: {
+					width: {
+						data1: 20,
+						data2: {
+							ratio: 1,
+							max: 30
+						},
+						data3: 40
+					}
+				}
+			}
 		}
 	},
 	ChartOptions: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/spec/shape/shape.bar-spec.js b/spec/shape/shape.bar-spec.js
@@ -375,5 +375,41 @@ describe("SHAPE BAR", () => {
 				"M246.5,331.55555555555554 V221 a7.5,7.5 0 0 1 7.5,-7.5 H254 a7.5,7.5 0 0 1 7.5,7.5 V331.55555555555554z"
 			]);
 		});
+
+		it("set options bar.width for each dataset", () => {
+			args.bar.width = {
+				data1: 20,
+				data2: 40
+			};
+		});
+
+		it("each data should be rendered with different width", () => {
+			chart.data().map(v => v.id).forEach(id => {
+				chart.$.main.selectAll(`.${CLASS.bars}-${id} path`).each(function() {
+					expect(Math.round(this.getBBox().width)).to.be.equal(args.bar.width[id]);
+				});	
+			});
+		});
+
+		it("set options bar.width's ratio", () => {
+			args.bar.width.data1 = {
+				ratio: 0.5
+			};
+
+			args.bar.width.data2 = {
+				ratio: 1,
+				max: 30
+			};
+		});
+
+		it("each data should be rendered with different width", () => {
+			const expected = [25, 30];
+
+			chart.data().map(v => v.id).forEach((id, i) => {
+				chart.$.main.selectAll(`.${CLASS.bars}-${id} path`).each(function() {
+					expect(Math.round(this.getBBox().width)).to.be.equal(expected[i]);
+				});	
+			});
+		});
 	});
 });
diff --git a/src/config/Options.js b/src/config/Options.js
@@ -2622,15 +2622,23 @@ export default class Options {
 			 * @memberof Options
 			 * @type {Object}
 			 * @property {Number} [bar.padding=0] The padding pixel value between each bar.
-			 * @property {Number} [bar.radius] Set the radius of bar edge in pixel.<br>- **NOTE:** Only for non-stacking bars.
+			 * @property {Number} [bar.radius] Set the radius of bar edge in pixel.
+			 * - **NOTE:** Works only for non-stacked bar
 			 * @property {Number} [bar.radius.ratio] Set the radius ratio of bar edge in relative the bar's width.
 			 * @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] The maximum width value for ratio.
+			 * @property {Number} [bar.width.dataname] Change the width of bar for indicated dataset only.
+			 * - **NOTE:**
+			 *   - Works only for non-stacked bar
+			 *   - Bars are centered accoding its total width value
+			 * @property {Number} [bar.width.dataname.ratio=0.6] Change the width of bar chart by ratio.
+			 * @property {Number} [bar.width.dataname.max] The maximum width value for ratio.
 			 * @property {Boolean} [bar.zerobased=true] Set if min or max value will be 0 on bar chart.
 			 * @see [Demo: bar padding](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarPadding)
 			 * @see [Demo: bar radius](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarRadius)
 			 * @see [Demo: bar width](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidth)
+			 * @see [Demo: bar width variant](https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidthVariant)
 			 * @example
 			 *  bar: {
 			 *      padding: 1,
@@ -2643,12 +2651,22 @@ export default class Options {
 			 *      }
 			 *
 			 *      width: 10,
+			 *
 			 *      // or
 			 *      width: {
 			 *          ratio: 0.2,
 			 *          max: 20
 			 *      },
 			 *
+			 *      // or specify width per dataset
+			 *      width: {
+			 *          data1: 20,
+			 *          data2: {
+			 *              ratio: 0.2,
+			 *              max: 20
+			 *          }
+			 *      },
+			 *
 			 *      zerobased: false
 			 *  }
 			 */

diff --git a/src/shape/bar.js b/src/shape/bar.js
@@ -5,7 +5,7 @@
 import {mouse as d3Mouse} from "d3-selection";
 import CLASS from "../config/classes";
 import ChartInternal from "../internals/ChartInternal";
-import {extend, isValue, isNumber, getRandom, getRectSegList} from "../internals/util";
+import {extend, getRandom, getRectSegList, isNumber, isObjectType, isValue} from "../internals/util";
 
 extend(ChartInternal.prototype, {
 	initBar() {
@@ -71,12 +71,35 @@ extend(ChartInternal.prototype, {
 	getBarW(axis, barTargetsNum) {
 		const $$ = this;
 		const config = $$.config;
-		const w = isNumber(config.bar_width) ?
-			config.bar_width : barTargetsNum ?
-				(axis.tickInterval($$.getMaxDataCount()) * config.bar_width_ratio) / barTargetsNum : 0;
+		const tickInterval = axis.tickInterval($$.getMaxDataCount());
+		const isGrouped = config.data_groups.length;
+		let result;
+
+		const getWidth = id => {
+			const width = id ? config.bar_width[id] : config.bar_width;
+			const ratio = id ? width.ratio : config.bar_width_ratio;
+			const max = id ? width.max : config.bar_width_max;
+			const w = isNumber(width) ?
+				width : barTargetsNum ? (tickInterval * ratio) / barTargetsNum : 0;
+
+			return max && w > max ? max : w;
+		};
+
+		result = getWidth();
+
+		if (!isGrouped && isObjectType(config.bar_width)) {
+			result = {width: result, total: []};
+
+			$$.filterTargetsToShow($$.data.targets).forEach(v => {
+				if (config.bar_width[v.id]) {
+					result[v.id] = getWidth(v.id);
+				}
+
+				result.total.push(result[v.id] || result.width);
+			});
+		}
 
-		return config.bar_width_max && w > config.bar_width_max ?
-			config.bar_width_max : w;
+		return result;
 	},
 
 	getBars(i, id) {
@@ -163,6 +186,7 @@ extend(ChartInternal.prototype, {
 		return (d, i) => {
 			const y0 = yScale.call($$, d.id)(0);
 			const offset = barOffset(d, i) || y0; // offset is for stacked bar chart
+			const width = isNumber(barW) ? barW : barW[d.id] || barW.width;
 			const posX = barX(d);
 			let posY = barY(d);
 
@@ -179,8 +203,8 @@ extend(ChartInternal.prototype, {
 			return [
 				[posX, offset],
 				[posX, posY],
-				[posX + barW, posY],
-				[posX + barW, offset]
+				[posX + width, posY],
+				[posX + width, offset]
 			];
 		};
 	},