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

cypress/integration/rendering/pie.spec.js

@@ -75,4 +75,20 @@ describe('Pie Chart', () => {
       expect(svg).to.not.have.attr('style');
     });
   });
+
+  it('should render a pie diagram with given outside stroke width', () => {
+    renderGraph(
+      `
+    pie title Sports in Sweden
+       "Bandy" : 40
+       "Ice-Hockey" : 80
+       "Football" : 90
+      `,
+      { pie: { outerBorderWidth: 5 } }
+    );
+    cy.get('.pieOuterCircle').should((circle) => {
+      const strokeWidth = parseFloat(circle.attr('stroke-width'));
+      expect(strokeWidth).to.eq(5);
+    });
+  });
 });

packages/mermaid/src/config.type.ts

@@ -222,7 +222,10 @@ export interface MindmapDiagramConfig extends BaseDiagramConfig {
   maxNodeWidth: number;
 }
 
-export type PieDiagramConfig = BaseDiagramConfig;
+export interface PieDiagramConfig extends BaseDiagramConfig {
+  outerBorderWidth?: number;
+  textPosition?: number;
+}
 
 export interface ErDiagramConfig extends BaseDiagramConfig {
   titleTopMargin?: number;

packages/mermaid/src/diagrams/pie/pieRenderer.js

@@ -88,6 +88,9 @@ export const draw = (txt, id, _version, diagObj) => {
       themeVariables.pie12,
     ];
 
+    var textPosition = conf.pie.textPosition == null ? 0.5 : conf.pie.textPosition;
+    var outerBorderWidth = conf.pie.outerBorderWidth == null ? 2 : conf.pie.outerBorderWidth;
+
     // Set the color scale
     var color = scaleOrdinal().range(myGeneratedColors);
 
@@ -111,6 +114,17 @@ export const draw = (txt, id, _version, diagObj) => {
 
     // Shape helper to build arcs:
     var arcGenerator = arc().innerRadius(0).outerRadius(radius);
+    var labelArcGenerator = arc()
+      .innerRadius(radius * textPosition)
+      .outerRadius(radius * textPosition);
+
+    svg
+      .append('circle')
+      .attr('cx', 0)
+      .attr('cy', 0)
+      .attr('r', radius + outerBorderWidth / 2)
+      .attr('stroke-width', outerBorderWidth)
+      .attr('class', 'pieOuterCircle');
 
     // Build the pie chart: each part of the pie is a path that we build using the arc function.
     svg
@@ -135,7 +149,7 @@ export const draw = (txt, id, _version, diagObj) => {
         return ((d.data.value / sum) * 100).toFixed(0) + '%';
       })
       .attr('transform', function (d) {
-        return 'translate(' + arcGenerator.centroid(d) + ')';
+        return 'translate(' + labelArcGenerator.centroid(d) + ')';
       })
       .style('text-anchor', 'middle')
       .attr('class', 'slice');

packages/mermaid/src/diagrams/pie/styles.js

@@ -5,6 +5,10 @@ const getStyles = (options) =>
     stroke-width : ${options.pieStrokeWidth};
     opacity : ${options.pieOpacity};
   }
+  .pieOuterCircle{
+    stroke: ${options.pieOuterStrokeColor};
+    fill: none;
+  }
   .pieTitleText {
     text-anchor: middle;
     font-size: ${options.pieTitleTextSize};

packages/mermaid/src/themes/theme-base.js

@@ -212,6 +212,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
+    this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
     /* requirement-diagram */

packages/mermaid/src/themes/theme-dark.js

@@ -222,6 +222,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
+    this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
     /* class */

packages/mermaid/src/themes/theme-default.js

@@ -244,6 +244,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
+    this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
     /* requirement-diagram */

packages/mermaid/src/themes/theme-forest.js

@@ -213,6 +213,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
+    this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
     /* requirement-diagram */

packages/mermaid/src/themes/theme-neutral.js

@@ -243,6 +243,7 @@ class Theme {
     this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
     this.pieStrokeColor = this.pieStrokeColor || 'black';
     this.pieStrokeWidth = this.pieStrokeWidth || '2px';
+    this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
     this.pieOpacity = this.pieOpacity || '0.7';
 
     /* requirement-diagram */