Make line properties scriptable

docs/charts/line.md

@@ -43,15 +43,15 @@ The line chart allows a number of properties to be specified for each dataset. T
 
 | 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`
-| [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | - | - | `''`
-| [`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`
+| [`cubicInterpolationMode`](#cubicinterpolationmode) | `string` | Yes | - | `''`
+| [`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/line.html

@@ -26,13 +26,18 @@
 
 		utils.srand(110);
 
+		function getLineColor(ctx) {
+			var newColor = utils.color(ctx.datasetIndex);
+			return newColor;
+		}
+
 		function alternatePointStyles(ctx) {
 			var index = ctx.dataIndex;
 			return index % 2 === 0 ? 'circle' : 'rect';
 		}
 
 		function makeHalfAsOpaque(ctx) {
-			var c = ctx.dataset.backgroundColor;
+			var c = getLineColor(ctx);
 			return utils.transparentize(c);
 		}
 
@@ -56,9 +61,7 @@
 		var data = {
 			labels: utils.months({count: DATA_COUNT}),
 			datasets: [{
-				data: generateData(),
-				backgroundColor: '#4dc9f6',
-				borderColor: '#4dc9f6',
+				data: generateData()
 			}]
 		};
 
@@ -68,8 +71,11 @@
 			elements: {
 				line: {
 					fill: false,
+					backgroundColor: getLineColor,
+					borderColor: getLineColor,
 				},
 				point: {
+					backgroundColor: getLineColor,
 					hoverBackgroundColor: makeHalfAsOpaque,
 					radius: adjustRadiusBasedOnData,
 					pointStyle: alternatePointStyles,
@@ -87,12 +93,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: newColor,
-				borderColor: newColor
+				data: generateData()
 			});
 			chart.update();
 		}

src/controllers/controller.line.js

@@ -179,17 +179,26 @@ module.exports = DatasetController.extend({
 	_resolveLineOptions: function(element) {
 		var me = this;
 		var chart = me.chart;
-		var dataset = chart.data.datasets[me.index];
+		var datasetIndex = me.index;
+		var dataset = chart.data.datasets[datasetIndex];
 		var custom = element.custom || {};
 		var options = chart.options;
 		var elementOptions = options.elements.line;
 		var values = {};
 		var i, ilen, key;
 
+		// Scriptable options
+		var context = {
+			chart: chart,
+			dataIndex: undefined,
+			dataset: dataset,
+			datasetIndex: datasetIndex
+		};
+
 		var keys = [
 			'backgroundColor',
-			'borderWidth',
 			'borderColor',
+			'borderWidth',
 			'borderCapStyle',
 			'borderDash',
 			'borderDashOffset',
@@ -204,7 +213,7 @@ module.exports = DatasetController.extend({
 				custom[key],
 				dataset[key],
 				elementOptions[key]
-			]);
+			], context);
 		}
 
 		// The default behavior of lines is to break at null values, according

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

@@ -6,18 +6,19 @@ module.exports = {
 			datasets: [
 				{
 					// 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'
-							: '#ff00ff';
+					data: [4, 5, 10, null, -10, -5],
+					backgroundColor: function(ctx) {
+						var dataTotal = ctx.dataset.data.reduce(function(a, b) {
+							return a + b;
+						});
+						var c = dataTotal >= 0 ? '#D60000' : '#44DE28';
+
+						return c;
 					}
 				},
 				{
 					// option in element (fallback)
-					data: [4, -5, -10, null, 10, 5],
+					data: [-4, -5, -10, null, 10, 5],
 				}
 			]
 		},
@@ -26,16 +27,16 @@ module.exports = {
 			title: false,
 			elements: {
 				line: {
-					fill: false,
-				},
-				point: {
 					backgroundColor: function(ctx) {
-						var value = ctx.dataset.data[ctx.dataIndex] || 0;
-						return value > 8 ? '#ff00ff'
-							: value > 0 ? '#0000ff'
-							: value > -8 ? '#ff0000'
-							: '#00ff00';
+						var dataTotal = ctx.dataset.data.reduce(function(a, b) {
+							return a + b;
+						});
+						var c = dataTotal >= 0 ? '#D60000' : '#44DE28';
+
+						return c;
 					},
+				},
+				point: {
 					radius: 10,
 				}
 			},

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

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

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

@@ -0,0 +1,64 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [4, 5, 10, null, -10, -5],
+					borderCapStyle: function(ctx) {
+						var dataTotal = ctx.dataset.data.reduce(function(a, b) {
+							return a + b;
+						});
+						var style = dataTotal > 0 ? 'round' : 'square';
+
+						return style;
+					}
+				},
+				{
+					// option in element (fallback)
+					data: [-4, -5, -10, null, 10, 5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					borderColor: '#D60000',
+					borderWidth: 10,
+					borderCapStyle: function(ctx) {
+						var dataTotal = ctx.dataset.data.reduce(function(a, b) {
+							return a + b;
+						});
+						var style = dataTotal > 0 ? 'round' : 'square';
+
+						return style;
+					}
+				},
+				point: {
+					radius: 10,
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [
+					{
+						display: false,
+						ticks: {
+							beginAtZero: true
+						}
+					}
+				]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

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

@@ -0,0 +1,44 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			labels: [0, 1, 2, 3, 4, 5],
+			datasets: [
+				{
+					// option in dataset
+					data: [0, 5, 10, null, -10, -5],
+					borderCapStyle: 'round',
+				},
+				{
+					// option in element (fallback)
+					data: [4, -5, -10, null, 10, 5],
+				}
+			]
+		},
+		options: {
+			legend: false,
+			title: false,
+			elements: {
+				line: {
+					borderColor: '#00ff00',
+					borderCapStyle: 'butt',
+					borderWidth: 10,
+					fill: false,
+				},
+				point: {
+					radius: 10,
+				}
+			},
+			scales: {
+				xAxes: [{display: false}],
+				yAxes: [{display: false}]
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 256,
+			width: 512
+		}
+	}
+};

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

@@ -6,18 +6,19 @@ module.exports = {
 			datasets: [
 				{
 					// 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';
+					data: [4, 5, 10, null, -10, -5],
+					borderColor: function(ctx) {
+						var dataTotal = ctx.dataset.data.reduce(function(a, b) {
+							return a + b;
+						});
+						var c = dataTotal > 0 ? '#D60000' : '#44DE28';
+
+						return c;
 					}
 				},
 				{
 					// option in element (fallback)
-					data: [4, -5, -10, null, 10, 5],
+					data: [-4, -5, -10, null, 10, 5],
 				}
 			]
 		},
@@ -27,15 +28,16 @@ module.exports = {
 			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 dataTotal = ctx.dataset.data.reduce(function(a, b) {
+							return a + b;
+						});
+						var c = dataTotal > 0 ? '#D60000' : '#44DE28';
+
+						return c;
 					},
+				},
+				point: {
 					radius: 10,
 				}
 			},

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

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