Skip to content

Commit

Permalink
Make legend appearance consistent with chart elements (chartjs#5621)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nagix @simonbrunel
nagix authored and simonbrunel committed May 9, 2019
1 parent fb7e8ae commit 3aba96c
Show file tree
Hide file tree
Showing 15 changed files with 548 additions and 391 deletions.
5 changes: 4 additions & 1 deletion docs/configuration/legend.md
View file
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
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
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) {
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
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);

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

0 comments on commit 3aba96c

Please sign in to comment.