Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make legend appearance consistent with chart elements #5621

Merged
merged 6 commits into from May 9, 2019
Merged

Make legend appearance consistent with chart elements #5621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0146168
Make legend appearance consistent with chart elements
nagix Jul 6, 2018
9adc03f
Implement _resolveElementOptions in the base datasetController and re…
nagix May 1, 2019
7fa7e46
Add _type property to Element to avoid TypeError for custom elements
nagix May 2, 2019
72ffd8a
Further refactoring moving all _resolve*Options methods to the base c…
nagix May 2, 2019
9879c11
Fix typo
nagix May 2, 2019
66895ae
Small optimization
nagix May 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 4 additions & 1 deletion docs/configuration/legend.md
View file
Open in desktop
Expand Up @@ -82,7 +82,10 @@ Items passed to the legend `onClick` function are the ones returned from `labels
strokeStyle: Color,

// Point style of the legend box (only used if usePointStyle is true)
pointStyle: string
pointStyle: string | Image,

// Rotation of the point in degrees (only used if usePointStyle is true)
rotation: number
}
```

Expand Down
55 changes: 11 additions & 44 deletions src/controllers/controller.bar.js
View file
Open in desktop
Expand Up @@ -5,8 +5,6 @@ var defaults = require('../core/core.defaults');
var elements = require('../elements/index');
var helpers = require('../helpers/index');

var resolve = helpers.options.resolve;

