diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js index 8b65c8a42..d955606ed 100644 --- a/cypress/integration/rendering/pie.spec.js +++ b/cypress/integration/rendering/pie.spec.js @@ -91,4 +91,16 @@ describe('Pie Chart', () => { expect(strokeWidth).to.eq(5); }); }); + + it('should render a pie diagram when text-position is set', () => { + imgSnapshotTest( + ` + pie + "Dogs": 50 + "Cats": 25 + `, + { logLevel: 1, pie: { textPosition: 0.9 } } + ); + cy.get('svg'); + }); }); diff --git a/demos/pie.html b/demos/pie.html index 333ef9491..8cc49272c 100644 --- a/demos/pie.html +++ b/demos/pie.html @@ -26,6 +26,7 @@
+ %%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%% pie title Key elements in Product X accTitle: Key elements in Product X diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md index 302bd51e1..354286758 100644 --- a/docs/config/setup/modules/defaultConfig.md +++ b/docs/config/setup/modules/defaultConfig.md @@ -14,7 +14,7 @@ #### Defined in -[defaultConfig.ts:2084](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2084) +[defaultConfig.ts:2102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2102) --- diff --git a/docs/syntax/pie.md b/docs/syntax/pie.md index 63f371e87..73bd66220 100644 --- a/docs/syntax/pie.md +++ b/docs/syntax/pie.md @@ -48,6 +48,7 @@ Drawing a pie chart is really simple in mermaid. ## Example ```mermaid-example +%%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%% pie showData title Key elements in Product X "Calcium" : 42.96 @@ -57,6 +58,7 @@ pie showData ``` ```mermaid +%%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%% pie showData title Key elements in Product X "Calcium" : 42.96 @@ -64,3 +66,12 @@ pie showData "Magnesium" : 10.01 "Iron" : 5 ``` + +## Configuration + +Possible pie diagram configuration parameters: + +| Parameter | Description | Default value | +| ------------------ | ------------------------------------------------------------------------------------------------------------ | ------------- | +| `outerBorderWidth` | The border width of the pie diagram's outside circle | `2` | +| `textPosition` | The axial position of the pie slice labels, from 0.0 at the center to 1.0 at the outside edge of the circle. | `0.5` | diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index ec741e908..ecc7b54a5 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -1247,6 +1247,24 @@ const config: Partial= { * Default value: true */ useMaxWidth: true, + + /** + * | Parameter | Description | Type | Required | Values | + * | ---------------- | ------------------------------------------ | ------- | -------- | ------------------ | + * | outerBorderWidth | Border width of the diagram's outer circle | Integer | Optional | Any Positive Value | + * + * **Notes:** Default value: 2 + */ + outerBorderWidth: 2, + + /** + * | Parameter | Description | Type | Required | Values | + * | ------------ | -------------------------------------------------------------------------------- | ------- | -------- | ------------------- | + * | textPosition | Axial position of slice's label from zero at the center to 1 at the outside edge | Number | Optional | Decimal from 0 to 1 | + * + * **Notes:** Default value: 0.5 + */ + textPosition: 0.5, }, /** The object containing configurations specific for req diagrams */ diff --git a/packages/mermaid/src/docs/syntax/pie.md b/packages/mermaid/src/docs/syntax/pie.md index 2fe8c3e54..a18161c3f 100644 --- a/packages/mermaid/src/docs/syntax/pie.md +++ b/packages/mermaid/src/docs/syntax/pie.md @@ -35,6 +35,7 @@ Drawing a pie chart is really simple in mermaid. ## Example ```mermaid-example +%%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%% pie showData title Key elements in Product X "Calcium" : 42.96 @@ -42,3 +43,12 @@ pie showData "Magnesium" : 10.01 "Iron" : 5 ``` + +## Configuration + +Possible pie diagram configuration parameters: + +| Parameter | Description | Default value | +| ------------------ | ------------------------------------------------------------------------------------------------------------ | ------------- | +| `outerBorderWidth` | The border width of the pie diagram's outside circle | `2` | +| `textPosition` | The axial position of the pie slice labels, from 0.0 at the center to 1.0 at the outside edge of the circle. | `0.5` |