Skip to content

Commit

Permalink
Merge pull request #4145 from Billiam/feature/move-pie-labels
Browse files Browse the repository at this point in the history 
Pie: Adding outer border, text position options
  • Loading branch information
@sidharthv96
sidharthv96 committed Mar 4, 2023
2 parents f57fed0 + 8810b37 commit ad52d7d
Show file tree
Hide file tree
Showing 16 changed files with 131 additions and 3 deletions.
11 changes: 11 additions & 0 deletions cypress/integration/rendering/pie.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,4 +75,15 @@ describe('Pie Chart', () => {
expect(svg).to.not.have.attr('style');
});
});
it('should render a pie diagram when textPosition is set', () => {
imgSnapshotTest(
`
pie
"Dogs": 50
"Cats": 25
`,
{ logLevel: 1, pie: { textPosition: 0.9 } }
);
cy.get('svg');
});
});
1 change: 1 addition & 0 deletions demos/pie.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ <h1>Pie chart demos</h1>

<hr />
<pre class="mermaid">
%%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie
title Key elements in Product X
accTitle: Key elements in Product X
Expand Down
2 changes: 1 addition & 1 deletion docs/config/setup/modules/defaultConfig.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:2093](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2093)

---

Expand Down
28 changes: 28 additions & 0 deletions docs/config/theming.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,34 @@ The theming engine will only recognize hex colors and not color names. So, the v
| activationBkgColor | secondaryColor | Activation Background Color |
| sequenceNumberColor | calculated from lineColor | Sequence Number Color |

## Pie Diagram Variables

| Variable | Default value | Description |
| ------------------- | ------------------------------ | ------------------------------------------ |
| pie1 | primaryColor | Fill for 1st section in pie diagram |
| pie2 | secondaryColor | Fill for 2nd section in pie diagram |
| pie3 | calculated from tertiary | Fill for 3rd section in pie diagram |
| pie4 | calculated from primaryColor | Fill for 4th section in pie diagram |
| pie5 | calculated from secondaryColor | Fill for 5th section in pie diagram |
| pie6 | calculated from tertiaryColor | Fill for 6th section in pie diagram |
| pie7 | calculated from primaryColor | Fill for 7th section in pie diagram |
| pie8 | calculated from primaryColor | Fill for 8th section in pie diagram |
| pie9 | calculated from primaryColor | Fill for 9th section in pie diagram |
| pie10 | calculated from primaryColor | Fill for 10th section in pie diagram |
| pie11 | calculated from primaryColor | Fill for 11th section in pie diagram |
| pie12 | calculated from primaryColor | Fill for 12th section in pie diagram |
| pieTitleTextSize | 25px | Title text size |
| pieTitleTextColor | taskTextDarkColor | Title text color |
| pieSectionTextSize | 17px | Text size of individual section labels |
| pieSectionTextColor | textColor | Text color of individual section labels |
| pieLegendTextSize | 17px | Text size of labels in diagram legend |
| pieLegendTextColor | taskTextDarkColor | Text color of labels in diagram legend |
| pieStrokeColor | black | Border color of individual pie sections |
| pieStrokeWidth | 2px | Border width of individual pie sections |
| pieOuterStrokeWidth | 2px | Border width of pie diagram's outer circle |
| pieOuterStrokeColor | black | Border color of pie diagram's outer circle |
| pieOpacity | 0.7 | Opacity of individual pie sections |

## State Colors

| Variable | Default value | Description |
Expand Down
10 changes: 10 additions & 0 deletions docs/syntax/pie.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ Drawing a pie chart is really simple in mermaid.
## Example

```mermaid-example
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData
title Key elements in Product X
"Calcium" : 42.96
Expand All @@ -57,10 +58,19 @@ pie showData
```

```mermaid
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```

## Configuration

Possible pie diagram configuration parameters:

| Parameter | Description | Default value |
| -------------- | ------------------------------------------------------------------------------------------------------------ | ------------- |
| `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.75` |
4 changes: 3 additions & 1 deletion packages/mermaid/src/config.type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,9 @@ export interface MindmapDiagramConfig extends BaseDiagramConfig {
maxNodeWidth: number;
}

export type PieDiagramConfig = BaseDiagramConfig;
export interface PieDiagramConfig extends BaseDiagramConfig {
textPosition?: number;
}

export interface ErDiagramConfig extends BaseDiagramConfig {
titleTopMargin?: number;
Expand Down
9 changes: 9 additions & 0 deletions packages/mermaid/src/defaultConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1247,6 +1247,15 @@ const config: Partial<MermaidConfig> = {
* Default value: true
*/
useMaxWidth: true,

/**
* | 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.75
*/
textPosition: 0.75,
},

/** The object containing configurations specific for req diagrams */
Expand Down
17 changes: 16 additions & 1 deletion packages/mermaid/src/diagrams/pie/pieRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
import { log } from '../../logger';
import { configureSvgSize } from '../../setupGraphViewbox';
import * as configApi from '../../config';
import { parseFontSize } from '../../utils';

let conf = configApi.getConfig();

Expand Down Expand Up @@ -88,6 +89,10 @@ export const draw = (txt, id, _version, diagObj) => {
themeVariables.pie12,
];

const textPosition = conf.pie?.textPosition ?? 0.75;
let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth);
outerStrokeWidth ??= 2;

