From: Evert Timberg Date: Sun, 13 Jan 2019 20:17:27 +0000 (-0500) Subject: Implement scriptable options for polar area charts (#5976) X-Git-Tag: v2.8.0-rc.1~57 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=f3dd96779abd7b0032f8ee6c6bf13bc5ac576828;p=thirdparty%2FChart.js.git Implement scriptable options for polar area charts (#5976) --- diff --git a/docs/charts/polar.md b/docs/charts/polar.md index 20dc93c28..1d73cd350 100644 --- a/docs/charts/polar.md +++ b/docs/charts/polar.md @@ -44,15 +44,28 @@ new Chart(ctx, { The following options can be included in a polar area chart dataset to configure options for that specific dataset. -| Name | Type | Description -| ---- | ---- | ----------- -| `backgroundColor` | `Color/Color[]` | The fill color of the arcs in the dataset. See [Colors](../general/colors.md#colors). -| `borderColor` | `Color/Color[]` | The border color of the arcs in the dataset. See [Colors](../general/colors.md#colors). -| `borderWidth` | `Number/Number[]` | The border width of the arcs in the dataset. -| `borderAlign` | `String/String[]` | The border alignment of the arcs in the dataset. [more...](#border-alignment) -| `hoverBackgroundColor` | `Color/Color[]` | The fill colour of the arcs when hovered. -| `hoverBorderColor` | `Color/Color[]` | The stroke colour of the arcs when hovered. -| `hoverBorderWidth` | `Number/Number[]` | The stroke width of the arcs when hovered. +| Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default +| ---- | ---- | :----: | :----: | ---- +| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0,0,0,0.1)'` +| [`borderAlign`](#border-alignment) | `String` | Yes | Yes | `'center'` +| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'` +| [`borderWidth`](#styling) | `Number` | Yes | Yes | `2` +| [`data`](#data-structure) | `Number[]` | - | - | **required** +| [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` +| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` +| [`hoverBorderWidth`](#interactions) | `Number` | Yes | Yes | `undefined` + +### Styling + +The style of each arc can be controlled with the following properties: + +| Name | Description +| ---- | ---- +| `backgroundColor` | arc background color. +| `borderColor` | arc border color. +| `borderWidth` | arc border width (in pixels). + +All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options. ### Border Alignment @@ -62,6 +75,18 @@ The following values are supported for `borderAlign`. When `'center'` is set, the borders of arcs next to each other will overlap. When `'inner'` is set, it is guaranteed that all the borders are not overlap. +### Interactions + +The interaction with each arc can be controlled with the following properties: + +| Name | Description +| ---- | ----------- +| `hoverBackgroundColor` | arc background color when hovered. +| `hoverBorderColor` | arc border color when hovered. +| `hoverBorderWidth` | arc border width when hovered (in pixels). + +All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options. + ## Config Options These are the customisation options specific to Polar Area charts. These options are merged with the [global chart default options](#default-options), and form the options of the chart. diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index 6c00e8325..21e23ebca 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -174,7 +174,7 @@ module.exports = DatasetController.extend({ } for (i = 0, ilen = arcs.length; i < ilen; ++i) { - arcs[i]._options = me._resolveElementOptions(arcs[i], i, reset); + arcs[i]._options = me._resolveElementOptions(arcs[i], i); } chart.borderWidth = me.getMaxBorderWidth(); diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index 5f3afcc20..19ceefdda 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -123,6 +123,7 @@ module.exports = DatasetController.extend({ var start = me.chart.options.startAngle || 0; var starts = me._starts = []; var angles = me._angles = []; + var arcs = meta.data; var i, ilen, angle; me._updateRadius(); @@ -136,9 +137,10 @@ module.exports = DatasetController.extend({ start += angle; } - helpers.each(meta.data, function(arc, index) { - me.updateElement(arc, index, reset); - }); + for (i = 0, ilen = arcs.length; i < ilen; ++i) { + arcs[i]._options = me._resolveElementOptions(arcs[i], i); + me.updateElement(arcs[i], i, reset); + } }, /** @@ -178,6 +180,7 @@ module.exports = DatasetController.extend({ var endAngle = startAngle + (arc.hidden ? 0 : me._angles[index]); var resetRadius = animationOpts.animateScale ? 0 : scale.getDistanceFromCenterForValue(dataset.data[index]); + var options = arc._options || {}; helpers.extend(arc, { // Utility @@ -187,6 +190,10 @@ module.exports = DatasetController.extend({ // Desired view properties _model: { + backgroundColor: options.backgroundColor, + borderColor: options.borderColor, + borderWidth: options.borderWidth, + borderAlign: options.borderAlign, x: centerX, y: centerY, innerRadius: 0, @@ -197,16 +204,6 @@ module.exports = DatasetController.extend({ } }); - // Apply border and fill style - var elementOpts = this.chart.options.elements.arc; - var custom = arc.custom || {}; - var model = arc._model; - - model.backgroundColor = resolve([custom.backgroundColor, dataset.backgroundColor, elementOpts.backgroundColor], undefined, index); - model.borderColor = resolve([custom.borderColor, dataset.borderColor, elementOpts.borderColor], undefined, index); - model.borderWidth = resolve([custom.borderWidth, dataset.borderWidth, elementOpts.borderWidth], undefined, index); - model.borderAlign = resolve([custom.borderAlign, dataset.borderAlign, elementOpts.borderAlign], undefined, index); - arc.pivot(); }, @@ -224,6 +221,68 @@ module.exports = DatasetController.extend({ return count; }, + /** + * @protected + */ + setHoverStyle: function(arc) { + var model = arc._model; + var options = arc._options; + var getHoverColor = helpers.getHoverColor; + var valueOrDefault = helpers.valueOrDefault; + + arc.$previousStyle = { + backgroundColor: model.backgroundColor, + borderColor: model.borderColor, + borderWidth: model.borderWidth, + }; + + model.backgroundColor = valueOrDefault(options.hoverBackgroundColor, getHoverColor(options.backgroundColor)); + model.borderColor = valueOrDefault(options.hoverBorderColor, getHoverColor(options.borderColor)); + model.borderWidth = valueOrDefault(options.hoverBorderWidth, options.borderWidth); + }, + + /** + * @private + */ + _resolveElementOptions: function(arc, index) { + var me = this; + var chart = me.chart; + var dataset = me.getDataset(); + var custom = arc.custom || {}; + var options = chart.options.elements.arc; + var values = {}; + var i, ilen, key; + + // Scriptable options + var context = { + chart: chart, + dataIndex: index, + dataset: dataset, + datasetIndex: me.index + }; + + var keys = [ + 'backgroundColor', + 'borderColor', + 'borderWidth', + 'borderAlign', + 'hoverBackgroundColor', + 'hoverBorderColor', + 'hoverBorderWidth', + ]; + + for (i = 0, ilen = keys.length; i < ilen; ++i) { + key = keys[i]; + values[key] = resolve([ + custom[key], + dataset[key], + options[key] + ], context, index); + } + + return values; + }, + /** * @private */ diff --git a/src/elements/element.arc.js b/src/elements/element.arc.js index 82d836c6b..1d5f9aede 100644 --- a/src/elements/element.arc.js +++ b/src/elements/element.arc.js @@ -92,7 +92,7 @@ module.exports = Element.extend({ ctx.save(); ctx.beginPath(); - ctx.arc(vm.x, vm.y, vm.outerRadius - pixelMargin, sA, eA); + ctx.arc(vm.x, vm.y, Math.max(vm.outerRadius - pixelMargin, 0), sA, eA); ctx.arc(vm.x, vm.y, vm.innerRadius, eA, sA, true); ctx.closePath(); diff --git a/test/fixtures/controller.polarArea/backgroundColor/indexable-dataset.js b/test/fixtures/controller.polarArea/backgroundColor/indexable-dataset.js new file mode 100644 index 000000000..f1dde3224 --- /dev/null +++ b/test/fixtures/controller.polarArea/backgroundColor/indexable-dataset.js @@ -0,0 +1,35 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 2, 4, null, 6, 8], + backgroundColor: [ + '#ff0000', + '#00ff00', + '#0000ff', + '#ffff00', + '#ff00ff', + '#000000' + ] + }, + ] + }, + options: { + legend: false, + title: false, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/backgroundColor/indexable-dataset.png b/test/fixtures/controller.polarArea/backgroundColor/indexable-dataset.png new file mode 100644 index 000000000..9b97db092 Binary files /dev/null and b/test/fixtures/controller.polarArea/backgroundColor/indexable-dataset.png differ diff --git a/test/fixtures/controller.polarArea/backgroundColor/indexable-element-options.js b/test/fixtures/controller.polarArea/backgroundColor/indexable-element-options.js new file mode 100644 index 000000000..c3f26b6f3 --- /dev/null +++ b/test/fixtures/controller.polarArea/backgroundColor/indexable-element-options.js @@ -0,0 +1,39 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in element (fallback) + data: [0, 2, 4, null, 6, 8], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: [ + '#ff88ff', + '#888888', + '#ff8800', + '#00ff88', + '#8800ff', + '#ffff88' + ] + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/backgroundColor/indexable-element-options.png b/test/fixtures/controller.polarArea/backgroundColor/indexable-element-options.png new file mode 100644 index 000000000..83e7abee8 Binary files /dev/null and b/test/fixtures/controller.polarArea/backgroundColor/indexable-element-options.png differ diff --git a/test/fixtures/controller.polarArea/backgroundColor/scriptable-dataset.js b/test/fixtures/controller.polarArea/backgroundColor/scriptable-dataset.js new file mode 100644 index 000000000..d850b4d2e --- /dev/null +++ b/test/fixtures/controller.polarArea/backgroundColor/scriptable-dataset.js @@ -0,0 +1,34 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 2, 4, null, 6, 8], + backgroundColor: function(ctx) { + var value = ctx.dataset.data[ctx.dataIndex] || 0; + return value > 8 ? '#ff0000' + : value > 6 ? '#00ff00' + : value > 2 ? '#0000ff' + : '#ff00ff'; + } + }, + ] + }, + options: { + legend: false, + title: false, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/backgroundColor/scriptable-dataset.png b/test/fixtures/controller.polarArea/backgroundColor/scriptable-dataset.png new file mode 100644 index 000000000..b96ab87c0 Binary files /dev/null and b/test/fixtures/controller.polarArea/backgroundColor/scriptable-dataset.png differ diff --git a/test/fixtures/controller.polarArea/backgroundColor/scriptable-element-options.js b/test/fixtures/controller.polarArea/backgroundColor/scriptable-element-options.js new file mode 100644 index 000000000..4dd4d0c42 --- /dev/null +++ b/test/fixtures/controller.polarArea/backgroundColor/scriptable-element-options.js @@ -0,0 +1,38 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in element (fallback) + data: [0, 2, 4, null, 6, 8], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: function(ctx) { + var value = ctx.dataset.data[ctx.dataIndex] || 0; + return value > 8 ? '#ff0000' + : value > 6 ? '#00ff00' + : value > 2 ? '#0000ff' + : '#ff00ff'; + } + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/backgroundColor/scriptable-element-options.png b/test/fixtures/controller.polarArea/backgroundColor/scriptable-element-options.png new file mode 100644 index 000000000..b96ab87c0 Binary files /dev/null and b/test/fixtures/controller.polarArea/backgroundColor/scriptable-element-options.png differ diff --git a/test/fixtures/controller.polarArea/backgroundColor/value-dataset.js b/test/fixtures/controller.polarArea/backgroundColor/value-dataset.js new file mode 100644 index 000000000..502e8358a --- /dev/null +++ b/test/fixtures/controller.polarArea/backgroundColor/value-dataset.js @@ -0,0 +1,28 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 2, 4, null, 6, 8], + backgroundColor: '#ff0000' + }, + ] + }, + options: { + legend: false, + title: false, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/backgroundColor/value-dataset.png b/test/fixtures/controller.polarArea/backgroundColor/value-dataset.png new file mode 100644 index 000000000..ae9c48e60 Binary files /dev/null and b/test/fixtures/controller.polarArea/backgroundColor/value-dataset.png differ diff --git a/test/fixtures/controller.polarArea/backgroundColor/value-element-options.js b/test/fixtures/controller.polarArea/backgroundColor/value-element-options.js new file mode 100644 index 000000000..e3448be14 --- /dev/null +++ b/test/fixtures/controller.polarArea/backgroundColor/value-element-options.js @@ -0,0 +1,32 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in element (fallback) + data: [0, 2, 4, null, 6, 8], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: '#00ff00' + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/backgroundColor/value-element-options.png b/test/fixtures/controller.polarArea/backgroundColor/value-element-options.png new file mode 100644 index 000000000..36bab00a6 Binary files /dev/null and b/test/fixtures/controller.polarArea/backgroundColor/value-element-options.png differ diff --git a/test/fixtures/controller.polarArea/borderAlign/indexable-dataset.js b/test/fixtures/controller.polarArea/borderAlign/indexable-dataset.js new file mode 100644 index 000000000..b6aaee0eb --- /dev/null +++ b/test/fixtures/controller.polarArea/borderAlign/indexable-dataset.js @@ -0,0 +1,43 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 2, 4, null, 6, 8], + borderAlign: [ + 'center', + 'inner', + 'center', + 'inner', + 'center', + 'inner', + ], + borderColor: '#00ff00' + }, + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: '#ff0000', + borderWidth: 5, + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderAlign/indexable-dataset.png b/test/fixtures/controller.polarArea/borderAlign/indexable-dataset.png new file mode 100644 index 000000000..65ec6d4d0 Binary files /dev/null and b/test/fixtures/controller.polarArea/borderAlign/indexable-dataset.png differ diff --git a/test/fixtures/controller.polarArea/borderAlign/indexable-element-options.js b/test/fixtures/controller.polarArea/borderAlign/indexable-element-options.js new file mode 100644 index 000000000..eea0a0e5a --- /dev/null +++ b/test/fixtures/controller.polarArea/borderAlign/indexable-element-options.js @@ -0,0 +1,42 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in element (fallback) + data: [0, 2, 4, null, 6, 8], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: '#ff0000', + borderWidth: 5, + borderAlign: [ + 'center', + 'inner', + 'center', + 'inner', + 'center', + 'inner', + ] + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderAlign/indexable-element-options.png b/test/fixtures/controller.polarArea/borderAlign/indexable-element-options.png new file mode 100644 index 000000000..5b058c23b Binary files /dev/null and b/test/fixtures/controller.polarArea/borderAlign/indexable-element-options.png differ diff --git a/test/fixtures/controller.polarArea/borderAlign/scriptable-dataset.js b/test/fixtures/controller.polarArea/borderAlign/scriptable-dataset.js new file mode 100644 index 000000000..0ba4263f0 --- /dev/null +++ b/test/fixtures/controller.polarArea/borderAlign/scriptable-dataset.js @@ -0,0 +1,39 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 2, 4, null, 6, 8], + borderAlign: function(ctx) { + var value = ctx.dataset.data[ctx.dataIndex] || 0; + return value > 4 ? 'inner' : 'center'; + }, + borderColor: '#0000ff', + }, + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: '#ff00ff', + borderWidth: 8, + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderAlign/scriptable-dataset.png b/test/fixtures/controller.polarArea/borderAlign/scriptable-dataset.png new file mode 100644 index 000000000..9bafab3bb Binary files /dev/null and b/test/fixtures/controller.polarArea/borderAlign/scriptable-dataset.png differ diff --git a/test/fixtures/controller.polarArea/borderAlign/scriptable-element-options.js b/test/fixtures/controller.polarArea/borderAlign/scriptable-element-options.js new file mode 100644 index 000000000..45e93a1c2 --- /dev/null +++ b/test/fixtures/controller.polarArea/borderAlign/scriptable-element-options.js @@ -0,0 +1,38 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in element (fallback) + data: [0, 2, 4, null, 6, 8], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: '#ff00ff', + borderWidth: 8, + borderAlign: function(ctx) { + var value = ctx.dataset.data[ctx.dataIndex] || 0; + return value > 4 ? 'center' : 'inner'; + } + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderAlign/scriptable-element-options.png b/test/fixtures/controller.polarArea/borderAlign/scriptable-element-options.png new file mode 100644 index 000000000..0978aa0c1 Binary files /dev/null and b/test/fixtures/controller.polarArea/borderAlign/scriptable-element-options.png differ diff --git a/test/fixtures/controller.polarArea/borderAlign/value-dataset.js b/test/fixtures/controller.polarArea/borderAlign/value-dataset.js new file mode 100644 index 000000000..6ad1a5113 --- /dev/null +++ b/test/fixtures/controller.polarArea/borderAlign/value-dataset.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 2, 4, null, 6, 8], + borderAlign: 'inner', + borderColor: '#00ff00', + }, + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: '#0000ff', + borderWidth: 4, + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderAlign/value-dataset.png b/test/fixtures/controller.polarArea/borderAlign/value-dataset.png new file mode 100644 index 000000000..c1eac58e7 Binary files /dev/null and b/test/fixtures/controller.polarArea/borderAlign/value-dataset.png differ diff --git a/test/fixtures/controller.polarArea/borderAlign/value-element-options.js b/test/fixtures/controller.polarArea/borderAlign/value-element-options.js new file mode 100644 index 000000000..e70dc6908 --- /dev/null +++ b/test/fixtures/controller.polarArea/borderAlign/value-element-options.js @@ -0,0 +1,35 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in element (fallback) + data: [0, 2, 4, null, 6, 8], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderAlign: 'center', + borderColor: '#0000ff', + borderWidth: 4, + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderAlign/value-element-options.png b/test/fixtures/controller.polarArea/borderAlign/value-element-options.png new file mode 100644 index 000000000..d47b5ff9a Binary files /dev/null and b/test/fixtures/controller.polarArea/borderAlign/value-element-options.png differ diff --git a/test/fixtures/controller.polarArea/borderColor/indexable-dataset.js b/test/fixtures/controller.polarArea/borderColor/indexable-dataset.js new file mode 100644 index 000000000..660941ef0 --- /dev/null +++ b/test/fixtures/controller.polarArea/borderColor/indexable-dataset.js @@ -0,0 +1,41 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 2, 4, null, 6, 8], + borderColor: [ + '#ff0000', + '#00ff00', + '#0000ff', + '#ffff00', + '#ff00ff', + '#000000' + ] + }, + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderWidth: 8 + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderColor/indexable-dataset.png b/test/fixtures/controller.polarArea/borderColor/indexable-dataset.png new file mode 100644 index 000000000..10d3e58e4 Binary files /dev/null and b/test/fixtures/controller.polarArea/borderColor/indexable-dataset.png differ diff --git a/test/fixtures/controller.polarArea/borderColor/indexable-element-options.js b/test/fixtures/controller.polarArea/borderColor/indexable-element-options.js new file mode 100644 index 000000000..818986697 --- /dev/null +++ b/test/fixtures/controller.polarArea/borderColor/indexable-element-options.js @@ -0,0 +1,41 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in element (fallback) + data: [0, 2, 4, null, 6, 8], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: [ + '#ff88ff', + '#888888', + '#ff8800', + '#00ff88', + '#8800ff', + '#ffff88' + ], + borderWidth: 8 + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderColor/indexable-element-options.png b/test/fixtures/controller.polarArea/borderColor/indexable-element-options.png new file mode 100644 index 000000000..992bba84c Binary files /dev/null and b/test/fixtures/controller.polarArea/borderColor/indexable-element-options.png differ diff --git a/test/fixtures/controller.polarArea/borderColor/scriptable-dataset.js b/test/fixtures/controller.polarArea/borderColor/scriptable-dataset.js new file mode 100644 index 000000000..6f837a740 --- /dev/null +++ b/test/fixtures/controller.polarArea/borderColor/scriptable-dataset.js @@ -0,0 +1,40 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 2, 4, null, 6, 8], + borderColor: function(ctx) { + var value = ctx.dataset.data[ctx.dataIndex] || 0; + return value > 8 ? '#ff0000' + : value > 6 ? '#00ff00' + : value > 2 ? '#0000ff' + : '#ff00ff'; + } + }, + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderWidth: 8 + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderColor/scriptable-dataset.png b/test/fixtures/controller.polarArea/borderColor/scriptable-dataset.png new file mode 100644 index 000000000..8fadecd2c Binary files /dev/null and b/test/fixtures/controller.polarArea/borderColor/scriptable-dataset.png differ diff --git a/test/fixtures/controller.polarArea/borderColor/scriptable-element-options.js b/test/fixtures/controller.polarArea/borderColor/scriptable-element-options.js new file mode 100644 index 000000000..93f8b53ff --- /dev/null +++ b/test/fixtures/controller.polarArea/borderColor/scriptable-element-options.js @@ -0,0 +1,40 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in element (fallback) + data: [0, 2, 4, null, 6, 8], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: function(ctx) { + var value = ctx.dataset.data[ctx.dataIndex] || 0; + return value > 8 ? '#ff00ff' + : value > 6 ? '#0000ff' + : value > 2 ? '#ff0000' + : '#00ff00'; + }, + borderWidth: 8 + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderColor/scriptable-element-options.png b/test/fixtures/controller.polarArea/borderColor/scriptable-element-options.png new file mode 100644 index 000000000..3d60a6e7e Binary files /dev/null and b/test/fixtures/controller.polarArea/borderColor/scriptable-element-options.png differ diff --git a/test/fixtures/controller.polarArea/borderColor/value-dataset.js b/test/fixtures/controller.polarArea/borderColor/value-dataset.js new file mode 100644 index 000000000..0361c730b --- /dev/null +++ b/test/fixtures/controller.polarArea/borderColor/value-dataset.js @@ -0,0 +1,34 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 2, 4, null, 6, 8], + borderColor: '#ff0000' + }, + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderWidth: 8 + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderColor/value-dataset.png b/test/fixtures/controller.polarArea/borderColor/value-dataset.png new file mode 100644 index 000000000..3cb271b45 Binary files /dev/null and b/test/fixtures/controller.polarArea/borderColor/value-dataset.png differ diff --git a/test/fixtures/controller.polarArea/borderColor/value-element-options.js b/test/fixtures/controller.polarArea/borderColor/value-element-options.js new file mode 100644 index 000000000..cff65f4ea --- /dev/null +++ b/test/fixtures/controller.polarArea/borderColor/value-element-options.js @@ -0,0 +1,34 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in element (fallback) + data: [0, 2, 4, null, 6, 8], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: '#00ff00', + borderWidth: 8 + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderColor/value-element-options.png b/test/fixtures/controller.polarArea/borderColor/value-element-options.png new file mode 100644 index 000000000..16ed5d9c7 Binary files /dev/null and b/test/fixtures/controller.polarArea/borderColor/value-element-options.png differ diff --git a/test/fixtures/controller.polarArea/borderWidth/indexable-dataset.js b/test/fixtures/controller.polarArea/borderWidth/indexable-dataset.js new file mode 100644 index 000000000..730de30e0 --- /dev/null +++ b/test/fixtures/controller.polarArea/borderWidth/indexable-dataset.js @@ -0,0 +1,41 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 2, 4, null, 6, 8], + borderWidth: [ + 0, + 1, + 2, + 3, + 4, + 5 + ] + }, + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: '#888', + } + }, + scale: { + display: false, + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderWidth/indexable-dataset.png b/test/fixtures/controller.polarArea/borderWidth/indexable-dataset.png new file mode 100644 index 000000000..0111acec5 Binary files /dev/null and b/test/fixtures/controller.polarArea/borderWidth/indexable-dataset.png differ diff --git a/test/fixtures/controller.polarArea/borderWidth/indexable-element-options.js b/test/fixtures/controller.polarArea/borderWidth/indexable-element-options.js new file mode 100644 index 000000000..cc790efb1 --- /dev/null +++ b/test/fixtures/controller.polarArea/borderWidth/indexable-element-options.js @@ -0,0 +1,41 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in element (fallback) + data: [0, 2, 4, null, 6, 8], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: '#888', + borderWidth: [ + 5, + 4, + 3, + 2, + 1, + 0 + ] + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderWidth/indexable-element-options.png b/test/fixtures/controller.polarArea/borderWidth/indexable-element-options.png new file mode 100644 index 000000000..11a1f79b5 Binary files /dev/null and b/test/fixtures/controller.polarArea/borderWidth/indexable-element-options.png differ diff --git a/test/fixtures/controller.polarArea/borderWidth/scriptable-dataset.js b/test/fixtures/controller.polarArea/borderWidth/scriptable-dataset.js new file mode 100644 index 000000000..c145811e1 --- /dev/null +++ b/test/fixtures/controller.polarArea/borderWidth/scriptable-dataset.js @@ -0,0 +1,37 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 2, 4, null, 6, 8], + borderWidth: function(ctx) { + var value = ctx.dataset.data[ctx.dataIndex] || 0; + return Math.abs(value); + } + }, + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: '#888', + } + }, + scale: { + display: false, + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderWidth/scriptable-dataset.png b/test/fixtures/controller.polarArea/borderWidth/scriptable-dataset.png new file mode 100644 index 000000000..154efebac Binary files /dev/null and b/test/fixtures/controller.polarArea/borderWidth/scriptable-dataset.png differ diff --git a/test/fixtures/controller.polarArea/borderWidth/scriptable-element-options.js b/test/fixtures/controller.polarArea/borderWidth/scriptable-element-options.js new file mode 100644 index 000000000..f0dae0725 --- /dev/null +++ b/test/fixtures/controller.polarArea/borderWidth/scriptable-element-options.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in element (fallback) + data: [0, 2, 4, null, 6, 8], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: '#888', + borderWidth: function(ctx) { + return ctx.dataIndex * 2; + } + } + }, + scale: { + display: false + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderWidth/scriptable-element-options.png b/test/fixtures/controller.polarArea/borderWidth/scriptable-element-options.png new file mode 100644 index 000000000..0c7e8b88e Binary files /dev/null and b/test/fixtures/controller.polarArea/borderWidth/scriptable-element-options.png differ diff --git a/test/fixtures/controller.polarArea/borderWidth/value-dataset.js b/test/fixtures/controller.polarArea/borderWidth/value-dataset.js new file mode 100644 index 000000000..1c7691cb8 --- /dev/null +++ b/test/fixtures/controller.polarArea/borderWidth/value-dataset.js @@ -0,0 +1,34 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in dataset + data: [0, 2, 4, null, 6, 8], + borderWidth: 2 + }, + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: '#888', + } + }, + scale: { + display: false, + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderWidth/value-dataset.png b/test/fixtures/controller.polarArea/borderWidth/value-dataset.png new file mode 100644 index 000000000..a30dfc88b Binary files /dev/null and b/test/fixtures/controller.polarArea/borderWidth/value-dataset.png differ diff --git a/test/fixtures/controller.polarArea/borderWidth/value-element-options.js b/test/fixtures/controller.polarArea/borderWidth/value-element-options.js new file mode 100644 index 000000000..02d9339e0 --- /dev/null +++ b/test/fixtures/controller.polarArea/borderWidth/value-element-options.js @@ -0,0 +1,34 @@ +module.exports = { + config: { + type: 'polarArea', + data: { + labels: [0, 1, 2, 3, 4, 5], + datasets: [ + { + // option in element (fallback) + data: [0, 2, 4, null, 6, 8], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + arc: { + backgroundColor: 'transparent', + borderColor: '#888', + borderWidth: 4 + } + }, + scale: { + display: false, + } + } + }, + options: { + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.polarArea/borderWidth/value-element-options.png b/test/fixtures/controller.polarArea/borderWidth/value-element-options.png new file mode 100644 index 000000000..32389e967 Binary files /dev/null and b/test/fixtures/controller.polarArea/borderWidth/value-element-options.png differ diff --git a/test/specs/controller.polarArea.tests.js b/test/specs/controller.polarArea.tests.js index 1feda5134..d439251fa 100644 --- a/test/specs/controller.polarArea.tests.js +++ b/test/specs/controller.polarArea.tests.js @@ -254,122 +254,111 @@ describe('Chart.controllers.polarArea', function() { expect(meta.data[4] instanceof Chart.elements.Arc).toBe(true); }); - it('should set arc hover styles', function() { - var chart = window.acquireChart({ - type: 'polarArea', - data: { - datasets: [{ - data: [10, 15, 0, -4], - label: 'dataset2' - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }, - options: { - showLines: true, - elements: { - arc: { - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 255, 0)', - borderWidth: 1.2 + describe('Interactions', function() { + beforeEach(function() { + this.chart = window.acquireChart({ + type: 'polarArea', + data: { + labels: ['label1', 'label2', 'label3', 'label4'], + datasets: [{ + data: [10, 15, 0, 4] + }] + }, + options: { + cutoutPercentage: 0, + elements: { + arc: { + backgroundColor: 'rgb(100, 150, 200)', + borderColor: 'rgb(50, 100, 150)', + borderWidth: 2, + } } } - } + }); }); - var meta = chart.getDatasetMeta(0); - var arc = meta.data[0]; - - meta.controller.setHoverStyle(arc); - expect(arc._model.backgroundColor).toBe('rgb(230, 0, 0)'); - expect(arc._model.borderColor).toBe('rgb(0, 230, 0)'); - expect(arc._model.borderWidth).toBe(1.2); - - // Can set hover style per dataset - chart.data.datasets[0].hoverBackgroundColor = 'rgb(77, 79, 81)'; - chart.data.datasets[0].hoverBorderColor = 'rgb(123, 125, 127)'; - chart.data.datasets[0].hoverBorderWidth = 2.1; - - meta.controller.setHoverStyle(arc); - expect(arc._model.backgroundColor).toBe('rgb(77, 79, 81)'); - expect(arc._model.borderColor).toBe('rgb(123, 125, 127)'); - expect(arc._model.borderWidth).toBe(2.1); - - // Custom style - arc.custom = { - hoverBorderWidth: 5.5, - hoverBackgroundColor: 'rgb(0, 0, 0)', - hoverBorderColor: 'rgb(10, 10, 10)' - }; + it ('should handle default hover styles', function() { + var chart = this.chart; + var arc = chart.getDatasetMeta(0).data[0]; - meta.controller.setHoverStyle(arc); - expect(arc._model.backgroundColor).toBe('rgb(0, 0, 0)'); - expect(arc._model.borderColor).toBe('rgb(10, 10, 10)'); - expect(arc._model.borderWidth).toBe(5.5); - }); + jasmine.triggerMouseEvent(chart, 'mousemove', arc); + expect(arc._model.backgroundColor).toBe('rgb(49, 135, 221)'); + expect(arc._model.borderColor).toBe('rgb(22, 89, 156)'); + expect(arc._model.borderWidth).toBe(2); - it('should remove hover styles', function() { - var chart = window.acquireChart({ - type: 'polarArea', - data: { - datasets: [{ - data: [10, 15, 0, -4], - label: 'dataset2' - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }, - options: { - showLines: true, - elements: { - arc: { - backgroundColor: 'rgb(255, 0, 0)', - borderColor: 'rgb(0, 255, 0)', - borderWidth: 1.2 - } - } - } + jasmine.triggerMouseEvent(chart, 'mouseout', arc); + expect(arc._model.backgroundColor).toBe('rgb(100, 150, 200)'); + expect(arc._model.borderColor).toBe('rgb(50, 100, 150)'); + expect(arc._model.borderWidth).toBe(2); }); - var meta = chart.getDatasetMeta(0); - var arc = meta.data[0]; + it ('should handle hover styles defined via dataset properties', function() { + var chart = this.chart; + var arc = chart.getDatasetMeta(0).data[0]; - chart.options.elements.arc.backgroundColor = 'rgb(45, 46, 47)'; - chart.options.elements.arc.borderColor = 'rgb(50, 51, 52)'; - chart.options.elements.arc.borderWidth = 10.1; + Chart.helpers.merge(chart.data.datasets[0], { + hoverBackgroundColor: 'rgb(200, 100, 150)', + hoverBorderColor: 'rgb(150, 50, 100)', + hoverBorderWidth: 8.4, + }); - meta.controller.setHoverStyle(arc); - chart.update(); - expect(arc._model.backgroundColor).toBe('rgb(45, 46, 47)'); - expect(arc._model.borderColor).toBe('rgb(50, 51, 52)'); - expect(arc._model.borderWidth).toBe(10.1); + chart.update(); - meta.controller.removeHoverStyle(arc); - chart.update(); - expect(arc._model.backgroundColor).toBe('rgb(45, 46, 47)'); - expect(arc._model.borderColor).toBe('rgb(50, 51, 52)'); - expect(arc._model.borderWidth).toBe(10.1); + jasmine.triggerMouseEvent(chart, 'mousemove', arc); + expect(arc._model.backgroundColor).toBe('rgb(200, 100, 150)'); + expect(arc._model.borderColor).toBe('rgb(150, 50, 100)'); + expect(arc._model.borderWidth).toBe(8.4); - // Can set hover style per dataset - chart.data.datasets[0].backgroundColor = 'rgb(77, 79, 81)'; - chart.data.datasets[0].borderColor = 'rgb(123, 125, 127)'; - chart.data.datasets[0].borderWidth = 2.1; + jasmine.triggerMouseEvent(chart, 'mouseout', arc); + expect(arc._model.backgroundColor).toBe('rgb(100, 150, 200)'); + expect(arc._model.borderColor).toBe('rgb(50, 100, 150)'); + expect(arc._model.borderWidth).toBe(2); + }); - meta.controller.removeHoverStyle(arc); - chart.update(); - expect(arc._model.backgroundColor).toBe('rgb(77, 79, 81)'); - expect(arc._model.borderColor).toBe('rgb(123, 125, 127)'); - expect(arc._model.borderWidth).toBe(2.1); - - // Custom style - arc.custom = { - borderWidth: 5.5, - backgroundColor: 'rgb(0, 0, 0)', - borderColor: 'rgb(10, 10, 10)' - }; + it ('should handle hover styles defined via element options', function() { + var chart = this.chart; + var arc = chart.getDatasetMeta(0).data[0]; - meta.controller.removeHoverStyle(arc); - chart.update(); - expect(arc._model.backgroundColor).toBe('rgb(0, 0, 0)'); - expect(arc._model.borderColor).toBe('rgb(10, 10, 10)'); - expect(arc._model.borderWidth).toBe(5.5); + Chart.helpers.merge(chart.options.elements.arc, { + hoverBackgroundColor: 'rgb(200, 100, 150)', + hoverBorderColor: 'rgb(150, 50, 100)', + hoverBorderWidth: 8.4, + }); + + chart.update(); + + jasmine.triggerMouseEvent(chart, 'mousemove', arc); + expect(arc._model.backgroundColor).toBe('rgb(200, 100, 150)'); + expect(arc._model.borderColor).toBe('rgb(150, 50, 100)'); + expect(arc._model.borderWidth).toBe(8.4); + + jasmine.triggerMouseEvent(chart, 'mouseout', arc); + expect(arc._model.backgroundColor).toBe('rgb(100, 150, 200)'); + expect(arc._model.borderColor).toBe('rgb(50, 100, 150)'); + expect(arc._model.borderWidth).toBe(2); + }); + + it ('should handle hover styles defined via element custom', function() { + var chart = this.chart; + var arc = chart.getDatasetMeta(0).data[0]; + + arc.custom = { + hoverBackgroundColor: 'rgb(200, 100, 150)', + hoverBorderColor: 'rgb(150, 50, 100)', + hoverBorderWidth: 8.4, + }; + + chart.update(); + + jasmine.triggerMouseEvent(chart, 'mousemove', arc); + expect(arc._model.backgroundColor).toBe('rgb(200, 100, 150)'); + expect(arc._model.borderColor).toBe('rgb(150, 50, 100)'); + expect(arc._model.borderWidth).toBe(8.4); + + jasmine.triggerMouseEvent(chart, 'mouseout', arc); + expect(arc._model.backgroundColor).toBe('rgb(100, 150, 200)'); + expect(arc._model.borderColor).toBe('rgb(50, 100, 150)'); + expect(arc._model.borderWidth).toBe(2); + }); }); });