Skip to content

Commit

Permalink
Add borderDash options to arc element (#11127)
Browse files Browse the repository at this point in the history
  • Loading branch information
stockiNail committed Feb 12, 2023
1 parent 6cf9de9 commit 7f9bca6
Show file tree
Hide file tree
Showing 14 changed files with 186 additions and 3 deletions.
8 changes: 8 additions & 0 deletions docs/charts/doughnut.md
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,8 @@ The doughnut/pie chart allows a number of properties to be specified for each da
| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'`
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
| [`borderDash`](#styling) | `number[]` | Yes | - | `[]`
| [`borderDashOffset`](#styling) | `number` | Yes | - | `0.0`
| [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
| [`borderRadius`](#border-radius) | `number`\|`object` | Yes | Yes | `0`
| [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
Expand All @@ -113,6 +115,8 @@ The doughnut/pie chart allows a number of properties to be specified for each da
| [`data`](#data-structure) | `number[]` | - | - | **required**
| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderDash`](#interactions) | `number[]` | Yes | - | `undefined`
| [`hoverBorderDashOffset`](#interactions) | `number` | Yes | - | `undefined`
| [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
| [`hoverOffset`](#interactions) | `number` | Yes | Yes | `0`
Expand All @@ -139,6 +143,8 @@ The style of each arc can be controlled with the following properties:
| ---- | ----
| `backgroundColor` | arc background color.
| `borderColor` | arc border color.
| `borderDash` | arc border length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | arc border offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `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).
Expand Down Expand Up @@ -168,6 +174,8 @@ The interaction with each arc can be controlled with the following properties:
| ---- | -----------
| `hoverBackgroundColor` | arc background color when hovered.
| `hoverBorderColor` | arc border color when hovered.
| `hoverBorderDash` | arc border length and spacing of dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `hoverBorderDashOffset` | arc border offset for line dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `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).
Expand Down
8 changes: 8 additions & 0 deletions docs/charts/polar.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,16 @@ The following options can be included in a polar area chart dataset to configure
| [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
| [`borderAlign`](#border-alignment) | `'center'`\|`'inner'` | Yes | Yes | `'center'`
| [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'#fff'`
| [`borderDash`](#styling) | `number[]` | Yes | - | `[]`
| [`borderDashOffset`](#styling) | `number` | Yes | - | `0.0`
| [`borderJoinStyle`](#styling) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
| [`borderWidth`](#styling) | `number` | Yes | Yes | `2`
| [`clip`](#general) | `number`\|`object`\|`false` | - | - | `undefined`
| [`data`](#data-structure) | `number[]` | - | - | **required**
| [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | Yes | Yes | `undefined`
| [`hoverBorderDash`](#interactions) | `number[]` | Yes | - | `undefined`
| [`hoverBorderDashOffset`](#interactions) | `number` | Yes | - | `undefined`
| [`hoverBorderJoinStyle`](#interactions) | `'round'`\|`'bevel'`\|`'miter'` | Yes | Yes | `undefined`
| [`hoverBorderWidth`](#interactions) | `number` | Yes | Yes | `undefined`
| [`circular`](#styling) | `boolean` | Yes | Yes | `true`
Expand All @@ -84,6 +88,8 @@ The style of each arc can be controlled with the following properties:
| ---- | ----
| `backgroundColor` | arc background color.
| `borderColor` | arc border color.
| `borderDash` | arc border length and spacing of dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | arc border offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `borderJoinStyle` | arc border join style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin).
| `borderWidth` | arc border width (in pixels).
| `circular` | By default the Arc is curved. If `circular: false` the Arc will be flat.
Expand All @@ -107,6 +113,8 @@ The interaction with each arc can be controlled with the following properties:
| ---- | -----------
| `hoverBackgroundColor` | arc background color when hovered.
| `hoverBorderColor` | arc border color when hovered.
| `hoverBorderDash` | arc border length and spacing of dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `hoverBorderDashOffset` | arc border offset for line dashes when hovered. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `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).

Expand Down
2 changes: 2 additions & 0 deletions docs/configuration/elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,8 @@ Namespace: `options.elements.arc`, global arc options: `Chart.defaults.elements.
| `backgroundColor` | [`Color`](/general/colors.md) | `Chart.defaults.backgroundColor` | Arc fill color.
| `borderAlign` | `'center'`\|`'inner'` | `'center'` | Arc stroke alignment.
| `borderColor` | [`Color`](/general/colors.md) | `'#fff'` | Arc stroke color.
| `borderDash` | `number[]` | `[]` | Arc line dash. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | `number` | `0.0` | Arc line dash offset. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `borderJoinStyle` | `'round'`\|`'bevel'`\|`'miter'` | `'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.
| `circular` | `boolean` | `true` | By default the Arc is curved. If `circular: false` the Arc will be flat
2 changes: 1 addition & 1 deletion src/controllers/controller.doughnut.js
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export default class DoughnutController extends DatasetController {

static descriptors = {
_scriptable: (name) => name !== 'spacing',
_indexable: (name) => name !== 'spacing',
_indexable: (name) => name !== 'spacing' && !name.startsWith('borderDash') && !name.startsWith('hoverBorderDash'),
};

/**
Expand Down
12 changes: 11 additions & 1 deletion src/elements/element.arc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -213,13 +213,16 @@ function drawBorder(
circular: boolean,
) {
const {fullCircles, startAngle, circumference, options} = element;
const {borderWidth, borderJoinStyle} = options;
const {borderWidth, borderJoinStyle, borderDash, borderDashOffset} = options;
const inner = options.borderAlign === 'inner';

if (!borderWidth) {
return;
}

ctx.setLineDash(borderDash || []);
ctx.lineDashOffset = borderDashOffset;

if (inner) {
ctx.lineWidth = borderWidth * 2;
ctx.lineJoin = borderJoinStyle || 'round';
Expand Down Expand Up @@ -264,6 +267,8 @@ export default class ArcElement extends Element<ArcProps, ArcOptions> {
static defaults = {
borderAlign: 'center',
borderColor: '#fff',
borderDash: [],
borderDashOffset: 0,
borderJoinStyle: undefined,
borderRadius: 0,
borderWidth: 2,
Expand All @@ -277,6 +282,11 @@ export default class ArcElement extends Element<ArcProps, ArcOptions> {
backgroundColor: 'backgroundColor'
};

static descriptors = {
_scriptable: true,
_indexable: (name) => name !== 'borderDash'
};

circumference: number;
endAngle: number;
fullCircles: number;
Expand Down
13 changes: 12 additions & 1 deletion src/types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1700,7 +1700,16 @@ export interface ArcOptions extends CommonElementOptions {
* Arc stroke alignment.
*/
borderAlign: 'center' | 'inner';

/**
* Line dash. See MDN.
* @default []
*/
borderDash: number[];
/**
* Line dash offset. See MDN.
* @default 0.0
*/
borderDashOffset: number;
/**
* Line join style. See MDN. Default is 'round' when `borderAlign` is 'inner', else 'bevel'.
*/
Expand Down Expand Up @@ -1730,6 +1739,8 @@ export interface ArcOptions extends CommonElementOptions {
}

export interface ArcHoverOptions extends CommonHoverOptions {
hoverBorderDash: number[];
hoverBorderDashOffset: number;
hoverOffset: number;
}

Expand Down
34 changes: 34 additions & 0 deletions test/fixtures/controller.doughnut/borderDash/scriptable.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
module.exports = {
config: {
type: 'doughnut',
data: {
labels: [0, 1, 2, 3, 4, 5],
datasets: [
{
// option in element (fallback)
data: [5, 2, 4, 7, 6, 8]
}
]
},
options: {
elements: {
arc: {
backgroundColor: 'transparent',
borderColor: 'black',
borderWidth: 1,
borderDash: function(ctx) {
var value = (ctx.dataIndex || 0) % 2;
return value === 0 ? [3, 3] : [];
}

}
},
}
},
options: {
canvas: {
height: 256,
width: 512
}
}
};
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 36 additions & 0 deletions test/fixtures/controller.doughnut/borderDash/value.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
module.exports = {
config: {
type: 'polarArea',
data: {
labels: [0, 1, 2, 3, 4, 5],
datasets: [
{
// option in dataset
data: [5, 2, 4, 7, 6, 8],
borderAlign: 'inner',
borderColor: 'black'
},
]
},
options: {
elements: {
arc: {
backgroundColor: 'transparent',
borderWidth: 1,
borderDash: [3, 3]
}
},
scales: {
r: {
display: false
}
}
}
},
options: {
canvas: {
height: 256,
width: 512
}
}
};
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions test/fixtures/controller.polarArea/borderDash/scriptable.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
module.exports = {
config: {
type: 'polarArea',
data: {
labels: [0, 1, 2, 3, 4, 5],
datasets: [
{
// option in dataset
data: [5, 2, 4, 7, 6, 8]
}
]
},
options: {
elements: {
arc: {
backgroundColor: 'transparent',
borderColor: 'black',
borderWidth: 1,
borderDash: function(ctx) {
var value = (ctx.dataIndex || 0) % 2;
return value === 0 ? [3, 3] : [];
}
}
},
scales: {
r: {
display: false
}
}
}
},
options: {
canvas: {
height: 256,
width: 512
}
}
};
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 36 additions & 0 deletions test/fixtures/controller.polarArea/borderDash/value.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
module.exports = {
config: {
type: 'polarArea',
data: {
labels: [0, 1, 2, 3, 4, 5],
datasets: [
{
// option in dataset
data: [5, 2, 4, 7, 6, 8],
borderAlign: 'inner',
borderColor: 'black'
},
]
},
options: {
elements: {
arc: {
backgroundColor: 'transparent',
borderWidth: 1,
borderDash: [3, 3]
}
},
scales: {
r: {
display: false
}
}
}
},
options: {
canvas: {
height: 256,
width: 512
}
}
};
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7f9bca6

Please sign in to comment.