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);
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;
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,
};
/**
* @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);
// Custom radius resolution
values.radius = resolve([
- custom.radius,
data.r,
me._config.radius,
chart.options.elements.point.radius
}
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();
arc = arcs[i];
if (controller) {
controller._configure();
- options = controller._resolveDataElementOptions(arc, i);
+ options = controller._resolveDataElementOptions(i);
} else {
options = arc._options;
}
// Data
line._children = points;
// Model
- line._model = me._resolveDatasetElementOptions(line);
+ line._model = me._resolveDatasetElementOptions();
line.pivot();
}
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];
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);
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,
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
/**
* @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);
// 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;
},
}
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);
}
},
line._children = points;
line._loop = true;
// Model
- line._model = me._resolveDatasetElementOptions(line);
+ line._model = me._resolveDatasetElementOptions();
line.pivot();
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;
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,
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
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) {
/**
* @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 = {};
key = elementOptions[i];
readKey = hover ? 'hover' + key.charAt(0).toUpperCase() + key.slice(1) : key;
values[key] = resolve([
- custom[readKey],
datasetOpts[readKey],
options[readKey]
], context);
/**
* @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;
};
// `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);
for (i = 0, ilen = keys.length; i < ilen; ++i) {
key = keys[i];
values[key] = resolve([
- custom[key],
datasetOpts[elementOptions[key]],
datasetOpts[key],
options[key]
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;
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);
},
/**
}
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) {
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() {
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() {
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() {
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);
- });
});
});
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);
- });
});
});
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];
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() {
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);
- });
});
});
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() {
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() {
projects / thirdparty / Chart.js.git / commitdiff
