GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

#1648, #1656 Making Pie Chart more configurable

Browse Source
This commit is contained in:
Ashish Jain 2021-05-07 17:02:08 +02:00
parent fb5970d4db
commit 37136c9bef
9 changed files with 86 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/diagrams/pie/parser/pie.jison
View File

@ -30,6 +30,7 @@ title { this.begin("ti
<string>["] { this.popState(); }
<string>[^"]* { return "txt"; }
"pie" return 'PIE';
"showData" return 'showData';
":"[\s]*[\d]+(?:\.[\d]+)? return "value";
<<EOF>> return 'EOF';
@ -44,6 +45,7 @@ start
: eol start
| directive start
| PIE document
| PIE showData document {yy.setShowData(true);}
;
document

14
src/diagrams/pie/pieDb.js
View File

@ -7,6 +7,7 @@ import * as configApi from '../../config';
let sections = {};
let title = '';
let showData = false;
export const parseDirective = function(statement, context, type) {
mermaidAPI.parseDirective(this, statement, context, type);
@ -24,6 +25,14 @@ const setTitle = function(txt) {
title = txt;
};
const setShowData = function(toggle) {
showData = toggle;
};
const getShowData = function() {
return showData;
};
const getTitle = function() {
return title;
};
@ -39,6 +48,7 @@ const cleanupValue = function(value) {
const clear = function() {
sections = {};
title = '';
showData = false;
};
// export const parseError = (err, hash) => {
// global.mermaidAPI.parseError(err, hash)
@ -52,6 +62,8 @@ export default {
cleanupValue,
clear,
setTitle,
getTitle
getTitle,
setShowData,
getShowData
// parseError
};

19
src/diagrams/pie/pieRenderer.js
View File

@ -34,9 +34,12 @@ export const draw = (txt, id) => {
width = 1200;
}
if (typeof conf.pie.useWidth !== 'undefined') {
if (typeof conf.useWidth !== 'undefined') {
width = conf.useWidth;
}
if (typeof conf.pie.useWidth !== 'undefined') {
width = conf.pie.useWidth;
}
const diagram = select('#' + id);
configureSvgSize(diagram, height, width, conf.pie.useMaxWidth);
@ -103,9 +106,7 @@ export const draw = (txt, id) => {
.attr('fill', function(d) {
return color(d.data.key);
})
.attr('stroke', 'black')
.style('stroke-width', '2px')
.style('opacity', 0.7);
.attr('class', 'pieCircle');
// Now add the percentage.
// Use the centroid method to get the best coordinates.
@ -121,8 +122,7 @@ export const draw = (txt, id) => {
return 'translate(' + arcGenerator.centroid(d) + ')';
})
.style('text-anchor', 'middle')
.attr('class', 'slice')
.style('font-size', 17);
.attr('class', 'slice');
svg
.append('text')
@ -154,11 +154,16 @@ export const draw = (txt, id) => {
.style('stroke', color);
legend
.data(dataReady.filter(value => value.data.value !== 0))
.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) {
return d;
if (parser.yy.getShowData() || conf.showData || conf.pie.showData) {
return d.data.key + ' [' + d.data.value + ']';
} else {
return d.data.key;
}
});
} catch (e) {
log.error('Error while rendering info diagram');

19
src/diagrams/pie/styles.js
View File

@ -1,19 +1,26 @@
const getStyles = options =>
`.pieTitleText {
`
.pieCircle{
stroke: ${options.pieStrokeColor};
stroke-width : ${options.pieStrokeWidth};
opacity : ${options.pieOpacity};
}
.pieTitleText {
text-anchor: middle;
font-size: 25px;
fill: ${options.taskTextDarkColor};
font-size: ${options.pieTitleTextSize};
fill: ${options.pieTitleTextColor};
font-family: ${options.fontFamily};
}
.slice {
font-family: ${options.fontFamily};
fill: ${options.textColor};
fill: ${options.pieSectionTextColor};
font-size:${options.pieSectionTextSize};
// fill: white;
}
.legend text {
fill: ${options.taskTextDarkColor};
fill: ${options.pieLegendTextColor};
font-family: ${options.fontFamily};
font-size: 17px;
font-size: ${options.pieLegendTextSize};
}
`;

9
src/themes/theme-base.js
View File

@ -152,6 +152,15 @@ class Theme {
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
this.pieLegendTextSize = this.pieLegendTextSize || '17px';
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
this.pieStrokeColor = this.pieStrokeColor || 'black';
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
this.pieOpacity = this.pieOpacity || '0.7';
/* requirement-diagram */
this.requirementBackground = this.requirementBackground || this.primaryColor;

22
src/themes/theme-dark.js
View File

@ -150,19 +150,6 @@ class Theme {
this.fillType7 = adjust(this.secondaryColor, { h: 128 });
/* pie */
// this.pie1 = this.pie1 || this.primaryColor;
// this.pie2 = this.pie2 || this.secondaryColor;
// this.pie3 = this.pie3 || this.tertiaryColor;
// this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });
// this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });
// this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });
// this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });
// this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
// this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
// this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });
// this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });
// this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });
this.pie1 = this.pie1 || '#0b0000';
this.pie2 = this.pie2 || '#4d1037';
this.pie3 = this.pie3 || '#3f5258';
@ -175,6 +162,15 @@ class Theme {
this.pie10 = this.pie10 || '#00296f';
this.pie11 = this.pie11 || '#01629c';
this.pie12 = this.pie12 || '#010029';
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
this.pieLegendTextSize = this.pieLegendTextSize || '17px';
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
this.pieStrokeColor = this.pieStrokeColor || 'black';
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
this.pieOpacity = this.pieOpacity || '0.7';
/* class */
this.classText = this.primaryTextColor;

9
src/themes/theme-default.js
View File

@ -178,6 +178,15 @@ class Theme {
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -40 });
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -90, l: -40 });
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -30 });
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
this.pieLegendTextSize = this.pieLegendTextSize || '17px';
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
this.pieStrokeColor = this.pieStrokeColor || 'black';
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
this.pieOpacity = this.pieOpacity || '0.7';
/* requirement-diagram */
this.requirementBackground = this.requirementBackground || this.primaryColor;

10
src/themes/theme-forest.js
View File

@ -148,6 +148,16 @@ class Theme {
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -50 });
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -50 });
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -50 });
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
this.pieLegendTextSize = this.pieLegendTextSize || '17px';
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
this.pieStrokeColor = this.pieStrokeColor || 'black';
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
this.pieOpacity = this.pieOpacity || '0.7';
/* requirement-diagram */
this.requirementBackground = this.requirementBackground || this.primaryColor;
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;

9
src/themes/theme-neutral.js
View File

@ -185,6 +185,15 @@ class Theme {
this.pie10 = this.pie10 || '#999';
this.pie11 = this.pie11 || '#777';
this.pie12 = this.pie12 || '#555';
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
this.pieSectionTextColor = this.pieSectionTextColor || this.textColor;
this.pieLegendTextSize = this.pieLegendTextSize || '17px';
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;
this.pieStrokeColor = this.pieStrokeColor || 'black';
this.pieStrokeWidth = this.pieStrokeWidth || '2px';
this.pieOpacity = this.pieOpacity || '0.7';
// this.pie1 = this.pie1 || '#212529';
// this.pie2 = this.pie2 || '#343A40';