Merge pull request #2051 from mermaid-js/pie_chart_themeing

#1648, #1656 Making Pie Chart more configurable

src/diagrams/pie/parser/pie.jison

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

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
 };

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')
+      .attr('class', 'pieCircle');
-      .style('stroke-width', '2px')
-      .style('opacity', 0.7);
 
     // 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')
+      .attr('class', 'slice');
-      .style('font-size', 17);
 
     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');

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;
+    font-size: ${options.pieTitleTextSize};
-    fill: ${options.taskTextDarkColor};
+    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};
   }
 `;
 

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;

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;

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;

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;

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';