Skip to content

Commit 6444410

Browse files
kurklekurkle
committed
Review update 2
1 parent eb7c2f3 commit 6444410

File tree

12 files changed

+197
-53
lines changed

12 files changed

+197
-53
lines changed

‎docs/developers/api.md‎

Lines changed: 5 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -17,32 +17,22 @@ This must be called before the canvas is reused for a new chart.
1717
myLineChart.destroy();
1818
```
1919

20-
## .update(config)
20+
## .update(mode)
2121

2222
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.
2323

2424
```javascript
25-
// duration is the time for the animation of the redraw in milliseconds
26-
// lazy is a boolean. if true, the animation can be interrupted by other animations
2725
myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50
2826
myLineChart.update(); // Calling update now animates the position of March from 90 to 50.
2927
```
3028

3129
> **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: [...]}`.
3230
33-
A `config` object can be provided with additional configuration for the update process. This is useful when `update` is manually called inside an event handler and some different animation is desired.
34-
35-
The following properties are supported:
36-
* **duration** (number): Time for the animation of the redraw in milliseconds
37-
* **lazy** (boolean): If true, the animation can be interrupted by other animations
38-
* **easing** (string): The animation easing function. See [Animation Easing](../configuration/animations.md) for possible values.
31+
A `mode` string can be provided to indicate what should be updated and what animation configuration should be used. Core calls this method using any of `undefined`, `'reset'`, `'resize'` or `'active'`.
3932

4033
Example:
4134
```javascript
42-
myChart.update({
43-
duration: 800,
44-
easing: 'easeOutBounce'
45-
});
35+
myChart.update();
4636
```
4737

4838
See [Updating Charts](updates.md) for more details.
@@ -55,25 +45,13 @@ Reset the chart to it's state before the initial animation. A new animation can
5545
myLineChart.reset();
5646
```
5747

58-
## .render(config)
48+
## .render()
5949

6050
Triggers a redraw of all chart elements. Note, this does not update elements for new data. Use `.update()` in that case.
6151

62-
See `.update(config)` for more details on the config object.
63-
64-
```javascript
65-
// duration is the time for the animation of the redraw in milliseconds
66-
// lazy is a boolean. if true, the animation can be interrupted by other animations
67-
myLineChart.render({
68-
duration: 800,
69-
lazy: false,
70-
easing: 'easeOutBounce'
71-
});
72-
```
73-
7452
## .stop()
7553

76-
Use this to stop any current animation loop. This will pause the chart during any current animation frame. Call `.render()` to re-animate.
54+
Use this to stop any current animation. This will pause the chart during any current animation frame. Call `.render()` to re-animate.
7755

7856
```javascript
7957
// Stops the charts animation loop at its current frame

