Implement scriptable options for polar area charts (chartjs#5976)

Author: etimberg

docs/charts/polar.md

@@ -44,15 +44,28 @@ new Chart(ctx, {
 
 The following options can be included in a polar area chart dataset to configure options for that specific dataset.
 
-| Name | Type | Description
-| ---- | ---- | -----------
-| `backgroundColor` | `Color/Color[]` | The fill color of the arcs in the dataset. See [Colors](../general/colors.md#colors).
-| `borderColor` | `Color/Color[]` | The border color of the arcs in the dataset. See [Colors](../general/colors.md#colors).
-| `borderWidth` | `Number/Number[]` | The border width of the arcs in the dataset.
-| `borderAlign` | `String/String[]` | The border alignment of the arcs in the dataset. [more...](#border-alignment)
-| `hoverBackgroundColor` | `Color/Color[]` | The fill colour of the arcs when hovered.
-| `hoverBorderColor` | `Color/Color[]` | The stroke colour of the arcs when hovered.
-| `hoverBorderWidth` | `Number/Number[]` | The stroke width of the arcs when hovered.
+| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
+| ---- | ---- | :----: | :----: | ----
+| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'`
+| [`borderAlign`](#border-alignment) | `String` | Yes | Yes | `'center'`
+| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
+| [`borderWidth`](#styling) | `Number` | Yes | Yes | `2`
+| [`data`](#data-structure) | `Number[]` | - | - | **required**
+| [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
+| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
+| [`hoverBorderWidth`](#interactions) | `Number` | Yes | Yes | `undefined`
+
+### Styling
+
+The style of each arc can be controlled with the following properties:
+
+| Name | Description
+| ---- | ----
+| `backgroundColor` | arc background color.
+| `borderColor` | arc border color.
+| `borderWidth` | arc border width (in pixels).
+
+All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options.
 
 ### Border Alignment
 
@@ -62,6 +75,18 @@ The following values are supported for `borderAlign`.
 
 When `'center'` is set, the borders of arcs next to each other will overlap. When `'inner'` is set, it is guaranteed that all the borders are not overlap.
 
+### Interactions
+
+The interaction with each arc can be controlled with the following properties:
+
+| Name | Description
+| ---- | -----------
+| `hoverBackgroundColor` | arc background color when hovered.
+| `hoverBorderColor` | arc border color when hovered.
+| `hoverBorderWidth` | arc border width when hovered (in pixels).
+
+All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options.
+
 ## Config Options
 
 These are the customisation options specific to Polar Area charts. These options are merged with the [global chart default options](#default-options), and form the options of the chart.

src/controllers/controller.doughnut.js

@@ -174,7 +174,7 @@ module.exports = DatasetController.extend({
 		}
 
 		for (i = 0, ilen = arcs.length; i < ilen; ++i) {
-			arcs[i]._options = me._resolveElementOptions(arcs[i], i, reset);
+			arcs[i]._options = me._resolveElementOptions(arcs[i], i);
 		}
 
 		chart.borderWidth = me.getMaxBorderWidth();

src/controllers/controller.polarArea.js

@@ -123,6 +123,7 @@ module.exports = DatasetController.extend({
 		var start = me.chart.options.startAngle || 0;
 		var starts = me._starts = [];
 		var angles = me._angles = [];
+		var arcs = meta.data;
 		var i, ilen, angle;
 
 		me._updateRadius();
@@ -136,9 +137,10 @@ module.exports = DatasetController.extend({
 			start += angle;
 		}
 
-		helpers.each(meta.data, function(arc, index) {
-			me.updateElement(arc, index, reset);
-		});
+		for (i = 0, ilen = arcs.length; i < ilen; ++i) {
+			arcs[i]._options = me._resolveElementOptions(arcs[i], i);
+			me.updateElement(arcs[i], i, reset);
+		}
 	},
 
 	/**
@@ -178,6 +180,7 @@ module.exports = DatasetController.extend({
 		var endAngle = startAngle + (arc.hidden ? 0 : me._angles[index]);
 
 		var resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]);
+		var options = arc._options || {};
 
 		helpers.extend(arc, {
 			// Utility
@@ -187,6 +190,10 @@ module.exports = DatasetController.extend({
 
 			// Desired view properties
 			_model: {
+				backgroundColor: options.backgroundColor,
+				borderColor: options.borderColor,
+				borderWidth: options.borderWidth,
+				borderAlign: options.borderAlign,
 				x: centerX,
 				y: centerY,
 				innerRadius: 0,
@@ -197,16 +204,6 @@ module.exports = DatasetController.extend({
 			}
 		});
 
-		// Apply border and fill style
-		var elementOpts = this.chart.options.elements.arc;
-		var custom = arc.custom || {};
-		var model = arc._model;
-
-		model.backgroundColor = resolve([custom.backgroundColor, dataset.backgroundColor, elementOpts.backgroundColor], undefined, index);
-		model.borderColor = resolve([custom.borderColor, dataset.borderColor, elementOpts.borderColor], undefined, index);
-		model.borderWidth = resolve([custom.borderWidth, dataset.borderWidth, elementOpts.borderWidth], undefined, index);
-		model.borderAlign = resolve([custom.borderAlign, dataset.borderAlign, elementOpts.borderAlign], undefined, index);
-
 		arc.pivot();
 	},
 
@@ -224,6 +221,68 @@ module.exports = DatasetController.extend({
 		return count;
 	},
 
+	/**
+	 * @protected
+	 */
+	setHoverStyle: function(arc) {
+		var model = arc._model;
+		var options = arc._options;
+		var getHoverColor = helpers.getHoverColor;
+		var valueOrDefault = helpers.valueOrDefault;
+
+		arc.$previousStyle = {
+			backgroundColor: model.backgroundColor,
+			borderColor: model.borderColor,
+			borderWidth: model.borderWidth,
+		};
+
+		model.backgroundColor = valueOrDefault(options.hoverBackgroundColor, getHoverColor(options.backgroundColor));
+		model.borderColor = valueOrDefault(options.hoverBorderColor, getHoverColor(options.borderColor));
+		model.borderWidth = valueOrDefault(options.hoverBorderWidth, options.borderWidth);
+	},
+
+	/**
+	 * @private
+	 */
+	_resolveElementOptions: function(arc, index) {
+		var me = this;
+		var chart = me.chart;
+		var dataset = me.getDataset();
+		var custom = arc.custom || {};
+		var options = chart.options.elements.arc;
+		var values = {};
+		var i, ilen, key;
+
+		// Scriptable options
+		var context = {
+			chart: chart,
+			dataIndex: index,
+			dataset: dataset,
+			datasetIndex: me.index
+		};
+
+		var keys = [
+			'backgroundColor',
+			'borderColor',
+			'borderWidth',
+			'borderAlign',
+			'hoverBackgroundColor',
+			'hoverBorderColor',
+			'hoverBorderWidth',
+		];
+
+		for (i = 0, ilen = keys.length; i < ilen; ++i) {
+			key = keys[i];
+			values[key] = resolve([
+				custom[key],
+				dataset[key],
+				options[key]
+			], context, index);
+		}
+
+		return values;
+	},
+
 	/**
 	 * @private
 	 */

src/elements/element.arc.js

@@ -92,7 +92,7 @@ module.exports = Element.extend({
 		ctx.save();
 
 		ctx.beginPath();
-		ctx.arc(vm.x, vm.y, vm.outerRadius - pixelMargin, sA, eA);
+		ctx.arc(vm.x, vm.y, Math.max(vm.outerRadius - pixelMargin, 0), sA, eA);
 		ctx.arc(vm.x, vm.y, vm.innerRadius, eA, sA, true);
 		ctx.closePath();
 

test/fixtures/controller.polarArea/backgroundColor/indexable-dataset.js

@@ -0,0 +1,35 @@
+module.exports = {
+	config: {
+		type: 'polarArea',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 2, 4, null, 6, 8],
+					backgroundColor: [
+						'#ff0000',
+						'#00ff00',
+						'#0000ff',
+						'#ffff00',
+						'#ff00ff',
+						'#000000'
+					]
+				},
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			scale: {
+				display: false
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.polarArea/backgroundColor/indexable-dataset.png

@@ -0,0 +1,39 @@
+module.exports = {
+	config: {
+		type: 'polarArea',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in element (fallback)
+					data: [0, 2, 4, null, 6, 8],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				arc: {
+					backgroundColor: [
+						'#ff88ff',
+						'#888888',
+						'#ff8800',
+						'#00ff88',
+						'#8800ff',
+						'#ffff88'
+					]
+				}
+			},
+			scale: {
+				display: false
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.polarArea/backgroundColor/indexable-element-options.js

@@ -0,0 +1,34 @@
+module.exports = {
+	config: {
+		type: 'polarArea',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 2, 4, null, 6, 8],
+					backgroundColor: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 8 ? '#ff0000'
+							: value > 6 ? '#00ff00'
+							: value > 2 ? '#0000ff'
+							: '#ff00ff';
+					}
+				},
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			scale: {
+				display: false
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.polarArea/backgroundColor/indexable-element-options.png

@@ -0,0 +1,38 @@
+module.exports = {
+	config: {
+		type: 'polarArea',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in element (fallback)
+					data: [0, 2, 4, null, 6, 8],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				arc: {
+					backgroundColor: function(ctx) {
+						var value = ctx.dataset.data[ctx.dataIndex] || 0;
+						return value > 8 ? '#ff0000'
+							: value > 6 ? '#00ff00'
+							: value > 2 ? '#0000ff'
+							: '#ff00ff';
+					}
+				}
+			},
+			scale: {
+				display: false
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.polarArea/backgroundColor/scriptable-dataset.js

@@ -0,0 +1,28 @@
+module.exports = {
+	config: {
+		type: 'polarArea',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 2, 4, null, 6, 8],
+					backgroundColor: '#ff0000'
+				},
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			scale: {
+				display: false
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};