Merge pull request #3609 from jasmaa/feature/3593_pie_slice_ordering

Order pie chart slices clockwise by order of entries

docs/pie.md

@@ -28,7 +28,7 @@ Drawing a pie chart is really simple in mermaid.
 - Start with `pie` keyword to begin the diagram
   - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_**
 - Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_**
-- Followed by dataSet
+- Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels.
   - `label` for a section in the pie diagram within `" "` quotes.
   - Followed by `:` colon as separator
   - Followed by `positive numeric value` (supported upto two decimal places)

packages/mermaid/src/diagrams/pie/pieRenderer.js

@@ -94,10 +94,22 @@ export const draw = (txt, id, _version, diagObj) => {
     var color = scaleOrdinal().range(myGeneratedColors);
 
     // Compute the position of each group on the pie:
-    var pie = d3pie().value(function (d) {
+    var pieData = Object.entries(data).map(function (el, idx) {
-      return d[1];
+      return {
+        order: idx,
+        name: el[0],
+        value: el[1],
+      };
     });
-    var dataReady = pie(Object.entries(data));
+    var pie = d3pie()
+      .value(function (d) {
+        return d.value;
+      })
+      .sort(function (a, b) {
+        // Sort slices in clockwise direction
+        return a.order - b.order;
+      });
+    var dataReady = pie(pieData);
 
     // Shape helper to build arcs:
     var arcGenerator = arc().innerRadius(0).outerRadius(radius);
@@ -110,7 +122,7 @@ export const draw = (txt, id, _version, diagObj) => {
       .append('path')
       .attr('d', arcGenerator)
       .attr('fill', function (d) {
-        return color(d.data[0]);
+        return color(d.data.name);
       })
       .attr('class', 'pieCircle');
 
@@ -122,7 +134,7 @@ export const draw = (txt, id, _version, diagObj) => {
       .enter()
       .append('text')
       .text(function (d) {
-        return ((d.data[1] / sum) * 100).toFixed(0) + '%';
+        return ((d.data.value / sum) * 100).toFixed(0) + '%';
       })
       .attr('transform', function (d) {
         return 'translate(' + arcGenerator.centroid(d) + ')';
@@ -166,9 +178,9 @@ export const draw = (txt, id, _version, diagObj) => {
       .attr('y', legendRectSize - legendSpacing)
       .text(function (d) {
         if (diagObj.db.getShowData() || conf.showData || conf.pie.showData) {
-          return d.data[0] + ' [' + d.data[1] + ']';
+          return d.data.name + ' [' + d.data.value + ']';
         } else {
-          return d.data[0];
+          return d.data.name;
         }
       });
   } catch (e) {

packages/mermaid/src/docs/pie.md

@@ -19,7 +19,7 @@ Drawing a pie chart is really simple in mermaid.
 - Start with `pie` keyword to begin the diagram
   - `showData` to render the actual data values after the legend text. This is **_OPTIONAL_**
 - Followed by `title` keyword and its value in string to give a title to the pie-chart. This is **_OPTIONAL_**
-- Followed by dataSet
+- Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels.
   - `label` for a section in the pie diagram within `" "` quotes.
   - Followed by `:` colon as separator
   - Followed by `positive numeric value` (supported upto two decimal places)