GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

Order pie chart slices clockwise by order of entries

Browse Source
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); var color = scaleOrdinal().range(myGeneratedColors);
// Compute the position of each group on the pie: // 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: // Shape helper to build arcs:
var arcGenerator = arc().innerRadius(0).outerRadius(radius); var arcGenerator = arc().innerRadius(0).outerRadius(radius);
@ -110,7 +122,7 @@ export const draw = (txt, id, _version, diagObj) => {
.append('path') .append('path')
.attr('d', arcGenerator) .attr('d', arcGenerator)
.attr('fill', function (d) { .attr('fill', function (d) {
return color(d.data[0]); return color(d.data.name);
}) })
.attr('class', 'pieCircle'); .attr('class', 'pieCircle');
@ -122,7 +134,7 @@ export const draw = (txt, id, _version, diagObj) => {
.enter() .enter()
.append('text') .append('text')
.text(function (d) { .text(function (d) {
return ((d.data[1] / sum) * 100).toFixed(0) + '%'; return ((d.data.value / sum) * 100).toFixed(0) + '%';
}) })
.attr('transform', function (d) { .attr('transform', function (d) {
return 'translate(' + arcGenerator.centroid(d) + ')'; return 'translate(' + arcGenerator.centroid(d) + ')';
@ -166,9 +178,9 @@ export const draw = (txt, id, _version, diagObj) => {
.attr('y', legendRectSize - legendSpacing) .attr('y', legendRectSize - legendSpacing)
.text(function (d) { .text(function (d) {
if (diagObj.db.getShowData() || conf.showData || conf.pie.showData) { if (diagObj.db.getShowData() || conf.showData || conf.pie.showData) {
return d.data[0] + ' [' + d.data[1] + ']'; return d.data.name + ' [' + d.data.value + ']';
} else { } else {
return d.data[0]; return d.data.name;
} }
}); });
} catch (e) { } catch (e) {