#22 Basic Pie Chart

cypress/integration/e2e/pie.spec.js

@@ -0,0 +1,14 @@
+/* eslint-env jest */
+import { imgSnapshotTest } from '../../helpers/util.js'
+
+describe('Pie Chart', () => {
+  it('should render a simple pie diagram', () => {
+    imgSnapshotTest(`
+    pie title Sports in Sweden
+       "Bandy" : 40
+       "Ice-Hockey" : 80
+       "Football" : 90
+      `,
+    {})
+  })
+})

cypress/spec/classDiagram.spec.js

@@ -1,27 +0,0 @@
-/* eslint-env jest */
-import { imgSnapshotTest } from '../helpers/util.js'
-const { toMatchImageSnapshot } = require('jest-image-snapshot')
-
-expect.extend({ toMatchImageSnapshot })
-
-describe('Sequencediagram', () => {
-  it('should render a simple class diagrams', () => {
-    imgSnapshotTest(`
-    classDiagram
-      Class01 <|-- AveryLongClass : Cool
-      Class03 *-- Class04
-      Class05 o-- Class06
-      Class07 .. Class08
-      Class09 --> C2 : Where am i?
-      Class09 --* C3
-      Class09 --|> Class07
-      Class07 : equals()
-      Class07 : Object[] elementData
-      Class01 : size()
-      Class01 : int chimp
-      Class01 : int gorilla
-      Class08 <--> C2: Cool label
-      `,
-    {})
-  })
-})

cypress/spec/flowchart.spec.js

