fixup! feat(pie): adding outer border, text position options

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');
+  });
 });

demos/pie.html

@@ -26,6 +26,7 @@
 
     <hr />
     <pre class="mermaid">
+    %%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%%
     pie
       title Key elements in Product X
         accTitle: Key elements in Product X

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)
 
 ---
 

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`         |

packages/mermaid/src/defaultConfig.ts

@@ -1247,6 +1247,24 @@ const config: Partial<MermaidConfig> = {
      * 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 */

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`         |