// Set the color scale
var color = scaleOrdinal().range(myGeneratedColors);

Expand All @@ -111,6 +116,16 @@ 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 + outerStrokeWidth / 2)
.attr('class', 'pieOuterCircle');

// Build the pie chart: each part of the pie is a path that we build using the arc function.
svg
Expand All @@ -135,7 +150,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');
Expand Down
5 changes: 5 additions & 0 deletions packages/mermaid/src/diagrams/pie/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ const getStyles = (options) =>
stroke-width : ${options.pieStrokeWidth};
opacity : ${options.pieOpacity};
}
.pieOuterCircle{
stroke: ${options.pieOuterStrokeColor};
stroke-width: ${options.pieOuterStrokeWidth};
fill: none;
}
.pieTitleText {
text-anchor: middle;
font-size: ${options.pieTitleTextSize};
Expand Down
28 changes: 28 additions & 0 deletions packages/mermaid/src/docs/config/theming.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,34 @@ The theming engine will only recognize hex colors and not color names. So, the v
| activationBkgColor | secondaryColor | Activation Background Color |
| sequenceNumberColor | calculated from lineColor | Sequence Number Color |

## Pie Diagram Variables

| Variable | Default value | Description |
| ------------------- | ------------------------------ | ------------------------------------------ |
| pie1 | primaryColor | Fill for 1st section in pie diagram |
| pie2 | secondaryColor | Fill for 2nd section in pie diagram |
| pie3 | calculated from tertiary | Fill for 3rd section in pie diagram |
| pie4 | calculated from primaryColor | Fill for 4th section in pie diagram |
| pie5 | calculated from secondaryColor | Fill for 5th section in pie diagram |
| pie6 | calculated from tertiaryColor | Fill for 6th section in pie diagram |
| pie7 | calculated from primaryColor | Fill for 7th section in pie diagram |
| pie8 | calculated from primaryColor | Fill for 8th section in pie diagram |
| pie9 | calculated from primaryColor | Fill for 9th section in pie diagram |
| pie10 | calculated from primaryColor | Fill for 10th section in pie diagram |
| pie11 | calculated from primaryColor | Fill for 11th section in pie diagram |
| pie12 | calculated from primaryColor | Fill for 12th section in pie diagram |
| pieTitleTextSize | 25px | Title text size |
| pieTitleTextColor | taskTextDarkColor | Title text color |
| pieSectionTextSize | 17px | Text size of individual section labels |
| pieSectionTextColor | textColor | Text color of individual section labels |
| pieLegendTextSize | 17px | Text size of labels in diagram legend |
| pieLegendTextColor | taskTextDarkColor | Text color of labels in diagram legend |
| pieStrokeColor | black | Border color of individual pie sections |
| pieStrokeWidth | 2px | Border width of individual pie sections |
| pieOuterStrokeWidth | 2px | Border width of pie diagram's outer circle |
| pieOuterStrokeColor | black | Border color of pie diagram's outer circle |
| pieOpacity | 0.7 | Opacity of individual pie sections |

## State Colors

| Variable | Default value | Description |
Expand Down
9 changes: 9 additions & 0 deletions packages/mermaid/src/docs/syntax/pie.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,19 @@ Drawing a pie chart is really simple in mermaid.
## Example

```mermaid-example
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```

## Configuration

Possible pie diagram configuration parameters:

| Parameter | Description | Default value |
| -------------- | ------------------------------------------------------------------------------------------------------------ | ------------- |
| `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.75` |
2 changes: 2 additions & 0 deletions packages/mermaid/src/themes/theme-base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,8 @@ class Theme {
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
this.pieStrokeColor = this.pieStrokeColor || 'black';
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
this.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';
this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
this.pieOpacity = this.pieOpacity || '0.7';

/* requirement-diagram */
Expand Down
2 changes: 2 additions & 0 deletions packages/mermaid/src/themes/theme-dark.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,8 @@ class Theme {
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
this.pieStrokeColor = this.pieStrokeColor || 'black';
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
this.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';
this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
this.pieOpacity = this.pieOpacity || '0.7';

/* class */
Expand Down
2 changes: 2 additions & 0 deletions packages/mermaid/src/themes/theme-default.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,8 @@ class Theme {
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
this.pieStrokeColor = this.pieStrokeColor || 'black';
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
this.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';
this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
this.pieOpacity = this.pieOpacity || '0.7';

/* requirement-diagram */
Expand Down
2 changes: 2 additions & 0 deletions packages/mermaid/src/themes/theme-forest.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,8 @@ class Theme {
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
this.pieStrokeColor = this.pieStrokeColor || 'black';
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
this.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';
this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
this.pieOpacity = this.pieOpacity || '0.7';

/* requirement-diagram */
Expand Down
2 changes: 2 additions & 0 deletions packages/mermaid/src/themes/theme-neutral.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,6 +243,8 @@ class Theme {
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
this.pieStrokeColor = this.pieStrokeColor || 'black';
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
this.pieOuterStrokeWidth = this.pieOuterStrokeWidth || '2px';
this.pieOuterStrokeColor = this.pieOuterStrokeColor || 'black';
this.pieOpacity = this.pieOpacity || '0.7';

/* requirement-diagram */
Expand Down

0 comments on commit ad52d7d

Please sign in to comment.