@@ -1,326 +0,0 @@
-/* eslint-env jest */
-import { imgSnapshotTest } from '../helpers/util.js'
-const { toMatchImageSnapshot } = require('jest-image-snapshot')
-
-expect.extend({ toMatchImageSnapshot })
-
-describe('Flowcart', () => {
-  it('should render a simple flowchart', () => {
-    imgSnapshotTest(`graph TD
-      A[Christmas] -->|Get money| B(Go shopping)
-      B --> C{Let me think}
-      C -->|One| D[Laptop]
-      C -->|Two| E[iPhone]
-      C -->|Three| F[fa:fa-car Car]
-      `,
-    {})
-  })
-  it('should render a simple flowchart with line breaks', () => {
-    imgSnapshotTest(`
-    graph TD
-      A[Christmas] -->|Get money| B(Go shopping)
-      B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
-      C -->|One| D[Laptop]
-      C -->|Two| E[iPhone]
-      C -->|Three| F[Car]
-      `,
-    {})
-  })
-
-  it('should render a simple flowchart with trapezoid and inverse trapezoid vertex options.', () => {
-    imgSnapshotTest(`
-    graph TD
-      A[/Christmas\\]
-      A -->|Get money| B[\\Go shopping/]
-      B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
-      C -->|One| D[/Laptop/]
-      C -->|Two| E[\\iPhone\\]
-      C -->|Three| F[Car]
-      `,
-    {})
-  })
-
-  it('should style nodes via a class.', () => {
-    imgSnapshotTest(`
-    graph TD
-      1A --> 1B
-      1B --> 1C
-      1C --> D
-      1C --> E
-
-      classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f
-      class 1A,1B,D,E processHead
-      `,
-    {})
-  })
-
-  it('should render a flowchart full of circles', () => {
-    imgSnapshotTest(`
-    graph LR
-      47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
-      37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
-      35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
-      41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
-      44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
-      46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
-      40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
-      38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
-      43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
-      42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
-      45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
-      35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
-      41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
-      41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
-      39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
-      39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
-      39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
-      39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
-      35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
-      36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
-      `,
-    {})
-  })
-  it('should render a flowchart full of icons', () => {
-    imgSnapshotTest(`
-    graph TD
-      9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
-      82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
-      db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
-      4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
-      30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
-      5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
-      c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
-      b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\\SharedDbInstance].[SupportDb]")
-      8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\\SharedDbInstance].[DevelopmentDb]")
-      0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\\SharedDbInstance].[TestDb]")
-      07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\\SharedDbInstance].[SharedReportingDb]")
-      c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
-      ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
-      68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
-      f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\\SharedDbInstance]")
-      d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
-      71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\\:MSSQLSERVER")
-      c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\\:SQLAgent")
-      9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\\:SQLBrowser")
-      1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
-      200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
-      1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
-      9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
-      9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
-      9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
-      9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
-      9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
-      9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
-      82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
-      82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
-      82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
-      82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
-      db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
-      db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
-      4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
-      4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
-      4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
-      4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
-      4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
-      30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
-      30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
-      5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
-      5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
-      c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
-      c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
-      b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-      8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-      0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-      07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
-      c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
-      ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
-      68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
-      f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-      f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
-      f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
-      f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
-      d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
-      71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-      c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-      c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
-      9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
-      9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
-      `,
-    {})
-  })
-
-  it('should render labels with numbers at the start', () => {
-    imgSnapshotTest(`
-    graph TB;subgraph "number as labels";1;end;
-      `,
-    {})
-  })
-  it('should render subgraphs', () => {
-    imgSnapshotTest(`
-    graph TB
-      subgraph One
-        a1-->a2
-      end
-      `,
-    {})
-  })
-
-  it('should render subgraphs with a title startign with a digit', () => {
-    imgSnapshotTest(`
-    graph TB
-      subgraph 2Two
-        a1-->a2
-      end
-      `,
-    {})
-  })
-
-  it('should render styled subgraphs', () => {
-    imgSnapshotTest(`
-    graph TB
-      A
-      B
-      subgraph foo[Foo SubGraph]
-        C
-        D
-      end
-      subgraph bar[Bar SubGraph]
-        E
-        F
-      end
-      G
-
-      A-->B
-      B-->C
-      C-->D
-      B-->D
-      D-->E
-      E-->A
-      E-->F
-      F-->D
-      F-->G
-      B-->G
-      G-->D
-
-      style foo fill:#F99,stroke-width:2px,stroke:#F0F
-      style bar fill:#999,stroke-width:10px,stroke:#0F0
-      `,
-    {})
-  })
-
-  it('should render a flowchart with ling sames and class definitoins', () => {
-    imgSnapshotTest(`graph LR
-      sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
-
-      提交申请
-      熊大
-      "];
-      class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
-      sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
-      负责人审批
-      强子
-      "];
-      class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
-      sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
-      DBA审批
-      强子
-      "];
-      class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
-      sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
-      SA审批
-      阿美
-      "];
-      class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
-      sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
-      主管审批
-      光头强
-      "];
-      class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
-      sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
-      DBA确认
-      强子
-      "];
-      class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
-      sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
-      SA确认
-      阿美
-      "];
-      class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
-      sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
-      结束
-      "];
-      class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
-      sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
-      SA执行1
-      强子
-      "];
-      class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
-      sid-6C2120F3-D940-4958-A067-0903DCE879C4["
-      SA执行2
-      强子
-      "];
-      class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
-      sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
-      DBA执行1
-      强子
-      "];
-      class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
-      sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
-      DBA执行3
-      强子
-      "];
-      class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
-      sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
-      DBA执行2
-      强子
-      "];
-      class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
-      sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
-      DBA执行4
-      强子
-      "];
-      class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
-      sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
-      负责人确认
-      梁静茹
-      "];
-      class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
-      sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
-      sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
-      sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
-      sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
-      sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
-      sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
-      sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
-      sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-      sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
-      sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
-      sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
-      sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
-      sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-      sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-      sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
-      sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
-      sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
-      sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
-      sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
-      `,
-    {})
-  })
-
-  it('should render color of styled nodes', () => {
-    imgSnapshotTest(`
-      graph LR
-        foo-->bar
-
-        classDef foo fill:lightblue,color:green,stroke:#FF9E2C,font-weight:bold
-        style foo fill:#F99,stroke-width:2px,stroke:#F0F
-        style bar fill:#999,color: #00ff00, stroke-width:10px,stroke:#0F0
-      `,
-    {
-      listUrl: false,
-      listId: 'color styling',
-      logLevel: 0
-    })
-  })
-})

