archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Implement scriptable options for points in radar charts (#6041)

Browse Source
This commit is contained in:
Akihiko Kusanagi 2019-02-10 06:07:54 +08:00 committed by Simon Brunel
parent 0ed652b39f
commit 8b07cc2f28
40 changed files with 1246 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
docs/charts/radar.md
View File

@ -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 | [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) | <code>boolean&#124;string</code> | - | - | `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) | <code>string&#124;Image</code> | Yes | Yes | `'circle'`
| 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` | <code>boolean&#124;string</code> | 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` | <code>Color&#124;Color[]</code> | The fill color for points.
| `pointBorderColor` | <code>Color&#124;Color[]</code> | The border color for points.
| `pointBorderWidth` | <code>number&#124;number[]</code> | The width of the point border in pixels.
| `pointRadius` | <code>number&#124;number[]</code> | The radius of the point shape. If set to 0, the point is not rendered.
| `pointRotation` | <code>number&#124;number[]</code> | The rotation of the point in degrees.
| `pointStyle` | <code>string&#124;string[]&#124;Image&#124;Image[]</code> | Style of the point. [more...](#pointstyle)
| `pointHitRadius` | <code>number&#124;number[]</code> | The pixel size of the non-displayed point that reacts to mouse events.
| `pointHoverBackgroundColor` | <code>Color&#124;Color[]</code> | Point background color when hovered.
| `pointHoverBorderColor` | <code>Color&#124;Color[]</code> | Point border color when hovered.
| `pointHoverBorderWidth` | <code>number&#124;number[]</code> | Border width of point when hovered.
| `pointHoverRadius` | <code>number&#124;number[]</code> | The radius of the point when hovered.
### General
### pointStyle
The style of point. Options are:
* `'circle'`
* `'cross'`
* `'crossRot'`
* `'dash'.`
* `'line'`
* `'rect'`
* `'rectRounded'`
* `'rectRot'`
* `'star'`
* `'triangle'`
| Name | Description
| ---- | ----
| `label` | The label for the dataset which appears in the legend and tooltips.
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).
### 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]

16
src/controllers/controller.line.js
View File

@ -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,

190
src/controllers/controller.radar.js
View File

@ -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]),
}
});
// Utility
line._scale = scale;
line._datasetIndex = me.index;
// Data
line._children = points;
line._loop = true;
// Model
line._model = me._resolveLineOptions(line);
meta.dataset.pivot();
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;
// 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;
}
if ((dataset.hitRadius !== undefined) && (dataset.pointHitRadius === undefined)) {
dataset.pointHitRadius = dataset.hitRadius;
// 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
};
},
/**
* @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);
}
helpers.extend(point, {
// Utility
_datasetIndex: me.index,
_index: index,
_scale: scale,
return values;
},
// 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,
/**
* @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;
// 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),
var keys = [
'backgroundColor',
'borderWidth',
'borderColor',
'borderCapStyle',
'borderDash',
'borderDashOffset',
'borderJoinStyle',
'fill'
];
// Tooltip
hitRadius: resolve([custom.hitRadius, dataset.pointHitRadius, pointElementOptions.hitRadius], undefined, index)
}
});
for (i = 0, ilen = keys.length; i < ilen; ++i) {
key = keys[i];
values[key] = resolve([
custom[key],
dataset[key],
options[key]
]);
}
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);
}
});

58
test/fixtures/controller.radar/backgroundColor/indexable.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/backgroundColor/indexable.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

56
test/fixtures/controller.radar/backgroundColor/scriptable.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/backgroundColor/scriptable.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

44
test/fixtures/controller.radar/backgroundColor/value.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/backgroundColor/value.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

58
test/fixtures/controller.radar/borderColor/indexable.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/borderColor/indexable.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

56
test/fixtures/controller.radar/borderColor/scriptable.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/borderColor/scriptable.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

44
test/fixtures/controller.radar/borderColor/value.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/borderColor/value.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

50
test/fixtures/controller.radar/borderWidth/indexable.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/borderWidth/indexable.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

56
test/fixtures/controller.radar/borderWidth/scriptable.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/borderWidth/scriptable.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

46
test/fixtures/controller.radar/borderWidth/value.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/borderWidth/value.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

62
test/fixtures/controller.radar/pointStyle/indexable.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/pointStyle/indexable.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

60
test/fixtures/controller.radar/pointStyle/scriptable.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/pointStyle/scriptable.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

46
test/fixtures/controller.radar/pointStyle/value.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/pointStyle/value.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

49
test/fixtures/controller.radar/radius/indexable.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/radius/indexable.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

55
test/fixtures/controller.radar/radius/scriptable.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/radius/scriptable.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

45
test/fixtures/controller.radar/radius/value.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/radius/value.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

51
test/fixtures/controller.radar/rotation/indexable.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/rotation/indexable.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

57
test/fixtures/controller.radar/rotation/scriptable.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/rotation/scriptable.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

47
test/fixtures/controller.radar/rotation/value.js vendored Normal file
View File

@ -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
}
}
};

BIN
test/fixtures/controller.radar/rotation/value.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

248
test/specs/controller.radar.tests.js
View File

@ -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);
it ('should handle default hover styles', function() {
var chart = this.chart;
var point = chart.getDatasetMeta(0).data[0];
meta.controller.update(); // reset first
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);
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,
}
}
}
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);
it ('should handle hover styles defined via dataset properties', function() {
var chart = this.chart;
var point = chart.getDatasetMeta(0).data[0];
meta.controller.update(); // reset first
Chart.helpers.merge(chart.data.datasets[0], {
hoverBackgroundColor: 'rgb(200, 100, 150)',
hoverBorderColor: 'rgb(150, 50, 100)',
hoverBorderWidth: 8.4,
hoverRadius: 4.2
});
var point = meta.data[0];
chart.update();
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;
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);
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);
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);
});
// 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;
it ('should handle hover styles defined via element options', function() {
var chart = this.chart;
var point = chart.getDatasetMeta(0).data[0];
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);
Chart.helpers.merge(chart.options.elements.point, {
hoverBackgroundColor: 'rgb(200, 100, 150)',
hoverBorderColor: 'rgb(150, 50, 100)',
hoverBorderWidth: 8.4,
hoverRadius: 4.2
});
// Custom style
point.custom = {
radius: 4.4,
borderWidth: 5.5,
backgroundColor: 'rgb(0, 0, 0)',
borderColor: 'rgb(10, 10, 10)'
};
chart.update();
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);
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 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() {