‎docs/developers/updates.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,4 +97,4 @@ Code sample for updating options can be found in [toggle-scale-type.html](../../
9797

9898
## Preventing Animations
9999

100-
Sometimes when a chart updates, you may not want an animation. To achieve this you can call `update` with a duration of `0`. This will render the chart synchronously and without an animation.
100+
Sometimes when a chart updates, you may not want an animation. To achieve this you can call `update` with `'none'` as mode.

‎docs/general/interactions/README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,3 @@ The hover configuration is passed into the `options.hover` namespace. The global
77
| `mode` | `string` | `'nearest'` | Sets which elements appear in the tooltip. See [Interaction Modes](./modes.md#interaction-modes) for details.
88
| `intersect` | `boolean` | `true` | if true, the hover mode only applies when the mouse position intersects an item on the chart.
99
| `axis` | `string` | `'x'` | Can be set to `'x'`, `'y'`, or `'xy'` to define which directions are used in calculating distances. Defaults to `'x'` for `'index'` mode and `'xy'` in `dataset` and `'nearest'` modes.
10-
| `animationDuration` | `number` | `400` | Duration in milliseconds it takes to animate hover style changes.

‎docs/general/performance.md‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,7 @@ new Chart(ctx, {
2323
type: 'line',
2424
data: data,
2525
options: {
26-
animation: {
27-
duration: 0 // general animation time
28-
},
29-
hover: {
30-
animationDuration: 0 // duration of animations when hovering an item
31-
},
32-
responsiveAnimationDuration: 0 // animation duration after a resize
26+
animation: false
3327
}
3428
});
3529
```

‎docs/general/responsive.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ Chart.js provides a [few options](#configuration-options) to enable responsivene
1414
| Name | Type | Default | Description
1515
| ---- | ---- | ------- | -----------
1616
| `responsive` | `boolean` | `true` | Resizes the chart canvas when its container does ([important note...](#important-note)).
17-
| `responsiveAnimationDuration` | `number` | `0` | Duration in milliseconds it takes to animate to new size after a resize event.
1817
| `maintainAspectRatio` | `boolean` | `true` | Maintain the original canvas aspect ratio `(width / height)` when resizing.
1918
| `aspectRatio` | `number` | `2` | Canvas aspect ratio (i.e. `width / height`, a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style.
2019
| `onResize` | `function` | `null` | Called when a resize occurs. Gets passed two arguments: the chart instance and the new size.

‎docs/getting-started/v3-migration.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
5353

5454
Animation system was completely rewritten in Chart.js v3. Each property can now be animated separately. Please see [animations](../configuration/animations.md) docs for details.
5555

56+
* `hover.animationDuration` is now configured in `animation.active.duration`
57+
* `responsiveAnimationDuration` is now configured in `animation.resize.duration`
58+
5659
## Developer migration
5760

5861
### Removed

‎samples/animations/loop.html‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Line Chart</title>
6+
<script src="../../dist/Chart.min.js"></script>
7+
<script src="../utils.js"></script>
8+
<style>
9+
canvas{
10+
-moz-user-select: none;
11+
-webkit-user-select: none;
12+
-ms-user-select: none;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<div style="width:75%;">
19+
<canvas id="canvas"></canvas>
20+
</div>
21+
<br>
22+
<br>
23+
<button id="randomizeData">Randomize Data</button>
24+
<button id="addDataset">Add Dataset</button>
25+
<button id="removeDataset">Remove Dataset</button>
26+
<button id="addData">Add Data</button>
27+
<button id="removeData">Remove Data</button>
28+
<script>
29+
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
30+
var config = {
31+
type: 'line',
32+
data: {
33+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
34+
datasets: [{
35+
label: 'My First dataset',
36+
fill: false,
37+
backgroundColor: window.chartColors.red,
38+
borderColor: window.chartColors.red,
39+
data: [
40+
randomScalingFactor(),
41+
randomScalingFactor(),
42+
randomScalingFactor(),
43+
randomScalingFactor(),
44+
randomScalingFactor(),
45+
randomScalingFactor(),
46+
randomScalingFactor()
47+
],
48+
}, {
49+
label: 'My Second dataset',
50+
fill: false,
51+
backgroundColor: window.chartColors.blue,
52+
borderColor: window.chartColors.blue,
53+
data: [
54+
randomScalingFactor(),
55+
randomScalingFactor(),
56+
randomScalingFactor(),
57+
randomScalingFactor(),
58+
randomScalingFactor(),
59+
randomScalingFactor(),
60+
randomScalingFactor()
61+
],
62+
}]
63+
},
64+
options: {
65+
animation: (context) => {
66+
if (context.active) {
67+
return {
68+
radius: {
69+
duration: 400,
70+
loop: true
71+
}
72+
};
73+
}
74+
return Chart.defaults.global.animation;
75+
},
76+
elements: {
77+
point: {
78+
hoverRadius: 6
79+
}
80+
},
81+
responsive: true,
82+
title: {
83+
display: true,
84+
text: 'Chart.js Line Chart'
85+
},
86+
tooltips: {
87+
mode: 'nearest',
88+
axis: 'x',
89+
intersect: false,
90+
},
91+
hover: {
92+
mode: 'nearest',
93+
axis: 'x',
94+
intersect: false
95+
},
96+
scales: {
97+
x: {
98+
display: true,
99+
scaleLabel: {
100+
display: true,
101+
labelString: 'Month'
102+
}
103+
},
104+
y: {
105+
display: true,
106+
scaleLabel: {
107+
display: true,
108+
labelString: 'Value'
109+
}
110+
}
111+
}
112+
}
113+
};
114+
115+
window.onload = function() {
116+
var ctx = document.getElementById('canvas').getContext('2d');
117+
window.myLine = new Chart(ctx, config);
118+
};
119+
120+
document.getElementById('randomizeData').addEventListener('click', function() {
121+
config.data.datasets.forEach(function(dataset) {
122+
dataset.data = dataset.data.map(function() {
123+
return randomScalingFactor();
124+
});
125+
126+
});
127+
128+
window.myLine.update();
129+
});
130+
131+
var colorNames = Object.keys(window.chartColors);
132+
document.getElementById('addDataset').addEventListener('click', function() {
133+
var colorName = colorNames[config.data.datasets.length % colorNames.length];
134+
var newColor = window.chartColors[colorName];
135+
var newDataset = {
136+
label: 'Dataset ' + config.data.datasets.length,
137+
backgroundColor: newColor,
138+
borderColor: newColor,
139+
data: [],
140+
fill: false
141+
};
142+
143+
for (var index = 0; index < config.data.labels.length; ++index) {
144+
newDataset.data.push(randomScalingFactor());
145+
}
146+
147+
config.data.datasets.push(newDataset);
148+
window.myLine.update();
149+
});
150+
151+
document.getElementById('addData').addEventListener('click', function() {
152+
if (config.data.datasets.length > 0) {
153+
var month = MONTHS[config.data.labels.length % MONTHS.length];
154+
config.data.labels.push(month);
155+
156+
config.data.datasets.forEach(function(dataset) {
157+
dataset.data.push(randomScalingFactor());
158+
});
159+
160+
window.myLine.update();
161+
}
162+
});
163+
164+
document.getElementById('removeDataset').addEventListener('click', function() {
165+
config.data.datasets.splice(0, 1);
166+
window.myLine.update();
167+
});
168+
169+
document.getElementById('removeData').addEventListener('click', function() {
170+
config.data.labels.splice(-1, 1); // remove the label first
171+
172+
config.data.datasets.forEach(function(dataset) {
173+
dataset.data.pop();
174+
});
175+
176+
window.myLine.update();
177+
});
178+
</script>
179+
</body>
180+
181+
</html>

‎samples/charts/bubble.html‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,6 @@
2929
var addedCount = 0;
3030
var color = Chart.helpers.color;
3131
var bubbleChartData = {
32-
animation: {
33-
duration: 10000
34-
},
3532
datasets: [{
3633
label: 'My First dataset',
3734
backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),

‎samples/samples.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,9 @@
220220
}, {
221221
title: 'Drop',
222222
path: 'animations/drop.html'
223+
}, {
224+
title: 'Loop',
225+
path: 'animations/loop.html'
223226
}]
224227
}, {
225228
title: 'Advanced',

‎src/core/core.datasetController.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -908,12 +908,10 @@ helpers.extend(DatasetController.prototype, {
908908
/**
909909
* @private
910910
*/
911-
_resolveAnimations: function(index, mode) {
911+
_resolveAnimations: function(index, mode, active) {
912912
const me = this;
913913
const chart = me.chart;
914914
const cached = me._cachedAnimations;
915-
const active = mode === 'active';
916-
917915
mode = mode || 'default';
918916

919917
if (cached[mode]) {
@@ -966,7 +964,7 @@ helpers.extend(DatasetController.prototype, {
966964
* @private
967965
*/
968966
_updateElement: function(element, index, properties, mode) {
969-
if (mode === 'reset') {
967+
if (mode === 'reset' || mode === 'none') {
970968
helpers.extend(element, properties);
971969
} else {
972970
this._resolveAnimations(index, mode).update(element, properties);
@@ -987,7 +985,7 @@ helpers.extend(DatasetController.prototype, {
987985
* @private
988986
*/
989987
_setStyle(element, index, mode, active) {
990-
this._resolveAnimations(index, mode).update(element, {options: this.getStyle(index, active)});
988+
this._resolveAnimations(index, mode, active).update(element, {options: this.getStyle(index, active)});
991989
},
992990

993991
removeHoverStyle: function(element, datasetIndex, index) {

0 commit comments

Comments
 (0)