cypress/spec/gantt.spec.js

@@ -1,42 +0,0 @@
-/* eslint-env jest */
-import { imgSnapshotTest } from '../helpers/util.js'
-const { toMatchImageSnapshot } = require('jest-image-snapshot')
-
-expect.extend({ toMatchImageSnapshot })
-
-describe('Sequencediagram', () => {
-  it('should render a gantt chart', () => {
-    imgSnapshotTest(`
-    gantt
-      dateFormat  YYYY-MM-DD
-      axisFormat  %d/%m
-      title Adding GANTT diagram to mermaid
-      excludes weekdays 2014-01-10
-
-      section A section
-      Completed task            :done,    des1, 2014-01-06,2014-01-08
-      Active task               :active,  des2, 2014-01-09, 3d
-      Future task               :         des3, after des2, 5d
-      Future task2               :         des4, after des3, 5d
-
-      section Critical tasks
-      Completed task in the critical line :crit, done, 2014-01-06,24h
-      Implement parser and jison          :crit, done, after des1, 2d
-      Create tests for parser             :crit, active, 3d
-      Future task in critical line        :crit, 5d
-      Create tests for renderer           :2d
-      Add to mermaid                      :1d
-
-      section Documentation
-      Describe gantt syntax               :active, a1, after des1, 3d
-      Add gantt diagram to demo page      :after a1  , 20h
-      Add another diagram to demo page    :doc1, after a1  , 48h
-
-      section Last section
-      Describe gantt syntax               :after doc1, 3d
-      Add gantt diagram to demo page      : 20h
-      Add another diagram to demo page    : 48h
-      `,
-    {})
-  })
-})

cypress/spec/gitGraph.spec.js

@@ -1,29 +0,0 @@
-/* eslint-env jest */
-import { imgSnapshotTest } from '../helpers/util.js'
-const { toMatchImageSnapshot } = require('jest-image-snapshot')
-
-expect.extend({ toMatchImageSnapshot })
-
-describe('Sequencediagram', () => {
-  it('should render a simple git graph', () => {
-    imgSnapshotTest(`
-    gitGraph:
-      options
-      {
-          "nodeSpacing": 150,
-          "nodeRadius": 10
-      }
-      end
-      commit
-      branch newbranch
-      checkout newbranch
-      commit
-      commit
-      checkout master
-      commit
-      commit
-      merge newbranch
-      `,
-    {})
-  })
-})

cypress/spec/sequencediagram.spec.js

