Skip to content

Commit 48d87cd

Browse files
authored
Enable initial animation on annotations (#755)
* Enable initial animation on annotations * fixes some CC issues * apply review 1 * adds fixtures * adds test cases with callback * improves code on default application and drawPoint function * adds test case on callback which returns undef * adds animation spec to test that the annotation is really animating * adds types * adds doc * adds samples * fixes and improves test case on init animation * fixes lint * fixes multiple access to cart config in test case * Add element diagrams to the annotation types guide * apply review * changes initAnimation options name to init * Merge remote-tracking branch 'origin/master' into initAnimation
1 parent b9cbccf commit 48d87cd

31 files changed

+1281
-33
lines changed

docs/.vuepress/config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,7 @@ module.exports = {
144144
'box/disclosure',
145145
'box/canvas',
146146
'box/image',
147+
'box/initAnim',
147148
'box/gradient',
148149
]
149150
},
@@ -196,6 +197,7 @@ module.exports = {
196197
'point/combined',
197198
'point/outsideChartArea',
198199
'point/shadow',
200+
'point/initAnim',
199201
]
200202
},
201203
{

docs/guide/configuration.md

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,36 @@ The following options apply to all annotations unless they are overwritten on a
6363

6464
| Name | Type | [Scriptable](options.md#scriptable-options) | Default | Notes
6565
| ---- | ---- | :----: | ---- | ----
66-
| `drawTime` | `string` | Yes | `'afterDatasetsDraw'` | See [drawTime](options.md#draw-time).
66+
| `drawTime` | `string` | Yes | `'afterDatasetsDraw'` | See [drawTime](options#draw-time).
67+
| `init` | `boolean` | [See initial animation](#initial-animation) | `false` | Enable the animation to the annotations when they are drawing at chart initialization
68+
69+
### Initial animation
70+
71+
The `init` option is scriptable but it doesn't get the [options context](./options#option-context) as argument but a specific context because the element has not been initialized yet, when the callback is invoked.
72+
73+
This is the signature of the scriptable option:
74+
75+
```javascript
76+
({chart, properties, options}) => void | boolean | AnnotationBoxModel
77+
```
78+
79+
where the properties is the element model
80+
81+
```javascript
82+
{
83+
x: number,
84+
y: number,
85+
x2: number,
86+
y2: number,
87+
centerX: number,
88+
centerY: number,
89+
width: number,
90+
height: number,
91+
radius?: number
92+
}
93+
```
94+
95+
which can be used in the callback to return an object with the initial values of the element, to provide own initial animation.
6796

6897
## Events
6998

docs/guide/types/_commonOptions.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ The following options are available for all annotations.
1212
| [`borderShadowColor`](#styling) | [`Color`](../options.md#color) | Yes | `'transparent'`
1313
| [`display`](#general) | `boolean` | Yes | `true`
1414
| [`drawTime`](#general) | `string` | Yes | `'afterDatasetsDraw'`
15+
| [`init`](../configuration.html#common) | `boolean` | [See initial animation](../configuration.html#initial-animation) | `undefined`
1516
| [`id`](#general) | `string` | No | `undefined`
1617
| [`shadowBlur`](#styling) | `number` | Yes | `0`
1718
| [`shadowOffsetX`](#styling) | `number` | Yes | `0`

docs/samples/box/initAnim.md

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
# Initial animations
2+
3+
```js chart-editor
4+
// <block:setup:4>
5+
const DATA_COUNT = 12;
6+
const MIN = 10;
7+
const MAX = 100;
8+
9+
const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};
10+
11+
const data = {
12+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
13+
datasets: [{
14+
data: Utils.numbers(numberCfg)
15+
}]
16+
};
17+
// </block:setup>
18+
19+
// <block:annotation1:1>
20+
const annotation1 = {
21+
type: 'box',
22+
backgroundColor: 'rgba(0, 150, 0, 0.2)',
23+
borderColor: 'rgba(0, 150, 0)',
24+
borderRadius: 4,
25+
borderWidth: 1,
26+
init: true,
27+
label: {
28+
display: true,
29+
content: 'Fade'
30+
},
31+
xMax: 6.5,
32+
xMin: 4.5,
33+
yMax: 60,
34+
yMin: 40
35+
};
36+
// </block:annotation1>
37+
38+
// <block:annotation2:2>
39+
const annotation2 = {
40+
type: 'box',
41+
backgroundColor: 'rgba(0, 150, 0, 0.2)',
42+
borderColor: 'rgba(0, 150, 0)',
43+
borderRadius: 4,
44+
borderWidth: 1,
45+
init: () => ({y: 0, y2: 0}),
46+
label: {
47+
display: true,
48+
content: 'Flyin from top'
49+
},
50+
xMax: 2.5,
51+
xMin: 0.5,
52+
yMax: 30,
53+
yMin: 10
54+
};
55+
// </block:annotation2>
56+
57+
// <block:annotation3:3>
58+
const annotation3 = {
59+
type: 'box',
60+
backgroundColor: 'rgba(0, 150, 0, 0.2)',
61+
borderColor: 'rgba(0, 150, 0)',
62+
borderRadius: 4,
63+
borderWidth: 1,
64+
init: () => ({x: 0, x2: 0}),
65+
label: {
66+
display: true,
67+
content: 'Flyin from left'
68+
},
69+
xMax: 10.5,
70+
xMin: 8.5,
71+
yMax: 90,
72+
yMin: 70
73+
};
74+
// </block:annotation3>
75+
76+
/* <block:config:0> */
77+
const config = {
78+
type: 'line',
79+
data,
80+
options: {
81+
scales: {
82+
y: {
83+
beginAtZero: true,
84+
max: 100,
85+
min: 0
86+
}
87+
},
88+
plugins: {
89+
annotation: {
90+
common: {
91+
drawTime: 'afterDraw'
92+
},
93+
annotations: {
94+
annotation1,
95+
annotation2,
96+
annotation3
97+
}
98+
}
99+
}
100+
}
101+
};
102+
/* </block:config> */
103+
104+
const actions = [
105+
{
106+
name: 'Randomize',
107+
handler: function(chart) {
108+
chart.data.datasets.forEach(function(dataset, i) {
109+
dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
110+
});
111+
chart.update();
112+
}
113+
}
114+
];
115+
116+
module.exports = {
117+
actions: actions,
118+
config: config,
119+
};
120+
```

docs/samples/point/initAnim.md

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
# Initial animations
2+
3+
```js chart-editor
4+
// <block:setup:4>
5+
const DATA_COUNT = 12;
6+
const MIN = 10;
7+
const MAX = 100;
8+
9+
const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};
10+
11+
const data = {
12+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
13+
datasets: [{
14+
data: Utils.numbers(numberCfg)
15+
}]
16+
};
17+
// </block:setup>
18+
19+
// <block:annotation1:1>
20+
const annotation1 = {
21+
type: 'point',
22+
backgroundColor: 'rgba(0, 150, 0, 0.2)',
23+
borderColor: 'rgba(0, 150, 0)',
24+
borderRadius: 4,
25+
borderWidth: 1,
26+
init: true,
27+
label: {
28+
display: true,
29+
content: 'Fade',
30+
textAlign: 'center'
31+
},
32+
radius: 40,
33+
xMax: 6.5,
34+
xMin: 4.5,
35+
yMax: 60,
36+
yMin: 40
37+
};
38+
const labelAnnotation1 = {
39+
type: 'label',
40+
init: true,
41+
content: 'Fade',
42+
xMax: 6.5,
43+
xMin: 4.5,
44+
yMax: 60,
45+
yMin: 40
46+
};
47+
// </block:annotation1>
48+
49+
// <block:annotation2:2>
50+
const annotation2 = {
51+
type: 'point',
52+
backgroundColor: 'rgba(0, 150, 0, 0.2)',
53+
borderColor: 'rgba(0, 150, 0)',
54+
borderRadius: 4,
55+
borderWidth: 1,
56+
init: () => ({centerY: 0}),
57+
label: {
58+
display: true,
59+
content: 'Flyin from top',
60+
textAlign: 'center'
61+
},
62+
radius: 40,
63+
xMax: 2.5,
64+
xMin: 0.5,
65+
yMax: 30,
66+
yMin: 10
67+
};
68+
const labelAnnotation2 = {
69+
type: 'label',
70+
init: () => ({y: 0, y2: 0, width: 0, height: 0}),
71+
content: 'Flyin from top',
72+
xMax: 2.5,
73+
xMin: 0.5,
74+
yMax: 30,
75+
yMin: 10
76+
};
77+
// </block:annotation2>
78+
79+
// <block:annotation3:3>
80+
const annotation3 = {
81+
type: 'point',
82+
backgroundColor: 'rgba(0, 150, 0, 0.2)',
83+
borderColor: 'rgba(0, 150, 0)',
84+
borderRadius: 4,
85+
borderWidth: 1,
86+
init: () => ({centerX: 0}),
87+
label: {
88+
display: true,
89+
content: 'Flyin from left',
90+
textAlign: 'center'
91+
},
92+
radius: 40,
93+
xMax: 10.5,
94+
xMin: 8.5,
95+
yMax: 90,
96+
yMin: 70
97+
};
98+
const labelAnnotation3 = {
99+
type: 'label',
100+
init: () => ({x: 0, x2: 0, width: 0, height: 0}),
101+
content: 'Flyin from left',
102+
xMax: 10.5,
103+
xMin: 8.5,
104+
yMax: 90,
105+
yMin: 70
106+
};
107+
// </block:annotation3>
108+
109+
/* <block:config:0> */
110+
const config = {
111+
type: 'line',
112+
data,
113+
options: {
114+
scales: {
115+
y: {
116+
beginAtZero: true,
117+
max: 100,
118+
min: 0
119+
}
120+
},
121+
plugins: {
122+
annotation: {
123+
common: {
124+
drawTime: 'afterDraw'
125+
},
126+
annotations: {
127+
annotation1,
128+
labelAnnotation1,
129+
annotation2,
130+
labelAnnotation2,
131+
annotation3,
132+
labelAnnotation3
133+
}
134+
}
135+
}
136+
}
137+
};
138+
/* </block:config> */
139+
140+
const actions = [
141+
{
142+
name: 'Randomize',
143+
handler: function(chart) {
144+
chart.data.datasets.forEach(function(dataset, i) {
145+
dataset.data = dataset.data.map(() => Utils.rand(MIN, MAX));
146+
});
147+
chart.update();
148+
}
149+
}
150+
];
151+
152+
module.exports = {
153+
actions: actions,
154+
config: config,
155+
};
156+
```

src/annotation.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,14 +120,15 @@ export default {
120120
},
121121
common: {
122122
drawTime: 'afterDatasetsDraw',
123+
init: false,
123124
label: {
124125
}
125126
}
126127
},
127128

128129
descriptors: {
129130
_indexable: false,
130-
_scriptable: (prop) => !hooks.includes(prop),
131+
_scriptable: (prop) => !hooks.includes(prop) && prop !== 'init',
131132
annotations: {
132133
_allKeys: false,
133134
_fallback: (prop, opts) => `elements.${annotationTypes[resolveType(opts.type)].id}`

0 commit comments

Comments
 (0)