Add tests and a sample for radar scriptable line options (chartjs#6263)

* Add tests and a sample for radar scriptable line options

* Improve image tests

docs/charts/radar.md

@@ -66,14 +66,14 @@ The radar chart allows a number of properties to be specified for each dataset.
 
 | Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default
 | ---- | ---- | :----: | :----: | ----
-| [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0, 0, 0, 0.1)'`
-| [`borderCapStyle`](#line-styling) | `string` | - | - | `'butt'`
-| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | - | - | `'rgba(0, 0, 0, 0.1)'`
-| [`borderDash`](#line-styling) | `number[]` | - | - | `[]`
-| [`borderDashOffset`](#line-styling) | `number` | - | - | `0.0`
-| [`borderJoinStyle`](#line-styling) | `string` | - | - | `'miter'`
-| [`borderWidth`](#line-styling) | `number` | - | - | `3`
-| [`fill`](#line-styling) | <code>boolean&#124;string</code> | - | - | `true`
+| [`backgroundColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
+| [`borderCapStyle`](#line-styling) | `string` | Yes | - | `'butt'`
+| [`borderColor`](#line-styling) | [`Color`](../general/colors.md) | Yes | - | `'rgba(0, 0, 0, 0.1)'`
+| [`borderDash`](#line-styling) | `number[]` | Yes | - | `[]`
+| [`borderDashOffset`](#line-styling) | `number` | Yes | - | `0.0`
+| [`borderJoinStyle`](#line-styling) | `string` | Yes | - | `'miter'`
+| [`borderWidth`](#line-styling) | `number` | Yes | - | `3`
+| [`fill`](#line-styling) | <code>boolean&#124;string</code> | Yes | - | `true`
 | [`label`](#general) | `string` | - | - | `''`
 | [`lineTension`](#line-styling) | `number` | - | - | `0.4`
 | [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`

samples/scriptable/radar.html

@@ -26,14 +26,21 @@
 
 		utils.srand(110);
 
+		function getLineColor(ctx) {
+			return utils.color(ctx.datasetIndex);
+		}
+
 		function alternatePointStyles(ctx) {
 			var index = ctx.dataIndex;
 			return index % 2 === 0 ? 'circle' : 'rect';
 		}
 
 		function makeHalfAsOpaque(ctx) {
-			var c = ctx.dataset.backgroundColor;
-			return utils.transparentize(c);
+			return utils.transparentize(getLineColor(ctx));
+		}
+
+		function make20PercentOpaque(ctx) {
+			return utils.transparentize(getLineColor(ctx), 0.8);
 		}
 
 		function adjustRadiusBasedOnData(ctx) {
@@ -56,17 +63,20 @@
 		var data = {
 			labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
 			datasets: [{
-				data: generateData(),
-				backgroundColor: Chart.helpers.color('#4dc9f6').alpha(0.2).rgbString(),
-				borderColor: '#4dc9f6',
+				data: generateData()
 			}]
 		};
 
 		var options = {
 			legend: false,
 			tooltips: true,
 			elements: {
+				line: {
+					backgroundColor: make20PercentOpaque,
+					borderColor: getLineColor,
+				},
 				point: {
+					backgroundColor: getLineColor,
 					hoverBackgroundColor: makeHalfAsOpaque,
 					radius: adjustRadiusBasedOnData,
 					pointStyle: alternatePointStyles,
@@ -84,12 +94,8 @@
 
 		// eslint-disable-next-line no-unused-vars
 		function addDataset() {
-			var newColor = utils.color(chart.data.datasets.length);
-
 			chart.data.datasets.push({
-				data: generateData(),
-				backgroundColor: Chart.helpers.color(newColor).alpha(0.2).rgbString(),
-				borderColor: newColor
+				data: generateData()
 			});
 			chart.update();
 		}

test/fixtures/controller.radar/backgroundColor/scriptable.js

@@ -7,17 +7,16 @@ module.exports = {
 				{
 					// option in dataset
 					data: [0, 5, 10, null, -10, -5],
-					pointBackgroundColor: function(ctx) {
-						var value = ctx.dataset.data[ctx.dataIndex] || 0;
-						return value > 8 ? '#ff0000'
-							: value > 0 ? '#00ff00'
-							: value > -8 ? '#0000ff'
+					backgroundColor: function(ctx) {
+						var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+						return index === 0 ? '#ff0000'
+							: index === 1 ? '#00ff00'
 							: '#ff00ff';
 					}
 				},
 				{
 					// option in element (fallback)
-					data: [4, -5, -10, null, 10, 5],
+					data: [4, -5, -10, null, 10, 5]
 				}
 			]
 		},
@@ -26,17 +25,16 @@ module.exports = {
 			title: false,
 			elements: {
 				line: {
-					fill: false,
+					backgroundColor: function(ctx) {
+						var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+						return index === 0 ? '#ff0000'
+							: index === 1 ? '#00ff00'
+							: '#ff00ff';
+					}
 				},
 				point: {
-					backgroundColor: function(ctx) {
-						var value = ctx.dataset.data[ctx.dataIndex] || 0;
-						return value > 8 ? '#ff00ff'
-							: value > 0 ? '#0000ff'
-							: value > -8 ? '#ff0000'
-							: '#00ff00';
-					},
-					radius: 10,
+					backgroundColor: '#0000ff',
+					radius: 10
 				}
 			},
 			scale: {

test/fixtures/controller.radar/backgroundColor/value.js

@@ -7,11 +7,11 @@ module.exports = {
 				{
 					// option in dataset
 					data: [0, 5, 10, null, -10, -5],
-					pointBackgroundColor: '#ff0000'
+					backgroundColor: '#ff0000'
 				},
 				{
 					// option in element (fallback)
-					data: [4, -5, -10, null, 10, 5],
+					data: [4, -5, -10, null, 10, 5]
 				}
 			]
 		},
@@ -20,11 +20,10 @@ module.exports = {
 			title: false,
 			elements: {
 				line: {
-					fill: false,
+					backgroundColor: '#00ff00'
 				},
 				point: {
-					backgroundColor: '#00ff00',
-					radius: 10,
+					radius: 10
 				}
 			},
 			scale: {

test/fixtures/controller.radar/borderCapStyle/scriptable.js

@@ -0,0 +1,63 @@
+module.exports = {
+	config: {
+		type: 'radar',
+		data: {
+			labels: [0, 1, 2],
+			datasets: [
+				{
+					// option in dataset
+					data: [null, 3, 3],
+					borderCapStyle: function(ctx) {
+						var index = (ctx.datasetIndex % 2);
+						return index === 0 ? 'round'
+							: index === 1 ? 'square'
+							: 'butt';
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [null, 2, 2]
+				},
+				{
+					// option in element (fallback)
+					data: [null, 1, 1]
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					borderCapStyle: function(ctx) {
+						var index = (ctx.datasetIndex % 3);
+						return index === 0 ? 'round'
+							: index === 1 ? 'square'
+							: 'butt';
+					},
+					borderColor: '#ff0000',
+					borderWidth: 32,
+					fill: false
+				},
+				point: {
+					radius: 10
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scale: {
+				display: false,
+				ticks: {
+					beginAtZero: true
+				}
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 512,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.radar/borderCapStyle/value.js

@@ -0,0 +1,54 @@
+module.exports = {
+	config: {
+		type: 'radar',
+		data: {
+			labels: [0, 1, 2],
+			datasets: [
+				{
+					// option in dataset
+					data: [null, 3, 3],
+					borderCapStyle: 'round'
+				},
+				{
+					// option in dataset
+					data: [null, 2, 2],
+					borderCapStyle: 'square'
+				},
+				{
+					// option in element (fallback)
+					data: [null, 1, 1]
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					borderCapStyle: 'butt',
+					borderColor: '#00ff00',
+					borderWidth: 32,
+					fill: false
+				},
+				point: {
+					radius: 10
+				}
+			},
+			layout: {
+				padding: 32
+			},
+			scale: {
+				display: false,
+				ticks: {
+					beginAtZero: true
+				}
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 512,
+			width: 512
+		}
+	}
+};

test/fixtures/controller.radar/borderColor/scriptable.js

@@ -7,12 +7,11 @@ module.exports = {
 				{
 					// option in dataset
 					data: [0, 5, 10, null, -10, -5],
-					pointBorderColor: function(ctx) {
-						var value = ctx.dataset.data[ctx.dataIndex] || 0;
-						return value > 8 ? '#ff0000'
-							: value > 0 ? '#00ff00'
-							: value > -8 ? '#0000ff'
-							: '#ff00ff';
+					borderColor: function(ctx) {
+						var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+						return index === 0 ? '#ff0000'
+							: index === 1 ? '#00ff00'
+							: '#0000ff';
 					}
 				},
 				{
@@ -26,17 +25,19 @@ module.exports = {
 			title: false,
 			elements: {
 				line: {
-					fill: false,
-				},
-				point: {
 					borderColor: function(ctx) {
-						var value = ctx.dataset.data[ctx.dataIndex] || 0;
-						return value > 8 ? '#ff00ff'
-							: value > 0 ? '#0000ff'
-							: value > -8 ? '#ff0000'
-							: '#00ff00';
+						var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex);
+						return index === 0 ? '#ff0000'
+							: index === 1 ? '#00ff00'
+							: '#0000ff';
 					},
-					radius: 10,
+					borderWidth: 10,
+					fill: false
+				},
+				point: {
+					borderColor: '#ff0000',
+					borderWidth: 10,
+					radius: 16
 				}
 			},
 			scale: {

test/fixtures/controller.radar/borderColor/value.js

@@ -7,11 +7,11 @@ module.exports = {
 				{
 					// option in dataset
 					data: [0, 5, 10, null, -10, -5],
-					pointBorderColor: '#ff0000'
+					borderColor: '#ff0000'
 				},
 				{
 					// option in element (fallback)
-					data: [4, -5, -10, null, 10, 5],
+					data: [4, -5, -10, null, 10, 5]
 				}
 			]
 		},
@@ -20,11 +20,12 @@ module.exports = {
 			title: false,
 			elements: {
 				line: {
-					fill: false,
+					borderColor: '#0000ff',
+					fill: false
 				},
 				point: {
-					borderColor: '#00ff00',
-					radius: 10,
+					borderColor: '#0000ff',
+					radius: 10
 				}
 			},
 			scale: {