marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-23 02:06:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Move pie outerStrokeWidth to theme variables, update docs

Browse Source
This commit is contained in:
Billiam
2023-02-28 13:27:09 -06:00
parent 3bed70a0c5
commit 82f5b4ca39
16 changed files with 81 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/integration/rendering/pie.spec.js
View File

@@ -84,7 +84,7 @@ describe('Pie Chart', () => {
"Ice-Hockey" : 80 "Ice-Hockey" : 80
"Football" : 90 "Football" : 90
`, `,
{ pie: { outerBorderWidth: 5 } } { theme: 'base', themeVariables: { pieOuterStrokeWidth: '5px' } }
); );
cy.get('.pieOuterCircle').should((circle) => { cy.get('.pieOuterCircle').should((circle) => {
const strokeWidth = parseFloat(circle.attr('stroke-width')); const strokeWidth = parseFloat(circle.attr('stroke-width'));

2
demos/pie.html
View File

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

2
docs/config/setup/modules/defaultConfig.md
View File

@@ -14,7 +14,7 @@
#### Defined in #### Defined in
[defaultConfig.ts:2102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2102) [defaultConfig.ts:2093](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2093)
--- ---

28
docs/config/theming.md
View File

@@ -261,6 +261,34 @@ The theming engine will only recognize hex colors and not color names. So, the v
| activationBkgColor | secondaryColor | Activation Background Color | | activationBkgColor | secondaryColor | Activation Background Color |
| sequenceNumberColor | calculated from lineColor | Sequence Number 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 ## State Colors
| Variable | Default value | Description | | Variable | Default value | Description |

11
docs/syntax/pie.md
View File

@@ -48,7 +48,7 @@ Drawing a pie chart is really simple in mermaid.
## Example ## Example
```mermaid-example ```mermaid-example
%%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%% %%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData pie showData
title Key elements in Product X title Key elements in Product X
"Calcium" : 42.96 "Calcium" : 42.96
@@ -58,7 +58,7 @@ pie showData
``` ```
```mermaid ```mermaid
%%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%% %%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData pie showData
title Key elements in Product X title Key elements in Product X
"Calcium" : 42.96 "Calcium" : 42.96
@@ -71,7 +71,6 @@ pie showData
Possible pie diagram configuration parameters: Possible pie diagram configuration parameters:
| Parameter | Description | Default value | | 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.75` |
| `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` |

1
packages/mermaid/src/config.type.ts
View File

@@ -223,7 +223,6 @@ export interface MindmapDiagramConfig extends BaseDiagramConfig {
} }
export interface PieDiagramConfig extends BaseDiagramConfig { export interface PieDiagramConfig extends BaseDiagramConfig {
outerBorderWidth?: number;
textPosition?: number; textPosition?: number;
} }

13
packages/mermaid/src/defaultConfig.ts
View File

@@ -1248,23 +1248,14 @@ const config: Partial<MermaidConfig> = {
*/ */
useMaxWidth: 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 | * | 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 | * | 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 * **Notes:** Default value: 0.75
*/ */
textPosition: 0.5, textPosition: 0.75,
}, },
/** The object containing configurations specific for req diagrams */ /** The object containing configurations specific for req diagrams */

9
packages/mermaid/src/diagrams/pie/pieRenderer.js
View File

@@ -3,6 +3,7 @@ import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
import { log } from '../../logger'; import { log } from '../../logger';
import { configureSvgSize } from '../../setupGraphViewbox'; import { configureSvgSize } from '../../setupGraphViewbox';
import * as configApi from '../../config'; import * as configApi from '../../config';
import { parseFontSize } from '../../utils';
let conf = configApi.getConfig(); let conf = configApi.getConfig();
@@ -88,8 +89,9 @@ export const draw = (txt, id, _version, diagObj) => {
themeVariables.pie12, themeVariables.pie12,
]; ];
const textPosition = conf.pie?.textPosition ?? 0.5; const textPosition = conf.pie?.textPosition ?? 0.75;
const outerBorderWidth = conf.pie?.outerBorderWidth ?? 2; let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth);
outerStrokeWidth ??= 2;
// Set the color scale // Set the color scale
var color = scaleOrdinal().range(myGeneratedColors); var color = scaleOrdinal().range(myGeneratedColors);
@@ -122,8 +124,7 @@ export const draw = (txt, id, _version, diagObj) => {
.append('circle') .append('circle')
.attr('cx', 0) .attr('cx', 0)
.attr('cy', 0) .attr('cy', 0)
.attr('r', radius + outerBorderWidth / 2) .attr('r', radius + outerStrokeWidth / 2)
.attr('stroke-width', outerBorderWidth)
.attr('class', 'pieOuterCircle'); .attr('class', 'pieOuterCircle');
// Build the pie chart: each part of the pie is a path that we build using the arc function. // Build the pie chart: each part of the pie is a path that we build using the arc function.

1
packages/mermaid/src/diagrams/pie/styles.js
View File

@@ -7,6 +7,7 @@ const getStyles = (options) =>
} }
.pieOuterCircle{ .pieOuterCircle{
stroke: ${options.pieOuterStrokeColor}; stroke: ${options.pieOuterStrokeColor};
stroke-width: ${options.pieOuterStrokeWidth};
fill: none; fill: none;
} }
.pieTitleText { .pieTitleText {

28
packages/mermaid/src/docs/config/theming.md
View File

@@ -183,6 +183,34 @@ The theming engine will only recognize hex colors and not color names. So, the v
| activationBkgColor | secondaryColor | Activation Background Color | | activationBkgColor | secondaryColor | Activation Background Color |
| sequenceNumberColor | calculated from lineColor | Sequence Number 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 ## State Colors
| Variable | Default value | Description | | Variable | Default value | Description |

9
packages/mermaid/src/docs/syntax/pie.md
View File

@@ -35,7 +35,7 @@ Drawing a pie chart is really simple in mermaid.
## Example ## Example
```mermaid-example ```mermaid-example
%%{init: {"pie": {"textPosition": 0.8, "outerBorderWidth": 5}} }%% %%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData pie showData
title Key elements in Product X title Key elements in Product X
"Calcium" : 42.96 "Calcium" : 42.96
@@ -48,7 +48,6 @@ pie showData
Possible pie diagram configuration parameters: Possible pie diagram configuration parameters:
| Parameter | Description | Default value | | 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.75` |
| `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` |

1
packages/mermaid/src/themes/theme-base.js
View File

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

1
packages/mermaid/src/themes/theme-dark.js
View File

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

1
packages/mermaid/src/themes/theme-default.js
View File

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

1
packages/mermaid/src/themes/theme-forest.js
View File

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

1
packages/mermaid/src/themes/theme-neutral.js
View File

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