defaults._set('bar', {
hover: {
mode: 'label'
Expand Down Expand Up @@ -120,6 +118,16 @@ module.exports = DatasetController.extend({

dataElementType: elements.Rectangle,

/**
* @private
*/
_dataElementOptions: [
'backgroundColor',
'borderColor',
'borderSkipped',
'borderWidth'
],

initialize: function() {
var me = this;
var meta;
Expand Down Expand Up @@ -147,7 +155,7 @@ module.exports = DatasetController.extend({
var me = this;
var meta = me.getMeta();
var dataset = me.getDataset();
var options = me._resolveElementOptions(rectangle, index);
var options = me._resolveDataElementOptions(rectangle, index);

rectangle._xScale = me.getScaleForId(meta.xAxisID);
rectangle._yScale = me.getScaleForId(meta.yAxisID);
Expand Down Expand Up @@ -372,46 +380,5 @@ module.exports = DatasetController.extend({
}

helpers.canvas.unclipArea(chart.ctx);
},

/**
* @private
*/
_resolveElementOptions: function(rectangle, index) {
var me = this;
var chart = me.chart;
var datasets = chart.data.datasets;
var dataset = datasets[me.index];
var datasetOpts = me._config;
var custom = rectangle.custom || {};
var options = chart.options.elements.rectangle;
var values = {};
var i, ilen, key;

// Scriptable options
var context = {
chart: chart,
dataIndex: index,
dataset: dataset,
datasetIndex: me.index
};

var keys = [
'backgroundColor',
'borderColor',
'borderSkipped',
'borderWidth'
];

for (i = 0, ilen = keys.length; i < ilen; ++i) {
key = keys[i];
values[key] = resolve([
custom[key],
datasetOpts[key],
options[key]
], context, index);
}

return values;
}
});
58 changes: 24 additions & 34 deletions src/controllers/controller.bubble.js
View file
Open in desktop
Expand Up @@ -47,6 +47,22 @@ module.exports = DatasetController.extend({
*/
dataElementType: elements.Point,

/**
* @private
*/
_dataElementOptions: [
'backgroundColor',
'borderColor',
'borderWidth',
'hoverBackgroundColor',
'hoverBorderColor',
'hoverBorderWidth',
'hoverRadius',
'hitRadius',
'pointStyle',
'rotation'
],

/**
* @protected
*/
Expand All @@ -70,7 +86,7 @@ module.exports = DatasetController.extend({
var custom = point.custom || {};
var xScale = me.getScaleForId(meta.xAxisID);
var yScale = me.getScaleForId(meta.yAxisID);
var options = me._resolveElementOptions(point, index);
var options = me._resolveDataElementOptions(point, index);
var data = me.getDataset().data[index];
var dsIndex = me.index;

Expand Down Expand Up @@ -122,17 +138,13 @@ module.exports = DatasetController.extend({
/**
* @private
*/
_resolveElementOptions: function(point, index) {
_resolveDataElementOptions: function(point, index) {
benmccann marked this conversation as resolved.
Show resolved Hide resolved
var me = this;
var chart = me.chart;
var datasets = chart.data.datasets;
var dataset = datasets[me.index];
var datasetOpts = me._config;
var dataset = me.getDataset();
var custom = point.custom || {};
var options = chart.options.elements.point;
var data = dataset.data[index];
var values = {};
var i, ilen, key;
var data = dataset.data[index] || {};
var values = DatasetController.prototype._resolveDataElementOptions.apply(me, arguments);

// Scriptable options
var context = {
Expand All @@ -142,34 +154,12 @@ module.exports = DatasetController.extend({
datasetIndex: me.index
};

var keys = [
'backgroundColor',
'borderColor',
'borderWidth',
'hoverBackgroundColor',
'hoverBorderColor',
'hoverBorderWidth',
'hoverRadius',
'hitRadius',
'pointStyle',
'rotation'
];

for (i = 0, ilen = keys.length; i < ilen; ++i) {
key = keys[i];
values[key] = resolve([
custom[key],
datasetOpts[key],
options[key]
], context, index);
}

// Custom radius resolution
values.radius = resolve([
custom.radius,
data ? data.r : undefined,
dataset.radius,
options.radius
data.r,
me._config.radius,
chart.options.elements.point.radius
], context, index);

return values;
Expand Down
77 changes: 20 additions & 57 deletions src/controllers/controller.doughnut.js
View file
Open in desktop
Expand Up @@ -5,7 +5,6 @@ var defaults = require('../core/core.defaults');
var elements = require('../elements/index');
var helpers = require('../helpers/index');

var resolve = helpers.options.resolve;
var valueOrDefault = helpers.valueOrDefault;

var PI = Math.PI;
Expand Down Expand Up @@ -50,20 +49,14 @@ defaults._set('doughnut', {
if (data.labels.length && data.datasets.length) {
return data.labels.map(function(label, i) {
var meta = chart.getDatasetMeta(0);
var ds = data.datasets[0];
var arc = meta.data[i];
var custom = arc && arc.custom || {};
var arcOpts = chart.options.elements.arc;
var fill = resolve([custom.backgroundColor, ds.backgroundColor, arcOpts.backgroundColor], undefined, i);
var stroke = resolve([custom.borderColor, ds.borderColor, arcOpts.borderColor], undefined, i);
var bw = resolve([custom.borderWidth, ds.borderWidth, arcOpts.borderWidth], undefined, i);
var style = meta.controller.getStyle(i);
benmccann marked this conversation as resolved.
Show resolved Hide resolved

return {
text: label,
fillStyle: fill,
strokeStyle: stroke,
lineWidth: bw,
hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
fillStyle: style.backgroundColor,
strokeStyle: style.borderColor,
lineWidth: style.borderWidth,
hidden: isNaN(data.datasets[0].data[i]) || meta.data[i].hidden,

// Extra data used for toggling the correct item
index: i
Expand Down Expand Up @@ -131,6 +124,19 @@ module.exports = DatasetController.extend({

linkScales: helpers.noop,

/**
* @private
*/
_dataElementOptions: [
'backgroundColor',
'borderColor',
'borderWidth',
'borderAlign',
'hoverBackgroundColor',
'hoverBorderColor',
'hoverBorderWidth',
],

// Get index of the dataset in relation to the visible datasets. This allows determining the inner and outer radius correctly
getRingIndex: function(datasetIndex) {
var ringIndex = 0;
Expand Down Expand Up @@ -184,7 +190,7 @@ module.exports = DatasetController.extend({
}

for (i = 0, ilen = arcs.length; i < ilen; ++i) {
arcs[i]._options = me._resolveElementOptions(arcs[i], i);
arcs[i]._options = me._resolveDataElementOptions(arcs[i], i);
}

chart.borderWidth = me.getMaxBorderWidth();
Expand Down Expand Up @@ -317,7 +323,7 @@ module.exports = DatasetController.extend({
arc = arcs[i];
if (controller) {
controller._configure();
options = controller._resolveElementOptions(arc, i);
options = controller._resolveDataElementOptions(arc, i);
} else {
options = arc._options;
}
Expand Down Expand Up @@ -351,49 +357,6 @@ module.exports = DatasetController.extend({
model.borderWidth = valueOrDefault(options.hoverBorderWidth, options.borderWidth);
},

/**
* @private
*/
_resolveElementOptions: function(arc, index) {
var me = this;
var chart = me.chart;
var dataset = me.getDataset();
var datasetOpts = me._config;
var custom = arc.custom || {};
var options = chart.options.elements.arc;
var values = {};
var i, ilen, key;

// Scriptable options
var context = {
chart: chart,
dataIndex: index,
dataset: dataset,
datasetIndex: me.index
};

var keys = [
'backgroundColor',
'borderColor',
'borderWidth',
'borderAlign',
'hoverBackgroundColor',
'hoverBorderColor',
'hoverBorderWidth',
];

for (i = 0, ilen = keys.length; i < ilen; ++i) {
key = keys[i];
values[key] = resolve([
custom[key],
datasetOpts[key],
options[key]
], context, index);
}

return values;
},

/**
* Get radius length offset of the dataset in relation to the visible datasets weights. This allows determining the inner and outer radius correctly
* @private
Expand Down