Add chart data property setter and unit tests

Chart data can now be entirely replaced using `chart.data = {...}` thanks to the new property setter (instead of using `chart.config.data = {}`). Also update the documentation, as suggested by @ldaguise and @kennethkalmer, with a note about versions prior 2.6.
This commit is contained in:
Simon Brunel 2017-02-11 16:02:15 +01:00 committed by Evert Timberg
parent 85ee592b2a
commit cc90c5c643
5 changed files with 30 additions and 5 deletions

View File

@ -25,7 +25,7 @@ myLineChart.destroy();
#### .update(duration, lazy) #### .update(duration, lazy)
Triggers an update of the chart. This can be safely called after replacing the entire data object. This will update all scales, legends, and then re-render the chart. Triggers an update of the chart. This can be safely called after updating the data object. This will update all scales, legends, and then re-render the chart.
```javascript ```javascript
// duration is the time for the animation of the redraw in milliseconds // duration is the time for the animation of the redraw in milliseconds
@ -34,6 +34,8 @@ myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's v
myLineChart.update(); // Calling update now animates the position of March from 90 to 50. myLineChart.update(); // Calling update now animates the position of March from 90 to 50.
``` ```
> **Note:** replacing the data reference (e.g. `myLineChart.data = {datasets: [...]}` only works starting **version 2.6**. Prior that, replacing the entire data object could be achieved with the following workaround: `myLineChart.config.data = {datasets: [...]}`.
#### .reset() #### .reset()
Reset the chart to it's state before the initial animation. A new animation can then be triggered using `update`. Reset the chart to it's state before the initial animation. A new animation can then be triggered using `update`.

View File

@ -98,9 +98,13 @@ module.exports = function(Chart) {
// Add the chart instance to the global namespace // Add the chart instance to the global namespace
Chart.instances[me.id] = me; Chart.instances[me.id] = me;
// Define alias to the config data: `chart.data === chart.config.data`
Object.defineProperty(me, 'data', { Object.defineProperty(me, 'data', {
get: function() { get: function() {
return me.config.data; return me.config.data;
},
set: function(value) {
me.config.data = value;
} }
}); });

View File

@ -738,8 +738,8 @@ describe('Bar controller tests', function() {
expect(meta.data[i]._model.base).toBeCloseToPixel(484); expect(meta.data[i]._model.base).toBeCloseToPixel(484);
expect(meta.data[i]._model.width).toBeCloseToPixel(40); expect(meta.data[i]._model.width).toBeCloseToPixel(40);
expect(meta.data[i]._model).toEqual(jasmine.objectContaining({ expect(meta.data[i]._model).toEqual(jasmine.objectContaining({
datasetLabel: chart.config.data.datasets[1].label, datasetLabel: chart.data.datasets[1].label,
label: chart.config.data.labels[i], label: chart.data.labels[i],
backgroundColor: 'red', backgroundColor: 'red',
borderSkipped: 'top', borderSkipped: 'top',
borderColor: 'blue', borderColor: 'blue',

View File

@ -57,6 +57,25 @@ describe('Chart', function() {
expect(chart.data.datasets[1].data).toBe(ds1.data); expect(chart.data.datasets[1].data).toBe(ds1.data);
}); });
it('should define chart.data as an alias for config.data', function() {
var config = {data: {labels: [], datasets: []}};
var chart = acquireChart(config);
expect(chart.data).toBe(config.data);
chart.data = {labels: [1, 2, 3], datasets: [{data: [4, 5, 6]}]};
expect(config.data).toBe(chart.data);
expect(config.data.labels).toEqual([1, 2, 3]);
expect(config.data.datasets[0].data).toEqual([4, 5, 6]);
config.data = {labels: [7, 8, 9], datasets: [{data: [10, 11, 12]}]};
expect(chart.data).toBe(config.data);
expect(chart.data.labels).toEqual([7, 8, 9]);
expect(chart.data.datasets[0].data).toEqual([10, 11, 12]);
});
it('should initialize config with default options', function() { it('should initialize config with default options', function() {
var callback = function() {}; var callback = function() {};

View File

@ -692,10 +692,10 @@ describe('Core.Tooltip', function() {
expect(tooltip._view.dataPoints[0].index).toEqual(pointIndex); expect(tooltip._view.dataPoints[0].index).toEqual(pointIndex);
expect(tooltip._view.dataPoints[0].datasetIndex).toEqual(datasetIndex); expect(tooltip._view.dataPoints[0].datasetIndex).toEqual(datasetIndex);
expect(tooltip._view.dataPoints[0].xLabel).toEqual( expect(tooltip._view.dataPoints[0].xLabel).toEqual(
chart.config.data.labels[pointIndex] chart.data.labels[pointIndex]
); );
expect(tooltip._view.dataPoints[0].yLabel).toEqual( expect(tooltip._view.dataPoints[0].yLabel).toEqual(
chart.config.data.datasets[datasetIndex].data[pointIndex] chart.data.datasets[datasetIndex].data[pointIndex]
); );
expect(tooltip._view.dataPoints[0].x).toBeCloseToPixel(point._model.x); expect(tooltip._view.dataPoints[0].x).toBeCloseToPixel(point._model.x);
expect(tooltip._view.dataPoints[0].y).toBeCloseToPixel(point._model.y); expect(tooltip._view.dataPoints[0].y).toBeCloseToPixel(point._model.y);