From ae46c855be389d15c68d456a792abe02eacf5557 Mon Sep 17 00:00:00 2001 From: Jae Sung Park Date: Tue, 8 Jan 2019 16:50:11 +0900 Subject: [PATCH] feat(bar): Intent to ship variant width Implement bar.width.dataset feature to allow specify width for each dataset Fix #720 Close #724 --- demo/demo.js | 22 ++++++++++++++ package-lock.json | 58 ++++++++++++++++++------------------ spec/shape/shape.bar-spec.js | 36 ++++++++++++++++++++++ src/config/Options.js | 20 ++++++++++++- src/shape/bar.js | 40 ++++++++++++++++++++----- src/shape/shape.js | 21 ++++++++++--- types/options.d.ts | 10 +++++++ webpack.config.js | 6 +++- 8 files changed, 170 insertions(+), 43 deletions(-) diff --git a/demo/demo.js b/demo/demo.js index eb16f8c8d..dbb8b3db4 100644 --- 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 index 2719e76f3..5d43a0f0d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1197,12 +1197,6 @@ "lodash.get": "^4.4.2" } }, - "@types/parsimmon": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/@types/parsimmon/-/parsimmon-1.10.0.tgz", - "integrity": "sha512-bsTIJFVQv7jnvNiC42ld2pQW2KRI+pAG243L+iATvqzy3X6+NH1obz2itRKDZZ8VVhN3wjwYax/VBGCcXzgTqQ==", - "dev": true - }, "@webassemblyjs/ast": { "version": "1.7.11", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz", @@ -4346,15 +4340,6 @@ } } }, - "definitelytyped-header-parser": { - "version": "github:Microsoft/definitelytyped-header-parser#e0561530379dfa01324a89936b75d90b20df9bd2", - "from": "github:Microsoft/definitelytyped-header-parser#production", - "dev": true, - "requires": { - "@types/parsimmon": "^1.3.0", - "parsimmon": "^1.2.0" - } - }, "del": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/del/-/del-3.0.0.tgz", @@ -4548,13 +4533,20 @@ "integrity": "sha512-ph4GXLw3HYzlQMJOFcpCqWHuL3MxJ/344OR7wn0wlQGchQGTIVNsSUl8iKEMatpy2geNMysgA9fQa6xVhHOkTQ==", "dev": true, "requires": { - "definitelytyped-header-parser": "github:Microsoft/definitelytyped-header-parser#e0561530379dfa01324a89936b75d90b20df9bd2", "fs-extra": "^6.0.1", "strip-json-comments": "^2.0.1", "tslint": "^5.12.0", "typescript": "^3.3.0-dev.20181220" }, "dependencies": { + "definitelytyped-header-parser": { + "version": "github:Microsoft/definitelytyped-header-parser#e0561530379dfa01324a89936b75d90b20df9bd2", + "from": "github:Microsoft/definitelytyped-header-parser#e0561530379dfa01324a89936b75d90b20df9bd2", + "requires": { + "@types/parsimmon": "^1.3.0", + "parsimmon": "^1.2.0" + } + }, "fs-extra": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-6.0.1.tgz", @@ -5996,12 +5988,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6016,17 +6010,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -6143,7 +6140,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -6155,6 +6153,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6169,6 +6168,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6176,12 +6176,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -6200,6 +6202,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -6280,7 +6283,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -6292,6 +6296,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -6413,6 +6418,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -9852,12 +9858,6 @@ "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=", "dev": true }, - "parsimmon": { - "version": "1.12.0", - "resolved": "https://registry.npmjs.org/parsimmon/-/parsimmon-1.12.0.tgz", - "integrity": "sha512-uC/BjuSfb4jfaWajKCp1mVncXXq+V1twbcYChbTxN3GM7fn+8XoHwUdvUz+PTaFtDSCRQxU8+Rnh+iMhAkVwdw==", - "dev": true - }, "pascalcase": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz", diff --git a/spec/shape/shape.bar-spec.js b/spec/shape/shape.bar-spec.js index fd81c6af2..5b4c81c28 100644 --- 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 index f8b24d0f5..87eb933b9 100644 --- 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.
- **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 index 361328e4e..f214dfc14 100644 --- 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] ]; }; }, diff --git a/src/shape/shape.js b/src/shape/shape.js index cc62fdcb5..03ea0cc1d 100644 --- a/src/shape/shape.js +++ b/src/shape/shape.js @@ -25,7 +25,7 @@ import { import {select as d3Select} from "d3-selection"; import CLASS from "../config/classes"; import ChartInternal from "../internals/ChartInternal"; -import {isUndefined, extend} from "../internals/util"; +import {extend, isObjectType, isNumber, isUndefined, notEmpty} from "../internals/util"; extend(ChartInternal.prototype, { getShapeIndices(typeFilter) { @@ -64,13 +64,26 @@ extend(ChartInternal.prototype, { const $$ = this; const scale = isSub ? $$.subX : ($$.zoomScale || $$.x); const barPadding = $$.config.bar_padding; + const sum = (p, c) => p + c; + const halfWidth = isObjectType(offset) && offset.total.length ? offset.total.reduce(sum) / 2 : 0; 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; + let x = 0; - // adjust x position for bar.padding option + if (notEmpty(d.x)) { + const xPos = scale(d.x); + + if (halfWidth) { + x = xPos - (offset[d.id] || offset.width) + + offset.total.slice(0, index + 1).reduce(sum) - + halfWidth; + } else { + x = xPos - (isNumber(offset) ? offset : offset.width) * (targetsNum / 2 - index); + } + } + + // adjust x position for bar.padding optionq if (offset && x && targetsNum > 1 && barPadding) { if (index) { x += barPadding * index; diff --git a/types/options.d.ts b/types/options.d.ts index ffbd2fb6b..1f1dce9f9 100644 --- a/types/options.d.ts +++ b/types/options.d.ts @@ -219,8 +219,18 @@ export interface ChartOptions { * Set max width of each bar */ max?: number; + } | { + /** + * Set the width option for specific dataset + */ + [key: string]: { + ratio: number; + max: number; + } }; + headers?: Array<{ [key: string]: string; }>; + /** * Set if min or max value will be 0 on bar chart. */ diff --git a/webpack.config.js b/webpack.config.js index b610b77b9..20548a8a7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -60,7 +60,11 @@ const config = { new WebpackBar() ], stats: "minimal", - mode: "none" + mode: "none", + devServer: { + // https://github.com/webpack/webpack-dev-server/issues/1604 + disableHostCheck: true + } }; module.exports = () => {