Merge pull request #1041 from mermaid-js/maintainence_pie
Maintainance pie
This commit is contained in:
commit
06dfd13927
|
@ -12,5 +12,29 @@ describe('Pie Chart', () => {
|
||||||
`,
|
`,
|
||||||
{}
|
{}
|
||||||
);
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('should render a simple pie diagram with long labels', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
pie title NETFLIX
|
||||||
|
"Time spent looking for movie" : 90
|
||||||
|
"Time spent watching it" : 10
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
|
});
|
||||||
|
it('should render a simple pie diagram with capital letters for labels', () => {
|
||||||
|
imgSnapshotTest(
|
||||||
|
`
|
||||||
|
pie title What Voldemort doesn't have?
|
||||||
|
"FRIENDS" : 2
|
||||||
|
"FAMILY" : 3
|
||||||
|
"NOSE" : 45
|
||||||
|
`,
|
||||||
|
{}
|
||||||
|
);
|
||||||
|
cy.get('svg');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,3 +1,27 @@
|
||||||
|
## Basic Pie Chart
|
||||||
|
|
||||||
|
```
|
||||||
|
pie title NETFLIX
|
||||||
|
"Time spent looking for movie" : 90
|
||||||
|
"Time spent watching it" : 10
|
||||||
|
```
|
||||||
|
``` mermaid
|
||||||
|
pie title NETFLIX
|
||||||
|
"Time spent looking for movie" : 90
|
||||||
|
"Time spent watching it" : 10
|
||||||
|
```
|
||||||
|
```
|
||||||
|
pie title What Voldemort doesn't have?
|
||||||
|
"FRIENDS" : 2
|
||||||
|
"FAMILY" : 3
|
||||||
|
"NOSE" : 45
|
||||||
|
```
|
||||||
|
```mermaid
|
||||||
|
pie title What Voldemort doesn't have?
|
||||||
|
"FRIENDS" : 2
|
||||||
|
"FAMILY" : 3
|
||||||
|
"NOSE" : 45
|
||||||
|
```
|
||||||
## Basic sequence diagram
|
## Basic sequence diagram
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
24
docs/pie.md
24
docs/pie.md
|
@ -1,11 +1,12 @@
|
||||||
# Pie chart diagrams
|
# Pie chart diagrams
|
||||||
|
|
||||||
> A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
|
> A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented. The earliest known pie chart is generally credited to William Playfair's Statistical Breviary of 1801
|
||||||
|
-Wikipedia
|
||||||
|
|
||||||
Mermaid can render Pie Chart diagrams.
|
Mermaid can render Pie Chart diagrams.
|
||||||
|
|
||||||
```
|
```
|
||||||
pie
|
pie title Pets adopted by volunteers
|
||||||
"Dogs" : 386
|
"Dogs" : 386
|
||||||
"Cats" : 85
|
"Cats" : 85
|
||||||
"Rats" : 15
|
"Rats" : 15
|
||||||
|
@ -19,17 +20,34 @@ pie title Pets adopted by volunteers
|
||||||
|
|
||||||
|
|
||||||
## Syntax
|
## Syntax
|
||||||
|
Drawing a pie chart is really simple in mermaid.
|
||||||
|
- Start with `pie` keyword to begin the diagram
|
||||||
|
- Followed by `title` keyword and its value in string to give a title to the pie-chart. This is ***OPTIONAL***
|
||||||
|
- Followed by dataSet
|
||||||
|
- `label` for a section in the pie diagram within `" "` quotes.
|
||||||
|
- Followed by `:` semi-colon as separator
|
||||||
|
- Followed by `positive numeric value` (supported upto two decimal places)
|
||||||
|
|
||||||
|
[pie]
|
||||||
|
[title] [titlevalue] (OPTIONAL)
|
||||||
|
"[datakey1]" : [dataValue1]
|
||||||
|
"[datakey2]" : [dataValue2]
|
||||||
|
"[datakey3]" : [dataValue3]
|
||||||
|
.
|
||||||
|
.
|
||||||
|
|
||||||
|
## Example
|
||||||
```
|
```
|
||||||
pie
|
pie
|
||||||
"DataKey1" : Positive numeric value (upto two decimal places)
|
title Key elements in Product X
|
||||||
"Calcium" : 42.96
|
"Calcium" : 42.96
|
||||||
"Potassium" : 50.05
|
"Potassium" : 50.05
|
||||||
"Magnesium" : 10.01
|
"Magnesium" : 10.01
|
||||||
"Iron" : 5
|
"Iron" : 5
|
||||||
```
|
```
|
||||||
```mermaid
|
```mermaid
|
||||||
pie title Key elements in Product X
|
pie
|
||||||
|
title Key elements in Product X
|
||||||
"Calcium" : 42.96
|
"Calcium" : 42.96
|
||||||
"Potassium" : 50.05
|
"Potassium" : 50.05
|
||||||
"Magnesium" : 25.01
|
"Magnesium" : 25.01
|
||||||
|
|
Loading…
Reference in New Issue