list available variables in pie's hovertemplate description

Author: antoinerg

src/components/fx/hovertemplate_attributes.js

@@ -13,6 +13,18 @@ module.exports = function(opts, extra) {
     extra = extra || {};
 
     var descPart = extra.description ? ' ' + extra.description : '';
+    var keys = extra.keys || [];
+    if(keys.length > 0) {
+        for(var i = 0; i < keys.length; i++) {
+            keys[i] = '`' + keys[i] + '`';
+        }
+        descPart = descPart + 'This trace supports the additional ';
+        if(keys.length === 1) {
+            descPart = 'variable ' + keys[0];
+        } else {
+            descPart = 'variables ' + keys.slice(0, -1).join(', ') + ' and ' + keys.slice(-1) + '.';
+        }
+    }
 
     var hovertemplate = {
         valType: 'string',
@@ -26,6 +38,7 @@ module.exports = function(opts, extra) {
             'Variables are inserted using %{variable}, for example "y: %{y}".',
             'Numbers are formatted using d3-format\'s syntax %{variable:d3-format}, for example "Price: %{y:$.2f}".',
             'See https://github.com/d3/d3-format/blob/master/README.md#locale_format for details on the formatting syntax.',
+            'The variables available in `hovertemplate` are the ones emitted as event data described at this link https://plot.ly/javascript/plotlyjs-events/#event-data.',
             descPart
         ].join(' ')
     };

src/traces/pie/attributes.js

@@ -159,7 +159,9 @@ module.exports = {
     hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
         flags: ['label', 'text', 'value', 'percent', 'name']
     }),
-    hovertemplate: hovertemplateAttrs(),
+    hovertemplate: hovertemplateAttrs({}, {
+        keys: ['label', 'color', 'value', 'percent', 'text']
+    }),
     textposition: {
         valType: 'enumerated',
         role: 'info',