From 267935713c89b9316f0dd8750e9080072e78dcab Mon Sep 17 00:00:00 2001
From: Reda Al Sulais <u.yokozuna@gmail.com>
Date: Fri, 25 Aug 2023 16:07:28 +0300
Subject: [PATCH] fix(pie): align slices and legend orders

---
 packages/mermaid/src/diagrams/pie/pieRenderer.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts
index 5ef0818426..80f4f0a5a4 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts
@@ -12,14 +12,16 @@ import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 
 const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Sections>[] => {
   // Compute the position of each group on the pie:
-  const pieData: D3Sections[] = Object.entries(sections).map(
-    (element: [string, number]): D3Sections => {
+  const pieData: D3Sections[] = Object.entries(sections)
+    .map((element: [string, number]): D3Sections => {
       return {
         label: element[0],
         value: element[1],
       };
-    }
-  );
+    })
+    .sort((a: D3Sections, b: D3Sections): number => {
+      return b.value - a.value;
+    });
   const pie: d3.Pie<unknown, D3Sections> = d3pie<D3Sections>().value(
     (d3Section: D3Sections): number => d3Section.value
   );