diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 6ab53be47..a8b4c6116 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -1,3 +1,4 @@ +const path = require('path'); const docsVersion = "VERSION"; const base = process.env.NODE_ENV === "development" ? '/chartjs-plugin-annotation/master/' : `/chartjs-plugin-annotation/${docsVersion}/`; @@ -60,6 +61,11 @@ module.exports = { }, }], ], + markdown: { + extendMarkdown: md => { + md.use(require('markdown-it-include'), path.resolve(__dirname, '../')); + } + }, themeConfig: { repo: 'chartjs/chartjs-plugin-annotation', logo: '/favicon.png', diff --git a/docs/guide/types/_commonOptions.md b/docs/guide/types/_commonOptions.md new file mode 100644 index 000000000..d4df88196 --- /dev/null +++ b/docs/guide/types/_commonOptions.md @@ -0,0 +1,24 @@ +### Common options to all annotations + +The following options are available for all annotations. + +| Name | Type | [Scriptable](../options#scriptable-options) | Default +| ---- | ---- | :----: | ---- +| [`adjustScaleRange`](#general) | `boolean` | Yes | `true` +| [`backgroundColor`](#styling) | [`Color`](../options#color) | Yes | `options.color` +| [`borderColor`](#styling) | [`Color`](../options#color) | Yes | `options.color` +| [`borderDash`](#styling) | `number[]` | Yes | `[]` +| [`borderDashOffset`](#styling) | `number` | Yes | `0` +| [`borderShadowColor`](#styling) | [`Color`](../options#color) | Yes | `'transparent'` +| [`display`](#general) | `boolean` | Yes | `true` +| [`drawTime`](#general) | `string` | Yes | `'afterDatasetsDraw'` +| [`shadowBlur`](#styling) | `number` | Yes | `0` +| [`shadowOffsetX`](#styling) | `number` | Yes | `0` +| [`shadowOffsetY`](#styling) | `number` | Yes | `0` +| [`xMax`](#general) | `number` \| `string` | Yes | `undefined` +| [`xMin`](#general) | `number` \| `string` | Yes | `undefined` +| [`xScaleID`](#general) | `string` | Yes | `undefined` +| [`yMin`](#general) | `number` \| `string` | Yes | `undefined` +| [`yMax`](#general) | `number` \| `string` | Yes | `undefined` +| [`yScaleID`](#general) | `string` | Yes | `undefined` +| [`z`](#general) | `number` | Yes | `0` diff --git a/docs/guide/types/box.md b/docs/guide/types/box.md index da753f0f9..021f88ec2 100644 --- a/docs/guide/types/box.md +++ b/docs/guide/types/box.md @@ -47,35 +47,21 @@ module.exports = { ## Configuration +### Box annotation specific options + The following options are available for box annotations. | Name | Type | [Scriptable](../options#scriptable-options) | Default | ---- | ---- | :----: | ---- -| [`adjustScaleRange`](#general) | `boolean` | Yes | `true` -| [`backgroundColor`](#styling) | [`Color`](../options#color) | Yes | `options.color` | [`backgroundShadowColor`](#styling) | [`Color`](../options#color) | Yes | `'transparent'` | [`borderCapStyle`](#styling) | `string` | Yes | `'butt'` -| [`borderColor`](#styling) | [`Color`](../options#color) | Yes | `options.color` -| [`borderDash`](#styling) | `number[]` | Yes | `[]` -| [`borderDashOffset`](#styling) | `number` | Yes | `0` | [`borderJoinStyle`](#styling) | `string` | Yes | `'miter'` | [`borderRadius`](#styling) | `number` \| `object` | Yes | `0` -| [`borderShadowColor`](#styling) | [`Color`](../options#color) | Yes | `'transparent'` | [`borderWidth`](#styling) | `number`| Yes | `1` -| [`display`](#general) | `boolean` | Yes | `true` -| [`drawTime`](#general) | `string` | Yes | `'afterDatasetsDraw'` | [`label`](#label) | `object` | Yes | | [`rotation`](#general) | `number`| Yes | `0` -| [`shadowBlur`](#styling) | `number` | Yes | `0` -| [`shadowOffsetX`](#styling) | `number` | Yes | `0` -| [`shadowOffsetY`](#styling) | `number` | Yes | `0` -| [`xMax`](#general) | `number` \| `string` | Yes | `undefined` -| [`xMin`](#general) | `number` \| `string` | Yes | `undefined` -| [`xScaleID`](#general) | `string` | Yes | `undefined` -| [`yMin`](#general) | `number` \| `string` | Yes | `undefined` -| [`yMax`](#general) | `number` \| `string` | Yes | `undefined` -| [`yScaleID`](#general) | `string` | Yes | `undefined` -| [`z`](#general) | `number` | Yes | `0` + +!!!include(./guide/types/_commonOptions.md)!!! ### General diff --git a/docs/guide/types/ellipse.md b/docs/guide/types/ellipse.md index b6e328539..f78b081a1 100644 --- a/docs/guide/types/ellipse.md +++ b/docs/guide/types/ellipse.md @@ -47,31 +47,17 @@ module.exports = { ## Configuration +### Ellipse annotation specific options + The following options are available for ellipse annotations. | Name | Type | [Scriptable](../options#scriptable-options) | Default | ---- | ---- | :----: | ---- -| [`adjustScaleRange`](#general) | `boolean` | Yes | `true` -| [`backgroundColor`](#styling) | [`Color`](../options#color) | Yes | `options.color` | [`backgroundShadowColor`](#styling) | [`Color`](../options#color) | Yes | `'transparent'` -| [`borderColor`](#styling) | [`Color`](../options#color) | Yes | `options.color` -| [`borderDash`](#styling) | `number[]`| Yes | `[]` -| [`borderDashOffset`](#styling) | `number`| Yes | `0` -| [`borderShadowColor`](#styling) | [`Color`](../options#color) | Yes | `'transparent'` | [`borderWidth`](#styling) | `number`| Yes | `1` -| [`display`](#general) | `boolean` | Yes | `true` -| [`drawTime`](#general) | `string` | Yes | `'afterDatasetsDraw'` | [`rotation`](#general) | `number`| Yes | `0` -| [`shadowBlur`](#styling) | `number` | Yes | `0` -| [`shadowOffsetX`](#styling) | `number` | Yes | `0` -| [`shadowOffsetY`](#styling) | `number` | Yes | `0` -| [`xMax`](#general) | `number` \| `string` | Yes | `undefined` -| [`xMin`](#general) | `number` \| `string` | Yes | `undefined` -| [`xScaleID`](#general) | `string` | Yes | `undefined` -| [`yMax`](#general) | `number` \| `string` | Yes | `undefined` -| [`yMin`](#general) | `number` \| `string` | Yes | `undefined` -| [`yScaleID`](#general) | `string` | Yes | `undefined` -| [`z`](#general) | `number` | Yes | `0` + +!!!include(./guide/types/_commonOptions.md)!!! ### General diff --git a/docs/guide/types/label.md b/docs/guide/types/label.md index 9ffb50890..8ab09f698 100644 --- a/docs/guide/types/label.md +++ b/docs/guide/types/label.md @@ -49,49 +49,35 @@ module.exports = { ## Configuration +### Label annotation specific options + The following options are available for label annotations. | Name | Type | [Scriptable](../options#scriptable-options) | Default | ---- | ---- | :----: | ---- -| [`adjustScaleRange`](#general) | `boolean` | Yes | `true` -| [`backgroundColor`](#styling) | [`Color`](../options#color) | Yes | `transparent` | [`backgroundShadowColor`](#styling) | [`Color`](../options#color) | Yes | `'transparent'` | [`borderCapStyle`](#styling) | `string` | Yes | `'butt'` -| [`borderColor`](#styling) | [`Color`](../options#color) | Yes | `options.color` -| [`borderDash`](#styling) | `number[]` | Yes | `[]` -| [`borderDashOffset`](#styling) | `number` | Yes | `0` | [`borderJoinStyle`](#styling) | `string` | Yes | `'miter'` | [`borderRadius`](#borderradius) | `number` \| `object` | Yes | `0` -| [`borderShadowColor`](#styling) | [`Color`](../options#color) | Yes | `'transparent'` | [`borderWidth`](#styling) | `number`| Yes | `0` | [`callout`](#callout) | `object` | Yes | | [`color`](#styling) | [`Color`](../options#color) | Yes | `'black'` | [`content`](#general) | `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) | Yes | `null` -| [`display`](#general) | `boolean` | Yes | `true` -| [`drawTime`](#general) | `string` | Yes | `'afterDatasetsDraw'` | [`font`](#styling) | [`Font`](../options#font) | Yes | `{}` | [`height`](#general) | `number`\|`string` | Yes | `undefined` | [`padding`](#general) | [`Padding`](../options#padding) | Yes | `6` | [`position`](#position) | `string`\|`{x: string, y: string}` | Yes | `'center'` | [`rotation`](#general) | `number`| Yes | `0` -| [`shadowBlur`](#styling) | `number` | Yes | `0` -| [`shadowOffsetX`](#styling) | `number` | Yes | `0` -| [`shadowOffsetY`](#styling) | `number` | Yes | `0` | [`textAlign`](#general) | `string` | Yes | `'center'` | [`textStrokeColor`](#styling) | [`Color`](../options#color) | Yes | `undefined` | [`textStrokeWidth`](#styling) | `number` | Yes | `0` | [`width`](#general) | `number`\|`string` | Yes | `undefined` | [`xAdjust`](#general) | `number` | Yes | `0` -| [`xMax`](#general) | `number` \| `string` | Yes | `undefined` -| [`xMin`](#general) | `number` \| `string` | Yes | `undefined` -| [`xScaleID`](#general) | `string` | Yes | `undefined` | [`xValue`](#general) | `number` \| `string` | Yes | `undefined` | [`yAdjust`](#general) | `number` | Yes | `0` -| [`yMax`](#general) | `number` \| `string` | Yes | `undefined` -| [`yMin`](#general) | `number` \| `string` | Yes | `undefined` -| [`yScaleID`](#general) | `string` | Yes | `undefined` | [`yValue`](#general) | `number` \| `string` | Yes | `undefined` -| [`z`](#general) | `number` | Yes | `0` + +!!!include(./guide/types/_commonOptions.md)!!! ### General diff --git a/docs/guide/types/line.md b/docs/guide/types/line.md index 3af178c6f..6afb0479d 100644 --- a/docs/guide/types/line.md +++ b/docs/guide/types/line.md @@ -46,33 +46,20 @@ module.exports = { ## Configuration -The following options are available for line annotations. All of these options can be . +### Line annotation specific options + +The following options are available for line annotations. | Name | Type | [Scriptable](../options#scriptable-options) | Default | ---- | ---- | :----: | ---- -| [`adjustScaleRange`](#general) | `boolean` | Yes | `true` | [`arrowHeads`](#arrow-heads) | `{start: object, end:object}` | Yes | -| [`borderColor`](#styling) | [`Color`](../options#color) | Yes | `options.color` -| [`borderDash`](#styling) | `number[]` | Yes | `[]` -| [`borderDashOffset`](#styling) | `number` | Yes | `0` -| [`borderShadowColor`](#styling) | [`Color`](../options#color) | Yes | `'transparent'` | [`borderWidth`](#styling) | `number` | Yes | `2` -| [`display`](#general) | `boolean` | Yes | `true` -| [`drawTime`](#general) | `string` | Yes | `'afterDatasetsDraw'` | [`endValue`](#positioning) | `number` | Yes | `undefined` | [`label`](#label) | `object` | Yes | | [`scaleID`](#positioning) | `string` | Yes | `undefined` -| [`shadowBlur`](#styling) | `number` | Yes | `0` -| [`shadowOffsetX`](#styling) | `number` | Yes | `0` -| [`shadowOffsetY`](#styling) | `number` | Yes | `0` | [`value`](#positioning) | `number` | Yes | `undefined` -| [`xMax`](#general) | `number` \| `string` | Yes | `undefined` -| [`xMin`](#general) | `number` \| `string` | Yes | `undefined` -| [`xScaleID`](#positioning) | `string` | Yes | `undefined` -| [`yMax`](#general) | `number` \| `string` | Yes | `undefined` -| [`yMin`](#general) | `number` \| `string` | Yes | `undefined` -| [`yScaleID`](#positioning) | `string` | Yes | `undefined` -| [`z`](#general) | `number` | Yes | `0` + +!!!include(./guide/types/_commonOptions.md)!!! ### General @@ -85,14 +72,7 @@ If one of the axes does not match an axis in the chart then the line behaviors a The 2 coordinates, start, end, are optional. If not specified, the line is expanded out to the edges in the respective direction. The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the line is expanded out to the edges in the respective direction. -| Name | Description -| ---- | ---- -| `adjustScaleRange` | Should the scale range be adjusted if this annotation is out of range. -| `display` | Whether or not this annotation is visible. -| `drawTime` | See [drawTime](../options#draw-time). -| `z` | The `z` property determines the drawing stack level of the line annotation element. All visible elements will be drawn in ascending order of `z` option, with the same `drawTime` option. - -### Positioning +#### Positioning The line can be positioned in two different ways. If `scaleID` is set, then `value` and `endValue` must also be set to indicate the endpoints of the line. The line will be perpendicular to the axis identified by `scaleID`. @@ -100,6 +80,9 @@ If `scaleID` is unset, then `xScaleID` and `yScaleID` are used to draw a line fr | Name | Description | ---- | ---- +| `adjustScaleRange` | Should the scale range be adjusted if this annotation is out of range. +| `display` | Whether or not this annotation is visible. +| `drawTime` | See [drawTime](../options#draw-time). | `endValue` | End two of the line when a single scale is specified. | `scaleID` | ID of the scale in single scale mode. If unset, `xScaleID` and `yScaleID` are used. | `value` | End one of the line when a single scale is specified. @@ -109,6 +92,7 @@ If `scaleID` is unset, then `xScaleID` and `yScaleID` are used to draw a line fr | `yMax` | Y coordinate of end two of the line in units along the y axis. | `yMin` | Y coordinate of end one of the line in units along the y axis. | `yScaleID` | ID of the Y scale to bind onto. If missing, the plugin will try to use the scale of the chart, configured as `'y'` axis. If more than one scale has been defined in the chart as `'y'` axis, the option is mandatory to select the right scale. +| `z` | The `z` property determines the drawing stack level of the line annotation element. All visible elements will be drawn in ascending order of `z` option, with the same `drawTime` option. ### Styling diff --git a/docs/guide/types/point.md b/docs/guide/types/point.md index 3519d1c35..84063d2de 100644 --- a/docs/guide/types/point.md +++ b/docs/guide/types/point.md @@ -45,37 +45,23 @@ module.exports = { ## Configuration +### Point annotation specific options + The following options are available for point annotations. | Name | Type | [Scriptable](../options#scriptable-options) | Default | ---- | ---- | :----: | ---- -| [`adjustScaleRange`](#general) | `boolean` | Yes | `true` -| [`backgroundColor`](#styling) | [`Color`](../options#color) | Yes | `options.color` | [`backgroundShadowColor`](#styling) | [`Color`](../options#color) | Yes | `'transparent'` -| [`borderColor`](#styling) | [`Color`](../options#color) | Yes | `options.color` -| [`borderDash`](#styling) | `number[]`| Yes | `[]` -| [`borderDashOffset`](#styling) | `number`| Yes | `0` -| [`borderShadowColor`](#styling) | [`Color`](../options#color) | Yes | `'transparent'` | [`borderWidth`](#styling) | `number`| Yes | `1` -| [`display`](#general) | `boolean` | Yes | `true` -| [`drawTime`](#general) | `string` | Yes | `'afterDatasetsDraw'` | [`pointStyle`](#styling) | [`PointStyle`](../options#point-style) | Yes | `'circle'` | [`radius`](#general) | `number` | Yes | `10` | [`rotation`](#general) | `number` | Yes | `0` -| [`shadowBlur`](#styling) | `number` | Yes | `0` -| [`shadowOffsetX`](#styling) | `number` | Yes | `0` -| [`shadowOffsetY`](#styling) | `number` | Yes | `0` | [`xAdjust`](#general) | `number` | Yes | `0` -| [`xMax`](#general) | `number` \| `string` | Yes | `undefined` -| [`xMin`](#general) | `number` \| `string` | Yes | `undefined` -| [`xScaleID`](#general) | `string` | Yes | `undefined` | [`xValue`](#general) | `number` \| `string` | Yes | `undefined` | [`yAdjust`](#general) | `number` | Yes | `0` -| [`yMax`](#general) | `number` \| `string` | Yes | `undefined` -| [`yMin`](#general) | `number` \| `string` | Yes | `undefined` -| [`yScaleID`](#general) | `string` | Yes | `undefined` | [`yValue`](#general) | `number` \| `string` | Yes | `undefined` -| [`z`](#general) | `number` | Yes | `0` + +!!!include(./guide/types/_commonOptions.md)!!! ### General diff --git a/docs/guide/types/polygon.md b/docs/guide/types/polygon.md index 027f7e477..fd9afb368 100644 --- a/docs/guide/types/polygon.md +++ b/docs/guide/types/polygon.md @@ -47,40 +47,26 @@ module.exports = { ## Configuration +### Polygon annotation specific options + The following options are available for polygon annotations. | Name | Type | [Scriptable](../options#scriptable-options) | Default | ---- | ---- | :----: | ---- -| [`adjustScaleRange`](#general) | `boolean` | Yes | `true` -| [`backgroundColor`](#styling) | [`Color`](../options#color) | Yes | `options.color` | [`backgroundShadowColor`](#styling) | [`Color`](../options#color) | Yes | `'transparent'` | [`borderCapStyle`](#styling) | `string` | Yes | `'butt'` -| [`borderColor`](#styling) | [`Color`](../options#color) | Yes | `options.color` -| [`borderDash`](#styling) | `number[]`| Yes | `[]` -| [`borderDashOffset`](#styling) | `number`| Yes | `0` | [`borderJoinStyle`](#styling) | `string` | Yes | `'miter'` -| [`borderShadowColor`](#styling) | [`Color`](../options#color) | Yes | `'transparent'` | [`borderWidth`](#styling) | `number`| Yes | `1` -| [`display`](#general) | `boolean` | Yes | `true` -| [`drawTime`](#general) | `string` | Yes | `'afterDatasetsDraw'` | [`point`](#point) | `object` | Yes | `{radius: 0}` | [`radius`](#general) | `number` | Yes | `10` | [`rotation`](#general) | `number` | Yes | `0` -| [`shadowBlur`](#styling) | `number` | Yes | `0` -| [`shadowOffsetX`](#styling) | `number` | Yes | `0` -| [`shadowOffsetY`](#styling) | `number` | Yes | `0` | [`sides`](#general) | `number` | Yes | `3` | [`xAdjust`](#general) | `number` | Yes | `0` -| [`xMax`](#general) | `number` \| `string` | Yes | `undefined` -| [`xMin`](#general) | `number` \| `string` | Yes | `undefined` -| [`xScaleID`](#general) | `string` | Yes | `'x'` | [`xValue`](#general) | `number` \| `string` | Yes | `undefined` | [`yAdjust`](#general) | `number` | Yes | `0` -| [`yScaleID`](#general) | `string` | Yes | `'y'` -| [`yMax`](#general) | `number` \| `string` | Yes | `undefined` -| [`yMin`](#general) | `number` \| `string` | Yes | `undefined` | [`yValue`](#general) | `number` \| `string` | Yes | `undefined` -| [`z`](#general) | `number` | Yes | `0` + +!!!include(./guide/types/_commonOptions.md)!!! ### General diff --git a/package-lock.json b/package-lock.json index 6e73ce4f6..11a2496a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,6 +32,7 @@ "karma-jasmine": "^4.0.1", "karma-jasmine-html-reporter": "^1.5.4", "karma-rollup-preprocessor": "^7.0.7", + "markdown-it-include": "^2.0.0", "mocha": "^9.1.3", "pixelmatch": "^5.2.1", "rollup": "^2.45.2", @@ -11630,6 +11631,18 @@ "integrity": "sha1-m+4OmpkKljupbfaYDE/dsF37Tcw=", "dev": true }, + "node_modules/markdown-it-include": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/markdown-it-include/-/markdown-it-include-2.0.0.tgz", + "integrity": "sha512-wfgIX92ZEYahYWiCk6Jx36XmHvAimeHN420csOWgfyZjpf171Y0xREqZWcm/Rwjzyd0RLYryY+cbNmrkYW2MDw==", + "dev": true, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "markdown-it": ">=8.4.2" + } + }, "node_modules/markdown-it-table-of-contents": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/markdown-it-table-of-contents/-/markdown-it-table-of-contents-0.4.4.tgz", @@ -28504,6 +28517,13 @@ "integrity": "sha1-m+4OmpkKljupbfaYDE/dsF37Tcw=", "dev": true }, + "markdown-it-include": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/markdown-it-include/-/markdown-it-include-2.0.0.tgz", + "integrity": "sha512-wfgIX92ZEYahYWiCk6Jx36XmHvAimeHN420csOWgfyZjpf171Y0xREqZWcm/Rwjzyd0RLYryY+cbNmrkYW2MDw==", + "dev": true, + "requires": {} + }, "markdown-it-table-of-contents": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/markdown-it-table-of-contents/-/markdown-it-table-of-contents-0.4.4.tgz", diff --git a/package.json b/package.json index 29b82b0aa..860bc5ae2 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "karma-jasmine": "^4.0.1", "karma-jasmine-html-reporter": "^1.5.4", "karma-rollup-preprocessor": "^7.0.7", + "markdown-it-include": "^2.0.0", "mocha": "^9.1.3", "pixelmatch": "^5.2.1", "rollup": "^2.45.2",