support shape.label.texttemplate attribute

Author: emilykl

src/components/shapes/attributes.js

@@ -4,6 +4,8 @@ var annAttrs = require('../annotations/attributes');
 var fontAttrs = require('../../plots/font_attributes');
 var scatterLineAttrs = require('../../traces/scatter/attributes').line;
 var dash = require('../drawing/attributes').dash;
+var templateFormatStringDescription = require('../../plots/template_attributes').templateFormatStringDescription;
+var describeVariables = require('../../plots/template_attributes').describeVariables;
 var extendFlat = require('../../lib/extend').extendFlat;
 var templatedArray = require('../../plot_api/plot_template').templatedArray;
 var axisPlaceableObjs = require('../../constants/axis_placeable_objects');
@@ -232,6 +234,17 @@ module.exports = templatedArray('shape', {
             editType: 'arraydraw',
             description: 'Sets the text to display with shape.'
         },
+        texttemplate: {
+            valType: 'string',
+            dflt: '',
+            editType: 'calc+arraydraw',
+            description: [
+                'Template string used for rendering the shape\'s label.',
+                'Note that this will override `text`.',
+                templateFormatStringDescription(),
+                describeVariables(['x0', 'y0', 'x1', 'y1', 'slope']),
+            ].join(' ')
+        },
         font: fontAttrs({
             editType: 'calc+arraydraw',
             colorEditType: 'arraydraw',

src/components/shapes/defaults.js

@@ -129,7 +129,8 @@ function handleShapeDefaults(shapeIn, shapeOut, fullLayout) {
     // Label options
     var isLine = shapeType === 'line';
     var labelText = coerce('label.text');
-    if(labelText) {
+    var labelTextTemplate = coerce('label.texttemplate');
+    if(labelText || labelTextTemplate) {
         coerce('label.textangle');
         var labelTextPosition = coerce('label.textposition', isLine ? 'middle' : 'middle center');
         coerce('label.xanchor');

src/components/shapes/draw.js

@@ -605,13 +605,27 @@ function drawLabel(gd, index, options, shapeGroup) {
     // Remove existing label
     shapeGroup.selectAll('.shape-label').remove();
 
-    // If no label, return
-    if(!options.label.text) return;
+    // If no label text or texttemplate, return
+    if(!(options.label.text || options.label.texttemplate)) return;
+
+    // Text template overrides text
+    var text = options.label.text;
+    if(options.label.texttemplate) {
+        text = Lib.texttemplateStringWithMath(options.label.texttemplate,
+            {},
+            gd._fullLayout._d3locale,
+            {
+                x0: options.x0,
+                y0: options.y0,
+                x1: options.x1,
+                y1: options.y1,
+                slope: (options.y1 - options.y0) / (options.x1 - options.x0),
+            });
+    }
 
     var labelGroupAttrs = {
         'data-index': index,
     };
-    var text = options.label.text;
     var font = options.label.font;
 
     var labelTextAttrs = {

src/lib/index.js

@@ -1074,6 +1074,22 @@ lib.texttemplateString = function() {
     return templateFormatString.apply(texttemplateWarnings, arguments);
 };
 
+var MULT_DIV_REGEX = /^(\S+)([\*\/])(-?\d+(\.\d+)?)$/;
+function parseMultDiv(inputStr) {
+    var match = inputStr.match(MULT_DIV_REGEX);
+    if(match) return { key: match[1], op: match[2], number: Number(match[3]) };
+    else return { key: inputStr, op: null, number: null };
+}
+var texttemplateWarningsWithMath = {
+    max: 10,
+    count: 0,
+    name: 'texttemplate',
+    parseMath: true,
+};
+lib.texttemplateStringWithMath = function() {
+    return templateFormatString.apply(texttemplateWarningsWithMath, arguments);
+};
+
 var TEMPLATE_STRING_FORMAT_SEPARATOR = /^[:|\|]/;
 /**
  * Substitute values from an object into a string and optionally formats them using d3-format,
@@ -1122,6 +1138,16 @@ function templateFormatString(string, labels, d3locale) {
         if(isSpaceOther || isSpaceOtherSpace) key = key.substring(1);
         if(isOtherSpace || isSpaceOtherSpace) key = key.substring(0, key.length - 1);
 
+        // Shape labels support * and / operators in template string
+        var parsedOp = null;
+        var parsedNumber = null;
+        if(opts.parseMath) {
+            var _match = parseMultDiv(key);
+            key = _match.key;
+            parsedOp = _match.op;
+            parsedNumber = _match.number;
+        }
+
         var value;
         if(hasOther) {
             value = labels[key];
@@ -1145,6 +1171,13 @@ function templateFormatString(string, labels, d3locale) {
             }
         }
 
+        if(parsedOp) {
+            value = {
+                '*': (function(v) { return v * parsedNumber; }),
+                '/': (function(v) { return v / parsedNumber; }),
+            }[parsedOp](value);
+        }
+
         if(value === undefined && opts) {
             if(opts.count < opts.max) {
                 lib.warn('Variable \'' + key + '\' in ' + opts.name + ' could not be found!');

src/plots/template_attributes.js

@@ -22,6 +22,7 @@ function templateFormatStringDescription(opts) {
         'for details on the date formatting syntax.'
     ].join(' ');
 }
+exports.templateFormatStringDescription = templateFormatStringDescription;
 
 function describeVariables(extra) {
     var descPart = extra.description ? ' ' + extra.description : '';
@@ -40,6 +41,7 @@ function describeVariables(extra) {
     }
     return descPart;
 }
+exports.describeVariables = describeVariables;
 
 exports.hovertemplateAttrs = function(opts, extra) {
     opts = opts || {};