Bar options should not be defined on scale

Author: benmccann

docs/charts/bar.md

@@ -132,8 +132,8 @@ The interaction with each bar can be controlled with the following properties:
 
 All these values, if `undefined`, fallback to the associated [`elements.rectangle.*`](../configuration/elements.md#rectangle-configuration) options.
 
-## Scale Configuration
-The bar chart accepts the following configuration from the associated `scale` options:
+## Dataset Configuration
+The bar chart accepts the following configuration from the associated dataset options:
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
@@ -142,6 +142,32 @@ The bar chart accepts the following configuration from the associated `scale` op
 | `barThickness` | <code>number&#124;string</code> | | Manually set width of each bar in pixels. If set to `'flex'`, it computes "optimal" sample widths that globally arrange bars side by side. If not set (default), bars are equally sized based on the smallest interval. [more...](#barthickness)
 | `maxBarThickness` | `number` | | Set this to ensure that bars are not sized thicker than this.
 | `minBarLength` | `number` | | Set this to ensure that bars have a minimum length in pixels.
+
+### Example Usage
+
+```javascript
+data: {
+    datasets: [{
+        barPercentage: 0.5,
+        barThickness: 6,
+        maxBarThickness: 8,
+        minBarLength: 2,
+        data: [10, 20, 30, 40, 50, 60, 70]
+    }]
+};
+```
+### barThickness
+If this value is a number, it is applied to the width of each bar, in pixels. When this is enforced, `barPercentage` and `categoryPercentage` are ignored.
+
+If set to `'flex'`, the base sample widths are calculated automatically based on the previous and following samples so that they take the full available widths without overlap. Then, bars are sized using `barPercentage` and `categoryPercentage`. There is no gap when the percentage options are 1. This mode generates bars with different widths when data are not evenly spaced.
+
+If not set (default), the base sample widths are calculated using the smallest interval that prevents bar overlapping, and bars are sized using `barPercentage` and `categoryPercentage`. This mode always generates bars equally sized.
+
+## Scale Configuration
+The bar chart accepts the following configuration from the associated `scale` options:
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
 | `gridLines.offsetGridLines` | `boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)
 
 ### Example Usage
@@ -150,23 +176,13 @@ The bar chart accepts the following configuration from the associated `scale` op
 options = {
     scales: {
         xAxes: [{
-            barPercentage: 0.5,
-            barThickness: 6,
-            maxBarThickness: 8,
-            minBarLength: 2,
             gridLines: {
                 offsetGridLines: true
             }
         }]
     }
 };
 ```
-### barThickness
-If this value is a number, it is applied to the width of each bar, in pixels. When this is enforced, `barPercentage` and `categoryPercentage` are ignored.
-
-If set to `'flex'`, the base sample widths are calculated automatically based on the previous and following samples so that they take the full available widths without overlap. Then, bars are sized using `barPercentage` and `categoryPercentage`. There is no gap when the percentage options are 1. This mode generates bars with different widths when data are not evenly spaced.
-
-If not set (default), the base sample widths are calculated using the smallest interval that prevents bar overlapping, and bars are sized using `barPercentage` and `categoryPercentage`. This mode always generates bars equally sized.
 
 ### offsetGridLines
 If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval, which is the space between the grid lines. If false, the grid line will go right down the middle of the bars. This is set to true for a category scale in a bar chart while false for other scales or chart types by default.

src/controllers/controller.bar.js

@@ -6,6 +6,7 @@ var elements = require('../elements/index');
 var helpers = require('../helpers/index');
 
 var resolve = helpers.options.resolve;
+var valueOrDefault = helpers.valueOrDefault;
 
 defaults._set('bar', {
 	hover: {
@@ -15,8 +16,6 @@ defaults._set('bar', {
 	scales: {
 		xAxes: [{
 			type: 'category',
-			categoryPercentage: 0.8,
-			barPercentage: 0.9,
 			offset: true,
 			gridLines: {
 				offsetGridLines: true
@@ -29,6 +28,15 @@ defaults._set('bar', {
 	}
 });
 
+defaults._set('global', {
+	datasets: {
+		bar: {
+			categoryPercentage: 0.8,
+			barPercentage: 0.9
+		}
+	}
+});
+
 /**
  * Computes the "optimal" sample size to maintain bars equally sized while preventing overlap.
  * @private
@@ -116,26 +124,42 @@ function computeFlexCategoryTraits(index, ruler, options) {
 	};
 }
 
+function deprecated(value, previous, current) {
+	if (value !== undefined) {
+		console.warn(
+			'bar chart: "' + previous + '" is deprecated. ' +
+			'Please use "' + current + '" instead');
+	}
+}
+
 module.exports = DatasetController.extend({
 
 	dataElementType: elements.Rectangle,
 
 	initialize: function() {
 		var me = this;
-		var meta;
+		var meta, scaleOpts;
 
 		DatasetController.prototype.initialize.apply(me, arguments);
 
 		meta = me.getMeta();
 		meta.stack = me.getDataset().stack;
 		meta.bar = true;
+
+		scaleOpts = me._getIndexScale().options;
+		deprecated(scaleOpts.barPercentage, 'scales.[x/y]Axes.barPercentage', 'dataset.barPercentage');
+		deprecated(scaleOpts.barThickness, 'scales.[x/y]Axes.barThickness', 'dataset.barThickness');
+		deprecated(scaleOpts.categoryPercentage, 'scales.[x/y]Axes.categoryPercentage', 'dataset.categoryPercentage');
+		deprecated(me._getValueScale().options.minBarLength, 'scales.[x/y]Axes.minBarLength', 'dataset.minBarLength');
+		deprecated(scaleOpts.maxBarThickness, 'scales.[x/y]Axes.maxBarThickness', 'dataset.maxBarThickness');
 	},
 
 	update: function(reset) {
 		var me = this;
 		var rects = me.getMeta().data;
 		var i, ilen;
 
+		me._options = me._resolveControllerOptions(me.index);
 		me._ruler = me.getRuler();
 
 		for (i = 0, ilen = rects.length; i < ilen; ++i) {
@@ -260,7 +284,7 @@ module.exports = DatasetController.extend({
 			pixels.push(scale.getPixelForValue(null, i, datasetIndex));
 		}
 
-		min = helpers.isNullOrUndef(scale.options.barThickness)
+		min = helpers.isNullOrUndef(me._options.barThickness)
 			? computeMinSampleSize(scale, pixels)
 			: -1;
 
@@ -286,7 +310,7 @@ module.exports = DatasetController.extend({
 		var isHorizontal = scale.isHorizontal();
 		var datasets = chart.data.datasets;
 		var value = +scale.getRightValue(datasets[datasetIndex].data[index]);
-		var minBarLength = scale.options.minBarLength;
+		var minBarLength = me._options.minBarLength;
 		var stacked = scale.options.stacked;
 		var stack = meta.stack;
 		var start = 0;
@@ -335,15 +359,15 @@ module.exports = DatasetController.extend({
 	 */
 	calculateBarIndexPixels: function(datasetIndex, index, ruler) {
 		var me = this;
-		var options = ruler.scale.options;
+		var options = me._options;
 		var range = options.barThickness === 'flex'
 			? computeFlexCategoryTraits(index, ruler, options)
 			: computeFitCategoryTraits(index, ruler, options);
 
 		var stackIndex = me.getStackIndex(datasetIndex, me.getMeta().stack);
 		var center = range.start + (range.chunk * stackIndex) + (range.chunk / 2);
 		var size = Math.min(
-			helpers.valueOrDefault(options.maxBarThickness, Infinity),
+			valueOrDefault(options.maxBarThickness, Infinity),
 			range.chunk * range.ratio);
 
 		return {
@@ -386,7 +410,6 @@ module.exports = DatasetController.extend({
 		var custom = rectangle.custom || {};
 		var options = chart.options.elements.rectangle;
 		var values = {};
-		var i, ilen, key;
 
 		// Scriptable options
 		var context = {
@@ -403,6 +426,7 @@ module.exports = DatasetController.extend({
 			'borderWidth'
 		];
 
+		var i, ilen, key;
 		for (i = 0, ilen = keys.length; i < ilen; ++i) {
 			key = keys[i];
 			values[key] = resolve([
@@ -412,6 +436,37 @@ module.exports = DatasetController.extend({
 			], context, index);
 		}
 
+		return values;
+	},
+
+	/**
+	 * @private
+	 */
+	_resolveControllerOptions: function() {
+		var me = this;
+		var datasetOpts = me._config;
+		var indexOpts = me._getIndexScale().options;
+		var valueOpts = me._getValueScale().options;
+		var values = {};
+		var keys = [
+			'barPercentage',
+			'barThickness',
+			'categoryPercentage',
+			'maxBarThickness'
+		];
+		var i, ilen, key;
+
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
+			key = keys[i];
+			values[key] = valueOrDefault(
+				indexOpts[key],
+				datasetOpts[key]
+			);
+		}
+
+		values.minBarLength = valueOrDefault(valueOpts.minBarLength, datasetOpts.minBarLength);
+
 		return values;
 	}
+
 });

test/specs/controller.bar.tests.js

@@ -1514,9 +1514,10 @@ describe('Chart.controllers.bar', function() {
 			var chart = window.acquireChart(this.config);
 			var meta = chart.getDatasetMeta(0);
 			var xScale = chart.scales[meta.xAxisID];
+			var options = Chart.defaults.global.datasets.bar;
 
-			var categoryPercentage = xScale.options.categoryPercentage;
-			var barPercentage = xScale.options.barPercentage;
+			var categoryPercentage = options.categoryPercentage;
+			var barPercentage = options.barPercentage;
 			var stacked = xScale.options.stacked;
 
 			var totalBarWidth = 0;
@@ -1690,7 +1691,7 @@ describe('Chart.controllers.bar', function() {
 						expected = barThickness;
 					} else {
 						var scale = chart.scales.x;
-						var options = chart.options.scales.xAxes[0];
+						var options = Chart.defaults.global.datasets.bar;
 						var categoryPercentage = options.categoryPercentage;
 						var barPercentage = options.barPercentage;
 						var tickInterval = scale.getPixelForTick(1) - scale.getPixelForTick(0);
@@ -1706,6 +1707,21 @@ describe('Chart.controllers.bar', function() {
 				});
 
 				it('should correctly set bar width if maxBarThickness is specified', function() {
+					var chart = this.chart;
+					var i, ilen, meta;
+
+					chart.data.datasets[0].maxBarThickness = 10;
+					chart.data.datasets[1].maxBarThickness = 10;
+					chart.update();
+
+					for (i = 0, ilen = chart.data.datasets.length; i < ilen; ++i) {
+						meta = chart.getDatasetMeta(i);
+						expect(meta.data[0]._model.width).toBeCloseToPixel(10);
+						expect(meta.data[1]._model.width).toBeCloseToPixel(10);
+					}
+				});
+
+				it('should correctly set bar width if maxBarThickness is specified via deprecated option', function() {
 					var chart = this.chart;
 					var options = chart.options.scales.xAxes[0];
 					var i, ilen, meta;
@@ -1722,4 +1738,89 @@ describe('Chart.controllers.bar', function() {
 			});
 		});
 	});
+
+	it('minBarLength settings should be used on Y axis on bar chart', function() {
+		var minBarLength = 4;
+		var chart = window.acquireChart({
+			type: 'bar',
+			data: {
+				datasets: [{
+					minBarLength: minBarLength,
+					data: [0.05, -0.05, 10, 15, 20, 25, 30, 35]
+				}]
+			}
+		});
+
+		var data = chart.getDatasetMeta(0).data;
+
+		expect(data[0]._model.base - minBarLength).toEqual(data[0]._model.y);
+		expect(data[1]._model.base + minBarLength).toEqual(data[1]._model.y);
+	});
+
+	it('minBarLength settings should be used on X axis on horizontalBar chart', function() {
+		var minBarLength = 4;
+		var chart = window.acquireChart({
+			type: 'horizontalBar',
+			data: {
+				datasets: [{
+					minBarLength: minBarLength,
+					data: [0.05, -0.05, 10, 15, 20, 25, 30, 35]
+				}]
+			}
+		});
+
+		var data = chart.getDatasetMeta(0).data;
+
+		expect(data[0]._model.base + minBarLength).toEqual(data[0]._model.x);
+		expect(data[1]._model.base - minBarLength).toEqual(data[1]._model.x);
+	});
+
+	it('deprecated minBarLength settings should be used on Y axis on bar chart', function() {
+		var minBarLength = 4;
+		var chart = window.acquireChart({
+			type: 'bar',
+			data: {
+				datasets: [{
+					data: [0.05, -0.05, 10, 15, 20, 25, 30, 35]
+				}]
+			},
+			options: {
+				scales: {
+					yAxes: [{
+						minBarLength: minBarLength
+					}]
+				}
+			}
+		});
+
+		var data = chart.getDatasetMeta(0).data;
+
+		expect(data[0]._model.base - minBarLength).toEqual(data[0]._model.y);
+		expect(data[1]._model.base + minBarLength).toEqual(data[1]._model.y);
+	});
+
+	it('deprecated minBarLength settings should be used on X axis on horizontalBar chart', function() {
+		var minBarLength = 4;
+		var chart = window.acquireChart({
+			type: 'horizontalBar',
+			data: {
+				datasets: [{
+					data: [0.05, -0.05, 10, 15, 20, 25, 30, 35]
+				}]
+			},
+			options: {
+				scales: {
+					xAxes: [{
+						minBarLength: minBarLength
+					}]
+				}
+			}
+		});
+
+		var data = chart.getDatasetMeta(0).data;
+
+		expect(data[0]._model.base + minBarLength).toEqual(data[0]._model.x);
+		expect(data[1]._model.base - minBarLength).toEqual(data[1]._model.x);
+	});
+
 });