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

Remove undocumented "custom" feature (#6605)

Browse Source 
Remove undocumented "custom" feature
This commit is contained in:
Ben McCann 2019-10-27 13:33:21 -07:00 committed by Evert Timberg
parent cc844f068f
commit 0da237a315
13 changed files with 27 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/controllers/controller.bar.js
View File

@ -179,7 +179,7 @@ module.exports = DatasetController.extend({
var me = this;
var meta = me.getMeta();
var dataset = me.getDataset();
var options = me._resolveDataElementOptions(rectangle, index);
var options = me._resolveDataElementOptions(index);
rectangle._xScale = me.getScaleForId(meta.xAxisID);
rectangle._yScale = me.getScaleForId(meta.yAxisID);

9
src/controllers/controller.bubble.js
View File

@ -83,10 +83,9 @@ module.exports = DatasetController.extend({
updateElement: function(point, index, reset) {
var me = this;
var meta = me.getMeta();
var custom = point.custom || {};
var xScale = me.getScaleForId(meta.xAxisID);
var yScale = me.getScaleForId(meta.yAxisID);
var options = me._resolveDataElementOptions(point, index);
var options = me._resolveDataElementOptions(index);
var data = me.getDataset().data[index];
var dsIndex = me.index;
@ -106,7 +105,7 @@ module.exports = DatasetController.extend({
pointStyle: options.pointStyle,
rotation: options.rotation,
radius: reset ? 0 : options.radius,
skip: custom.skip || isNaN(x) || isNaN(y),
skip: isNaN(x) || isNaN(y),
x: x,
y: y,
};
@ -138,11 +137,10 @@ module.exports = DatasetController.extend({
/**
* @private
*/
_resolveDataElementOptions: function(point, index) {
_resolveDataElementOptions: function(index) {
var me = this;
var chart = me.chart;
var dataset = me.getDataset();
var custom = point.custom || {};
var data = dataset.data[index] || {};
var values = DatasetController.prototype._resolveDataElementOptions.apply(me, arguments);
@ -161,7 +159,6 @@ module.exports = DatasetController.extend({
// Custom radius resolution
values.radius = resolve([
custom.radius,
data.r,
me._config.radius,
chart.options.elements.point.radius

4
src/controllers/controller.doughnut.js
View File

@ -190,7 +190,7 @@ module.exports = DatasetController.extend({
}
for (i = 0, ilen = arcs.length; i < ilen; ++i) {
arcs[i]._options = me._resolveDataElementOptions(arcs[i], i);
arcs[i]._options = me._resolveDataElementOptions(i);
}
chart.borderWidth = me.getMaxBorderWidth();
@ -323,7 +323,7 @@ module.exports = DatasetController.extend({
arc = arcs[i];
if (controller) {
controller._configure();
options = controller._resolveDataElementOptions(arc, i);
options = controller._resolveDataElementOptions(i);
} else {
options = arc._options;
}

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

@ -93,7 +93,7 @@ module.exports = DatasetController.extend({
// Data
line._children = points;
// Model
line._model = me._resolveDatasetElementOptions(line);
line._model = me._resolveDatasetElementOptions();
line.pivot();
}
@ -116,7 +116,6 @@ module.exports = DatasetController.extend({
updateElement: function(point, index, reset) {
var me = this;
var meta = me.getMeta();
var custom = point.custom || {};
var dataset = me.getDataset();
var datasetIndex = me.index;
var value = dataset.data[index];
@ -125,7 +124,7 @@ module.exports = DatasetController.extend({
var lineModel = meta.dataset._model;
var x, y;
var options = me._resolveDataElementOptions(point, index);
var options = me._resolveDataElementOptions(index);
x = xScale.getPixelForValue(typeof value === 'object' ? value : NaN, index, datasetIndex);
y = reset ? yScale.getBasePixel() : me.calculatePointY(value, index, datasetIndex);
@ -141,7 +140,7 @@ module.exports = DatasetController.extend({
point._model = {
x: x,
y: y,
skip: custom.skip || isNaN(x) || isNaN(y),
skip: isNaN(x) || isNaN(y),
// Appearance
radius: options.radius,
pointStyle: options.pointStyle,
@ -149,7 +148,7 @@ module.exports = DatasetController.extend({
backgroundColor: options.backgroundColor,
borderColor: options.borderColor,
borderWidth: options.borderWidth,
tension: valueOrDefault(custom.tension, lineModel ? lineModel.tension : 0),
tension: lineModel ? lineModel.tension : 0,
steppedLine: lineModel ? lineModel.steppedLine : false,
// Tooltip
hitRadius: options.hitRadius
@ -159,10 +158,9 @@ module.exports = DatasetController.extend({
/**
* @private
*/
_resolveDatasetElementOptions: function(element) {
_resolveDatasetElementOptions: function() {
var me = this;
var config = me._config;
var custom = element.custom || {};
var options = me.chart.options;
var lineOptions = options.elements.line;
var values = DatasetController.prototype._resolveDatasetElementOptions.apply(me, arguments);
@ -172,7 +170,7 @@ module.exports = DatasetController.extend({
// This option gives lines the ability to span gaps
values.spanGaps = valueOrDefault(config.spanGaps, options.spanGaps);
values.tension = valueOrDefault(config.lineTension, lineOptions.tension);
values.steppedLine = resolve([custom.steppedLine, config.steppedLine, lineOptions.stepped]);
values.steppedLine = resolve([config.steppedLine, lineOptions.stepped]);
return values;
},

2
src/controllers/controller.polarArea.js
View File

@ -159,7 +159,7 @@ module.exports = DatasetController.extend({
}
for (i = 0, ilen = arcs.length; i < ilen; ++i) {
arcs[i]._options = me._resolveDataElementOptions(arcs[i], i);
arcs[i]._options = me._resolveDataElementOptions(i);
me.updateElement(arcs[i], i, reset);
}
},

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

@ -92,7 +92,7 @@ module.exports = DatasetController.extend({
line._children = points;
line._loop = true;
// Model
line._model = me._resolveDatasetElementOptions(line);
line._model = me._resolveDatasetElementOptions();
line.pivot();
@ -112,11 +112,10 @@ module.exports = DatasetController.extend({
updateElement: function(point, index, reset) {
var me = this;
var custom = point.custom || {};
var dataset = me.getDataset();
var scale = me.chart.scale;
var pointPosition = scale.getPointPositionForValue(index, dataset.data[index]);
var options = me._resolveDataElementOptions(point, index);
var options = me._resolveDataElementOptions(index);
var lineModel = me.getMeta().dataset._model;
var x = reset ? scale.xCenter : pointPosition.x;
var y = reset ? scale.yCenter : pointPosition.y;
@ -131,7 +130,7 @@ module.exports = DatasetController.extend({
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),
skip: isNaN(x) || isNaN(y),
// Appearance
radius: options.radius,
pointStyle: options.pointStyle,
@ -139,7 +138,7 @@ module.exports = DatasetController.extend({
backgroundColor: options.backgroundColor,
borderColor: options.borderColor,
borderWidth: options.borderWidth,
tension: valueOrDefault(custom.tension, lineModel ? lineModel.tension : 0),
tension: lineModel ? lineModel.tension : 0,
// Tooltip
hitRadius: options.hitRadius

28
src/core/core.datasetController.js
View File

@ -340,10 +340,10 @@ helpers.extend(DatasetController.prototype, {
me._configure();
if (dataset && index === undefined) {
style = me._resolveDatasetElementOptions(dataset || {});
style = me._resolveDatasetElementOptions();
} else {
index = index || 0;
style = me._resolveDataElementOptions(meta.data[index] || {}, index);
style = me._resolveDataElementOptions(index);
}
if (style.fill === false || style.fill === null) {
@ -356,11 +356,10 @@ helpers.extend(DatasetController.prototype, {
/**
* @private
*/
_resolveDatasetElementOptions: function(element, hover) {
_resolveDatasetElementOptions: function(hover) {
var me = this;
var chart = me.chart;
var datasetOpts = me._config;
var custom = element.custom || {};
var options = chart.options.elements[me.datasetElementType.prototype._type] || {};
var elementOptions = me._datasetElementOptions;
var values = {};
@ -378,7 +377,6 @@ helpers.extend(DatasetController.prototype, {
key = elementOptions[i];
readKey = hover ? 'hover' + key.charAt(0).toUpperCase() + key.slice(1) : key;
values[key] = resolve([
custom[readKey],
datasetOpts[readKey],
options[readKey]
], context);
@ -390,11 +388,10 @@ helpers.extend(DatasetController.prototype, {
/**
* @private
*/
_resolveDataElementOptions: function(element, index) {
_resolveDataElementOptions: function(index) {
var me = this;
var custom = element && element.custom;
var cached = me._cachedDataOpts;
if (cached && !custom) {
if (cached) {
return cached;
}
var chart = me.chart;
@ -412,17 +409,14 @@ helpers.extend(DatasetController.prototype, {
};
// `resolve` sets cacheable to `false` if any option is indexed or scripted
var info = {cacheable: !custom};
var info = {cacheable: true};
var keys, i, ilen, key;
custom = custom || {};
if (helpers.isArray(elementOptions)) {
for (i = 0, ilen = elementOptions.length; i < ilen; ++i) {
key = elementOptions[i];
values[key] = resolve([
custom[key],
datasetOpts[key],
options[key]
], context, index, info);
@ -432,7 +426,6 @@ helpers.extend(DatasetController.prototype, {
for (i = 0, ilen = keys.length; i < ilen; ++i) {
key = keys[i];
values[key] = resolve([
custom[key],
datasetOpts[elementOptions[key]],
datasetOpts[key],
options[key]
@ -455,7 +448,6 @@ helpers.extend(DatasetController.prototype, {
setHoverStyle: function(element) {
var dataset = this.chart.data.datasets[element._datasetIndex];
var index = element._index;
var custom = element.custom || {};
var model = element._model;
var getHoverColor = helpers.getHoverColor;
@ -465,9 +457,9 @@ helpers.extend(DatasetController.prototype, {
borderWidth: model.borderWidth
};
model.backgroundColor = resolve([custom.hoverBackgroundColor, dataset.hoverBackgroundColor, getHoverColor(model.backgroundColor)], undefined, index);
model.borderColor = resolve([custom.hoverBorderColor, dataset.hoverBorderColor, getHoverColor(model.borderColor)], undefined, index);
model.borderWidth = resolve([custom.hoverBorderWidth, dataset.hoverBorderWidth, model.borderWidth], undefined, index);
model.backgroundColor = resolve([dataset.hoverBackgroundColor, getHoverColor(model.backgroundColor)], undefined, index);
model.borderColor = resolve([dataset.hoverBorderColor, getHoverColor(model.borderColor)], undefined, index);
model.borderWidth = resolve([dataset.hoverBorderWidth, model.borderWidth], undefined, index);
},
/**
@ -494,7 +486,7 @@ helpers.extend(DatasetController.prototype, {
}
model = element._model;
hoverOptions = this._resolveDatasetElementOptions(element, true);
hoverOptions = this._resolveDatasetElementOptions(true);
keys = Object.keys(hoverOptions);
for (i = 0, ilen = keys.length; i < ilen; ++i) {

32
test/specs/controller.bar.tests.js
View File

@ -1407,18 +1407,6 @@ describe('Chart.controllers.bar', function() {
expect(bar._model.backgroundColor).toBe('rgb(255, 255, 255)');
expect(bar._model.borderColor).toBe('rgb(9, 9, 9)');
expect(bar._model.borderWidth).toBe(2.5);
// Should allow a custom style
bar.custom = {
hoverBackgroundColor: 'rgb(255, 0, 0)',
hoverBorderColor: 'rgb(0, 255, 0)',
hoverBorderWidth: 1.5
};
meta.controller.setHoverStyle(bar);
expect(bar._model.backgroundColor).toBe('rgb(255, 0, 0)');
expect(bar._model.borderColor).toBe('rgb(0, 255, 0)');
expect(bar._model.borderWidth).toBe(1.5);
});
it('should remove a hover style from a bar', function() {
@ -1483,26 +1471,6 @@ describe('Chart.controllers.bar', function() {
expect(bar._model.backgroundColor).toBe('rgb(255, 255, 255)');
expect(bar._model.borderColor).toBe('rgb(9, 9, 9)');
expect(bar._model.borderWidth).toBe(2.5);
// Should allow a custom style
bar.custom = {
backgroundColor: 'rgb(255, 0, 0)',
borderColor: 'rgb(0, 255, 0)',
borderWidth: 1.5
};
chart.update();
expect(bar._model.backgroundColor).toBe('rgb(255, 0, 0)');
expect(bar._model.borderColor).toBe('rgb(0, 255, 0)');
expect(bar._model.borderWidth).toBe(1.5);
meta.controller.setHoverStyle(bar);
expect(bar._model.backgroundColor).toBe(helpers.getHoverColor('rgb(255, 0, 0)'));
expect(bar._model.borderColor).toBe(helpers.getHoverColor('rgb(0, 255, 0)'));
expect(bar._model.borderWidth).toBe(1.5);
meta.controller.removeHoverStyle(bar);
expect(bar._model.backgroundColor).toBe('rgb(255, 0, 0)');
expect(bar._model.borderColor).toBe('rgb(0, 255, 0)');
expect(bar._model.borderWidth).toBe(1.5);
});
describe('Bar width', function() {

47
test/specs/controller.bubble.tests.js
View File

@ -180,27 +180,6 @@ describe('Chart.controllers.bubble', function() {
skip: false
}));
}
// point styles
meta.data[0].custom = {
radius: 2.2,
backgroundColor: 'rgb(0, 1, 3)',
borderColor: 'rgb(4, 6, 8)',
borderWidth: 0.787,
tension: 0.15,
hitRadius: 5,
skip: true
};
chart.update();
expect(meta.data[0]._model).toEqual(jasmine.objectContaining({
backgroundColor: 'rgb(0, 1, 3)',
borderColor: 'rgb(4, 6, 8)',
borderWidth: 0.787,
hitRadius: 5,
skip: true
}));
});
it('should handle number of data point changes in update', function() {
@ -389,31 +368,5 @@ describe('Chart.controllers.bubble', function() {
expect(point._model.borderWidth).toBe(2);
expect(point._model.radius).toBe(20);
});
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(20 + 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(20);
});
});
});

23
test/specs/controller.doughnut.tests.js
View File

@ -408,28 +408,5 @@ describe('Chart.controllers.doughnut', function() {
expect(arc._model.borderColor).toBe('rgb(50, 100, 150)');
expect(arc._model.borderWidth).toBe(2);
});
it ('should handle hover styles defined via element custom', function() {
var chart = this.chart;
var arc = chart.getDatasetMeta(0).data[0];
arc.custom = {
hoverBackgroundColor: 'rgb(200, 100, 150)',
hoverBorderColor: 'rgb(150, 50, 100)',
hoverBorderWidth: 8.4,
};
chart.update();
jasmine.triggerMouseEvent(chart, 'mousemove', arc);
expect(arc._model.backgroundColor).toBe('rgb(200, 100, 150)');
expect(arc._model.borderColor).toBe('rgb(150, 50, 100)');
expect(arc._model.borderWidth).toBe(8.4);
jasmine.triggerMouseEvent(chart, 'mouseout', arc);
expect(arc._model.backgroundColor).toBe('rgb(100, 150, 200)');
expect(arc._model.borderColor).toBe('rgb(50, 100, 150)');
expect(arc._model.borderWidth).toBe(2);
});
});
});

26
test/specs/controller.line.tests.js
View File

@ -870,32 +870,6 @@ describe('Chart.controllers.line', function() {
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 handle dataset hover styles defined via dataset properties', function() {
var chart = this.chart;
var point = chart.getDatasetMeta(0).data[0];

38
test/specs/controller.polarArea.tests.js
View File

@ -135,27 +135,12 @@ describe('Chart.controllers.polarArea', function() {
expect(meta.data[i]._model.borderWidth).toBe(1.123);
}
// arc styles
meta.data[0].custom = {
backgroundColor: 'rgb(0, 1, 3)',
borderColor: 'rgb(4, 6, 8)',
borderWidth: 0.787
};
chart.update();
expect(meta.data[0]._model.x).toBeCloseToPixel(256);
expect(meta.data[0]._model.y).toBeCloseToPixel(259);
expect(meta.data[0]._model.innerRadius).toBeCloseToPixel(0);
expect(meta.data[0]._model.outerRadius).toBeCloseToPixel(177);
expect(meta.data[0]._model).toEqual(jasmine.objectContaining({
startAngle: -0.5 * Math.PI,
endAngle: 0,
backgroundColor: 'rgb(0, 1, 3)',
borderWidth: 0.787,
borderColor: 'rgb(4, 6, 8)',
label: 'label1'
}));
});
it('should update elements with start angle from options', function() {
@ -337,28 +322,5 @@ describe('Chart.controllers.polarArea', function() {
expect(arc._model.borderColor).toBe('rgb(50, 100, 150)');
expect(arc._model.borderWidth).toBe(2);
});
it ('should handle hover styles defined via element custom', function() {
var chart = this.chart;
var arc = chart.getDatasetMeta(0).data[0];
arc.custom = {
hoverBackgroundColor: 'rgb(200, 100, 150)',
hoverBorderColor: 'rgb(150, 50, 100)',
hoverBorderWidth: 8.4,
};
chart.update();
jasmine.triggerMouseEvent(chart, 'mousemove', arc);
expect(arc._model.backgroundColor).toBe('rgb(200, 100, 150)');
expect(arc._model.borderColor).toBe('rgb(150, 50, 100)');
expect(arc._model.borderWidth).toBe(8.4);
jasmine.triggerMouseEvent(chart, 'mouseout', arc);
expect(arc._model.backgroundColor).toBe('rgb(100, 150, 200)');
expect(arc._model.borderColor).toBe('rgb(50, 100, 150)');
expect(arc._model.borderWidth).toBe(2);
});
});
});

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

@ -231,59 +231,6 @@ describe('Chart.controllers.radar', function() {
tension: 0,
}));
});
// Use custom styles for lines & first point
meta.dataset.custom = {
backgroundColor: 'rgb(55, 55, 54)',
borderColor: 'rgb(8, 7, 6)',
borderWidth: 0.3,
borderCapStyle: 'square',
borderDash: [4, 3],
borderDashOffset: 4.4,
borderJoinStyle: 'round',
fill: true,
};
// point styles
meta.data[0].custom = {
radius: 2.2,
backgroundColor: 'rgb(0, 1, 3)',
borderColor: 'rgb(4, 6, 8)',
borderWidth: 0.787,
tension: 0.15,
skip: true,
hitRadius: 5,
};
meta.controller._update();
expect(meta.dataset._model).toEqual(jasmine.objectContaining({
backgroundColor: 'rgb(55, 55, 54)',
borderCapStyle: 'square',
borderColor: 'rgb(8, 7, 6)',
borderDash: [4, 3],
borderDashOffset: 4.4,
borderJoinStyle: 'round',
borderWidth: 0.3,
fill: true,
}));
expect(meta.data[0]._model.x).toBeCloseToPixel(256);
expect(meta.data[0]._model.y).toBeCloseToPixel(120);
expect(meta.data[0]._model.controlPointPreviousX).toBeCloseToPixel(241);
expect(meta.data[0]._model.controlPointPreviousY).toBeCloseToPixel(120);
expect(meta.data[0]._model.controlPointNextX).toBeCloseToPixel(281);
expect(meta.data[0]._model.controlPointNextY).toBeCloseToPixel(120);
expect(meta.data[0]._model).toEqual(jasmine.objectContaining({
radius: 2.2,
backgroundColor: 'rgb(0, 1, 3)',
borderColor: 'rgb(4, 6, 8)',
borderWidth: 0.787,
tension: 0.15,
skip: true,
hitRadius: 5,
}));
});
describe('Interactions', function() {
@ -377,32 +324,6 @@ describe('Chart.controllers.radar', function() {
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() {