diff --git a/docs/guide/configuration.md b/docs/guide/configuration.md index 4582226d5..4ab31ac06 100644 --- a/docs/guide/configuration.md +++ b/docs/guide/configuration.md @@ -64,7 +64,7 @@ The following options apply to all annotations unless they are overwritten on a | Name | Type | [Scriptable](options.md#scriptable-options) | Default | Notes | ---- | ---- | :----: | ---- | ---- -| `drawTime` | `string` | Yes | `'afterDatasetsDraw'` | See [drawTime](options#draw-time). +| `drawTime` | `string`\|`number` | Yes | `'afterDatasetsDraw'` | See [drawTime](options#draw-time). | `init` | `boolean` | [See initial animation](#initial-animation) | `false` | Enable the animation to the annotations when they are drawing at chart initialization ### Initial animation diff --git a/docs/guide/options.md b/docs/guide/options.md index e40427d5a..4a0e241c1 100644 --- a/docs/guide/options.md +++ b/docs/guide/options.md @@ -83,7 +83,7 @@ module.exports = { ## Draw Time -The `drawTime` option for an annotation determines where in the chart lifecycle the drawing occurs. Four potential options are available: +The `drawTime` option for an annotation determines where in the chart lifecycle the drawing occurs. Four potential predefined options are available: | Option | Notes | ---- | ---- @@ -92,6 +92,8 @@ The `drawTime` option for an annotation determines where in the chart lifecycle | `'afterDatasetsDraw'` | Occurs after drawing of datasets but before items such as the tooltip | `'afterDraw'` | After other drawing is completed. +Furthermore, the `drawTime` option can be set as number which represents the dataset index used to draw the annotation, before that dataset will be. + ## Option Context 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. diff --git a/docs/guide/types/_commonInnerLabel.md b/docs/guide/types/_commonInnerLabel.md index e72e3f46b..f2aa3db55 100644 --- a/docs/guide/types/_commonInnerLabel.md +++ b/docs/guide/types/_commonInnerLabel.md @@ -9,7 +9,7 @@ All of these options can be [Scriptable](../options.md#scriptable-options) | [`color`](#fonts-and-colors) | [`Color`\|`Color[]`](../options#color) | `'black'` | Text color. | `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. | `display` | `boolean` | `false` | Whether or not the label is shown. -| `drawTime` | `string` | `options.drawTime` | See [drawTime](../options#draw-time). Defaults to the annotation draw time if unset +| `drawTime` | `string`\|`number` | `options.drawTime` | See [drawTime](../options#draw-time). Defaults to the annotation draw time if unset | [`font`](#fonts-and-colors) | [`Font`\|`Font[]`](../options#font) | `{ weight: 'bold' }` | Label font | `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. | `hitTolerance` | `number` | `undefined` | Amount of pixels to interact with annotations within some distance of the mouse point. diff --git a/docs/guide/types/_commonOptions.md b/docs/guide/types/_commonOptions.md index c0d69ab11..66c26c6f2 100644 --- a/docs/guide/types/_commonOptions.md +++ b/docs/guide/types/_commonOptions.md @@ -11,7 +11,7 @@ The following options are available for all annotations. | [`borderDashOffset`](#styling) | `number` | Yes | `0` | [`borderShadowColor`](#styling) | [`Color`](../options.md#color) | Yes | `'transparent'` | [`display`](#general) | `boolean` | Yes | `true` -| [`drawTime`](#general) | `string` | Yes | `'afterDatasetsDraw'` +| [`drawTime`](#general) | `string`\|`number` | Yes | `'afterDatasetsDraw'` | [`hitTolerance`](#general) | `number` | Yes | `0` | [`init`](../configuration.html#common) | `boolean` | [See initial animation](../configuration.html#initial-animation) | `undefined` | [`id`](#general) | `string` | No | `undefined` diff --git a/docs/guide/types/line.md b/docs/guide/types/line.md index 0bde5c35f..1f4171341 100644 --- a/docs/guide/types/line.md +++ b/docs/guide/types/line.md @@ -136,7 +136,7 @@ All of these options can be [Scriptable](../options.md#scriptable-options) | [`color`](#fonts-and-colors) | [`Color`\|`Color[]`](../options#color) | `'#fff'` | Text color. | `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. | `display` | `boolean` | `false` | Whether or not the label is shown. -| `drawTime` | `string` | `options.drawTime` | See [drawTime](../options#draw-time). Defaults to the line annotation draw time if unset. +| `drawTime` | `string`\|`number` | `options.drawTime` | See [drawTime](../options#draw-time). Defaults to the line annotation draw time if unset. | [`font`](#fonts-and-colors) | [`Font`\|`Font[]`](../options#font) | `{ weight: 'bold' }` | Label font. | `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. | `hitTolerance` | `number` | `undefined` | Amount of pixels to interact with annotations within some distance of the mouse point. diff --git a/src/annotation.js b/src/annotation.js index 006416329..ee7c49c98 100644 --- a/src/annotation.js +++ b/src/annotation.js @@ -82,6 +82,10 @@ export default { draw(chart, 'afterDatasetsDraw', options.clip); }, + beforeDatasetDraw(chart, _args, options) { + draw(chart, _args.index, options.clip); + }, + beforeDraw(chart, _args, options) { draw(chart, 'beforeDraw', options.clip); }, diff --git a/test/fixtures/box/drawTime.js b/test/fixtures/box/drawTime.js new file mode 100644 index 000000000..0e3bee1e0 --- /dev/null +++ b/test/fixtures/box/drawTime.js @@ -0,0 +1,127 @@ +module.exports = { + tolerance: 0.0055, + config: { + type: 'bar', + data: { + labels: ['a', 'b', 'c', 'd', 'e', 'f'], + datasets: [{ + data: [0, 5, 10, 15, 20, 22], + backgroundColor: 'gray' + }, { + data: [0, 5, 10, 15, 20, 22], + backgroundColor: 'lightGray' + }, { + data: [0, 5, 10, 15, 20, 22], + backgroundColor: 'lightGray' + }] + }, + options: { + scales: { + x: { + display: false + }, + y: { + display: false, + min: 0, + max: 25 + } + }, + animation: false, + plugins: { + legend: false, + tooltip: false, + annotation: { + annotations: { + beforeDraw: { + type: 'box', + drawTime: 'beforeDraw', + xMin: 0.5, + xMax: 1.5, + yMin: 0.5, + yMax: 4.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + drawTime: 'afterDraw', + content: 'beforeDraw' + } + }, + afterDraw: { + type: 'box', + drawTime: 'afterDraw', + xMin: 1.5, + xMax: 2.5, + yMin: 5.5, + yMax: 9.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + drawTime: 'afterDraw', + content: 'afterDraw' + } + }, + beforeDatasetsDraw: { + type: 'box', + drawTime: 'beforeDatasetsDraw', + xMin: 2.5, + xMax: 3.5, + yMin: 10.5, + yMax: 14.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + drawTime: 'afterDraw', + content: 'beforeDatasetsDraw' + } + }, + afterDatasetsDraw: { + type: 'box', + drawTime: 'afterDatasetsDraw', + xMin: 3.5, + xMax: 4.5, + yMin: 15.5, + yMax: 19.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + drawTime: 'afterDraw', + content: 'afterDatasetsDraw' + } + }, + dataset0: { + type: 'box', + drawTime: 0, + xMin: 4.5, + xMax: 5.5, + yMin: 10.5, + yMax: 14.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + drawTime: 'afterDraw', + content: ['dataset', 'index 0'] + } + }, + dataset1: { + type: 'box', + drawTime: 1, + xMin: 3.5, + xMax: 4.5, + yMin: 5.5, + yMax: 9.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + drawTime: 'afterDraw', + content: ['dataset', 'index 1'] + } + } + } + } + } + } + }, + options: { + spriteText: true + } +}; diff --git a/test/fixtures/box/drawTime.png b/test/fixtures/box/drawTime.png new file mode 100644 index 000000000..04ff2e5e8 Binary files /dev/null and b/test/fixtures/box/drawTime.png differ diff --git a/test/fixtures/box/labelDrawTime.js b/test/fixtures/box/labelDrawTime.js new file mode 100644 index 000000000..422c59622 --- /dev/null +++ b/test/fixtures/box/labelDrawTime.js @@ -0,0 +1,121 @@ +module.exports = { + tolerance: 0.0055, + config: { + type: 'bar', + data: { + labels: ['a', 'b', 'c', 'd', 'e', 'f'], + datasets: [{ + data: [0, 5, 10, 15, 20, 22], + backgroundColor: 'gray' + }, { + data: [0, 5, 10, 15, 20, 22], + backgroundColor: 'lightGray' + }, { + data: [0, 5, 10, 15, 20, 22], + backgroundColor: 'lightGray' + }] + }, + options: { + scales: { + x: { + display: false + }, + y: { + display: false, + min: 0, + max: 25 + } + }, + animation: false, + plugins: { + legend: false, + tooltip: false, + annotation: { + annotations: { + beforeDraw: { + type: 'box', + drawTime: 'beforeDraw', + xMin: 0.5, + xMax: 1.5, + yMin: 0.5, + yMax: 4.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + content: 'beforeDraw' + } + }, + afterDraw: { + type: 'box', + drawTime: 'afterDraw', + xMin: 1.5, + xMax: 2.5, + yMin: 5.5, + yMax: 9.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + content: 'afterDraw' + } + }, + beforeDatasetsDraw: { + type: 'box', + drawTime: 'beforeDatasetsDraw', + xMin: 2.5, + xMax: 3.5, + yMin: 10.5, + yMax: 14.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + content: 'beforeDatasetsDraw' + } + }, + afterDatasetsDraw: { + type: 'box', + drawTime: 'afterDatasetsDraw', + xMin: 3.5, + xMax: 4.5, + yMin: 15.5, + yMax: 19.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + content: 'afterDatasetsDraw' + } + }, + dataset0: { + type: 'box', + drawTime: 0, + xMin: 4.5, + xMax: 5.5, + yMin: 10.5, + yMax: 14.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + content: ['dataset', 'index 0'] + } + }, + dataset1: { + type: 'box', + drawTime: 1, + xMin: 3.5, + xMax: 4.5, + yMin: 5.5, + yMax: 9.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + content: ['dataset', 'index 1'] + } + } + } + } + } + } + }, + options: { + spriteText: true + } +}; diff --git a/test/fixtures/box/labelDrawTime.png b/test/fixtures/box/labelDrawTime.png new file mode 100644 index 000000000..5e7ef364c Binary files /dev/null and b/test/fixtures/box/labelDrawTime.png differ diff --git a/test/fixtures/ellipse/drawTime.js b/test/fixtures/ellipse/drawTime.js new file mode 100644 index 000000000..b3ae48e7c --- /dev/null +++ b/test/fixtures/ellipse/drawTime.js @@ -0,0 +1,127 @@ +module.exports = { + tolerance: 0.0055, + config: { + type: 'bar', + data: { + labels: ['a', 'b', 'c', 'd', 'e', 'f'], + datasets: [{ + data: [0, 5, 10, 15, 20, 22], + backgroundColor: 'gray' + }, { + data: [0, 5, 10, 15, 20, 22], + backgroundColor: 'lightGray' + }, { + data: [0, 5, 10, 15, 20, 22], + backgroundColor: 'lightGray' + }] + }, + options: { + scales: { + x: { + display: false + }, + y: { + display: false, + min: 0, + max: 25 + } + }, + animation: false, + plugins: { + legend: false, + tooltip: false, + annotation: { + annotations: { + beforeDraw: { + type: 'ellipse', + drawTime: 'beforeDraw', + xMin: 0.5, + xMax: 1.5, + yMin: 0.5, + yMax: 4.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + drawTime: 'afterDraw', + content: 'beforeDraw' + } + }, + afterDraw: { + type: 'ellipse', + drawTime: 'afterDraw', + xMin: 1.5, + xMax: 2.5, + yMin: 5.5, + yMax: 9.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + drawTime: 'afterDraw', + content: 'afterDraw' + } + }, + beforeDatasetsDraw: { + type: 'ellipse', + drawTime: 'beforeDatasetsDraw', + xMin: 2.5, + xMax: 3.5, + yMin: 10.5, + yMax: 14.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + drawTime: 'afterDraw', + content: 'beforeDatasetsDraw' + } + }, + afterDatasetsDraw: { + type: 'ellipse', + drawTime: 'afterDatasetsDraw', + xMin: 3.5, + xMax: 4.5, + yMin: 15.5, + yMax: 19.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + drawTime: 'afterDraw', + content: 'afterDatasetsDraw' + } + }, + dataset0: { + type: 'ellipse', + drawTime: 0, + xMin: 4.5, + xMax: 5.5, + yMin: 10.5, + yMax: 14.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + drawTime: 'afterDraw', + content: ['dataset', 'index 0'] + } + }, + dataset1: { + type: 'ellipse', + drawTime: 1, + xMin: 3.5, + xMax: 4.5, + yMin: 5.5, + yMax: 9.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + drawTime: 'afterDraw', + content: ['dataset', 'index 1'] + } + } + } + } + } + } + }, + options: { + spriteText: true + } +}; diff --git a/test/fixtures/ellipse/drawTime.png b/test/fixtures/ellipse/drawTime.png new file mode 100644 index 000000000..f69bb35bc Binary files /dev/null and b/test/fixtures/ellipse/drawTime.png differ diff --git a/test/fixtures/ellipse/labelDrawTime.js b/test/fixtures/ellipse/labelDrawTime.js new file mode 100644 index 000000000..b8737728d --- /dev/null +++ b/test/fixtures/ellipse/labelDrawTime.js @@ -0,0 +1,121 @@ +module.exports = { + tolerance: 0.0055, + config: { + type: 'bar', + data: { + labels: ['a', 'b', 'c', 'd', 'e', 'f'], + datasets: [{ + data: [0, 5, 10, 15, 20, 22], + backgroundColor: 'gray' + }, { + data: [0, 5, 10, 15, 20, 22], + backgroundColor: 'lightGray' + }, { + data: [0, 5, 10, 15, 20, 22], + backgroundColor: 'lightGray' + }] + }, + options: { + scales: { + x: { + display: false + }, + y: { + display: false, + min: 0, + max: 25 + } + }, + animation: false, + plugins: { + legend: false, + tooltip: false, + annotation: { + annotations: { + beforeDraw: { + type: 'ellipse', + drawTime: 'beforeDraw', + xMin: 0.5, + xMax: 1.5, + yMin: 0.5, + yMax: 4.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + content: 'beforeDraw' + } + }, + afterDraw: { + type: 'ellipse', + drawTime: 'afterDraw', + xMin: 1.5, + xMax: 2.5, + yMin: 5.5, + yMax: 9.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + content: 'afterDraw' + } + }, + beforeDatasetsDraw: { + type: 'ellipse', + drawTime: 'beforeDatasetsDraw', + xMin: 2.5, + xMax: 3.5, + yMin: 10.5, + yMax: 14.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + content: 'beforeDatasetsDraw' + } + }, + afterDatasetsDraw: { + type: 'ellipse', + drawTime: 'afterDatasetsDraw', + xMin: 3.5, + xMax: 4.5, + yMin: 15.5, + yMax: 19.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + content: 'afterDatasetsDraw' + } + }, + dataset0: { + type: 'ellipse', + drawTime: 0, + xMin: 4.5, + xMax: 5.5, + yMin: 10.5, + yMax: 14.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + content: ['dataset', 'index 0'] + } + }, + dataset1: { + type: 'ellipse', + drawTime: 1, + xMin: 3.5, + xMax: 4.5, + yMin: 5.5, + yMax: 9.5, + backgroundColor: 'rgb(33, 101, 171)', + label: { + display: true, + content: ['dataset', 'index 1'] + } + } + } + } + } + } + }, + options: { + spriteText: true + } +}; diff --git a/test/fixtures/ellipse/labelDrawTime.png b/test/fixtures/ellipse/labelDrawTime.png new file mode 100644 index 000000000..fd092e10b Binary files /dev/null and b/test/fixtures/ellipse/labelDrawTime.png differ diff --git a/test/fixtures/line/drawTime.js b/test/fixtures/line/drawTime.js new file mode 100644 index 000000000..eba089edf --- /dev/null +++ b/test/fixtures/line/drawTime.js @@ -0,0 +1,145 @@ +module.exports = { + tolerance: 0.0055, + config: { + type: 'bar', + data: { + labels: ['a', 'b', 'c', 'd', 'e', 'f'], + datasets: [{ + data: [0, 5, 10, 15, 20, 22], + backgroundColor: 'gray' + }, { + data: [0, 5, 10, 15, 20, 22], + backgroundColor: 'lightGray' + }, { + data: [0, 5, 10, 15, 20, 22], + backgroundColor: 'lightGray' + }] + }, + options: { + scales: { + x: { + display: false + }, + y: { + display: false, + min: 0, + max: 25 + } + }, + animation: false, + plugins: { + legend: false, + tooltip: false, + annotation: { + annotations: { + beforeDraw: { + type: 'line', + drawTime: 'beforeDraw', + xMin: 0.5, + xMax: 1.5, + yMin: 0.5, + yMax: 4.5, + borderColor: 'rgb(33, 101, 171)', + borderWidth: 4, + label: { + display: true, + drawTime: 'afterDraw', + content: 'beforeDraw', + position: 'start', + xAdjust: 50 + } + }, + afterDraw: { + type: 'line', + drawTime: 'afterDraw', + xMin: 1.5, + xMax: 2.5, + yMin: 5.5, + yMax: 9.5, + borderColor: 'rgb(33, 101, 171)', + borderWidth: 4, + label: { + display: true, + drawTime: 'afterDraw', + content: 'afterDraw', + position: 'start', + xAdjust: 50 + } + }, + beforeDatasetsDraw: { + type: 'line', + drawTime: 'beforeDatasetsDraw', + xMin: 2.5, + xMax: 3.5, + yMin: 10.5, + yMax: 14.5, + borderColor: 'rgb(33, 101, 171)', + borderWidth: 4, + label: { + display: true, + drawTime: 'afterDraw', + content: 'beforeDatasetsDraw', + position: 'start', + xAdjust: 80 + } + }, + afterDatasetsDraw: { + type: 'line', + drawTime: 'afterDatasetsDraw', + xMin: 3.5, + xMax: 4.5, + yMin: 15.5, + yMax: 19.5, + borderColor: 'rgb(33, 101, 171)', + borderWidth: 4, + label: { + display: true, + drawTime: 'afterDraw', + content: 'afterDatasetsDraw', + position: 'start', + xAdjust: 80 + } + }, + dataset0: { + type: 'line', + drawTime: 0, + xMin: 4.5, + xMax: 5.5, + yMin: 10.5, + yMax: 14.5, + borderColor: 'rgb(33, 101, 171)', + borderWidth: 4, + label: { + display: true, + drawTime: 'afterDraw', + content: ['dataset', 'index 0'], + position: 'start', + xAdjust: 50 + } + }, + dataset1: { + type: 'line', + drawTime: 1, + xMin: 3.5, + xMax: 4.5, + yMin: 5.5, + yMax: 9.5, + borderColor: 'rgb(33, 101, 171)', + borderWidth: 4, + label: { + display: true, + drawTime: 'afterDraw', + content: ['dataset', 'index 1'], + position: 'start', + xAdjust: 50 + } + } + } + } + } + } + }, + options: { + spriteText: true + } +}; diff --git a/test/fixtures/line/drawTime.png b/test/fixtures/line/drawTime.png new file mode 100644 index 000000000..af5462121 Binary files /dev/null and b/test/fixtures/line/drawTime.png differ diff --git a/types/options.d.ts b/types/options.d.ts index 0d49d2380..9376e8506 100644 --- a/types/options.d.ts +++ b/types/options.d.ts @@ -3,7 +3,7 @@ import { AnnotationEvents, PartialEventContext, EventContext } from './events'; import { LabelOptions, BoxLabelOptions, LabelTypeOptions } from './label'; import { AnnotationBoxModel, AnnotationElement } from './element'; -export type DrawTime = 'afterDraw' | 'afterDatasetsDraw' | 'beforeDraw' | 'beforeDatasetsDraw'; +export type DrawTime = 'afterDraw' | 'afterDatasetsDraw' | 'beforeDraw' | 'beforeDatasetsDraw' | number; export interface AnnotationTypeRegistry { box: BoxAnnotationOptions diff --git a/types/tests/exports.ts b/types/tests/exports.ts index 5cacbc570..16ec7ee37 100644 --- a/types/tests/exports.ts +++ b/types/tests/exports.ts @@ -31,6 +31,7 @@ const chart = new Chart('id', { }, annotations: [{ type: 'line', + drawTime: 1, label: { content: ['test', 'multiple'], font: {