diff --git a/docs/charts/radar.md b/docs/charts/radar.md index b1e31d78b07..1b1c7ef0714 100644 --- a/docs/charts/radar.md +++ b/docs/charts/radar.md @@ -64,46 +64,80 @@ var myRadarChart = new Chart(ctx, { The radar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of a line is generally set this way. -All `point*` properties can be specified as an array. If these are set to an array value, the first value applies to the first point, the second value to the second point, and so on. - -| Name | Type | Description -| ---- | ---- | ----------- -| `label` | `string` | The label for the dataset which appears in the legend and tooltips. -| `backgroundColor` | `Color` | The fill color under the line. See [Colors](../general/colors.md#colors). -| `borderColor` | `Color` | The color of the line. See [Colors](../general/colors.md#colors). -| `borderWidth` | `number` | The width of the line in pixels. -| `borderDash` | `number[]` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). -| `borderDashOffset` | `number` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). -| `borderCapStyle` | `string` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap). -| `borderJoinStyle` | `string` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin). -| `fill` | boolean|string | How to fill the area under the line. See [area charts](area.md). -| `lineTension` | `number` | Bezier curve tension of the line. Set to 0 to draw straightlines. -| `pointBackgroundColor` | Color|Color[] | The fill color for points. -| `pointBorderColor` | Color|Color[] | The border color for points. -| `pointBorderWidth` | number|number[] | The width of the point border in pixels. -| `pointRadius` | number|number[] | The radius of the point shape. If set to 0, the point is not rendered. -| `pointRotation` | number|number[] | The rotation of the point in degrees. -| `pointStyle` | string|string[]|Image|Image[] | Style of the point. [more...](#pointstyle) -| `pointHitRadius` | number|number[] | The pixel size of the non-displayed point that reacts to mouse events. -| `pointHoverBackgroundColor` | Color|Color[] | Point background color when hovered. -| `pointHoverBorderColor` | Color|Color[] | Point border color when hovered. -| `pointHoverBorderWidth` | number|number[] | Border width of point when hovered. -| `pointHoverRadius` | number|number[] | The radius of the point when hovered. - -### pointStyle -The style of point. Options are: -* `'circle'` -* `'cross'` -* `'crossRot'` -* `'dash'.` -* `'line'` -* `'rect'` -* `'rectRounded'` -* `'rectRot'` -* `'star'` -* `'triangle'` - -If the option is an image, that image is drawn on the canvas using [drawImage](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage). +| 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` +| [`label`](#general) | `string` | - | - | `''` +| [`lineTension`](#line-styling) | `number` | - | - | `0.4` +| [`pointBackgroundColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` +| [`pointBorderColor`](#point-styling) | `Color` | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` +| [`pointBorderWidth`](#point-styling) | `number` | Yes | Yes | `1` +| [`pointHitRadius`](#point-styling) | `number` | Yes | Yes | `1` +| [`pointHoverBackgroundColor`](#interactions) | `Color` | Yes | Yes | `undefined` +| [`pointHoverBorderColor`](#interactions) | `Color` | Yes | Yes | `undefined` +| [`pointHoverBorderWidth`](#interactions) | `number` | Yes | Yes | `1` +| [`pointHoverRadius`](#interactions) | `number` | Yes | Yes | `4` +| [`pointRadius`](#point-styling) | `number` | Yes | Yes | `3` +| [`pointRotation`](#point-styling) | `number` | Yes | Yes | `0` +| [`pointStyle`](#point-styling) | string|Image | Yes | Yes | `'circle'` + +### General + +| Name | Description +| ---- | ---- +| `label` | The label for the dataset which appears in the legend and tooltips. + +### Point Styling + +The style of each point can be controlled with the following properties: + +| Name | Description +| ---- | ---- +| `pointBackgroundColor` | The fill color for points. +| `pointBorderColor` | The border color for points. +| `pointBorderWidth` | The width of the point border in pixels. +| `pointHitRadius` | The pixel size of the non-displayed point that reacts to mouse events. +| `pointRadius` | The radius of the point shape. If set to 0, the point is not rendered. +| `pointRotation` | The rotation of the point in degrees. +| `pointStyle` | Style of the point. [more...](../configuration/elements#point-styles) + +All these values, if `undefined`, fallback first to the dataset options then to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options. + +### Line Styling + +The style of the line can be controlled with the following properties: + +| Name | Description +| ---- | ---- +| `backgroundColor` | The line fill color. +| `borderCapStyle` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap). +| `borderColor` | The line color. +| `borderDash` | Length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash). +| `borderDashOffset` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset). +| `borderJoinStyle` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin). +| `borderWidth` | The line width (in pixels). +| `fill` | How to fill the area under the line. See [area charts](area.md). +| `lineTension` | Bezier curve tension of the line. Set to 0 to draw straightlines. + +All these values, if `undefined`, fallback to the associated [`elements.line.*`](../configuration/elements.md#line-configuration) options. + +### Interactions + +The interaction with each point can be controlled with the following properties: + +| Name | Description +| ---- | ----------- +| `pointHoverBackgroundColor` | Point background color when hovered. +| `pointHoverBorderColor` | Point border color when hovered. +| `pointHoverBorderWidth` | Border width of point when hovered. +| `pointHoverRadius` | The radius of the point when hovered. ## Configuration Options @@ -128,7 +162,7 @@ It is common to want to apply a configuration setting to all created radar chart ## Data Structure -The `data` property of a dataset for a radar chart is specified as an array of numbers. Each point in the data array corresponds to the label at the same index on the x axis. +The `data` property of a dataset for a radar chart is specified as an array of numbers. Each point in the data array corresponds to the label at the same index. ```javascript data: [20, 10] diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index 5341ac1e6dd..49665e2299a 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -91,6 +91,7 @@ module.exports = DatasetController.extend({ var value = dataset.data[index]; var yScale = me.getScaleForId(meta.yAxisID); var xScale = me.getScaleForId(meta.xAxisID); + var lineModel = meta.dataset._model; var x, y; var options = me._resolvePointOptions(point, index); @@ -117,10 +118,10 @@ module.exports = DatasetController.extend({ backgroundColor: options.backgroundColor, borderColor: options.borderColor, borderWidth: options.borderWidth, - tension: meta.dataset._model ? meta.dataset._model.tension : 0, - steppedLine: meta.dataset._model ? meta.dataset._model.steppedLine : false, + tension: valueOrDefault(custom.tension, lineModel ? lineModel.tension : 0), + steppedLine: lineModel ? lineModel.steppedLine : false, // Tooltip - hitRadius: options.hitRadius, + hitRadius: options.hitRadius }; }, @@ -155,7 +156,7 @@ module.exports = DatasetController.extend({ hoverRadius: 'pointHoverRadius', pointStyle: 'pointStyle', radius: 'pointRadius', - rotation: 'pointRotation', + rotation: 'pointRotation' }; var keys = Object.keys(ELEMENT_OPTIONS); @@ -210,7 +211,7 @@ module.exports = DatasetController.extend({ // to https://github.com/chartjs/Chart.js/issues/2435#issuecomment-216718158 // This option gives lines the ability to span gaps values.spanGaps = valueOrDefault(dataset.spanGaps, options.spanGaps); - values.tension = resolve([custom.tension, dataset.lineTension, elementOptions.tension]); + values.tension = valueOrDefault(dataset.lineTension, elementOptions.tension); values.steppedLine = resolve([custom.steppedLine, dataset.steppedLine, elementOptions.stepped]); return values; @@ -256,7 +257,7 @@ module.exports = DatasetController.extend({ var lineModel = meta.dataset._model; var area = chart.chartArea; var points = meta.data || []; - var i, ilen, point, model, controlPoints; + var i, ilen, model, controlPoints; // Only consider points that are drawn in case the spanGaps option is used if (lineModel.spanGaps) { @@ -273,8 +274,7 @@ module.exports = DatasetController.extend({ helpers.splineCurveMonotone(points); } else { for (i = 0, ilen = points.length; i < ilen; ++i) { - point = points[i]; - model = point._model; + model = points[i]._model; controlPoints = helpers.splineCurve( helpers.previousItem(points, i)._model, model, diff --git a/src/controllers/controller.radar.js b/src/controllers/controller.radar.js index 500a40d3446..770ddc51afe 100644 --- a/src/controllers/controller.radar.js +++ b/src/controllers/controller.radar.js @@ -5,6 +5,7 @@ var defaults = require('../core/core.defaults'); var elements = require('../elements/index'); var helpers = require('../helpers/index'); +var valueOrDefault = helpers.valueOrDefault; var resolve = helpers.options.resolve; defaults._set('radar', { @@ -31,10 +32,8 @@ module.exports = DatasetController.extend({ var meta = me.getMeta(); var line = meta.dataset; var points = meta.data || []; - var custom = line.custom || {}; - var dataset = me.getDataset(); - var lineElementOptions = me.chart.options.elements.line; var scale = me.chart.scale; + var dataset = me.getDataset(); var i, ilen; // Compatibility: If the properties are defined with only the old name, use those values @@ -42,32 +41,19 @@ module.exports = DatasetController.extend({ dataset.lineTension = dataset.tension; } - helpers.extend(meta.dataset, { - // Utility - _datasetIndex: me.index, - _scale: scale, - // Data - _children: points, - _loop: true, - // Model - _model: { - // Appearance - tension: resolve([custom.tension, dataset.lineTension, lineElementOptions.tension]), - backgroundColor: resolve([custom.backgroundColor, dataset.backgroundColor, lineElementOptions.backgroundColor]), - borderWidth: resolve([custom.borderWidth, dataset.borderWidth, lineElementOptions.borderWidth]), - borderColor: resolve([custom.borderColor, dataset.borderColor, lineElementOptions.borderColor]), - fill: resolve([custom.fill, dataset.fill, lineElementOptions.fill]), - borderCapStyle: resolve([custom.borderCapStyle, dataset.borderCapStyle, lineElementOptions.borderCapStyle]), - borderDash: resolve([custom.borderDash, dataset.borderDash, lineElementOptions.borderDash]), - borderDashOffset: resolve([custom.borderDashOffset, dataset.borderDashOffset, lineElementOptions.borderDashOffset]), - borderJoinStyle: resolve([custom.borderJoinStyle, dataset.borderJoinStyle, lineElementOptions.borderJoinStyle]), - } - }); - - meta.dataset.pivot(); + // Utility + line._scale = scale; + line._datasetIndex = me.index; + // Data + line._children = points; + line._loop = true; + // Model + line._model = me._resolveLineOptions(line); + + line.pivot(); // Update Points - for (i = 0, ilen = points.length; i < ilen; i++) { + for (i = 0, ilen = points.length; i < ilen; ++i) { me.updateElement(points[i], i, reset); } @@ -75,7 +61,7 @@ module.exports = DatasetController.extend({ me.updateBezierControlPoints(); // Now pivot the point for animation - for (i = 0, ilen = points.length; i < ilen; i++) { + for (i = 0, ilen = points.length; i < ilen; ++i) { points[i].pivot(); } }, @@ -85,43 +71,120 @@ module.exports = DatasetController.extend({ var custom = point.custom || {}; var dataset = me.getDataset(); var scale = me.chart.scale; - var pointElementOptions = me.chart.options.elements.point; var pointPosition = scale.getPointPositionForValue(index, dataset.data[index]); + var options = me._resolvePointOptions(point, index); + var lineModel = me.getMeta().dataset._model; + var x = reset ? scale.xCenter : pointPosition.x; + var y = reset ? scale.yCenter : pointPosition.y; + + // Utility + point._scale = scale; + point._options = options; + point._datasetIndex = me.index; + point._index = index; + + // Desired view properties + point._model = { + x: x, // value not used in dataset scale, but we want a consistent API between scales + y: y, + skip: custom.skip || isNaN(x) || isNaN(y), + // Appearance + radius: options.radius, + pointStyle: options.pointStyle, + rotation: options.rotation, + backgroundColor: options.backgroundColor, + borderColor: options.borderColor, + borderWidth: options.borderWidth, + tension: valueOrDefault(custom.tension, lineModel ? lineModel.tension : 0), + + // Tooltip + hitRadius: options.hitRadius + }; + }, - // Compatibility: If the properties are defined with only the old name, use those values - if ((dataset.radius !== undefined) && (dataset.pointRadius === undefined)) { - dataset.pointRadius = dataset.radius; + /** + * @private + */ + _resolvePointOptions: function(element, index) { + var me = this; + var chart = me.chart; + var dataset = chart.data.datasets[me.index]; + var custom = element.custom || {}; + var options = chart.options.elements.point; + var values = {}; + var i, ilen, key; + + // Scriptable options + var context = { + chart: chart, + dataIndex: index, + dataset: dataset, + datasetIndex: me.index + }; + + var ELEMENT_OPTIONS = { + backgroundColor: 'pointBackgroundColor', + borderColor: 'pointBorderColor', + borderWidth: 'pointBorderWidth', + hitRadius: 'pointHitRadius', + hoverBackgroundColor: 'pointHoverBackgroundColor', + hoverBorderColor: 'pointHoverBorderColor', + hoverBorderWidth: 'pointHoverBorderWidth', + hoverRadius: 'pointHoverRadius', + pointStyle: 'pointStyle', + radius: 'pointRadius', + rotation: 'pointRotation' + }; + var keys = Object.keys(ELEMENT_OPTIONS); + + for (i = 0, ilen = keys.length; i < ilen; ++i) { + key = keys[i]; + values[key] = resolve([ + custom[key], + dataset[ELEMENT_OPTIONS[key]], + dataset[key], + options[key] + ], context, index); } - if ((dataset.hitRadius !== undefined) && (dataset.pointHitRadius === undefined)) { - dataset.pointHitRadius = dataset.hitRadius; + + return values; + }, + + /** + * @private + */ + _resolveLineOptions: function(element) { + var me = this; + var chart = me.chart; + var dataset = chart.data.datasets[me.index]; + var custom = element.custom || {}; + var options = chart.options.elements.line; + var values = {}; + var i, ilen, key; + + var keys = [ + 'backgroundColor', + 'borderWidth', + 'borderColor', + 'borderCapStyle', + 'borderDash', + 'borderDashOffset', + 'borderJoinStyle', + 'fill' + ]; + + for (i = 0, ilen = keys.length; i < ilen; ++i) { + key = keys[i]; + values[key] = resolve([ + custom[key], + dataset[key], + options[key] + ]); } - helpers.extend(point, { - // Utility - _datasetIndex: me.index, - _index: index, - _scale: scale, - - // Desired view properties - _model: { - x: reset ? scale.xCenter : pointPosition.x, // value not used in dataset scale, but we want a consistent API between scales - y: reset ? scale.yCenter : pointPosition.y, - - // Appearance - tension: resolve([custom.tension, dataset.lineTension, me.chart.options.elements.line.tension]), - radius: resolve([custom.radius, dataset.pointRadius, pointElementOptions.radius], undefined, index), - backgroundColor: resolve([custom.backgroundColor, dataset.pointBackgroundColor, pointElementOptions.backgroundColor], undefined, index), - borderColor: resolve([custom.borderColor, dataset.pointBorderColor, pointElementOptions.borderColor], undefined, index), - borderWidth: resolve([custom.borderWidth, dataset.pointBorderWidth, pointElementOptions.borderWidth], undefined, index), - pointStyle: resolve([custom.pointStyle, dataset.pointStyle, pointElementOptions.pointStyle], undefined, index), - rotation: resolve([custom.rotation, dataset.pointRotation, pointElementOptions.rotation], undefined, index), - - // Tooltip - hitRadius: resolve([custom.hitRadius, dataset.pointHitRadius, pointElementOptions.hitRadius], undefined, index) - } - }); - - point._model.skip = custom.skip || isNaN(point._model.x) || isNaN(point._model.y); + values.tension = valueOrDefault(dataset.lineTension, options.tension); + + return values; }, updateBezierControlPoints: function() { @@ -135,7 +198,7 @@ module.exports = DatasetController.extend({ return Math.max(Math.min(pt, max), min); } - for (i = 0, ilen = points.length; i < ilen; i++) { + for (i = 0, ilen = points.length; i < ilen; ++i) { model = points[i]._model; controlPoints = helpers.splineCurve( helpers.previousItem(points, i, true)._model, @@ -153,11 +216,8 @@ module.exports = DatasetController.extend({ }, setHoverStyle: function(point) { - // Point - var dataset = this.chart.data.datasets[point._datasetIndex]; - var custom = point.custom || {}; - var index = point._index; var model = point._model; + var options = point._options; var getHoverColor = helpers.getHoverColor; point.$previousStyle = { @@ -167,9 +227,9 @@ module.exports = DatasetController.extend({ radius: model.radius }; - model.radius = resolve([custom.hoverRadius, dataset.pointHoverRadius, this.chart.options.elements.point.hoverRadius], undefined, index); - model.backgroundColor = resolve([custom.hoverBackgroundColor, dataset.pointHoverBackgroundColor, getHoverColor(model.backgroundColor)], undefined, index); - model.borderColor = resolve([custom.hoverBorderColor, dataset.pointHoverBorderColor, getHoverColor(model.borderColor)], undefined, index); - model.borderWidth = resolve([custom.hoverBorderWidth, dataset.pointHoverBorderWidth, model.borderWidth], undefined, index); + model.backgroundColor = valueOrDefault(options.hoverBackgroundColor, getHoverColor(options.backgroundColor)); + model.borderColor = valueOrDefault(options.hoverBorderColor, getHoverColor(options.borderColor)); + model.borderWidth = valueOrDefault(options.hoverBorderWidth, options.borderWidth); + model.radius = valueOrDefault(options.hoverRadius, options.radius); } }); diff --git a/test/fixtures/controller.radar/backgroundColor/indexable.js b/test/fixtures/controller.radar/backgroundColor/indexable.js new file mode 100644 index 00000000000..cd59ce44a13 --- /dev/null +++ b/test/fixtures/controller.radar/backgroundColor/indexable.js @@ -0,0 +1,58 @@ +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', + '#00ff00', + '#0000ff', + '#ffff00', + '#ff00ff', + '#000000' + ] + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + fill: false, + }, + point: { + backgroundColor: [ + '#ff88ff', + '#888888', + '#ff8800', + '#00ff88', + '#8800ff', + '#ffff88' + ], + radius: 10 + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/backgroundColor/indexable.png b/test/fixtures/controller.radar/backgroundColor/indexable.png new file mode 100644 index 00000000000..6141ca8015b Binary files /dev/null and b/test/fixtures/controller.radar/backgroundColor/indexable.png differ diff --git a/test/fixtures/controller.radar/backgroundColor/scriptable.js b/test/fixtures/controller.radar/backgroundColor/scriptable.js new file mode 100644 index 00000000000..cf2a074e5c7 --- /dev/null +++ b/test/fixtures/controller.radar/backgroundColor/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/backgroundColor/scriptable.png b/test/fixtures/controller.radar/backgroundColor/scriptable.png new file mode 100644 index 00000000000..b1e6d6e5aee Binary files /dev/null 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 new file mode 100644 index 00000000000..0a592c61595 --- /dev/null +++ b/test/fixtures/controller.radar/backgroundColor/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/backgroundColor/value.png b/test/fixtures/controller.radar/backgroundColor/value.png new file mode 100644 index 00000000000..dd7f6de6dc2 Binary files /dev/null and b/test/fixtures/controller.radar/backgroundColor/value.png differ diff --git a/test/fixtures/controller.radar/borderColor/indexable.js b/test/fixtures/controller.radar/borderColor/indexable.js new file mode 100644 index 00000000000..11297f2dbfc --- /dev/null +++ b/test/fixtures/controller.radar/borderColor/indexable.js @@ -0,0 +1,58 @@ +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', + '#00ff00', + '#0000ff', + '#ffff00', + '#ff00ff', + '#000000' + ] + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + fill: false, + }, + point: { + borderColor: [ + '#ff88ff', + '#888888', + '#ff8800', + '#00ff88', + '#8800ff', + '#ffff88' + ], + radius: 10 + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/borderColor/indexable.png b/test/fixtures/controller.radar/borderColor/indexable.png new file mode 100644 index 00000000000..00fe4265201 Binary files /dev/null and b/test/fixtures/controller.radar/borderColor/indexable.png differ diff --git a/test/fixtures/controller.radar/borderColor/scriptable.js b/test/fixtures/controller.radar/borderColor/scriptable.js new file mode 100644 index 00000000000..e0545231a5d --- /dev/null +++ b/test/fixtures/controller.radar/borderColor/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: 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, + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/borderColor/scriptable.png b/test/fixtures/controller.radar/borderColor/scriptable.png new file mode 100644 index 00000000000..ea9bb5c3031 Binary files /dev/null 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 new file mode 100644 index 00000000000..0ff69e08b87 --- /dev/null +++ b/test/fixtures/controller.radar/borderColor/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], + 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, + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/borderColor/value.png b/test/fixtures/controller.radar/borderColor/value.png new file mode 100644 index 00000000000..715c582e38a Binary files /dev/null and b/test/fixtures/controller.radar/borderColor/value.png differ diff --git a/test/fixtures/controller.radar/borderWidth/indexable.js b/test/fixtures/controller.radar/borderWidth/indexable.js new file mode 100644 index 00000000000..262d9d56d87 --- /dev/null +++ b/test/fixtures/controller.radar/borderWidth/indexable.js @@ -0,0 +1,50 @@ +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: '#00ff00', + pointBorderWidth: [ + 1, 2, 3, 4, 5, 6 + ] + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + fill: false, + }, + point: { + borderColor: '#ff0000', + borderWidth: [ + 6, 5, 4, 3, 2, 1 + ], + radius: 10 + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/borderWidth/indexable.png b/test/fixtures/controller.radar/borderWidth/indexable.png new file mode 100644 index 00000000000..73d3493e248 Binary files /dev/null and b/test/fixtures/controller.radar/borderWidth/indexable.png differ diff --git a/test/fixtures/controller.radar/borderWidth/scriptable.js b/test/fixtures/controller.radar/borderWidth/scriptable.js new file mode 100644 index 00000000000..8d321b5fcad --- /dev/null +++ b/test/fixtures/controller.radar/borderWidth/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/borderWidth/scriptable.png b/test/fixtures/controller.radar/borderWidth/scriptable.png new file mode 100644 index 00000000000..2fccea7488d Binary files /dev/null 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 new file mode 100644 index 00000000000..8c59eccfd2a --- /dev/null +++ b/test/fixtures/controller.radar/borderWidth/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/borderWidth/value.png b/test/fixtures/controller.radar/borderWidth/value.png new file mode 100644 index 00000000000..ebaf659e3eb Binary files /dev/null and b/test/fixtures/controller.radar/borderWidth/value.png differ diff --git a/test/fixtures/controller.radar/pointStyle/indexable.js b/test/fixtures/controller.radar/pointStyle/indexable.js new file mode 100644 index 00000000000..835cd2350cd --- /dev/null +++ b/test/fixtures/controller.radar/pointStyle/indexable.js @@ -0,0 +1,62 @@ +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', + pointBorderColor: '#ff0000', + pointStyle: [ + 'circle', + 'cross', + 'crossRot', + 'dash', + 'line', + 'rect', + ] + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + fill: false, + }, + point: { + backgroundColor: '#00ff00', + borderColor: '#00ff00', + pointStyle: [ + 'line', + 'rect', + 'rectRounded', + 'rectRot', + 'star', + 'triangle' + ], + radius: 10 + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/pointStyle/indexable.png b/test/fixtures/controller.radar/pointStyle/indexable.png new file mode 100644 index 00000000000..3182e522a9e Binary files /dev/null and b/test/fixtures/controller.radar/pointStyle/indexable.png differ diff --git a/test/fixtures/controller.radar/pointStyle/scriptable.js b/test/fixtures/controller.radar/pointStyle/scriptable.js new file mode 100644 index 00000000000..9301672fbb2 --- /dev/null +++ b/test/fixtures/controller.radar/pointStyle/scriptable.js @@ -0,0 +1,60 @@ +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', + pointBorderColor: '#ff0000', + pointStyle: function(ctx) { + var value = ctx.dataset.data[ctx.dataIndex] || 0; + return value > 8 ? 'rect' + : value > 0 ? 'star' + : value > -8 ? 'cross' + : 'triangle'; + } + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + fill: false, + }, + point: { + backgroundColor: '#0000ff', + borderColor: '#0000ff', + pointStyle: function(ctx) { + var value = ctx.dataset.data[ctx.dataIndex] || 0; + return value > 8 ? 'triangle' + : value > 0 ? 'cross' + : value > -8 ? 'star' + : 'rect'; + }, + radius: 10, + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/pointStyle/scriptable.png b/test/fixtures/controller.radar/pointStyle/scriptable.png new file mode 100644 index 00000000000..35179a3032d Binary files /dev/null and b/test/fixtures/controller.radar/pointStyle/scriptable.png differ diff --git a/test/fixtures/controller.radar/pointStyle/value.js b/test/fixtures/controller.radar/pointStyle/value.js new file mode 100644 index 00000000000..31c2ff941a4 --- /dev/null +++ b/test/fixtures/controller.radar/pointStyle/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: '#ff0000', + pointStyle: 'star', + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + fill: false, + }, + point: { + backgroundColor: '#00ff00', + pointStyle: 'rect', + radius: 10, + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/pointStyle/value.png b/test/fixtures/controller.radar/pointStyle/value.png new file mode 100644 index 00000000000..654d4ed8257 Binary files /dev/null and b/test/fixtures/controller.radar/pointStyle/value.png differ diff --git a/test/fixtures/controller.radar/radius/indexable.js b/test/fixtures/controller.radar/radius/indexable.js new file mode 100644 index 00000000000..7a106b58735 --- /dev/null +++ b/test/fixtures/controller.radar/radius/indexable.js @@ -0,0 +1,49 @@ +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: '#00ff00', + pointRadius: [ + 1, 2, 3, 4, 5, 6 + ] + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + fill: false, + }, + point: { + backgroundColor: '#ff0000', + radius: [ + 6, 5, 4, 3, 2, 1 + ], + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/radius/indexable.png b/test/fixtures/controller.radar/radius/indexable.png new file mode 100644 index 00000000000..7d735618a59 Binary files /dev/null and b/test/fixtures/controller.radar/radius/indexable.png differ diff --git a/test/fixtures/controller.radar/radius/scriptable.js b/test/fixtures/controller.radar/radius/scriptable.js new file mode 100644 index 00000000000..bbc5cdeb2a4 --- /dev/null +++ b/test/fixtures/controller.radar/radius/scriptable.js @@ -0,0 +1,55 @@ +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: '#0000ff', + pointRadius: 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: { + backgroundColor: '#ff0000', + radius: function(ctx) { + var value = ctx.dataset.data[ctx.dataIndex] || 0; + return value > 4 ? 2 + : value > -4 ? 5 + : 10; + }, + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/radius/scriptable.png b/test/fixtures/controller.radar/radius/scriptable.png new file mode 100644 index 00000000000..8b58d888163 Binary files /dev/null and b/test/fixtures/controller.radar/radius/scriptable.png differ diff --git a/test/fixtures/controller.radar/radius/value.js b/test/fixtures/controller.radar/radius/value.js new file mode 100644 index 00000000000..d7f85687bec --- /dev/null +++ b/test/fixtures/controller.radar/radius/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], + pointBackgroundColor: '#0000ff', + pointRadius: 6 + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + fill: false, + }, + point: { + backgroundColor: '#00ff00', + radius: 3, + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/radius/value.png b/test/fixtures/controller.radar/radius/value.png new file mode 100644 index 00000000000..55abc14fe2a Binary files /dev/null and b/test/fixtures/controller.radar/radius/value.png differ diff --git a/test/fixtures/controller.radar/rotation/indexable.js b/test/fixtures/controller.radar/rotation/indexable.js new file mode 100644 index 00000000000..f516ce75f57 --- /dev/null +++ b/test/fixtures/controller.radar/rotation/indexable.js @@ -0,0 +1,51 @@ +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: '#00ff00', + pointRotation: [ + 0, 30, 60, 90, 120, 150 + ] + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + fill: false, + }, + point: { + borderColor: '#ff0000', + borderWidth: 10, + pointStyle: 'line', + rotation: [ + 150, 120, 90, 60, 30, 0 + ], + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/rotation/indexable.png b/test/fixtures/controller.radar/rotation/indexable.png new file mode 100644 index 00000000000..403aa7f869f Binary files /dev/null and b/test/fixtures/controller.radar/rotation/indexable.png differ diff --git a/test/fixtures/controller.radar/rotation/scriptable.js b/test/fixtures/controller.radar/rotation/scriptable.js new file mode 100644 index 00000000000..d85b7c97e82 --- /dev/null +++ b/test/fixtures/controller.radar/rotation/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: '#0000ff', + pointRotation: function(ctx) { + var value = ctx.dataset.data[ctx.dataIndex] || 0; + return value > 4 ? 120 + : value > -4 ? 60 + : 0; + } + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + fill: false, + }, + point: { + borderColor: '#ff0000', + rotation: function(ctx) { + var value = ctx.dataset.data[ctx.dataIndex] || 0; + return value > 4 ? 0 + : value > -4 ? 60 + : 120; + }, + pointStyle: 'line', + radius: 10, + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/rotation/scriptable.png b/test/fixtures/controller.radar/rotation/scriptable.png new file mode 100644 index 00000000000..69958a77f2d Binary files /dev/null and b/test/fixtures/controller.radar/rotation/scriptable.png differ diff --git a/test/fixtures/controller.radar/rotation/value.js b/test/fixtures/controller.radar/rotation/value.js new file mode 100644 index 00000000000..4b9b17d081d --- /dev/null +++ b/test/fixtures/controller.radar/rotation/value.js @@ -0,0 +1,47 @@ +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', + pointRotation: 90 + }, + { + // option in element (fallback) + data: [4, -5, -10, null, 10, 5], + } + ] + }, + options: { + legend: false, + title: false, + elements: { + line: { + fill: false, + }, + point: { + borderColor: '#00ff00', + pointStyle: 'line', + radius: 10, + rotation: 0, + } + }, + scale: { + display: false, + ticks: { + min: -15 + } + } + } + }, + options: { + canvas: { + height: 512, + width: 512 + } + } +}; diff --git a/test/fixtures/controller.radar/rotation/value.png b/test/fixtures/controller.radar/rotation/value.png new file mode 100644 index 00000000000..5a5cd597709 Binary files /dev/null and b/test/fixtures/controller.radar/rotation/value.png differ diff --git a/test/specs/controller.radar.tests.js b/test/specs/controller.radar.tests.js index a911f93020e..6b2c754547c 100644 --- a/test/specs/controller.radar.tests.js +++ b/test/specs/controller.radar.tests.js @@ -127,7 +127,6 @@ describe('Chart.controllers.radar', function() { borderJoinStyle: 'bevel', borderWidth: 1.2, fill: true, - tension: 0.1, })); [ @@ -210,7 +209,6 @@ describe('Chart.controllers.radar', function() { borderJoinStyle: 'miter', borderWidth: 0.55, fill: false, - tension: 0, })); // Since tension is now 0, we don't care about the control points @@ -237,7 +235,6 @@ describe('Chart.controllers.radar', function() { // Use custom styles for lines & first point meta.dataset.custom = { - tension: 0.25, backgroundColor: 'rgb(55, 55, 54)', borderColor: 'rgb(8, 7, 6)', borderWidth: 0.3, @@ -270,7 +267,6 @@ describe('Chart.controllers.radar', function() { borderJoinStyle: 'round', borderWidth: 0.3, fill: true, - tension: 0.25, })); expect(meta.data[0]._model.x).toBeCloseToPixel(256); @@ -290,165 +286,123 @@ describe('Chart.controllers.radar', function() { })); }); - it('should set point hover styles', function() { - var chart = window.acquireChart({ - type: 'radar', - data: { - datasets: [{ - data: [10, 15, 0, 4] - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }, - options: { - showLines: true, - elements: { - line: { - backgroundColor: 'rgb(255, 0, 0)', - borderCapStyle: 'round', - borderColor: 'rgb(0, 255, 0)', - borderDash: [], - borderDashOffset: 0.1, - borderJoinStyle: 'bevel', - borderWidth: 1.2, - fill: true, - skipNull: true, - tension: 0.1, - }, - point: { - backgroundColor: 'rgb(255, 255, 0)', - borderWidth: 1, - borderColor: 'rgb(255, 255, 255)', - hitRadius: 1, - hoverRadius: 4, - hoverBorderWidth: 1, - radius: 3, + describe('Interactions', function() { + beforeEach(function() { + this.chart = window.acquireChart({ + type: 'radar', + data: { + labels: ['label1', 'label2', 'label3', 'label4'], + datasets: [{ + data: [10, 15, 0, 4] + }] + }, + options: { + elements: { + point: { + backgroundColor: 'rgb(100, 150, 200)', + borderColor: 'rgb(50, 100, 150)', + borderWidth: 2, + radius: 3 + } } } - } + }); }); - var meta = chart.getDatasetMeta(0); - - meta.controller.update(); // reset first - - var point = meta.data[0]; - - meta.controller.setHoverStyle(point); - expect(point._model.backgroundColor).toBe('rgb(229, 230, 0)'); - expect(point._model.borderColor).toBe('rgb(230, 230, 230)'); - expect(point._model.borderWidth).toBe(1); - expect(point._model.radius).toBe(4); - - // Can set hover style per dataset - chart.data.datasets[0].pointHoverRadius = 3.3; - chart.data.datasets[0].pointHoverBackgroundColor = 'rgb(77, 79, 81)'; - chart.data.datasets[0].pointHoverBorderColor = 'rgb(123, 125, 127)'; - chart.data.datasets[0].pointHoverBorderWidth = 2.1; - - meta.controller.setHoverStyle(point); - expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)'); - expect(point._model.borderColor).toBe('rgb(123, 125, 127)'); - expect(point._model.borderWidth).toBe(2.1); - expect(point._model.radius).toBe(3.3); - - // Custom style - point.custom = { - hoverRadius: 4.4, - hoverBorderWidth: 5.5, - hoverBackgroundColor: 'rgb(0, 0, 0)', - hoverBorderColor: 'rgb(10, 10, 10)' - }; - - meta.controller.setHoverStyle(point); - expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)'); - expect(point._model.borderColor).toBe('rgb(10, 10, 10)'); - expect(point._model.borderWidth).toBe(5.5); - expect(point._model.radius).toBe(4.4); - }); - - - it('should remove hover styles', function() { - var chart = window.acquireChart({ - type: 'radar', - data: { - datasets: [{ - data: [10, 15, 0, 4] - }], - labels: ['label1', 'label2', 'label3', 'label4'] - }, - options: { - showLines: true, - elements: { - line: { - backgroundColor: 'rgb(255, 0, 0)', - borderCapStyle: 'round', - borderColor: 'rgb(0, 255, 0)', - borderDash: [], - borderDashOffset: 0.1, - borderJoinStyle: 'bevel', - borderWidth: 1.2, - fill: true, - skipNull: true, - tension: 0.1, - }, - point: { - backgroundColor: 'rgb(255, 255, 0)', - borderWidth: 1, - borderColor: 'rgb(255, 255, 255)', - hitRadius: 1, - hoverRadius: 4, - hoverBorderWidth: 1, - radius: 3, - } - } - } + it ('should handle default hover styles', function() { + var chart = this.chart; + var point = chart.getDatasetMeta(0).data[0]; + + jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(point._model.backgroundColor).toBe('rgb(49, 135, 221)'); + expect(point._model.borderColor).toBe('rgb(22, 89, 156)'); + expect(point._model.borderWidth).toBe(1); + expect(point._model.radius).toBe(4); + + jasmine.triggerMouseEvent(chart, 'mouseout', point); + expect(point._model.backgroundColor).toBe('rgb(100, 150, 200)'); + expect(point._model.borderColor).toBe('rgb(50, 100, 150)'); + expect(point._model.borderWidth).toBe(2); + expect(point._model.radius).toBe(3); }); - var meta = chart.getDatasetMeta(0); - - meta.controller.update(); // reset first - - var point = meta.data[0]; - - chart.options.elements.point.backgroundColor = 'rgb(45, 46, 47)'; - chart.options.elements.point.borderColor = 'rgb(50, 51, 52)'; - chart.options.elements.point.borderWidth = 10.1; - chart.options.elements.point.radius = 1.01; + it ('should handle hover styles defined via dataset properties', function() { + var chart = this.chart; + var point = chart.getDatasetMeta(0).data[0]; + + Chart.helpers.merge(chart.data.datasets[0], { + hoverBackgroundColor: 'rgb(200, 100, 150)', + hoverBorderColor: 'rgb(150, 50, 100)', + hoverBorderWidth: 8.4, + hoverRadius: 4.2 + }); + + chart.update(); + + jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(point._model.backgroundColor).toBe('rgb(200, 100, 150)'); + expect(point._model.borderColor).toBe('rgb(150, 50, 100)'); + expect(point._model.borderWidth).toBe(8.4); + expect(point._model.radius).toBe(4.2); + + jasmine.triggerMouseEvent(chart, 'mouseout', point); + expect(point._model.backgroundColor).toBe('rgb(100, 150, 200)'); + expect(point._model.borderColor).toBe('rgb(50, 100, 150)'); + expect(point._model.borderWidth).toBe(2); + expect(point._model.radius).toBe(3); + }); - meta.controller.removeHoverStyle(point); - chart.update(); - expect(point._model.backgroundColor).toBe('rgb(45, 46, 47)'); - expect(point._model.borderColor).toBe('rgb(50, 51, 52)'); - expect(point._model.borderWidth).toBe(10.1); - expect(point._model.radius).toBe(1.01); - - // Can set hover style per dataset - chart.data.datasets[0].pointRadius = 3.3; - chart.data.datasets[0].pointBackgroundColor = 'rgb(77, 79, 81)'; - chart.data.datasets[0].pointBorderColor = 'rgb(123, 125, 127)'; - chart.data.datasets[0].pointBorderWidth = 2.1; - - meta.controller.removeHoverStyle(point); - chart.update(); - expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)'); - expect(point._model.borderColor).toBe('rgb(123, 125, 127)'); - expect(point._model.borderWidth).toBe(2.1); - expect(point._model.radius).toBe(3.3); - - // Custom style - point.custom = { - radius: 4.4, - 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 point = chart.getDatasetMeta(0).data[0]; + + Chart.helpers.merge(chart.options.elements.point, { + hoverBackgroundColor: 'rgb(200, 100, 150)', + hoverBorderColor: 'rgb(150, 50, 100)', + hoverBorderWidth: 8.4, + hoverRadius: 4.2 + }); + + chart.update(); + + jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(point._model.backgroundColor).toBe('rgb(200, 100, 150)'); + expect(point._model.borderColor).toBe('rgb(150, 50, 100)'); + expect(point._model.borderWidth).toBe(8.4); + expect(point._model.radius).toBe(4.2); + + jasmine.triggerMouseEvent(chart, 'mouseout', point); + expect(point._model.backgroundColor).toBe('rgb(100, 150, 200)'); + expect(point._model.borderColor).toBe('rgb(50, 100, 150)'); + expect(point._model.borderWidth).toBe(2); + expect(point._model.radius).toBe(3); + }); - meta.controller.removeHoverStyle(point); - chart.update(); - expect(point._model.backgroundColor).toBe('rgb(0, 0, 0)'); - expect(point._model.borderColor).toBe('rgb(10, 10, 10)'); - expect(point._model.borderWidth).toBe(5.5); - expect(point._model.radius).toBe(4.4); + it ('should handle hover styles defined via element custom', function() { + var chart = this.chart; + var point = chart.getDatasetMeta(0).data[0]; + + point.custom = { + hoverBackgroundColor: 'rgb(200, 100, 150)', + hoverBorderColor: 'rgb(150, 50, 100)', + hoverBorderWidth: 8.4, + hoverRadius: 4.2 + }; + + chart.update(); + + jasmine.triggerMouseEvent(chart, 'mousemove', point); + expect(point._model.backgroundColor).toBe('rgb(200, 100, 150)'); + expect(point._model.borderColor).toBe('rgb(150, 50, 100)'); + expect(point._model.borderWidth).toBe(8.4); + expect(point._model.radius).toBe(4.2); + + jasmine.triggerMouseEvent(chart, 'mouseout', point); + expect(point._model.backgroundColor).toBe('rgb(100, 150, 200)'); + expect(point._model.borderColor).toBe('rgb(50, 100, 150)'); + expect(point._model.borderWidth).toBe(2); + expect(point._model.radius).toBe(3); + }); }); it('should allow pointBorderWidth to be set to 0', function() {