mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Order pie chart slices clockwise by order of entries

This commit is contained in:
jasmaa 2022-10-08 16:51:11 -04:00
parent ee13c7666d
commit 053c966d5f
No known key found for this signature in database
GPG Key ID: 422283323FC9915B
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/mermaid/src/diagrams/pie/pieRenderer.js
View File

@ -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) {