From 053c966d5ff1bab35c76211e7063bac93b86008b Mon Sep 17 00:00:00 2001
From: jasmaa <jasonmaa3955@gmail.com>
Date: Sat, 8 Oct 2022 16:51:11 -0400
Subject: [PATCH] Order pie chart slices clockwise by order of entries

---
 .../mermaid/src/diagrams/pie/pieRenderer.js   | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js
index f8e21bc9d..42b45162c 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/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) {
-      return d[1];
+    var pieData = Object.entries(data).map(function (el, idx) {
+      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) {