From 56b678ef3d2a6b99eb0dfc16292196f3fbc9731e Mon Sep 17 00:00:00 2001 From: kurkle Date: Fri, 19 Nov 2021 23:29:21 +0200 Subject: [PATCH] docs + types --- docs/charts/doughnut.md | 6 +++++- docs/charts/polar.md | 6 +++++- docs/configuration/elements.md | 3 ++- types/index.esm.d.ts | 11 +++++++++-- types/tests/elements/scriptable_element_options.ts | 1 + 5 files changed, 22 insertions(+), 5 deletions(-) diff --git a/docs/charts/doughnut.md b/docs/charts/doughnut.md index 5964864272c..d6a91912ffe 100644 --- a/docs/charts/doughnut.md +++ b/docs/charts/doughnut.md @@ -103,8 +103,9 @@ The doughnut/pie chart allows a number of properties to be specified for each da | Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default | ---- | ---- | :----: | :----: | ---- | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` -| [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'` +| [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'` | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'` +| [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined` | [`borderRadius`](#border-radius) | `number`\|`object` | Yes | Yes | `0` | [`borderWidth`](#styling) | `number` | Yes | Yes | `2` | [`circumference`](#general) | `number` | - | - | `undefined` @@ -112,6 +113,7 @@ The doughnut/pie chart allows a number of properties to be specified for each da | [`data`](#data-structure) | `number[]` | - | - | **required** | [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` +| [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined` | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined` | [`hoverOffset`](#interactions) | `number` | Yes | Yes | `0` | [`offset`](#styling) | `number` | Yes | Yes | `0` @@ -137,6 +139,7 @@ The style of each arc can be controlled with the following properties: | ---- | ---- | `backgroundColor` | arc background color. | `borderColor` | arc border color. +| `borderJoinStyle` | arc border join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin). | `borderWidth` | arc border width (in pixels). | `offset` | arc offset (in pixels). | `spacing` | Fixed arc offset (in pixels). Similar to `offset` but applies to all arcs. @@ -165,6 +168,7 @@ The interaction with each arc can be controlled with the following properties: | ---- | ----------- | `hoverBackgroundColor` | arc background color when hovered. | `hoverBorderColor` | arc border color when hovered. +| `hoverBorderJoinStyle` | arc border join style when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin). | `hoverBorderWidth` | arc border width when hovered (in pixels). | `hoverOffset` | arc offset when hovered (in pixels). diff --git a/docs/charts/polar.md b/docs/charts/polar.md index 550674272d2..9ec9bb27ea2 100644 --- a/docs/charts/polar.md +++ b/docs/charts/polar.md @@ -56,13 +56,15 @@ The following options can be included in a polar area chart dataset to configure | Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default | ---- | ---- | :----: | :----: | ---- | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` -| [`borderAlign`](#border-alignment) | `string` | Yes | Yes | `'center'` +| [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'` | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'` +| [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined` | [`borderWidth`](#styling) | `number` | Yes | Yes | `2` | [`clip`](#general) | `number`\|`object` | - | - | `undefined` | [`data`](#data-structure) | `number[]` | - | - | **required** | [`hoverBackgroundColor`](#interations) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined` +| [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined` | [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined` All these values, if `undefined`, fallback to the scopes described in [option resolution](../general/options) @@ -81,6 +83,7 @@ The style of each arc can be controlled with the following properties: | ---- | ---- | `backgroundColor` | arc background color. | `borderColor` | arc border color. +| `borderJoinStyle` | arc border join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin). | `borderWidth` | arc border width (in pixels). All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options. @@ -102,6 +105,7 @@ The interaction with each arc can be controlled with the following properties: | ---- | ----------- | `hoverBackgroundColor` | arc background color when hovered. | `hoverBorderColor` | arc border color when hovered. +| `hoverBorderJoinStyle` | arc border join style when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin). | `hoverBorderWidth` | arc border width when hovered (in pixels). All these values, if `undefined`, fallback to the associated [`elements.arc.*`](../configuration/elements.md#arc-configuration) options. diff --git a/docs/configuration/elements.md b/docs/configuration/elements.md index aff43601185..4c52b57967f 100644 --- a/docs/configuration/elements.md +++ b/docs/configuration/elements.md @@ -97,6 +97,7 @@ Namespace: `options.elements.arc`, global arc options: `Chart.defaults.elements. | ---- | ---- | ------- | ----------- | `angle` - for polar only | `number` | `circumference / (arc count)` | Arc angle to cover. | `backgroundColor` | [`Color`](/general/colors.md) | `Chart.defaults.backgroundColor` | Arc fill color. -| `borderAlign` | `string` | `'center'` | Arc stroke alignment. +| `borderAlign` | `'center'`\|`'inner'` | `'center'` | Arc stroke alignment. | `borderColor` | [`Color`](/general/colors.md) | `'#fff'` | Arc stroke color. +| `borderJoinStyle` | `string` | `'bevel'`\|`'round'` | Line join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin). The default is `'round'` when `borderAlign` is `'inner'` | `borderWidth`| `number` | `2` | Arc stroke width. diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index d8759fa6b92..c2570abaf7d 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -1678,15 +1678,22 @@ export interface ArcOptions extends CommonElementOptions { * Arc stroke alignment. */ borderAlign: 'center' | 'inner'; + /** - * Arc offset (in pixels). + * Line join style. See MDN. Default is 'round' when `borderAlign` is 'inner', else 'bevel'. */ - offset: number; + borderJoinStyle: CanvasLineJoin; + /** * Sets the border radius for arcs * @default 0 */ borderRadius: number | ArcBorderRadius; + + /** + * Arc offset (in pixels). + */ + offset: number; } export interface ArcHoverOptions extends CommonHoverOptions { diff --git a/types/tests/elements/scriptable_element_options.ts b/types/tests/elements/scriptable_element_options.ts index 0776ec0a080..c81892d7910 100644 --- a/types/tests/elements/scriptable_element_options.ts +++ b/types/tests/elements/scriptable_element_options.ts @@ -43,6 +43,7 @@ const chart3 = new Chart('id', { elements: { arc: { borderWidth: (ctx) => 3, + borderJoinStyle: (ctx) => 'miter' } } }