Merge branch 'develop' of github.com:knsv/mermaid into develop

mermaid-js · Oct 30, 2019 · 061a02d · 061a02d
2 parents 1f72c3e + 06dfd13
commit 061a02d
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 3 deletions.
diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js
@@ -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');
   });
 });
diff --git a/docs/examples.md b/docs/examples.md
@@ -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
 
 ```

diff --git a/docs/pie.md b/docs/pie.md
@@ -1,11 +1,12 @@
 # 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
+-Wikipedia
 
 Mermaid can render Pie Chart diagrams.
 
 ```
-pie
+pie title Pets adopted by volunteers
     "Dogs" : 386
     "Cats" : 85
     "Rats" : 15 
@@ -19,17 +20,34 @@ pie title Pets adopted by volunteers
 
 
 ## 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
-    "DataKey1" : Positive numeric value (upto two decimal places)
+    title Key elements in Product X
     "Calcium" : 42.96
     "Potassium" : 50.05
     "Magnesium" : 10.01
     "Iron" :  5
 ```
 ```mermaid
-pie title Key elements in Product X
+pie 
+title Key elements in Product X
     "Calcium" : 42.96
     "Potassium" : 50.05
     "Magnesium" : 25.01