From: Akihiko Kusanagi Date: Tue, 21 May 2019 22:06:12 +0000 (+0800) Subject: Add tests and a sample for radar scriptable line options (#6263) X-Git-Tag: v2.9.0~1^2~51 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=bd3ab17ef7476feea02d6b010f67f01976120999;p=thirdparty%2FChart.js.git Add tests and a sample for radar scriptable line options (#6263) * Add tests and a sample for radar scriptable line options * Improve image tests --- diff --git a/docs/charts/radar.md b/docs/charts/radar.md index 1b1c7ef07..717942bd8 100644 --- a/docs/charts/radar.md +++ b/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) | 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` +| [`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/radar.html b/samples/scriptable/radar.html index 8b56c8682..31b13b0bb 100644 --- a/samples/scriptable/radar.html +++ b/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,9 +63,7 @@ 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() }] }; @@ -66,7 +71,12 @@ 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(); } diff --git a/test/fixtures/controller.radar/backgroundColor/scriptable.js b/test/fixtures/controller.radar/backgroundColor/scriptable.js index cf2a074e5..4c714a451 100644 --- a/test/fixtures/controller.radar/backgroundColor/scriptable.js +++ b/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: { diff --git a/test/fixtures/controller.radar/backgroundColor/scriptable.png b/test/fixtures/controller.radar/backgroundColor/scriptable.png index e82a84f65..90b4a4d27 100644 Binary files a/test/fixtures/controller.radar/backgroundColor/scriptable.png and b/test/fixtures/controller.radar/backgroundColor/scriptable.png differ diff --git a/test/fixtures/controller.radar/backgroundColor/value.js b/test/fixtures/controller.radar/backgroundColor/value.js index 0a592c615..d9347ee5d 100644 --- a/test/fixtures/controller.radar/backgroundColor/value.js +++ b/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: { diff --git a/test/fixtures/controller.radar/backgroundColor/value.png b/test/fixtures/controller.radar/backgroundColor/value.png index da08c0e44..de5cec78d 100644 Binary files a/test/fixtures/controller.radar/backgroundColor/value.png and b/test/fixtures/controller.radar/backgroundColor/value.png differ diff --git a/test/fixtures/controller.radar/borderCapStyle/scriptable.js b/test/fixtures/controller.radar/borderCapStyle/scriptable.js new file mode 100644 index 000000000..128bf6e70 --- /dev/null +++ b/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 + } + } +}; diff --git a/test/fixtures/controller.radar/borderCapStyle/scriptable.png b/test/fixtures/controller.radar/borderCapStyle/scriptable.png new file mode 100644 index 000000000..0be3c6212 Binary files /dev/null and b/test/fixtures/controller.radar/borderCapStyle/scriptable.png differ diff --git a/test/fixtures/controller.radar/borderCapStyle/value.js b/test/fixtures/controller.radar/borderCapStyle/value.js new file mode 100644 index 000000000..ad6aa1fed --- /dev/null +++ b/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 + } + } +}; diff --git a/test/fixtures/controller.radar/borderCapStyle/value.png b/test/fixtures/controller.radar/borderCapStyle/value.png new file mode 100644 index 000000000..9e297d67b Binary files /dev/null and b/test/fixtures/controller.radar/borderCapStyle/value.png differ diff --git a/test/fixtures/controller.radar/borderColor/indexable.png b/test/fixtures/controller.radar/borderColor/indexable.png deleted file mode 100644 index e4477851c..000000000 Binary files a/test/fixtures/controller.radar/borderColor/indexable.png and /dev/null differ diff --git a/test/fixtures/controller.radar/borderColor/scriptable.js b/test/fixtures/controller.radar/borderColor/scriptable.js index e0545231a..e4b59c580 100644 --- a/test/fixtures/controller.radar/borderColor/scriptable.js +++ b/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: { diff --git a/test/fixtures/controller.radar/borderColor/scriptable.png b/test/fixtures/controller.radar/borderColor/scriptable.png index 4a1c1e770..58023c1bd 100644 Binary files a/test/fixtures/controller.radar/borderColor/scriptable.png and b/test/fixtures/controller.radar/borderColor/scriptable.png differ diff --git a/test/fixtures/controller.radar/borderColor/value.js b/test/fixtures/controller.radar/borderColor/value.js index 0ff69e08b..c70ac6436 100644 --- a/test/fixtures/controller.radar/borderColor/value.js +++ b/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: { diff --git a/test/fixtures/controller.radar/borderColor/value.png b/test/fixtures/controller.radar/borderColor/value.png index 486d1009d..9f421eec0 100644 Binary files a/test/fixtures/controller.radar/borderColor/value.png and b/test/fixtures/controller.radar/borderColor/value.png differ diff --git a/test/fixtures/controller.radar/borderDash/scriptable.js b/test/fixtures/controller.radar/borderDash/scriptable.js new file mode 100644 index 000000000..0bee9a8a6 --- /dev/null +++ b/test/fixtures/controller.radar/borderDash/scriptable.js @@ -0,0 +1,48 @@ +module.exports = { + config: { + type: 'radar', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 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 + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/borderDash/scriptable.png b/test/fixtures/controller.radar/borderDash/scriptable.png new file mode 100644 index 000000000..bd4855832 Binary files /dev/null and b/test/fixtures/controller.radar/borderDash/scriptable.png differ diff --git a/test/fixtures/controller.radar/borderDash/value.js b/test/fixtures/controller.radar/borderDash/value.js new file mode 100644 index 000000000..a5e7ee833 --- /dev/null +++ b/test/fixtures/controller.radar/borderDash/value.js @@ -0,0 +1,46 @@ +module.exports = { + config: { + type: 'radar', + 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 + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/borderDash/value.png b/test/fixtures/controller.radar/borderDash/value.png new file mode 100644 index 000000000..2eef0726c Binary files /dev/null and b/test/fixtures/controller.radar/borderDash/value.png differ diff --git a/test/fixtures/controller.radar/borderDashOffset/scriptable.js b/test/fixtures/controller.radar/borderDashOffset/scriptable.js new file mode 100644 index 000000000..90cca36fe --- /dev/null +++ b/test/fixtures/controller.radar/borderDashOffset/scriptable.js @@ -0,0 +1,55 @@ +module.exports = { + config: { + type: 'radar', + 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 + }, + scale: { + display: false, + ticks: { + min: -1 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/borderDashOffset/scriptable.png b/test/fixtures/controller.radar/borderDashOffset/scriptable.png new file mode 100644 index 000000000..28557b2c0 Binary files /dev/null and b/test/fixtures/controller.radar/borderDashOffset/scriptable.png differ diff --git a/test/fixtures/controller.radar/borderDashOffset/value.js b/test/fixtures/controller.radar/borderDashOffset/value.js new file mode 100644 index 000000000..f96d4cd13 --- /dev/null +++ b/test/fixtures/controller.radar/borderDashOffset/value.js @@ -0,0 +1,51 @@ +module.exports = { + config: { + type: 'radar', + 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 + }, + scale: { + display: false, + ticks: { + min: -1 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/borderDashOffset/value.png b/test/fixtures/controller.radar/borderDashOffset/value.png new file mode 100644 index 000000000..fb9eb723f Binary files /dev/null and b/test/fixtures/controller.radar/borderDashOffset/value.png differ diff --git a/test/fixtures/controller.radar/borderJoinStyle/scriptable.js b/test/fixtures/controller.radar/borderJoinStyle/scriptable.js new file mode 100644 index 000000000..ff33d60da --- /dev/null +++ b/test/fixtures/controller.radar/borderJoinStyle/scriptable.js @@ -0,0 +1,63 @@ +module.exports = { + config: { + type: 'radar', + data: { + labels: [0, 1, 2, 3], + datasets: [ + { + // option in dataset + data: [3, 3, null, 3], + borderColor: '#ff0000', + borderJoinStyle: function(ctx) { + var index = ctx.datasetIndex % 3; + return index === 0 ? 'round' + : index === 1 ? 'miter' + : 'bevel'; + } + }, + { + // option in element (fallback) + data: [2, 2, null, 2], + borderColor: '#0000ff' + }, + { + // option in element (fallback) + data: [1, 1, null, 1] + } + ] + }, + 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 + }, + scale: { + display: false, + ticks: { + beginAtZero: true + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/borderJoinStyle/scriptable.png b/test/fixtures/controller.radar/borderJoinStyle/scriptable.png new file mode 100644 index 000000000..9b2248bb2 Binary files /dev/null and b/test/fixtures/controller.radar/borderJoinStyle/scriptable.png differ diff --git a/test/fixtures/controller.radar/borderJoinStyle/value.js b/test/fixtures/controller.radar/borderJoinStyle/value.js new file mode 100644 index 000000000..04a6beb66 --- /dev/null +++ b/test/fixtures/controller.radar/borderJoinStyle/value.js @@ -0,0 +1,54 @@ +module.exports = { + config: { + type: 'radar', + data: { + labels: [0, 1, 2, 3], + datasets: [ + { + // option in dataset + data: [3, 3, null, 3], + borderColor: '#ff0000', + borderJoinStyle: 'round' + }, + { + // option in element (fallback) + data: [2, 2, null, 2], + borderColor: '#0000ff', + borderJoinStyle: 'bevel' + }, + { + // option in element (fallback) + data: [1, 1, null, 1] + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + borderColor: '#00ff00', + borderJoinStyle: 'miter', + borderWidth: 25, + fill: false, + tension: 0 + } + }, + layout: { + padding: 32 + }, + scale: { + display: false, + ticks: { + beginAtZero: true + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/borderJoinStyle/value.png b/test/fixtures/controller.radar/borderJoinStyle/value.png new file mode 100644 index 000000000..757d05190 Binary files /dev/null and b/test/fixtures/controller.radar/borderJoinStyle/value.png differ diff --git a/test/fixtures/controller.radar/borderWidth/scriptable.js b/test/fixtures/controller.radar/borderWidth/scriptable.js index 8d321b5fc..d2399d798 100644 --- a/test/fixtures/controller.radar/borderWidth/scriptable.js +++ b/test/fixtures/controller.radar/borderWidth/scriptable.js @@ -7,17 +7,16 @@ module.exports = { { // 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; - } + 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,17 +25,17 @@ 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 } }, scale: { diff --git a/test/fixtures/controller.radar/borderWidth/scriptable.png b/test/fixtures/controller.radar/borderWidth/scriptable.png index 16bbfa561..de84a830b 100644 Binary files a/test/fixtures/controller.radar/borderWidth/scriptable.png and b/test/fixtures/controller.radar/borderWidth/scriptable.png differ diff --git a/test/fixtures/controller.radar/borderWidth/value.js b/test/fixtures/controller.radar/borderWidth/value.js index 8c59eccfd..521cbf076 100644 --- a/test/fixtures/controller.radar/borderWidth/value.js +++ b/test/fixtures/controller.radar/borderWidth/value.js @@ -7,12 +7,12 @@ module.exports = { { // option in dataset data: [0, 5, 10, null, -10, -5], - pointBorderColor: '#0000ff', - pointBorderWidth: 6 + borderColor: '#0000ff', + borderWidth: 6 }, { // option in element (fallback) - data: [4, -5, -10, null, 10, 5], + data: [4, -5, -10, null, 10, 5] } ] }, @@ -21,12 +21,12 @@ module.exports = { title: false, elements: { line: { - fill: false, - }, - point: { borderColor: '#00ff00', borderWidth: 3, - radius: 10, + fill: false + }, + point: { + radius: 10 } }, scale: { diff --git a/test/fixtures/controller.radar/borderWidth/value.png b/test/fixtures/controller.radar/borderWidth/value.png index 870b2a943..3254d2f23 100644 Binary files a/test/fixtures/controller.radar/borderWidth/value.png and b/test/fixtures/controller.radar/borderWidth/value.png differ diff --git a/test/fixtures/controller.radar/fill/scriptable.js b/test/fixtures/controller.radar/fill/scriptable.js new file mode 100644 index 000000000..3706bbff1 --- /dev/null +++ b/test/fixtures/controller.radar/fill/scriptable.js @@ -0,0 +1,46 @@ +module.exports = { + config: { + type: 'radar', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 5, 10, null, -10, -5], + backgroundColor: '#ff0000', + fill: function(ctx) { + return ctx.datasetIndex === 0 ? true : false; + } + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5] + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + backgroundColor: '#00ff00', + fill: function(ctx) { + return ctx.datasetIndex === 0 ? true : false; + } + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/fill/scriptable.png b/test/fixtures/controller.radar/fill/scriptable.png new file mode 100644 index 000000000..c0a0d5ca3 Binary files /dev/null and b/test/fixtures/controller.radar/fill/scriptable.png differ diff --git a/test/fixtures/controller.radar/fill/value.js b/test/fixtures/controller.radar/fill/value.js new file mode 100644 index 000000000..4db74dad1 --- /dev/null +++ b/test/fixtures/controller.radar/fill/value.js @@ -0,0 +1,42 @@ +module.exports = { + config: { + type: 'radar', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 5, 10, null, -10, -5], + backgroundColor: '#ff0000', + fill: false + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5] + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + backgroundColor: '#00ff00', + fill: true + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/fill/value.png b/test/fixtures/controller.radar/fill/value.png new file mode 100644 index 000000000..daae5932a Binary files /dev/null and b/test/fixtures/controller.radar/fill/value.png differ diff --git a/test/fixtures/controller.radar/backgroundColor/indexable.js b/test/fixtures/controller.radar/pointBackgroundColor/indexable.js similarity index 93% rename from test/fixtures/controller.radar/backgroundColor/indexable.js rename to test/fixtures/controller.radar/pointBackgroundColor/indexable.js index cd59ce44a..10148e65e 100644 --- a/test/fixtures/controller.radar/backgroundColor/indexable.js +++ b/test/fixtures/controller.radar/pointBackgroundColor/indexable.js @@ -18,7 +18,7 @@ module.exports = { }, { // option in element (fallback) - data: [4, -5, -10, null, 10, 5], + data: [4, -5, -10, null, 10, 5] } ] }, @@ -27,7 +27,7 @@ module.exports = { title: false, elements: { line: { - fill: false, + fill: false }, point: { backgroundColor: [ diff --git a/test/fixtures/controller.radar/backgroundColor/indexable.png b/test/fixtures/controller.radar/pointBackgroundColor/indexable.png similarity index 100% rename from test/fixtures/controller.radar/backgroundColor/indexable.png rename to test/fixtures/controller.radar/pointBackgroundColor/indexable.png diff --git a/test/fixtures/controller.radar/pointBackgroundColor/scriptable.js b/test/fixtures/controller.radar/pointBackgroundColor/scriptable.js new file mode 100644 index 000000000..07e1b129c --- /dev/null +++ b/test/fixtures/controller.radar/pointBackgroundColor/scriptable.js @@ -0,0 +1,56 @@ +module.exports = { + config: { + type: 'radar', + 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 + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/pointBackgroundColor/scriptable.png b/test/fixtures/controller.radar/pointBackgroundColor/scriptable.png new file mode 100644 index 000000000..56c78b605 Binary files /dev/null and b/test/fixtures/controller.radar/pointBackgroundColor/scriptable.png differ diff --git a/test/fixtures/controller.radar/pointBackgroundColor/value.js b/test/fixtures/controller.radar/pointBackgroundColor/value.js new file mode 100644 index 000000000..20af577ce --- /dev/null +++ b/test/fixtures/controller.radar/pointBackgroundColor/value.js @@ -0,0 +1,44 @@ +module.exports = { + config: { + type: 'radar', + 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 + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/pointBackgroundColor/value.png b/test/fixtures/controller.radar/pointBackgroundColor/value.png new file mode 100644 index 000000000..0f681424a Binary files /dev/null and b/test/fixtures/controller.radar/pointBackgroundColor/value.png differ diff --git a/test/fixtures/controller.radar/borderColor/indexable.js b/test/fixtures/controller.radar/pointBorderColor/indexable.js similarity index 91% rename from test/fixtures/controller.radar/borderColor/indexable.js rename to test/fixtures/controller.radar/pointBorderColor/indexable.js index 11297f2db..f7e0626d6 100644 --- a/test/fixtures/controller.radar/borderColor/indexable.js +++ b/test/fixtures/controller.radar/pointBorderColor/indexable.js @@ -18,7 +18,7 @@ module.exports = { }, { // option in element (fallback) - data: [4, -5, -10, null, 10, 5], + data: [4, -5, -10, null, 10, 5] } ] }, @@ -27,7 +27,7 @@ module.exports = { title: false, elements: { line: { - fill: false, + fill: false }, point: { borderColor: [ @@ -38,6 +38,7 @@ module.exports = { '#8800ff', '#ffff88' ], + borderWidth: 5, radius: 10 } }, diff --git a/test/fixtures/controller.radar/pointBorderColor/indexable.png b/test/fixtures/controller.radar/pointBorderColor/indexable.png new file mode 100644 index 000000000..309cb1cda Binary files /dev/null and b/test/fixtures/controller.radar/pointBorderColor/indexable.png differ diff --git a/test/fixtures/controller.radar/pointBorderColor/scriptable.js b/test/fixtures/controller.radar/pointBorderColor/scriptable.js new file mode 100644 index 000000000..d9678c311 --- /dev/null +++ b/test/fixtures/controller.radar/pointBorderColor/scriptable.js @@ -0,0 +1,57 @@ +module.exports = { + config: { + type: 'radar', + 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'; + }, + borderWidth: 5, + radius: 10 + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/pointBorderColor/scriptable.png b/test/fixtures/controller.radar/pointBorderColor/scriptable.png new file mode 100644 index 000000000..de47d1b48 Binary files /dev/null and b/test/fixtures/controller.radar/pointBorderColor/scriptable.png differ diff --git a/test/fixtures/controller.radar/pointBorderColor/value.js b/test/fixtures/controller.radar/pointBorderColor/value.js new file mode 100644 index 000000000..d639e2816 --- /dev/null +++ b/test/fixtures/controller.radar/pointBorderColor/value.js @@ -0,0 +1,45 @@ +module.exports = { + config: { + type: 'radar', + 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', + borderWidth: 5, + radius: 10 + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/pointBorderColor/value.png b/test/fixtures/controller.radar/pointBorderColor/value.png new file mode 100644 index 000000000..537e49fc9 Binary files /dev/null and b/test/fixtures/controller.radar/pointBorderColor/value.png differ diff --git a/test/fixtures/controller.radar/borderWidth/indexable.js b/test/fixtures/controller.radar/pointBorderWidth/indexable.js similarity index 92% rename from test/fixtures/controller.radar/borderWidth/indexable.js rename to test/fixtures/controller.radar/pointBorderWidth/indexable.js index 262d9d56d..1e60832e6 100644 --- a/test/fixtures/controller.radar/borderWidth/indexable.js +++ b/test/fixtures/controller.radar/pointBorderWidth/indexable.js @@ -14,7 +14,7 @@ module.exports = { }, { // option in element (fallback) - data: [4, -5, -10, null, 10, 5], + data: [4, -5, -10, null, 10, 5] } ] }, @@ -23,7 +23,7 @@ module.exports = { title: false, elements: { line: { - fill: false, + fill: false }, point: { borderColor: '#ff0000', diff --git a/test/fixtures/controller.radar/borderWidth/indexable.png b/test/fixtures/controller.radar/pointBorderWidth/indexable.png similarity index 100% rename from test/fixtures/controller.radar/borderWidth/indexable.png rename to test/fixtures/controller.radar/pointBorderWidth/indexable.png diff --git a/test/fixtures/controller.radar/pointBorderWidth/scriptable.js b/test/fixtures/controller.radar/pointBorderWidth/scriptable.js new file mode 100644 index 000000000..94ea514ca --- /dev/null +++ b/test/fixtures/controller.radar/pointBorderWidth/scriptable.js @@ -0,0 +1,56 @@ +module.exports = { + config: { + type: 'radar', + 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 + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/pointBorderWidth/scriptable.png b/test/fixtures/controller.radar/pointBorderWidth/scriptable.png new file mode 100644 index 000000000..90112da15 Binary files /dev/null and b/test/fixtures/controller.radar/pointBorderWidth/scriptable.png differ diff --git a/test/fixtures/controller.radar/pointBorderWidth/value.js b/test/fixtures/controller.radar/pointBorderWidth/value.js new file mode 100644 index 000000000..b486ea937 --- /dev/null +++ b/test/fixtures/controller.radar/pointBorderWidth/value.js @@ -0,0 +1,46 @@ +module.exports = { + config: { + type: 'radar', + 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 + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/pointBorderWidth/value.png b/test/fixtures/controller.radar/pointBorderWidth/value.png new file mode 100644 index 000000000..ad9106df8 Binary files /dev/null and b/test/fixtures/controller.radar/pointBorderWidth/value.png differ