Add texttemplate attribute to shape.label

src/components/shapes/attributes.js

@@ -7,6 +7,8 @@ var dash = require('../drawing/attributes').dash;
 var extendFlat = require('../../lib/extend').extendFlat;
 var templatedArray = require('../../plot_api/plot_template').templatedArray;
 var axisPlaceableObjs = require('../../constants/axis_placeable_objects');
+var shapeTexttemplateAttrs = require('../../plots/template_attributes').shapeTexttemplateAttrs;
+var shapeLabelTexttemplateVars = require('./label_texttemplate').shapeLabelTexttemplateVars;
 
 module.exports = templatedArray('shape', {
  visible: {
@@ -232,6 +234,7 @@ module.exports = templatedArray('shape', {
  editType: 'arraydraw',
  description: 'Sets the text to display with shape.'
  },
+ texttemplate: shapeTexttemplateAttrs({}, {keys: Object.keys(shapeLabelTexttemplateVars)}),
  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

@@ -23,6 +23,7 @@ var svgTextUtils = require('../../lib/svg_text_utils');
 var constants = require('./constants');
 var helpers = require('./helpers');
 var getPathString = helpers.getPathString;
+var shapeLabelTexttemplateVars = require('./label_texttemplate').shapeLabelTexttemplateVars;
 var FROM_TL = require('../../constants/alignment').FROM_TL;
 
 
@@ -38,7 +39,8 @@ var FROM_TL = require('../../constants/alignment').FROM_TL;
 module.exports = {
  draw: draw,
  drawOne: drawOne,
- eraseActiveShape: eraseActiveShape
+ eraseActiveShape: eraseActiveShape,
+ drawLabel: drawLabel,
 };
 
 function draw(gd) {
@@ -168,7 +170,7 @@ function drawOne(gd, index) {
  plotinfo: plotinfo,
  gd: gd,
  editHelpers: editHelpers,
- hasText: options.label.text,
+ hasText: options.label.text || options.label.texttemplate,
  isActiveShape: true // i.e. to enable controllers
  };
 
@@ -605,13 +607,30 @@ 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) {
+ var templateValues = {};
+ if(options.type !== 'path') {
+ var _xa = Axes.getFromId(gd, options.xref);
+ var _ya = Axes.getFromId(gd, options.yref);
+ Object.keys(shapeLabelTexttemplateVars).forEach(function(key) {
+ var val = shapeLabelTexttemplateVars[key](options, _xa, _ya);
+ if(val !== undefined) templateValues[key] = val;
+ });
+ }
+ text = Lib.texttemplateStringForShapes(options.label.texttemplate,
+ {},
+ gd._fullLayout._d3locale,
+ templateValues);
+ }
 
  var labelGroupAttrs = {
  'data-index': index,
  };
- var text = options.label.text;
  var font = options.label.font;
 
  var labelTextAttrs = {

src/components/shapes/draw_newshape/attributes.js

@@ -3,6 +3,9 @@
 var fontAttrs = require('../../../plots/font_attributes');
 var dash = require('../../drawing/attributes').dash;
 var extendFlat = require('../../../lib/extend').extendFlat;
+var shapeTexttemplateAttrs = require('../../../plots/template_attributes').shapeTexttemplateAttrs;
+var shapeLabelTexttemplateVars = require('../label_texttemplate').shapeLabelTexttemplateVars;
+
 
 module.exports = {
  newshape: {
@@ -86,6 +89,7 @@ module.exports = {
  editType: 'none',
  description: 'Sets the text to display with the new shape.'
  },
+ texttemplate: shapeTexttemplateAttrs({newshape: true, editType: 'none'}, {keys: Object.keys(shapeLabelTexttemplateVars)}),
  font: fontAttrs({
  editType: 'none',
  description: 'Sets the new shape label text font.'

src/components/shapes/draw_newshape/defaults.js

@@ -28,7 +28,8 @@ module.exports = function supplyDrawNewShapeDefaults(layoutIn, layoutOut, coerce
 
  var isLine = layoutIn.dragmode === 'drawline';
  var labelText = coerce('newshape.label.text');
- if(labelText) {
+ var labelTextTemplate = coerce('newshape.label.texttemplate');
+ if(labelText || labelTextTemplate) {
  coerce('newshape.label.textangle');
  var labelTextPosition = coerce('newshape.label.textposition', isLine ? 'middle' : 'middle center');
  coerce('newshape.label.xanchor');

src/components/shapes/label_texttemplate.js

@@ -0,0 +1,28 @@
+'use strict';
+
+module.exports = {
+ shapeLabelTexttemplateVars: {
+ x0: (function(shape, _xa) { return (_xa.type === 'date') ? shape.x0 : _xa.d2l(shape.x0); }),
+ x1: (function(shape, _xa) { return (_xa.type === 'date') ? shape.x1 : _xa.d2l(shape.x1); }),
+ y0: (function(shape, _xa, _ya) { return (_ya.type === 'date') ? shape.y0 : _ya.d2l(shape.y0); }),
+ y1: (function(shape, _xa, _ya) { return (_ya.type === 'date') ? shape.y1 : _ya.d2l(shape.y1); }),
+ slope: (function(shape, _xa, _ya) {
+ return (_ya.d2l(shape.y1) - _ya.d2l(shape.y0)) / (_xa.d2l(shape.x1) - _xa.d2l(shape.x0));
+ }),
+ dx: (function(shape, _xa) { return _xa.d2l(shape.x1) - _xa.d2l(shape.x0); }),
+ dy: (function(shape, _xa, _ya) { return _ya.d2l(shape.y1) - _ya.d2l(shape.y0); }),
+ width: (function(shape, _xa) { return Math.abs(_xa.d2l(shape.x1) - _xa.d2l(shape.x0)); }),
+ height: (function(shape, _xa, _ya) { return Math.abs(_ya.d2l(shape.y1) - _ya.d2l(shape.y0)); }),
+ length: (function(shape, _xa, _ya) {
+ return (shape.type === 'line') ? Math.sqrt(Math.pow((_xa.d2l(shape.x1) - _xa.d2l(shape.x0)), 2) + Math.pow((_ya.d2l(shape.y1) - _ya.d2l(shape.y0)), 2)) : undefined;
+ }),
+ xcenter: (function(shape, _xa) {
+ var val = (_xa.d2l(shape.x1) + _xa.d2l(shape.x0)) / 2;
+ return (_xa.type === 'date') ? _xa.l2d(val) : val;
+ }),
+ ycenter: (function(shape, _xa, _ya) {
+ var val = (_ya.d2l(shape.y1) + _ya.d2l(shape.y0)) / 2;
+ return (_ya.type === 'date') ? _ya.l2d(val) : val;
+ }),
+ }
+};

src/lib/index.js

@@ -1074,6 +1074,26 @@ lib.texttemplateString = function() {
  return templateFormatString.apply(texttemplateWarnings, arguments);
 };
 
+// Regex for parsing multiplication and division operations applied to a template key
+// Used for shape.label.texttemplate
+// Matches a key name (non-whitespace characters), followed by a * or / character, followed by a number
+// For example, the following strings are matched: `x0*2`, `slope/1.60934`, `y1*2.54`
+var MULT_DIV_REGEX = /^(\S+)([\*\/])(-?\d+(\.\d+)?)$/;
+function multDivParser(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 texttemplateWarningsForShapes = {
+ max: 10,
+ count: 0,
+ name: 'texttemplate',
+ parseMultDiv: true,
+};
+lib.texttemplateStringForShapes = function() {
+ return templateFormatString.apply(texttemplateWarningsForShapes, arguments);
+};
+
 var TEMPLATE_STRING_FORMAT_SEPARATOR = /^[:|\|]/;
 /**
  * Substitute values from an object into a string and optionally formats them using d3-format,
@@ -1122,6 +1142,17 @@ 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
+ // Parse these if the parseMultDiv param is set to true
+ var parsedOp = null;
+ var parsedNumber = null;
+ if(opts.parseMultDiv) {
+ var _match = multDivParser(key);
+ key = _match.key;
+ parsedOp = _match.op;
+ parsedNumber = _match.number;
+ }
+
  var value;
  if(hasOther) {
  value = labels[key];
@@ -1145,6 +1176,14 @@ function templateFormatString(string, labels, d3locale) {
  }
  }
 
+ // Apply mult/div operation (if applicable)
+ if(parsedOp) {
+ value = (value === undefined) ? undefined : {
+ '*': (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

@@ -23,6 +23,23 @@ function templateFormatStringDescription(opts) {
  ].join(' ');
 }
 
+function shapeTemplateFormatStringDescription() {
+ return [
+ 'Variables are inserted using %{variable},',
+ 'for example "x0: %{x0}".',
+ 'Numbers are formatted using d3-format\'s syntax %{variable:d3-format}, for example "Price: %{x0:$.2f}". See',
+ FORMAT_LINK,
+ 'for details on the formatting syntax.',
+ 'Dates are formatted using d3-time-format\'s syntax %{variable|d3-time-format}, for example "Day: %{x0|%m %b %Y}". See',
+ DATE_FORMAT_LINK,
+ 'for details on the date formatting syntax.',
+ 'A single multiplication or division operation may be applied to numeric variables, and combined with',
+ 'd3 number formatting, for example "Length in cm: %{x0*2.54}", "%{slope*60:.1f} meters per second."',
+ 'For log axes, variable values are given in log units.',
+ 'For date axes, x/y coordinate variables and center variables use datetimes, while all other variable values use values in ms.',
+ ].join(' ');
+}
+
 function describeVariables(extra) {
  var descPart = extra.description ? ' ' + extra.description : '';
  var keys = extra.keys || [];
@@ -33,9 +50,9 @@ function describeVariables(extra) {
  }
  descPart = descPart + 'Finally, the template string has access to ';
  if(keys.length === 1) {
- descPart = 'variable ' + quotedKeys[0];
+ descPart = descPart + 'variable ' + quotedKeys[0];
  } else {
- descPart = 'variables ' + quotedKeys.slice(0, -1).join(', ') + ' and ' + quotedKeys.slice(-1) + '.';
+ descPart = descPart + 'variables ' + quotedKeys.slice(0, -1).join(', ') + ' and ' + quotedKeys.slice(-1) + '.';
  }
  }
  return descPart;
@@ -94,3 +111,26 @@ exports.texttemplateAttrs = function(opts, extra) {
  }
  return texttemplate;
 };
+
+
+exports.shapeTexttemplateAttrs = function(opts, extra) {
+ opts = opts || {};
+ extra = extra || {};
+
+ var newStr = opts.newshape ? 'new ' : '';
+
+ var descPart = describeVariables(extra);
+
+ var texttemplate = {
+ valType: 'string',
+ dflt: '',
+ editType: opts.editType || 'arraydraw',
+ description: [
+ 'Template string used for rendering the ' + newStr + 'shape\'s label.',
+ 'Note that this will override `text`.',
+ shapeTemplateFormatStringDescription(),
+ descPart,
+ ].join(' ')
+ };
+ return texttemplate;
+};