@@ -1,121 +0,0 @@
-/* eslint-env jest */
-import { imgSnapshotTest } from '../helpers/util.js'
-const { toMatchImageSnapshot } = require('jest-image-snapshot')
-
-expect.extend({ toMatchImageSnapshot })
-
-describe('Sequencediagram', () => {
-  it('should render a simple sequence diagrams', () => {
-    imgSnapshotTest(`
-      sequenceDiagram
-        participant Alice
-        participant Bob
-        participant John as John<br/>Second Line
-        Alice ->> Bob: Hello Bob, how are you?
-        Bob-->>John: How about you John?
-        Bob--x Alice: I am good thanks!
-        Bob-x John: I am good thanks!
-        Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
-        Bob-->Alice: Checking with John...
-        alt either this
-          Alice->>John: Yes
-          else or this
-          Alice->>John: No
-          else or this will happen
-          Alice->John: Maybe
-        end
-        par this happens in parallel
-        Alice -->> Bob: Parallel message 1
-        and
-        Alice -->> John: Parallel message 2
-        end
-      `,
-    {})
-  })
-  describe('background rects', () => {
-    it('should render a single and nested rects', () => {
-      imgSnapshotTest(`
-        sequenceDiagram
-          participant A
-          participant B
-          participant C
-          participant D
-          participant E
-          participant G
-
-          A ->>+ B: Task 1
-          rect rgb(178, 102, 255)
-            B ->>+ C: Task 2
-            C -->>- B: Return
-          end
-
-          A ->> D: Task 3
-          rect rgb(0, 128, 255)
-            D ->>+ E: Task 4
-            rect rgb(0, 204, 0)
-            E ->>+ G: Task 5
-            G -->>- E: Return
-            end
-            E ->> E: Task 6
-          end
-          D -->> A: Complete
-      `, {})
-    })
-    it('should render rect around and inside loops', () => {
-      imgSnapshotTest(`
-        sequenceDiagram
-          A ->> B: 1
-          rect rgb(204, 0, 102)
-            loop check C
-              C ->> C: Every 10 seconds
-            end
-          end
-          A ->> B: 2
-          loop check D
-            C ->> D: 3
-            rect rgb(153, 153, 255)
-            D -->> D: 5
-            D --> C: 4
-            end
-          end
-      `, {})
-    })
-    it('should render rect around and inside alts', () => {
-      imgSnapshotTest(`
-        sequenceDiagram
-          A ->> B: 1
-          rect rgb(204, 0, 102)
-            alt yes
-              C ->> C: 1
-            else no
-              rect rgb(0, 204, 204)
-                C ->> C: 0
-              end
-            end
-          end
-          B ->> A: Return
-      `, {})
-    })
-    it('should render rect around and inside opts', () => {
-      imgSnapshotTest(`
-        sequenceDiagram
-          A ->> B: 1
-          rect rgb(204, 0, 102)
-            opt maybe
-              C -->> D: Do something
-              rect rgb(0, 204, 204)
-                C ->> C: 0
-              end
-            end
-          end
-
-          opt possibly
-            rect rgb(0, 204, 204)
-              C ->> C: 0
-            end
-          end
-          B ->> A: Return
-      `, {})
-    })
-  })
-})

cypress/spec/webpackUsage.spec.js

@@ -1,16 +0,0 @@
-/* eslint-env jest */
-const { toMatchImageSnapshot } = require('jest-image-snapshot')
-
-expect.extend({ toMatchImageSnapshot })
-
-describe('Sequencediagram', () => {
-  it('should render a simple sequence diagrams', () => {
-    const url = 'http://localhost:9000/webpackUsage.html'
-
-    await page.goto(url)
-
-    const image = await page.screenshot()
-
-    expect(image).toMatchImageSnapshot()
-  })
-})

cypress/spec/xss.spec.js

@@ -1,15 +0,0 @@
-/* eslint-env jest */
-import { imgSnapshotTest } from '../helpers/util.js'
-const { toMatchImageSnapshot } = require('jest-image-snapshot')
-
-expect.extend({ toMatchImageSnapshot })
-
-/* eslint-disable */
-describe('XSS', () => {
-  it('should handle xss in tags', () => {
-    // const str = 'graph LR;\nB-->D(<img onerror=location=`javascript\u003aalert\u0028document.domain\u0029` src=x>);'
-    const str = 'eyJjb2RlIjoiXG5ncmFwaCBMUlxuICAgICAgQi0tPkQoPGltZyBvbmVycm9yPWxvY2F0aW9uPWBqYXZhc2NyaXB0XFx1MDAzYXhzc0F0dGFja1xcdTAwMjhkb2N1bWVudC5kb21haW5cXHUwMDI5YCBzcmM9eD4pOyIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0In19';
-    imgSnapshotTest(str,
-    {}, true)
-  })
-})

docs/_sidebar.md

