From 053c966d5ff1bab35c76211e7063bac93b86008b Mon Sep 17 00:00:00 2001 From: jasmaa Date: Sat, 8 Oct 2022 16:51:11 -0400 Subject: [PATCH 1/2] 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) { From 98f4c2d3ae5dcc3c5415a432df0011f3e34d08a1 Mon Sep 17 00:00:00 2001 From: jasmaa Date: Sun, 9 Oct 2022 20:56:31 -0400 Subject: [PATCH 2/2] Update pie docs to reflect label order change --- docs/pie.md | 2 +- packages/mermaid/src/docs/pie.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pie.md b/docs/pie.md index f59efd93a..1b70fdb86 100644 --- a/docs/pie.md +++ b/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) diff --git a/packages/mermaid/src/docs/pie.md b/packages/mermaid/src/docs/pie.md index b7dcd7aa5..4e14efce1 100644 --- a/packages/mermaid/src/docs/pie.md +++ b/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)