diff --git a/docs/charts/line.md b/docs/charts/line.md index 557cc8e9b03..6b7385d74c0 100644 --- a/docs/charts/line.md +++ b/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) | boolean|string | - | - | `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) | boolean|string | Yes | - | `true` | [`label`](#general) | `string` | - | - | `''` | [`lineTension`](#line-styling) | `number` | - | - | `0.4` | [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` diff --git a/samples/scriptable/line.html b/samples/scriptable/line.html index eb5a940d79d..880f0e6fb49 100644 --- a/samples/scriptable/line.html +++ b/samples/scriptable/line.html @@ -26,14 +26,17 @@ 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 adjustRadiusBasedOnData(ctx) { @@ -56,9 +59,7 @@ var data = { labels: utils.months({count: DATA_COUNT}), datasets: [{ - data: generateData(), - backgroundColor: '#4dc9f6', - borderColor: '#4dc9f6', + data: generateData() }] }; @@ -68,8 +69,11 @@ elements: { line: { fill: false, + backgroundColor: getLineColor, + borderColor: getLineColor, }, point: { + backgroundColor: getLineColor, hoverBackgroundColor: makeHalfAsOpaque, radius: adjustRadiusBasedOnData, pointStyle: alternatePointStyles, @@ -87,12 +91,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(); } diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index 49665e2299a..8bc14c3decd 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -179,23 +179,31 @@ 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, + dataset: dataset, + datasetIndex: datasetIndex + }; + var keys = [ 'backgroundColor', - 'borderWidth', - 'borderColor', 'borderCapStyle', + 'borderColor', 'borderDash', 'borderDashOffset', 'borderJoinStyle', - 'fill', - 'cubicInterpolationMode' + 'borderWidth', + 'cubicInterpolationMode', + 'fill' ]; for (i = 0, ilen = keys.length; i < ilen; ++i) { @@ -204,7 +212,7 @@ module.exports = DatasetController.extend({ custom[key], dataset[key], elementOptions[key] - ]); + ], context); } // The default behavior of lines is to break at null values, according diff --git a/test/fixtures/controller.line/backgroundColor/scriptable.js b/test/fixtures/controller.line/backgroundColor/scriptable.js index 6ede2cb0c15..2171e6696b9 100644 --- a/test/fixtures/controller.line/backgroundColor/scriptable.js +++ b/test/fixtures/controller.line/backgroundColor/scriptable.js @@ -6,18 +6,17 @@ 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' + data: [4, 5, 10, null, -10, -5], + 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,19 +25,21 @@ 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 } }, + layout: { + padding: 32 + }, scales: { xAxes: [{display: false}], yAxes: [ diff --git a/test/fixtures/controller.line/backgroundColor/scriptable.png b/test/fixtures/controller.line/backgroundColor/scriptable.png index c366b6cfadf..00f11aa55b0 100644 Binary files a/test/fixtures/controller.line/backgroundColor/scriptable.png and b/test/fixtures/controller.line/backgroundColor/scriptable.png differ diff --git a/test/fixtures/controller.line/backgroundColor/value.js b/test/fixtures/controller.line/backgroundColor/value.js index a096cae00ea..8e632f11c2f 100644 --- a/test/fixtures/controller.line/backgroundColor/value.js +++ b/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,13 +20,15 @@ module.exports = { title: false, elements: { line: { - fill: false, + backgroundColor: '#00ff00' }, point: { - backgroundColor: '#00ff00', - radius: 10, + radius: 10 } }, + layout: { + padding: 32 + }, scales: { xAxes: [{display: false}], yAxes: [{display: false}] diff --git a/test/fixtures/controller.line/backgroundColor/value.png b/test/fixtures/controller.line/backgroundColor/value.png index 88c75c89771..4e31ae42b28 100644 Binary files a/test/fixtures/controller.line/backgroundColor/value.png and b/test/fixtures/controller.line/backgroundColor/value.png differ diff --git a/test/fixtures/controller.line/borderCapStyle/scriptable.js b/test/fixtures/controller.line/borderCapStyle/scriptable.js new file mode 100644 index 00000000000..ee56376fcea --- /dev/null +++ b/test/fixtures/controller.line/borderCapStyle/scriptable.js @@ -0,0 +1,68 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3], + 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 + }, + scales: { + xAxes: [{display: false}], + yAxes: [ + { + display: false, + ticks: { + beginAtZero: true + } + } + ] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/borderCapStyle/scriptable.png b/test/fixtures/controller.line/borderCapStyle/scriptable.png new file mode 100644 index 00000000000..2b83b9b96db Binary files /dev/null and b/test/fixtures/controller.line/borderCapStyle/scriptable.png differ diff --git a/test/fixtures/controller.line/borderCapStyle/value.js b/test/fixtures/controller.line/borderCapStyle/value.js new file mode 100644 index 00000000000..d428462467f --- /dev/null +++ b/test/fixtures/controller.line/borderCapStyle/value.js @@ -0,0 +1,52 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3], + 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 + }, + scales: { + xAxes: [{display: false}], + yAxes: [{display: false}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/borderCapStyle/value.png b/test/fixtures/controller.line/borderCapStyle/value.png new file mode 100644 index 00000000000..20f3116bb32 Binary files /dev/null and b/test/fixtures/controller.line/borderCapStyle/value.png differ diff --git a/test/fixtures/controller.line/borderColor/scriptable.js b/test/fixtures/controller.line/borderColor/scriptable.js index 04b12360647..e767799ead7 100644 --- a/test/fixtures/controller.line/borderColor/scriptable.js +++ b/test/fixtures/controller.line/borderColor/scriptable.js @@ -6,18 +6,17 @@ 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 index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex); + return index === 0 ? '#ff0000' + : index === 1 ? '#00ff00' + : '#0000ff'; } }, { // option in element (fallback) - data: [4, -5, -10, null, 10, 5], + data: [-4, -5, -10, null, 10, 5] } ] }, @@ -26,19 +25,24 @@ 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 } }, + layout: { + padding: 32 + }, scales: { xAxes: [{display: false}], yAxes: [ diff --git a/test/fixtures/controller.line/borderColor/scriptable.png b/test/fixtures/controller.line/borderColor/scriptable.png index 6366828ecfc..5df5acb7f76 100644 Binary files a/test/fixtures/controller.line/borderColor/scriptable.png and b/test/fixtures/controller.line/borderColor/scriptable.png differ diff --git a/test/fixtures/controller.line/borderColor/value.js b/test/fixtures/controller.line/borderColor/value.js index 84e4d6adfb9..2b43635490c 100644 --- a/test/fixtures/controller.line/borderColor/value.js +++ b/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,13 +20,17 @@ module.exports = { title: false, elements: { line: { + borderColor: '#0000ff', fill: false, }, point: { - borderColor: '#00ff00', + borderColor: '#0000ff', radius: 10, } }, + layout: { + padding: 32 + }, scales: { xAxes: [{display: false}], yAxes: [{display: false}] diff --git a/test/fixtures/controller.line/borderColor/value.png b/test/fixtures/controller.line/borderColor/value.png index 6bfde92f541..53a2dafb048 100644 Binary files a/test/fixtures/controller.line/borderColor/value.png and b/test/fixtures/controller.line/borderColor/value.png differ diff --git a/test/fixtures/controller.line/borderDash/scriptable.js b/test/fixtures/controller.line/borderDash/scriptable.js new file mode 100644 index 00000000000..4a5def54c7c --- /dev/null +++ b/test/fixtures/controller.line/borderDash/scriptable.js @@ -0,0 +1,56 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [4, 5, 10, null, -10, -5], + borderDash: function(ctx) { + return ctx.datasetIndex === 0 ? [5] : [10]; + } + }, + { + // option in element (fallback) + data: [-4, -5, -10, null, 10, 5] + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + borderColor: '#00ff00', + borderDash: function(ctx) { + return ctx.datasetIndex === 0 ? [5] : [10]; + } + }, + point: { + radius: 10, + } + }, + layout: { + padding: 32 + }, + scales: { + xAxes: [{display: false}], + yAxes: [ + { + display: false, + ticks: { + beginAtZero: true + } + } + ] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/borderDash/scriptable.png b/test/fixtures/controller.line/borderDash/scriptable.png new file mode 100644 index 00000000000..aca33c7d287 Binary files /dev/null and b/test/fixtures/controller.line/borderDash/scriptable.png differ diff --git a/test/fixtures/controller.line/borderDash/value.js b/test/fixtures/controller.line/borderDash/value.js new file mode 100644 index 00000000000..3e6404f0d49 --- /dev/null +++ b/test/fixtures/controller.line/borderDash/value.js @@ -0,0 +1,47 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 5, 10, null, -10, -5], + borderColor: '#ff0000', + borderDash: [5] + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + borderColor: '#00ff00', + borderDash: [10], + fill: false, + }, + point: { + radius: 10, + } + }, + layout: { + padding: 32 + }, + scales: { + xAxes: [{display: false}], + yAxes: [{display: false}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/borderDash/value.png b/test/fixtures/controller.line/borderDash/value.png new file mode 100644 index 00000000000..0704b19bf8b Binary files /dev/null and b/test/fixtures/controller.line/borderDash/value.png differ diff --git a/test/fixtures/controller.line/borderDashOffset/scriptable.js b/test/fixtures/controller.line/borderDashOffset/scriptable.js new file mode 100644 index 00000000000..453fdbffe9a --- /dev/null +++ b/test/fixtures/controller.line/borderDashOffset/scriptable.js @@ -0,0 +1,53 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3], + datasets: [ + { + // option in dataset + data: [1, 1, 1, 1], + borderColor: '#ff0000', + borderDash: [20], + borderDashOffset: function(ctx) { + return ctx.datasetIndex === 0 ? 5.0 : 0.0; + } + }, + { + // option in element (fallback) + data: [0, 0, 0, 0] + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + borderColor: '#00ff00', + borderDash: [20], + borderDashOffset: function(ctx) { + return ctx.datasetIndex === 0 ? 5.0 : 0.0; + }, + fill: false, + }, + point: { + radius: 10, + } + }, + layout: { + padding: 32 + }, + scales: { + xAxes: [{display: false}], + yAxes: [{display: false}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/borderDashOffset/scriptable.png b/test/fixtures/controller.line/borderDashOffset/scriptable.png new file mode 100644 index 00000000000..a4b254fe44b Binary files /dev/null and b/test/fixtures/controller.line/borderDashOffset/scriptable.png differ diff --git a/test/fixtures/controller.line/borderDashOffset/value.js b/test/fixtures/controller.line/borderDashOffset/value.js new file mode 100644 index 00000000000..8cc0808fe5c --- /dev/null +++ b/test/fixtures/controller.line/borderDashOffset/value.js @@ -0,0 +1,49 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [1, 1, 1, 1, 1, 1], + borderColor: '#ff0000', + borderDash: [20], + borderDashOffset: 5.0 + }, + { + // option in element (fallback) + data: [0, 0, 0, 0, 0, 0] + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + borderColor: '#00ff00', + borderDash: [20], + borderDashOffset: 0.0, // default + fill: false, + }, + point: { + radius: 10, + } + }, + layout: { + padding: 32 + }, + scales: { + xAxes: [{display: false}], + yAxes: [{display: false}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/borderDashOffset/value.png b/test/fixtures/controller.line/borderDashOffset/value.png new file mode 100644 index 00000000000..bea22dd79b5 Binary files /dev/null and b/test/fixtures/controller.line/borderDashOffset/value.png differ diff --git a/test/fixtures/controller.line/borderJoinStyle/scriptable.js b/test/fixtures/controller.line/borderJoinStyle/scriptable.js new file mode 100644 index 00000000000..c694af4c329 --- /dev/null +++ b/test/fixtures/controller.line/borderJoinStyle/scriptable.js @@ -0,0 +1,61 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2], + datasets: [ + { + // option in dataset + data: [6, 18, 6], + borderColor: '#ff0000', + borderJoinStyle: function(ctx) { + var index = ctx.datasetIndex % 3; + return index === 0 ? 'round' + : index === 1 ? 'miter' + : 'bevel'; + } + }, + { + // option in element (fallback) + data: [2, 14, 2], + borderColor: '#0000ff', + }, + { + // option in element (fallback) + data: [-2, 10, -2] + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + borderColor: '#00ff00', + borderJoinStyle: function(ctx) { + var index = (ctx.datasetIndex % 3); + return index === 0 ? 'round' + : index === 1 ? 'miter' + : 'bevel'; + }, + borderWidth: 25, + fill: false, + tension: 0 + } + }, + layout: { + padding: 32 + }, + scales: { + xAxes: [{display: false}], + yAxes: [{display: false}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/borderJoinStyle/scriptable.png b/test/fixtures/controller.line/borderJoinStyle/scriptable.png new file mode 100644 index 00000000000..33d1c3f510f Binary files /dev/null and b/test/fixtures/controller.line/borderJoinStyle/scriptable.png differ diff --git a/test/fixtures/controller.line/borderJoinStyle/value.js b/test/fixtures/controller.line/borderJoinStyle/value.js new file mode 100644 index 00000000000..784800c5994 --- /dev/null +++ b/test/fixtures/controller.line/borderJoinStyle/value.js @@ -0,0 +1,52 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2], + datasets: [ + { + // option in dataset + data: [6, 18, 6], + borderColor: '#ff0000', + borderJoinStyle: 'round', + }, + { + // option in element (fallback) + data: [2, 14, 2], + borderColor: '#0000ff', + borderJoinStyle: 'bevel', + }, + { + // option in element (fallback) + data: [-2, 10, -2] + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + borderColor: '#00ff00', + borderJoinStyle: 'miter', + borderWidth: 25, + fill: false, + tension: 0 + } + }, + layout: { + padding: 32 + }, + scales: { + xAxes: [{display: false}], + yAxes: [{display: false}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/borderJoinStyle/value.png b/test/fixtures/controller.line/borderJoinStyle/value.png new file mode 100644 index 00000000000..2ce1bfdae2e Binary files /dev/null and b/test/fixtures/controller.line/borderJoinStyle/value.png differ diff --git a/test/fixtures/controller.line/borderWidth/scriptable.js b/test/fixtures/controller.line/borderWidth/scriptable.js index a40ac1cb0a4..34d736a191f 100644 --- a/test/fixtures/controller.line/borderWidth/scriptable.js +++ b/test/fixtures/controller.line/borderWidth/scriptable.js @@ -6,18 +6,17 @@ module.exports = { datasets: [ { // option in dataset - data: [0, 5, 10, null, -10, -5], - pointBorderColor: '#0000ff', - pointBorderWidth: function(ctx) { - var value = ctx.dataset.data[ctx.dataIndex] || 0; - return value > 4 ? 10 - : value > -4 ? 5 - : 2; - } + data: [4, 5, 10, null, -10, -5], + borderColor: '#0000ff', + borderWidth: function(ctx) { + var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex); + return index % 2 ? 10 : 20; + }, + pointBorderColor: '#00ff00' }, { // option in element (fallback) - data: [4, -5, -10, null, 10, 5], + data: [-4, -5, -10, null, 10, 5], } ] }, @@ -26,19 +25,22 @@ module.exports = { title: false, elements: { line: { - fill: false, - }, - point: { borderColor: '#ff0000', borderWidth: function(ctx) { - var value = ctx.dataset.data[ctx.dataIndex] || 0; - return value > 4 ? 2 - : value > -4 ? 5 - : 10; + var index = (ctx.dataIndex === undefined ? ctx.datasetIndex : ctx.dataIndex); + return index % 2 ? 10 : 20; }, - radius: 10, + fill: false, + }, + point: { + borderColor: '#00ff00', + borderWidth: 5, + radius: 10 } }, + layout: { + padding: 32 + }, scales: { xAxes: [{display: false}], yAxes: [ diff --git a/test/fixtures/controller.line/borderWidth/scriptable.png b/test/fixtures/controller.line/borderWidth/scriptable.png index 7bb6b1b3c77..ab54b5a99a3 100644 Binary files a/test/fixtures/controller.line/borderWidth/scriptable.png and b/test/fixtures/controller.line/borderWidth/scriptable.png differ diff --git a/test/fixtures/controller.line/borderWidth/value.js b/test/fixtures/controller.line/borderWidth/value.js index 291f422e527..68b16e52e06 100644 --- a/test/fixtures/controller.line/borderWidth/value.js +++ b/test/fixtures/controller.line/borderWidth/value.js @@ -7,8 +7,8 @@ module.exports = { { // option in dataset data: [0, 5, 10, null, -10, -5], - pointBorderColor: '#0000ff', - pointBorderWidth: 6 + borderColor: '#0000ff', + borderWidth: 6 }, { // option in element (fallback) @@ -21,14 +21,17 @@ module.exports = { title: false, elements: { line: { + borderColor: '#00ff00', + borderWidth: 3, fill: false, }, point: { - borderColor: '#00ff00', - borderWidth: 3, radius: 10, } }, + layout: { + padding: 32 + }, scales: { xAxes: [{display: false}], yAxes: [{display: false}] diff --git a/test/fixtures/controller.line/borderWidth/value.png b/test/fixtures/controller.line/borderWidth/value.png index 0b8f38c1d62..715ea7200e2 100644 Binary files a/test/fixtures/controller.line/borderWidth/value.png and b/test/fixtures/controller.line/borderWidth/value.png differ diff --git a/test/fixtures/controller.line/cubicInterpolationMode/scriptable.js b/test/fixtures/controller.line/cubicInterpolationMode/scriptable.js new file mode 100644 index 00000000000..c1f3eb281b4 --- /dev/null +++ b/test/fixtures/controller.line/cubicInterpolationMode/scriptable.js @@ -0,0 +1,49 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 4, 2, 6, 4, 8], + borderColor: '#ff0000', + cubicInterpolationMode: function(ctx) { + return ctx.datasetIndex === 0 ? 'monotone' : 'default'; + } + }, + { + // option in element (fallback) + data: [2, 6, 4, 8, 6, 10], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + borderColor: '#00ff00', + borderWidth: 20, + cubicInterpolationMode: function(ctx) { + return ctx.datasetIndex === 0 ? 'monotone' : 'default'; + }, + fill: false + } + }, + layout: { + padding: 32 + }, + scales: { + xAxes: [{display: false}], + yAxes: [{display: false}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/cubicInterpolationMode/scriptable.png b/test/fixtures/controller.line/cubicInterpolationMode/scriptable.png new file mode 100644 index 00000000000..4a68926f66e Binary files /dev/null and b/test/fixtures/controller.line/cubicInterpolationMode/scriptable.png differ diff --git a/test/fixtures/controller.line/cubicInterpolationMode/value.js b/test/fixtures/controller.line/cubicInterpolationMode/value.js new file mode 100644 index 00000000000..01b49951deb --- /dev/null +++ b/test/fixtures/controller.line/cubicInterpolationMode/value.js @@ -0,0 +1,45 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 4, 2, 6, 4, 8], + borderColor: '#ff0000', + cubicInterpolationMode: 'monotone' + }, + { + // option in element (fallback) + data: [2, 6, 4, 8, 6, 10] + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + borderColor: '#00ff00', + borderWidth: 20, + cubicInterpolationMode: 'default', + fill: false, + } + }, + layout: { + padding: 32 + }, + scales: { + xAxes: [{display: false}], + yAxes: [{display: false}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/cubicInterpolationMode/value.png b/test/fixtures/controller.line/cubicInterpolationMode/value.png new file mode 100644 index 00000000000..4a68926f66e Binary files /dev/null and b/test/fixtures/controller.line/cubicInterpolationMode/value.png differ diff --git a/test/fixtures/controller.line/fill/scriptable.js b/test/fixtures/controller.line/fill/scriptable.js new file mode 100644 index 00000000000..84c93bfd197 --- /dev/null +++ b/test/fixtures/controller.line/fill/scriptable.js @@ -0,0 +1,47 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [-2, -6, -4, -8, -6, -10], + backgroundColor: '#ff0000', + fill: function(ctx) { + return ctx.datasetIndex === 0 ? true : false; + } + }, + { + // option in element (fallback) + data: [0, 4, 2, 6, 4, 8], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + backgroundColor: '#00ff00', + fill: function(ctx) { + return ctx.datasetIndex === 0 ? true : false; + } + } + }, + layout: { + padding: 32 + }, + scales: { + xAxes: [{display: false}], + yAxes: [{display: false}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/fill/scriptable.png b/test/fixtures/controller.line/fill/scriptable.png new file mode 100644 index 00000000000..bd93389a65d Binary files /dev/null and b/test/fixtures/controller.line/fill/scriptable.png differ diff --git a/test/fixtures/controller.line/fill/value.js b/test/fixtures/controller.line/fill/value.js new file mode 100644 index 00000000000..ca4ec0788ed --- /dev/null +++ b/test/fixtures/controller.line/fill/value.js @@ -0,0 +1,43 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [-2, -6, -4, -8, -6, -10], + backgroundColor: '#ff0000', + fill: false + }, + { + // option in element (fallback) + data: [0, 4, 2, 6, 4, 8], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + backgroundColor: '#00ff00', + fill: true, + } + }, + layout: { + padding: 32 + }, + scales: { + xAxes: [{display: false}], + yAxes: [{display: false}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/fill/value.png b/test/fixtures/controller.line/fill/value.png new file mode 100644 index 00000000000..4ec8a831174 Binary files /dev/null and b/test/fixtures/controller.line/fill/value.png differ diff --git a/test/fixtures/controller.line/backgroundColor/indexable.js b/test/fixtures/controller.line/pointBackgroundColor/indexable.js similarity index 100% rename from test/fixtures/controller.line/backgroundColor/indexable.js rename to test/fixtures/controller.line/pointBackgroundColor/indexable.js diff --git a/test/fixtures/controller.line/backgroundColor/indexable.png b/test/fixtures/controller.line/pointBackgroundColor/indexable.png similarity index 100% rename from test/fixtures/controller.line/backgroundColor/indexable.png rename to test/fixtures/controller.line/pointBackgroundColor/indexable.png diff --git a/test/fixtures/controller.line/pointBackgroundColor/scriptable.js b/test/fixtures/controller.line/pointBackgroundColor/scriptable.js new file mode 100644 index 00000000000..6ede2cb0c15 --- /dev/null +++ b/test/fixtures/controller.line/pointBackgroundColor/scriptable.js @@ -0,0 +1,61 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3, 4, 5], + 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'; + } + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + 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'; + }, + radius: 10, + } + }, + scales: { + xAxes: [{display: false}], + yAxes: [ + { + display: false, + ticks: { + beginAtZero: true + } + } + ] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/pointBackgroundColor/scriptable.png b/test/fixtures/controller.line/pointBackgroundColor/scriptable.png new file mode 100644 index 00000000000..c366b6cfadf Binary files /dev/null and b/test/fixtures/controller.line/pointBackgroundColor/scriptable.png differ diff --git a/test/fixtures/controller.line/pointBackgroundColor/value.js b/test/fixtures/controller.line/pointBackgroundColor/value.js new file mode 100644 index 00000000000..a096cae00ea --- /dev/null +++ b/test/fixtures/controller.line/pointBackgroundColor/value.js @@ -0,0 +1,42 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 5, 10, null, -10, -5], + pointBackgroundColor: '#ff0000' + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + fill: false, + }, + point: { + backgroundColor: '#00ff00', + radius: 10, + } + }, + scales: { + xAxes: [{display: false}], + yAxes: [{display: false}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/pointBackgroundColor/value.png b/test/fixtures/controller.line/pointBackgroundColor/value.png new file mode 100644 index 00000000000..88c75c89771 Binary files /dev/null and b/test/fixtures/controller.line/pointBackgroundColor/value.png differ diff --git a/test/fixtures/controller.line/borderColor/indexable.js b/test/fixtures/controller.line/pointBorderColor/indexable.js similarity index 100% rename from test/fixtures/controller.line/borderColor/indexable.js rename to test/fixtures/controller.line/pointBorderColor/indexable.js diff --git a/test/fixtures/controller.line/borderColor/indexable.png b/test/fixtures/controller.line/pointBorderColor/indexable.png similarity index 100% rename from test/fixtures/controller.line/borderColor/indexable.png rename to test/fixtures/controller.line/pointBorderColor/indexable.png diff --git a/test/fixtures/controller.line/pointBorderColor/scriptable.js b/test/fixtures/controller.line/pointBorderColor/scriptable.js new file mode 100644 index 00000000000..04b12360647 --- /dev/null +++ b/test/fixtures/controller.line/pointBorderColor/scriptable.js @@ -0,0 +1,61 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3, 4, 5], + 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'; + } + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + 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'; + }, + radius: 10, + } + }, + scales: { + xAxes: [{display: false}], + yAxes: [ + { + display: false, + ticks: { + beginAtZero: true + } + } + ] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/pointBorderColor/scriptable.png b/test/fixtures/controller.line/pointBorderColor/scriptable.png new file mode 100644 index 00000000000..6366828ecfc Binary files /dev/null and b/test/fixtures/controller.line/pointBorderColor/scriptable.png differ diff --git a/test/fixtures/controller.line/pointBorderColor/value.js b/test/fixtures/controller.line/pointBorderColor/value.js new file mode 100644 index 00000000000..84e4d6adfb9 --- /dev/null +++ b/test/fixtures/controller.line/pointBorderColor/value.js @@ -0,0 +1,42 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 5, 10, null, -10, -5], + pointBorderColor: '#ff0000' + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + fill: false, + }, + point: { + borderColor: '#00ff00', + radius: 10, + } + }, + scales: { + xAxes: [{display: false}], + yAxes: [{display: false}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/pointBorderColor/value.png b/test/fixtures/controller.line/pointBorderColor/value.png new file mode 100644 index 00000000000..6bfde92f541 Binary files /dev/null and b/test/fixtures/controller.line/pointBorderColor/value.png differ diff --git a/test/fixtures/controller.line/borderWidth/indexable.js b/test/fixtures/controller.line/pointBorderWidth/indexable.js similarity index 100% rename from test/fixtures/controller.line/borderWidth/indexable.js rename to test/fixtures/controller.line/pointBorderWidth/indexable.js diff --git a/test/fixtures/controller.line/borderWidth/indexable.png b/test/fixtures/controller.line/pointBorderWidth/indexable.png similarity index 100% rename from test/fixtures/controller.line/borderWidth/indexable.png rename to test/fixtures/controller.line/pointBorderWidth/indexable.png diff --git a/test/fixtures/controller.line/pointBorderWidth/scriptable.js b/test/fixtures/controller.line/pointBorderWidth/scriptable.js new file mode 100644 index 00000000000..a40ac1cb0a4 --- /dev/null +++ b/test/fixtures/controller.line/pointBorderWidth/scriptable.js @@ -0,0 +1,61 @@ +module.exports = { + config: { + type: 'line', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 5, 10, null, -10, -5], + pointBorderColor: '#0000ff', + pointBorderWidth: function(ctx) { + var value = ctx.dataset.data[ctx.dataIndex] || 0; + return value > 4 ? 10 + : value > -4 ? 5 + : 2; + } + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + fill: false, + }, + point: { + borderColor: '#ff0000', + borderWidth: function(ctx) { + var value = ctx.dataset.data[ctx.dataIndex] || 0; + return value > 4 ? 2 + : value > -4 ? 5 + : 10; + }, + radius: 10, + } + }, + scales: { + xAxes: [{display: false}], + yAxes: [ + { + display: false, + ticks: { + beginAtZero: true + } + } + ] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/pointBorderWidth/scriptable.png b/test/fixtures/controller.line/pointBorderWidth/scriptable.png new file mode 100644 index 00000000000..7bb6b1b3c77 Binary files /dev/null and b/test/fixtures/controller.line/pointBorderWidth/scriptable.png differ diff --git a/test/fixtures/controller.line/pointBorderWidth/value.js b/test/fixtures/controller.line/pointBorderWidth/value.js new file mode 100644 index 00000000000..291f422e527 --- /dev/null +++ b/test/fixtures/controller.line/pointBorderWidth/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], + pointBorderColor: '#0000ff', + pointBorderWidth: 6 + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + fill: false, + }, + point: { + borderColor: '#00ff00', + borderWidth: 3, + radius: 10, + } + }, + scales: { + xAxes: [{display: false}], + yAxes: [{display: false}] + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.line/pointBorderWidth/value.png b/test/fixtures/controller.line/pointBorderWidth/value.png new file mode 100644 index 00000000000..0b8f38c1d62 Binary files /dev/null and b/test/fixtures/controller.line/pointBorderWidth/value.png differ diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js index ef41f5942b4..14be7c0b1c6 100644 --- a/test/specs/core.controller.tests.js +++ b/test/specs/core.controller.tests.js @@ -65,12 +65,12 @@ describe('Chart', function() { it('should initialize config with default options', function() { var callback = function() {}; - var defaults = Chart.defaults; + defaults.global.responsiveAnimationDuration = 42; defaults.global.hover.onHover = callback; - defaults.line.hover.mode = 'x-axis'; defaults.line.spanGaps = true; + defaults.line.hover.mode = 'x-axis'; var chart = acquireChart({ type: 'line' @@ -83,10 +83,16 @@ describe('Chart', function() { expect(options.responsiveAnimationDuration).toBe(42); expect(options.hover.onHover).toBe(callback); expect(options.hover.mode).toBe('x-axis'); + + defaults.global.responsiveAnimationDuration = 0; + defaults.global.hover.onHover = null; + defaults.line.spanGaps = false; + defaults.line.hover.mode = 'label'; }); it('should override default options', function() { var defaults = Chart.defaults; + defaults.global.responsiveAnimationDuration = 42; defaults.line.hover.mode = 'x-axis'; defaults.line.spanGaps = true; @@ -110,6 +116,10 @@ describe('Chart', function() { expect(options.spanGaps).toBe(false); expect(options.hover.mode).toBe('dataset'); expect(options.title.position).toBe('bottom'); + + defaults.global.responsiveAnimationDuration = 0; + defaults.line.hover.mode = 'label'; + defaults.line.spanGaps = false; }); it('should override axis positions that are incorrect', function() { diff --git a/test/specs/plugin.filler.tests.js b/test/specs/plugin.filler.tests.js index 94979375832..0164dc1ddbf 100644 --- a/test/specs/plugin.filler.tests.js +++ b/test/specs/plugin.filler.tests.js @@ -136,7 +136,6 @@ describe('Plugin.filler', function() { {fill: null}, {fill: []}, {fill: {}}, - {fill: function() {}} ] } }); @@ -155,7 +154,6 @@ describe('Plugin.filler', function() { false, // null false, // array false, // object - false, // function ]); }); });