@@ -11,7 +11,7 @@
   - [Flowchart](flowchart.md)
   - [Sequence diagram](sequenceDiagram.md)
   - [Gantt](gantt.md)
-
+  - [Pie Chart](pie.md)
 - Guide
 
   - [Development](development.md)

docs/pie.md

@@ -0,0 +1,37 @@
+# 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
+
+Mermaid can render Pie Chart diagrams.
+
+```
+pie
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15 
+```
+```mermaid
+pie title Pets adopted by volunteers 
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 35 
+```
+
+
+## Syntax
+
+```
+pie
+    "DataKey1" : Positive numeric value (upto two decimal places)
+    "Calcium" : 42.96
+    "Potassium" : 50.05
+    "Magnesium" : 10.01
+    "Iron" :  5
+```
+```mermaid
+pie title Key elements in Product X
+    "Calcium" : 42.96
+    "Potassium" : 50.05
+    "Magnesium" : 25.01
+    "Iron" :  15
+ ```

e2e/platform/pie.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Mermaid Quick Test Page</title>
+  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+</head>
+<body>
+  <div class="mermaid">
+    pie title Example pie chart
+    "ash" :60.89
+    "bat" : 39.5
+    "cat": 89.99
+</div>
+  <script src="./mermaid.js"></script>
+  <script>
+             mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
+  </script>
+</body>
+</html>

e2e/spec/pie.spec.js

@@ -4,11 +4,12 @@ const { toMatchImageSnapshot } = require('jest-image-snapshot')
 
 expect.extend({ toMatchImageSnapshot })
 
