From 37136c9befa2780f95f1b1b8eecfdc5bfa8ca050 Mon Sep 17 00:00:00 2001 From: Ashish Jain Date: Fri, 7 May 2021 17:02:08 +0200 Subject: [PATCH] #1648, #1656 Making Pie Chart more configurable --- src/diagrams/pie/parser/pie.jison | 2 ++ src/diagrams/pie/pieDb.js | 14 +++++++++++++- src/diagrams/pie/pieRenderer.js | 19 ++++++++++++------- src/diagrams/pie/styles.js | 19 +++++++++++++------ src/themes/theme-base.js | 9 +++++++++ src/themes/theme-dark.js | 22 +++++++++------------- src/themes/theme-default.js | 9 +++++++++ src/themes/theme-forest.js | 10 ++++++++++ src/themes/theme-neutral.js | 9 +++++++++ 9 files changed, 86 insertions(+), 27 deletions(-) diff --git a/src/diagrams/pie/parser/pie.jison b/src/diagrams/pie/parser/pie.jison index de0030d5a..19c7eea4d 100644 --- a/src/diagrams/pie/parser/pie.jison +++ b/src/diagrams/pie/parser/pie.jison @@ -30,6 +30,7 @@ title { this.begin("ti ["] { this.popState(); } [^"]* { return "txt"; } "pie" return 'PIE'; +"showData" return 'showData'; ":"[\s]*[\d]+(?:\.[\d]+)? return "value"; <> return 'EOF'; @@ -44,6 +45,7 @@ start : eol start | directive start | PIE document + | PIE showData document {yy.setShowData(true);} ; document diff --git a/src/diagrams/pie/pieDb.js b/src/diagrams/pie/pieDb.js index b3dc7d3ec..0e883f76d 100644 --- a/src/diagrams/pie/pieDb.js +++ b/src/diagrams/pie/pieDb.js @@ -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 }; diff --git a/src/diagrams/pie/pieRenderer.js b/src/diagrams/pie/pieRenderer.js index 402b665d8..5a0165e08 100644 --- a/src/diagrams/pie/pieRenderer.js +++ b/src/diagrams/pie/pieRenderer.js @@ -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'); diff --git a/src/diagrams/pie/styles.js b/src/diagrams/pie/styles.js index 7a6e1f26d..e36efc519 100644 --- a/src/diagrams/pie/styles.js +++ b/src/diagrams/pie/styles.js @@ -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}; } `; diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js index 4ca50f1f1..5bb6316da 100644 --- a/src/themes/theme-base.js +++ b/src/themes/theme-base.js @@ -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; diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js index 2d499a4f0..2150022a2 100644 --- a/src/themes/theme-dark.js +++ b/src/themes/theme-dark.js @@ -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; diff --git a/src/themes/theme-default.js b/src/themes/theme-default.js index c29f7ada3..48fcf8eb7 100644 --- a/src/themes/theme-default.js +++ b/src/themes/theme-default.js @@ -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; diff --git a/src/themes/theme-forest.js b/src/themes/theme-forest.js index 1b962a1bd..267e004e9 100644 --- a/src/themes/theme-forest.js +++ b/src/themes/theme-forest.js @@ -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; diff --git a/src/themes/theme-neutral.js b/src/themes/theme-neutral.js index cf091c45e..ddd89abe5 100644 --- a/src/themes/theme-neutral.js +++ b/src/themes/theme-neutral.js @@ -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';