Skip to content

Commit

Permalink
Implement per-dataset type (default and per-chart) options (chartjs#5999
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@benmccann @simonbrunel
benmccann authored and simonbrunel committed May 6, 2019
1 parent 0d81fd3 commit b88f522
Show file tree
Hide file tree
Showing 15 changed files with 310 additions and 28 deletions.
37 changes: 37 additions & 0 deletions docs/configuration/README.md
View file
Expand Up @@ -31,3 +31,40 @@ var chartDifferentHoverMode = new Chart(ctx, {
}
});
```

## Dataset Configuration

Options may be configured directly on the dataset. The dataset options can be changed at 3 different levels and are evaluated with the following priority:

- per dataset: dataset.*
- per chart: options.datasets[type].*
- or globally: Chart.defaults.global.datasets[type].*

where type corresponds to the dataset type.

*Note:* dataset options take precedence over element options.

The following example would set the `showLine` option to 'false' for all line datasets except for those overridden by options passed to the dataset on creation.

```javascript
// Do not show lines for all datasets by default
Chart.defaults.global.datasets.line.showLine = false;

// This chart would show a line only for the third dataset
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [0, 0],
}, {
data: [0, 1]
}, {
data: [1, 0],
showLine: true // overrides the `line` dataset default
}, {
type: 'scatter', // 'line' dataset default does not affect this dataset since it's a 'scatter'
data: [1, 1]
}]
}
});
```
3 changes: 2 additions & 1 deletion src/controllers/controller.bar.js
View file
Expand Up @@ -382,6 +382,7 @@ module.exports = DatasetController.extend({
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 = {};
Expand All @@ -406,7 +407,7 @@ module.exports = DatasetController.extend({
key = keys[i];
values[key] = resolve([
custom[key],
dataset[key],
datasetOpts[key],
options[key]
], context, index);
}
Expand Down
3 changes: 2 additions & 1 deletion src/controllers/controller.bubble.js
View file
Expand Up @@ -127,6 +127,7 @@ module.exports = DatasetController.extend({
var chart = me.chart;
var datasets = chart.data.datasets;
var dataset = datasets[me.index];
var datasetOpts = me._config;
var custom = point.custom || {};
var options = chart.options.elements.point;
var data = dataset.data[index];
Expand Down Expand Up @@ -158,7 +159,7 @@ module.exports = DatasetController.extend({
key = keys[i];
values[key] = resolve([
custom[key],
dataset[key],
datasetOpts[key],
options[key]
], context, index);
}
Expand Down
10 changes: 8 additions & 2 deletions src/controllers/controller.doughnut.js
View file
Expand Up @@ -315,7 +315,12 @@ module.exports = DatasetController.extend({

for (i = 0, ilen = arcs.length; i < ilen; ++i) {
arc = arcs[i];
options = controller ? controller._resolveElementOptions(arc, i) : arc._options;
if (controller) {
controller._configure();
options = controller._resolveElementOptions(arc, i);
} else {
options = arc._options;
}
if (options.borderAlign !== 'inner') {
borderWidth = options.borderWidth;
hoverWidth = options.hoverBorderWidth;
Expand Down Expand Up @@ -353,6 +358,7 @@ module.exports = DatasetController.extend({
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 = {};
Expand Down Expand Up @@ -380,7 +386,7 @@ module.exports = DatasetController.extend({
key = keys[i];
values[key] = resolve([
custom[key],
dataset[key],
datasetOpts[key],
options[key]
], context, index);
}
Expand Down
25 changes: 12 additions & 13 deletions src/controllers/controller.line.js
View file
Expand Up @@ -29,10 +29,6 @@ defaults._set('line', {
}
});

function lineEnabled(dataset, options) {
return valueOrDefault(dataset.showLine, options.showLines);
}

module.exports = DatasetController.extend({

datasetElementType: elements.Line,
Expand All @@ -44,9 +40,10 @@ module.exports = DatasetController.extend({
var meta = me.getMeta();
var line = meta.dataset;
var points = meta.data || [];
var options = me.chart.options;
var scale = me.getScaleForId(meta.yAxisID);
var dataset = me.getDataset();
var showLine = lineEnabled(dataset, me.chart.options);
var showLine = me._showLine = valueOrDefault(me._config.showLine, options.showLines);
var i, ilen;

// Update Line
Expand Down Expand Up @@ -132,6 +129,7 @@ module.exports = DatasetController.extend({
var me = this;
var chart = me.chart;
var dataset = chart.data.datasets[me.index];
var datasetOpts = me._config;
var custom = element.custom || {};
var options = chart.options.elements.point;
var values = {};
Expand Down Expand Up @@ -164,8 +162,8 @@ module.exports = DatasetController.extend({
key = keys[i];
values[key] = resolve([
custom[key],
dataset[ELEMENT_OPTIONS[key]],
dataset[key],
datasetOpts[ELEMENT_OPTIONS[key]],
datasetOpts[key],
options[key]
], context, index);
}
Expand All @@ -181,6 +179,7 @@ module.exports = DatasetController.extend({
var chart = me.chart;
var datasetIndex = me.index;
var dataset = chart.data.datasets[datasetIndex];
var datasetOpts = me._config;
var custom = element.custom || {};
var options = chart.options;
var elementOptions = options.elements.line;
Expand Down Expand Up @@ -210,17 +209,17 @@ module.exports = DatasetController.extend({
key = keys[i];
values[key] = resolve([
custom[key],
dataset[key],
datasetOpts[key],
elementOptions[key]
], context);
}

// The default behavior of lines is to break at null values, according
// to https://github.com/chartjs/Chart.js/issues/2435#issuecomment-216718158
// This option gives lines the ability to span gaps
values.spanGaps = valueOrDefault(dataset.spanGaps, options.spanGaps);
values.tension = valueOrDefault(dataset.lineTension, elementOptions.tension);
values.steppedLine = resolve([custom.steppedLine, dataset.steppedLine, elementOptions.stepped]);
values.spanGaps = valueOrDefault(datasetOpts.spanGaps, options.spanGaps);
values.tension = valueOrDefault(datasetOpts.lineTension, elementOptions.tension);
values.steppedLine = resolve([custom.steppedLine, datasetOpts.steppedLine, elementOptions.stepped]);

return values;
},
Expand Down Expand Up @@ -319,11 +318,11 @@ module.exports = DatasetController.extend({
var meta = me.getMeta();
var points = meta.data || [];
var area = chart.chartArea;
var i = 0;
var ilen = points.length;
var halfBorderWidth;
var i = 0;

if (lineEnabled(me.getDataset(), chart.options)) {
if (me._showLine) {
halfBorderWidth = (meta.dataset._model.borderWidth || 0) / 2;

helpers.canvas.clipArea(chart.ctx, {
Expand Down
3 changes: 2 additions & 1 deletion src/controllers/controller.polarArea.js
View file
Expand Up @@ -248,6 +248,7 @@ module.exports = DatasetController.extend({
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 = {};
Expand Down Expand Up @@ -275,7 +276,7 @@ module.exports = DatasetController.extend({
key = keys[i];
values[key] = resolve([
custom[key],
dataset[key],
datasetOpts[key],
options[key]
], context, index);
}
Expand Down
8 changes: 5 additions & 3 deletions src/controllers/controller.radar.js
View file
Expand Up @@ -115,6 +115,7 @@ module.exports = DatasetController.extend({
var me = this;
var chart = me.chart;
var dataset = chart.data.datasets[me.index];
var datasetOpts = me._config;
var custom = element.custom || {};
var options = chart.options.elements.point;
var values = {};
Expand Down Expand Up @@ -147,8 +148,8 @@ module.exports = DatasetController.extend({
key = keys[i];
values[key] = resolve([
custom[key],
dataset[ELEMENT_OPTIONS[key]],
dataset[key],
datasetOpts[ELEMENT_OPTIONS[key]],
datasetOpts[key],
options[key]
], context, index);
}
Expand All @@ -163,6 +164,7 @@ module.exports = DatasetController.extend({
var me = this;
var chart = me.chart;
var dataset = chart.data.datasets[me.index];
var datasetOpts = me._config;
var custom = element.custom || {};
var options = chart.options.elements.line;
var values = {};
Expand All @@ -183,7 +185,7 @@ module.exports = DatasetController.extend({
key = keys[i];
values[key] = resolve([
custom[key],
dataset[key],
datasetOpts[key],
options[key]
]);
}
Expand Down
10 changes: 8 additions & 2 deletions src/controllers/controller.scatter.js
View file
Expand Up @@ -21,8 +21,6 @@ defaults._set('scatter', {
}]
},

showLines: false,

tooltips: {
callbacks: {
title: function() {
Expand All @@ -35,5 +33,13 @@ defaults._set('scatter', {
}
});

defaults._set('global', {
datasets: {
scatter: {
showLine: false
}
}
});

// Scatter charts use line controllers
module.exports = LineController;
2 changes: 1 addition & 1 deletion src/core/core.controller.js
View file
Expand Up @@ -567,7 +567,7 @@ helpers.extend(Chart.prototype, /** @lends Chart */ {
return;
}

meta.controller.update();
meta.controller._update();

plugins.notify(me, 'afterDatasetUpdate', [args]);
},
Expand Down
27 changes: 26 additions & 1 deletion src/core/core.datasetController.js
View file
Expand Up @@ -100,6 +100,7 @@ helpers.extend(DatasetController.prototype, {
me.index = datasetIndex;
me.linkScales();
me.addElements();
me._type = me.getMeta().type;
},

updateIndex: function(datasetIndex) {
Expand Down Expand Up @@ -160,7 +161,7 @@ helpers.extend(DatasetController.prototype, {
},

reset: function() {
this.update(true);
this._update(true);
},

/**
Expand Down Expand Up @@ -236,6 +237,30 @@ helpers.extend(DatasetController.prototype, {
me.resyncElements();
},

/**
* Returns the merged user-supplied and default dataset-level options
* @private
*/
_configure: function() {
var me = this;
me._config = helpers.merge({}, [
me.chart.options.datasets[me._type],
me.getDataset(),
], {
merger: function(key, target, source) {
if (key !== '_meta' && key !== 'data') {
helpers._merger(key, target, source);
}
}
});
},

_update: function(reset) {
var me = this;
me._configure();
me.update(reset);
},

update: helpers.noop,

transition: function(easingValue) {
Expand Down
2 changes: 2 additions & 0 deletions src/core/core.defaults.js
View file
Expand Up @@ -11,6 +11,8 @@ var defaults = {
}
};

// TODO(v3): remove 'global' from namespace. all default are global and
// there's inconsistency around which options are under 'global'
defaults._set('global', {
defaultColor: 'rgba(0,0,0,0.1)',
defaultFontColor: '#666',
Expand Down

0 comments on commit b88f522

Please sign in to comment.