-describe('Sequencediagram', () => {
+describe('Pie Chart simple', () => {
-  it('should render a simple info diagrams', () => {
+  it('should render a simple Pie chart diagram', async () => {
-    imgSnapshotTest(`
+    await imgSnapshotTest(page, `
-    info
+    pie
-       showInfo
+    "Ash" : 40
+    "Bat" : 50
       `,
     {})
   })

package.json

@@ -69,7 +69,7 @@
     "coveralls": "^3.0.2",
     "css-loader": "^2.0.1",
     "css-to-string-loader": "^0.1.3",
-    "cypress": "^3.4.1",
+    "cypress": "3.4.0",
     "husky": "^1.2.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^23.6.0",

src/diagrams/pie/parser/pie.jison

@@ -0,0 +1,57 @@
+/** mermaid
+ *  http://knsv.github.io/mermaid/
+ *  (c) 2015 Knut Sveidqvist
+ *  MIT license.
+ */
+%lex
+%x string
+%options case-insensitive
+
+%{
+	// Pre-lexer code can go here
+%}
+
+%%
+\%\%[^\n]*               /* do nothing */
+\s+                      /* skip whitespace */
+"pie"		             return 'pie'    ;
+[\s\n\r]+                 return 'NL'      ;
+[\s]+ 		              return 'space';
+"title"\s[^#\n;]+         return 'title';
+["]                       {/*console.log('begin str');*/this.begin("string");}
+<string>["]               {/*console.log('pop-state');*/this.popState();}
+<string>[^"]*             {/*console.log('ending string')*/return "STR";}
+":"[\s]*[\d]+(?:\.[\d]+)? return "VALUE";
+
+<<EOF>>           return 'EOF'     ;
+
+
+/lex
+
+%start start
+
+%% /* language grammar */
+
+start
+// %{	: info document 'EOF' { return yy; } }
+	: pie document 'EOF'
+	;
+
+document
+	: /* empty */
+	| document line
+	;
+
+line
+	: statement { }
+	| 'NL'
+	;
+
+statement
+	:  STR VALUE { 
+		console.log('str:'+$1+' value: '+$2)
+		yy.addSection($1,yy.cleanupValue($2));  }
+	| title {yy.setTitle($1.substr(6));$$=$1.substr(6);}	
+	;
+
+%%

src/diagrams/pie/parser/pie.spec.js

@@ -0,0 +1,37 @@
+
+/* eslint-env jasmine */
+import pieDb from '../pieDb'
+import pie from './pie'
+import { setConfig } from '../../../config'
+
+setConfig({
+  securityLevel: 'strict'
+})
+
+describe('when parsing pie', function () {
+  beforeEach(function () {
+    pie.parser.yy = pieDb
+    pie.parser.yy.clear()
+  })
+  it('should handle simple pie', function () {
+    const res = pie.parser.parse('pie \n"ash" : 60\n"bat" : 40\n')
+    const sections = pieDb.getSections()
+    console.log('sections: ', sections)
+    const section1 = sections['ash']
+    expect(section1).toBe(60)
+  })
+
+  it('should handle simple pie with positive decimal', function () {
+    const res = pie.parser.parse('pie \n"ash" : 60.67\n"bat" : 40\n')
+    const sections = pieDb.getSections()
+    console.log('sections: ', sections)
+    const section1 = sections['ash']
+    expect(section1).toBe(60.67)
+  })
+
+  it('should handle simple pie with negative decimal', function () {
+    expect(()=>{
+      pie.parser.parse('pie \n"ash" : 60.67\n"bat" : 40..12\n');
+    }).toThrowError(); 
+  })
+})

src/diagrams/pie/pieDb.js

@@ -0,0 +1,50 @@
+/**
+ *
+ */
+import { logger } from '../../logger'
+
+let sections = {}
+let title = ''
+
+const addSection = function (id, value) {
+  if (typeof sections[id] === 'undefined') {
+    sections[id] = value
+    logger.debug('Added new section :', id)
+    // console.log('Added new section:', id, value)
+  }
+}
+const getSections = () => sections
+
+const setTitle = function (txt) {
+  title = txt
+}
+
+const getTitle = function () {
+  return title
+}
+const cleanupValue = function (value) {
+  if (value.substring(0, 1) === ':') {
+    value = value.substring(1).trim()
+    return Number(value.trim())
+  } else {
+    return Number(value.trim())
+  }
+}
+
+const clear = function () {
+  sections = {}
+  title = ''
+}
+// export const parseError = (err, hash) => {
+//   global.mermaidAPI.parseError(err, hash)
+// }
+
+export default {
+  addSection,
+  getSections,
+  cleanupValue,
+  clear,
+  setTitle,
+  getTitle
+  // parseError
+}

src/diagrams/pie/pieRenderer.js

@@ -0,0 +1,119 @@
+/**
+ * Created by AshishJ on 11-09-2019.
+ */
+import * as d3 from 'd3'
+import pieData from './pieDb'
+import pieParser from './parser/pie'
+import { logger } from '../../logger'
+
+const conf = {
+}
+export const setConf = function (cnf) {
+  const keys = Object.keys(cnf)
+
+  keys.forEach(function (key) {
+    conf[key] = cnf[key]
+  })
+}
+
+/**
+ * Draws a Pie Chart with the data given in text.
+ * @param text
+ * @param id
+ */
+let w
+export const draw = (txt, id, ver) => {
+  try {
+    const parser = pieParser.parser
+    parser.yy = pieData
+    logger.debug('Rendering info diagram\n' + txt)
+    // Parse the Pie Chart definition
+    parser.yy.clear()
+    parser.parse(txt)
+    logger.debug('Parsed info diagram')
+    const elem = document.getElementById(id)
+    w = elem.parentElement.offsetWidth
+
+    if (typeof w === 'undefined') {
+      w = 1200
+    }
+
+    if (typeof conf.useWidth !== 'undefined') {
+      w = conf.useWidth
+    }
+    const h = 450
+    elem.setAttribute('height', '100%')
+    // Set viewBox
+    elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h)
+
+    // Fetch the default direction, use TD if none was found
+
+    var width = w// 450
+    var height = 450
+    var margin = 40
+
+    var radius = Math.min(width, height) / 2 - margin
+
+    var svg = d3.select('#' + id).append('svg')
+      .attr('width', width)
+      .attr('height', height)
+      .append('g')
+      .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')')
+
+    var data = pieData.getSections()
+    logger.info(data)
+
+    // set the color scale
+    var color = d3.scaleOrdinal()
+      .domain(data)
+      .range(d3.schemeSet2)
+
+    // Compute the position of each group on the pie:
+    var pie = d3.pie()
+      .value(function (d) { return d.value })
+    var dataReady = pie(d3.entries(data))
+    // Now I know that group A goes from 0 degrees to x degrees and so on.
+
+    // shape helper to build arcs:
+    var arcGenerator = d3.arc()
+      .innerRadius(0)
+      .outerRadius(radius)
+
+    // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
+    svg
+      .selectAll('mySlices')
+      .data(dataReady)
+      .enter()
+      .append('path')
+      .attr('d', arcGenerator)
+      .attr('fill', function (d) { return (color(d.data.key)) })
+      .attr('stroke', 'black')
+      .style('stroke-width', '2px')
+      .style('opacity', 0.7)
+
+    // Now add the annotation. Use the centroid method to get the best coordinates
+    svg
+      .selectAll('mySlices')
+      .data(dataReady)
+      .enter()
+      .append('text')
+      .text(function (d) { return d.data.key })
+      .attr('transform', function (d) { return 'translate(' + arcGenerator.centroid(d) + ')' })
+      .style('text-anchor', 'middle')
+      .style('font-size', 17)
+
+    svg.append('text')
+      .text(parser.yy.getTitle())
+      .attr('x', 0)
+      .attr('y', -(h - 50) / 2)
+      .attr('class', 'titleText')
+  } catch (e) {
+    logger.error('Error while rendering info diagram')
+    logger.error(e.message)
+  }
+}
+
+export default {
+  setConf,
+  draw
+}

src/mermaidAPI.js

@@ -34,6 +34,9 @@ import gitGraphAst from './diagrams/git/gitGraphAst'
 import infoRenderer from './diagrams/info/infoRenderer'
 import infoParser from './diagrams/info/parser/info'
 import infoDb from './diagrams/info/infoDb'
+import pieRenderer from './diagrams/pie/pieRenderer'
+import pieParser from './diagrams/pie/parser/pie'
+import pieDb from './diagrams/pie/pieDb'
 
 const themes = {}
 for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
@@ -338,6 +341,11 @@ function parse (text) {
       parser = infoParser
       parser.parser.yy = infoDb
       break
+    case 'pie':
+      logger.debug('pie')
+      parser = pieParser
+      parser.parser.yy = pieDb
+      break
   }
 
   parser.parser.yy.parseError = (str, hash) => {
@@ -514,6 +522,11 @@ const render = function (id, txt, cb, container) {
       infoRenderer.setConf(config.class)
       infoRenderer.draw(txt, id, pkg.version)
       break
+    case 'pie':
+      config.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute
+      pieRenderer.setConf(config.class)
+      pieRenderer.draw(txt, id, pkg.version)
+      break
   }
 
   d3.select(`[id="${id}"]`).selectAll('foreignobject > *').attr('xmlns', 'http://www.w3.org/1999/xhtml')

src/themes/mermaid.scss

@@ -3,3 +3,4 @@
 @import 'gantt';
 @import 'class';
 @import 'git';
+@import 'pie';

src/themes/pie.scss

@@ -0,0 +1,5 @@
+.titleText {
+  text-anchor: middle;
+  font-size: 25px;
+  fill: $taskTextDarkColor;
+}

src/utils.js

@@ -40,6 +40,9 @@ export const detectType = function (text) {
   if (text.match(/^\s*info/)) {
     return 'info'
   }
+  if (text.match(/^\s*pie/)) {
+    return 'pie'
+  }
 
   return 'flowchart'
 }