#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')
-      .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');

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