Skip to content

Commit

Permalink
Add support for scriptable options
Browse files Browse the repository at this point in the history
  • Loading branch information
@nagix
nagix committed Feb 12, 2019
1 parent f1691fd commit 0d3a907
Show file tree
Hide file tree
Showing 5 changed files with 163 additions and 119 deletions.
5 changes: 4 additions & 1 deletion docs/configuration/legend.md
View file
Expand Up @@ -72,7 +72,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
16 changes: 5 additions & 11 deletions src/controllers/controller.doughnut.js
View file
Expand Up @@ -45,20 +45,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 model = meta.controller._resolveElementOptions(meta.data[i] || {}, i);

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

// Extra data used for toggling the correct item
index: i
Expand Down
16 changes: 5 additions & 11 deletions src/controllers/controller.polarArea.js
View file
Expand Up @@ -59,20 +59,14 @@ defaults._set('polarArea', {
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.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 model = meta.controller._resolveElementOptions(meta.data[i] || {}, i);

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

// Extra data used for toggling the correct item
index: i
Expand Down
52 changes: 26 additions & 26 deletions src/plugins/plugin.legend.js
View file
Expand Up @@ -7,7 +7,6 @@ var layouts = require('../core/core.layouts');

var noop = helpers.noop;
var valueOrDefault = helpers.valueOrDefault;
var valueAtIndexOrDefault = helpers.valueAtIndexOrDefault;

defaults._set('global', {
legend: {
Expand Down Expand Up @@ -49,34 +48,35 @@ defaults._set('global', {
generateLabels: function(chart) {
var data = chart.data;
return helpers.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
var type = chart.getDatasetMeta(i).type;
var options = chart.options;
var legendOpts = options.legend;

var meta = chart.getDatasetMeta(i);
var controller = meta.controller;
var legendOpts = chart.options.legend;
var usePointStyle = legendOpts && legendOpts.labels && legendOpts.labels.usePointStyle;
var backgroundColor = usePointStyle ? valueAtIndexOrDefault(dataset.pointBackgroundColor, 0, dataset.backgroundColor) : dataset.backgroundColor;
var borderWidth = usePointStyle ? valueAtIndexOrDefault(dataset.pointBorderWidth, 0, dataset.borderWidth) : dataset.borderWidth;
var borderColor = usePointStyle ? valueAtIndexOrDefault(dataset.pointBorderColor, 0, dataset.borderColor) : dataset.borderColor;

var useLineStyles = (type === 'line' || type === 'radar') && !usePointStyle;
var borderCapStyle = useLineStyles ? dataset.borderCapStyle : 'butt';
var borderDash = useLineStyles ? dataset.borderDash : [];
var borderDashOffset = useLineStyles ? dataset.borderDashOffset : 0;
var borderJoinStyle = useLineStyles ? dataset.borderJoinStyle : 'miter';

var elementOpts = options.elements[useLineStyles ? 'line' : type === 'bar' ? 'rectangle' : 'point'];
var model;

if (controller._resolveLineOptions && !usePointStyle) {
model = controller._resolveLineOptions(meta.dataset || {});
if (model.fill === false || model.fill === null) {
model.backgroundColor = 'rgba(0,0,0,0)';
}
} else if (controller._resolvePointOptions) {
model = controller._resolvePointOptions(meta.data[0] || {}, 0);
} else {
model = controller._resolveElementOptions(meta.data[0] || {}, 0);
}

return {
text: dataset.label,
fillStyle: valueAtIndexOrDefault(backgroundColor, 0, elementOpts.backgroundColor),
fillStyle: model.backgroundColor,
hidden: !chart.isDatasetVisible(i),
lineCap: valueOrDefault(borderCapStyle, elementOpts.borderCapStyle),
lineDash: valueOrDefault(borderDash, elementOpts.borderDash),
lineDashOffset: valueOrDefault(borderDashOffset, elementOpts.borderDashOffset),
lineJoin: valueOrDefault(borderJoinStyle, elementOpts.borderJoinStyle),
lineWidth: valueAtIndexOrDefault(borderWidth, 0, elementOpts.borderWidth),
strokeStyle: valueAtIndexOrDefault(borderColor, 0, elementOpts.borderColor),
pointStyle: valueAtIndexOrDefault(dataset.pointStyle, 0, elementOpts.pointStyle),
lineCap: model.borderCapStyle,
lineDash: model.borderDash,
lineDashOffset: model.borderDashOffset,
lineJoin: model.borderJoinStyle,
lineWidth: model.borderWidth,
strokeStyle: model.borderColor,
pointStyle: model.pointStyle,
rotation: model.rotation,

// Below is extra data used for toggling the datasets
datasetIndex: i
Expand Down Expand Up @@ -384,15 +384,15 @@ var Legend = Element.extend({
ctx.setLineDash(valueOrDefault(legendItem.lineDash, lineDefault.borderDash));
}

if (opts.labels && opts.labels.usePointStyle) {
if (labelOpts && labelOpts.usePointStyle) {
// Recalculate x and y for drawPoint() because its expecting
// x and y to be center of figure (instead of top left)
var radius = boxWidth * Math.SQRT2 / 2;
var centerX = x + boxWidth / 2;
var centerY = y + fontSize / 2;

// Draw pointStyle as legend symbol
helpers.canvas.drawPoint(ctx, legendItem.pointStyle, radius, centerX, centerY);
helpers.canvas.drawPoint(ctx, legendItem.pointStyle, radius, centerX, centerY, legendItem.rotation);
} else {
// Draw box as legend symbol
ctx.fillRect(x, y, boxWidth, fontSize);
Expand Down

0 comments on commit 0d3a907

Please sign in to comment.