Skip to content

Commit a15dde6

Browse files
stockiNailstockiNail
authored
Enable drawTime option as integer to relate the annotation drawing to a specific dataset drawing (#889)
* Enable drawTime related to a specific dataset drawing * add test cases and update types * update doc
1 parent 456e46b commit a15dde6

18 files changed

+654
-6
lines changed

‎docs/guide/configuration.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ The following options apply to all annotations unless they are overwritten on a
6464

6565
| Name | Type | [Scriptable](options.md#scriptable-options) | Default | Notes
6666
| ---- | ---- | :----: | ---- | ----
67-
| `drawTime` | `string` | Yes | `'afterDatasetsDraw'` | See [drawTime](options#draw-time).
67+
| `drawTime` | `string`\|`number` | Yes | `'afterDatasetsDraw'` | See [drawTime](options#draw-time).
6868
| `init` | `boolean` | [See initial animation](#initial-animation) | `false` | Enable the animation to the annotations when they are drawing at chart initialization
6969

7070
### Initial animation

‎docs/guide/options.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ module.exports = {
8383

8484
## Draw Time
8585

86-
The `drawTime` option for an annotation determines where in the chart lifecycle the drawing occurs. Four potential options are available:
86+
The `drawTime` option for an annotation determines where in the chart lifecycle the drawing occurs. Four potential predefined options are available:
8787

8888
| Option | Notes
8989
| ---- | ----
@@ -92,6 +92,8 @@ The `drawTime` option for an annotation determines where in the chart lifecycle
9292
| `'afterDatasetsDraw'` | Occurs after drawing of datasets but before items such as the tooltip
9393
| `'afterDraw'` | After other drawing is completed.
9494

95+
Furthermore, the `drawTime` option can be set as number which represents the dataset index used to draw the annotation, before that dataset will be.
96+
9597
## Option Context
9698

9799
The option context is used to give contextual information when resolving options and only applies to scriptable options. The object is preserved, so it can be used to store and pass information between calls / options.

‎docs/guide/types/_commonInnerLabel.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ All of these options can be [Scriptable](../options.md#scriptable-options)
99
| [`color`](#fonts-and-colors) | [`Color`\|`Color[]`](../options#color) | `'black'` | Text color.
1010
| `content` | `string`\|`string[]`\|[`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)\|[`HTMLCanvasElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) | `null` | The content to show in the label.
1111
| `display` | `boolean` | `false` | Whether or not the label is shown.
12-
| `drawTime` | `string` | `options.drawTime` | See [drawTime](../options#draw-time). Defaults to the annotation draw time if unset
12+
| `drawTime` | `string`\|`number` | `options.drawTime` | See [drawTime](../options#draw-time). Defaults to the annotation draw time if unset
1313
| [`font`](#fonts-and-colors) | [`Font`\|`Font[]`](../options#font) | `{ weight: 'bold' }` | Label font
1414
| `height` | `number`\|`string` | `undefined` | Overrides the height of the image or canvas element. Could be set in pixel by a number, or in percentage of current height of image or canvas element by a string. If undefined, uses the height of the image or canvas element. It is used only when the content is an image or canvas element.
1515
| `hitTolerance` | `number` | `undefined` | Amount of pixels to interact with annotations within some distance of the mouse point.

‎docs/guide/types/_commonOptions.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ The following options are available for all annotations.
1111
| [`borderDashOffset`](#styling) | `number` | Yes | `0`
1212
| [`borderShadowColor`](#styling) | [`Color`](../options.md#color) | Yes | `'transparent'`
1313
| [`display`](#general) | `boolean` | Yes | `true`
14-
| [`drawTime`](#general) | `string` | Yes | `'afterDatasetsDraw'`
14+
| [`drawTime`](#general) | `string`\|`number` | Yes | `'afterDatasetsDraw'`
1515
| [`hitTolerance`](#general) | `number` | Yes | `0`
1616
| [`init`](../configuration.html#common) | `boolean` | [See initial animation](../configuration.html#initial-animation) | `undefined`
1717
| [`id`](#general) | `string` | No | `undefined`

‎docs/guide/types/line.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ All of these options can be [Scriptable](../options.md#scriptable-options)
136136
| [`color`](#fonts-and-colors) | [`Color`\|`Color[]`](../options#color) | `'#fff'` | Text color.
137137
| `content` | `string`\|`string[]`\|[`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)\|[`HTMLCanvasElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) | `null` | The content to show in the label.
138138
| `display` | `boolean` | `false` | Whether or not the label is shown.
139-
| `drawTime` | `string` | `options.drawTime` | See [drawTime](../options#draw-time). Defaults to the line annotation draw time if unset.
139+
| `drawTime` | `string`\|`number` | `options.drawTime` | See [drawTime](../options#draw-time). Defaults to the line annotation draw time if unset.
140140
| [`font`](#fonts-and-colors) | [`Font`\|`Font[]`](../options#font) | `{ weight: 'bold' }` | Label font.
141141
| `height` | `number`\|`string` | `undefined` | Overrides the height of the image or canvas element. Could be set in pixel by a number, or in percentage of current height of image or canvas element by a string. If undefined, uses the height of the image or canvas element. It is used only when the content is an image or canvas element.
142142
| `hitTolerance` | `number` | `undefined` | Amount of pixels to interact with annotations within some distance of the mouse point.

‎src/annotation.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,10 @@ export default {
8383
draw(chart, 'afterDatasetsDraw', options.clip);
8484
},
8585

86+
beforeDatasetDraw(chart, _args, options) {
87+
draw(chart, _args.index, options.clip);
88+
},
89+
8690
beforeDraw(chart, _args, options) {
8791
draw(chart, 'beforeDraw', options.clip);
8892
},

‎test/fixtures/box/drawTime.js

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
module.exports = {
2+
tolerance: 0.0055,
3+
config: {
4+
type: 'bar',
5+
data: {
6+
labels: ['a', 'b', 'c', 'd', 'e', 'f'],
7+
datasets: [{
8+
data: [0, 5, 10, 15, 20, 22],
9+
backgroundColor: 'gray'
10+
}, {
11+
data: [0, 5, 10, 15, 20, 22],
12+
backgroundColor: 'lightGray'
13+
}, {
14+
data: [0, 5, 10, 15, 20, 22],
15+
backgroundColor: 'lightGray'
16+
}]
17+
},
18+
options: {
19+
scales: {
20+
x: {
21+
display: false
22+
},
23+
y: {
24+
display: false,
25+
min: 0,
26+
max: 25
27+
}
28+
},
29+
animation: false,
30+
plugins: {
31+
legend: false,
32+
tooltip: false,
33+
annotation: {
34+
annotations: {
35+
beforeDraw: {
36+
type: 'box',
37+
drawTime: 'beforeDraw',
38+
xMin: 0.5,
39+
xMax: 1.5,
40+
yMin: 0.5,
41+
yMax: 4.5,
42+
backgroundColor: 'rgb(33, 101, 171)',
43+
label: {
44+
display: true,
45+
drawTime: 'afterDraw',
46+
content: 'beforeDraw'
47+
}
48+
},
49+
afterDraw: {
50+
type: 'box',
51+
drawTime: 'afterDraw',
52+
xMin: 1.5,
53+
xMax: 2.5,
54+
yMin: 5.5,
55+
yMax: 9.5,
56+
backgroundColor: 'rgb(33, 101, 171)',
57+
label: {
58+
display: true,
59+
drawTime: 'afterDraw',
60+
content: 'afterDraw'
61+
}
62+
},
63+
beforeDatasetsDraw: {
64+
type: 'box',
65+
drawTime: 'beforeDatasetsDraw',
66+
xMin: 2.5,
67+
xMax: 3.5,
68+
yMin: 10.5,
69+
yMax: 14.5,
70+
backgroundColor: 'rgb(33, 101, 171)',
71+
label: {
72+
display: true,
73+
drawTime: 'afterDraw',
74+
content: 'beforeDatasetsDraw'
75+
}
76+
},
77+
afterDatasetsDraw: {
78+
type: 'box',
79+
drawTime: 'afterDatasetsDraw',
80+
xMin: 3.5,
81+
xMax: 4.5,
82+
yMin: 15.5,
83+
yMax: 19.5,
84+
backgroundColor: 'rgb(33, 101, 171)',
85+
label: {
86+
display: true,
87+
drawTime: 'afterDraw',
88+
content: 'afterDatasetsDraw'
89+
}
90+
},
91+
dataset0: {
92+
type: 'box',
93+
drawTime: 0,
94+
xMin: 4.5,
95+
xMax: 5.5,
96+
yMin: 10.5,
97+
yMax: 14.5,
98+
backgroundColor: 'rgb(33, 101, 171)',
99+
label: {
100+
display: true,
101+
drawTime: 'afterDraw',
102+
content: ['dataset', 'index 0']
103+
}
104+
},
105+
dataset1: {
106+
type: 'box',
107+
drawTime: 1,
108+
xMin: 3.5,
109+
xMax: 4.5,
110+
yMin: 5.5,
111+
yMax: 9.5,
112+
backgroundColor: 'rgb(33, 101, 171)',
113+
label: {
114+
display: true,
115+
drawTime: 'afterDraw',
116+
content: ['dataset', 'index 1']
117+
}
118+
}
119+
}
120+
}
121+
}
122+
}
123+
},
124+
options: {
125+
spriteText: true
126+
}
127+
};

‎test/fixtures/box/drawTime.png

22 KB
Loading

‎test/fixtures/box/labelDrawTime.js

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
module.exports = {
2+
tolerance: 0.0055,
3+
config: {
4+
type: 'bar',
5+
data: {
6+
labels: ['a', 'b', 'c', 'd', 'e', 'f'],
7+
datasets: [{
8+
data: [0, 5, 10, 15, 20, 22],
9+
backgroundColor: 'gray'
10+
}, {
11+
data: [0, 5, 10, 15, 20, 22],
12+
backgroundColor: 'lightGray'
13+
}, {
14+
data: [0, 5, 10, 15, 20, 22],
15+
backgroundColor: 'lightGray'
16+
}]
17+
},
18+
options: {
19+
scales: {
20+
x: {
21+
display: false
22+
},
23+
y: {
24+
display: false,
25+
min: 0,
26+
max: 25
27+
}
28+
},
29+
animation: false,
30+
plugins: {
31+
legend: false,
32+
tooltip: false,
33+
annotation: {
34+
annotations: {
35+
beforeDraw: {
36+
type: 'box',
37+
drawTime: 'beforeDraw',
38+
xMin: 0.5,
39+
xMax: 1.5,
40+
yMin: 0.5,
41+
yMax: 4.5,
42+
backgroundColor: 'rgb(33, 101, 171)',
43+
label: {
44+
display: true,
45+
content: 'beforeDraw'
46+
}
47+
},
48+
afterDraw: {
49+
type: 'box',
50+
drawTime: 'afterDraw',
51+
xMin: 1.5,
52+
xMax: 2.5,
53+
yMin: 5.5,
54+
yMax: 9.5,
55+
backgroundColor: 'rgb(33, 101, 171)',
56+
label: {
57+
display: true,
58+
content: 'afterDraw'
59+
}
60+
},
61+
beforeDatasetsDraw: {
62+
type: 'box',
63+
drawTime: 'beforeDatasetsDraw',
64+
xMin: 2.5,
65+
xMax: 3.5,
66+
yMin: 10.5,
67+
yMax: 14.5,
68+
backgroundColor: 'rgb(33, 101, 171)',
69+
label: {
70+
display: true,
71+
content: 'beforeDatasetsDraw'
72+
}
73+
},
74+
afterDatasetsDraw: {
75+
type: 'box',
76+
drawTime: 'afterDatasetsDraw',
77+
xMin: 3.5,
78+
xMax: 4.5,
79+
yMin: 15.5,
80+
yMax: 19.5,
81+
backgroundColor: 'rgb(33, 101, 171)',
82+
label: {
83+
display: true,
84+
content: 'afterDatasetsDraw'
85+
}
86+
},
87+
dataset0: {
88+
type: 'box',
89+
drawTime: 0,
90+
xMin: 4.5,
91+
xMax: 5.5,
92+
yMin: 10.5,
93+
yMax: 14.5,
94+
backgroundColor: 'rgb(33, 101, 171)',
95+
label: {
96+
display: true,
97+
content: ['dataset', 'index 0']
98+
}
99+
},
100+
dataset1: {
101+
type: 'box',
102+
drawTime: 1,
103+
xMin: 3.5,
104+
xMax: 4.5,
105+
yMin: 5.5,
106+
yMax: 9.5,
107+
backgroundColor: 'rgb(33, 101, 171)',
108+
label: {
109+
display: true,
110+
content: ['dataset', 'index 1']
111+
}
112+
}
113+
}
114+
}
115+
}
116+
}
117+
},
118+
options: {
119+
spriteText: true
120+
}
121+
};

‎test/fixtures/box/labelDrawTime.png

20.2 KB
Loading

0 commit comments

Comments
 (0)