handle datetimes and log axes, small refactor, fix docstrings

Author: emilykl

src/components/shapes/attributes.js

@@ -4,11 +4,11 @@ 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 templateFormatStringDescriptionForShapes = require('../../plots/template_attributes').templateFormatStringDescriptionForShapes;
-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');
+var shapeTexttemplateAttrs = require('../../plots/template_attributes').shapeTexttemplateAttrs;
+var shapeLabelTexttemplateVars = require('./label_texttemplate').shapeLabelTexttemplateVars;
 
 module.exports = templatedArray('shape', {
     visible: {
@@ -234,17 +234,7 @@ module.exports = templatedArray('shape', {
             editType: 'arraydraw',
             description: 'Sets the text to display with shape.'
         },
-        texttemplate: {
-            valType: 'string',
-            dflt: '',
-            editType: 'arraydraw',
-            description: [
-                'Template string used for rendering the shape\'s label.',
-                'Note that this will override `text`.',
-                templateFormatStringDescriptionForShapes(),
-                describeVariables(['x0', 'y0', 'x1', 'y1', 'slope']),
-            ].join(' ')
-        },
+        texttemplate: shapeTexttemplateAttrs({}, {keys: Object.keys(shapeLabelTexttemplateVars)}),
         font: fontAttrs({
             editType: 'calc+arraydraw',
             colorEditType: 'arraydraw',

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;
 
 
@@ -35,24 +36,11 @@ var FROM_TL = require('../../constants/alignment').FROM_TL;
 // if opt is blank, val can be 'add' or a full options object to add a new
 //  annotation at that point in the array, or 'remove' to delete this one
 
-var shapeLabelTemplateVars = {
-    x0: (function(shape) { return shape.x0; }),
-    x1: (function(shape) { return shape.x1; }),
-    y0: (function(shape) { return shape.y0; }),
-    y1: (function(shape) { return shape.y1; }),
-    slope: (function(shape) { return (shape.y1 - shape.y0) / (shape.x1 - shape.x0); }),
-    width: (function(shape) { return shape.x1 - shape.x0; }),
-    height: (function(shape) { return shape.y1 - shape.y0; }),
-    length: (function(shape) { return Math.sqrt(Math.pow((shape.x1 - shape.x0), 2) + Math.pow((shape.y1 - shape.y0), 2)); }),
-    xcenter: (function(shape) { return (shape.x1 - shape.x0) / 2; }),
-    ycenter: (function(shape) { return (shape.y1 - shape.y0) / 2; }),
-};
-
 module.exports = {
     draw: draw,
     drawOne: drawOne,
     eraseActiveShape: eraseActiveShape,
-    shapeLabelTemplateVars: Object.keys(shapeLabelTemplateVars),
+    drawLabel: drawLabel,
 };
 
 function draw(gd) {
@@ -627,8 +615,11 @@ function drawLabel(gd, index, options, shapeGroup) {
     if(options.label.texttemplate) {
         var templateValues = {};
         if(options.type !== 'path') {
-            Object.keys(shapeLabelTemplateVars).forEach(function(key) {
-                templateValues[key] = shapeLabelTemplateVars[key](options);
+            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,

src/components/shapes/draw_newshape/attributes.js

@@ -2,9 +2,10 @@
 
 var fontAttrs = require('../../../plots/font_attributes');
 var dash = require('../../drawing/attributes').dash;
-var templateFormatStringDescriptionForShapes = require('../../../plots/template_attributes').templateFormatStringDescriptionForShapes;
-var describeVariables = require('../../../plots/template_attributes').describeVariables;
 var extendFlat = require('../../../lib/extend').extendFlat;
+var shapeTexttemplateAttrs = require('../../../plots/template_attributes').shapeTexttemplateAttrs;
+var shapeLabelTexttemplateVars = require('../label_texttemplate').shapeLabelTexttemplateVars;
+
 
 module.exports = {
     newshape: {
@@ -88,17 +89,7 @@ module.exports = {
                 editType: 'none',
                 description: 'Sets the text to display with the new shape.'
             },
-            texttemplate: {
-                valType: 'string',
-                dflt: '',
-                editType: 'none',
-                description: [
-                    'Template string used for rendering the new shape\'s label.',
-                    'Note that this will override `text`.',
-                    templateFormatStringDescriptionForShapes(),
-                    describeVariables(['x0', 'y0', 'x1', 'y1', 'slope']),
-                ].join(' ')
-            },
+            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/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

@@ -1178,7 +1178,7 @@ function templateFormatString(string, labels, d3locale) {
 
         // Apply mult/div operation (if applicable)
         if(parsedOp) {
-            value = {
+            value = (value === undefined) ? undefined : {
                 '*': (function(v) { return v * parsedNumber; }),
                 '/': (function(v) { return v / parsedNumber; }),
             }[parsedOp](value);

src/plots/template_attributes.js

@@ -23,18 +23,21 @@ function templateFormatStringDescription(opts) {
     ].join(' ');
 }
 
-function templateFormatStringDescriptionForShapes() {
+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}".',
         FORMAT_LINK,
         'for details on the formatting syntax.',
-        'A single multiplication or division operation may be applied to the variable, and combined with',
-        'd3 number formatting, for example "Length in cm: %{x0*2.54}", "%{slope*60:.1f} meters per second."'
+        'Dates are formatted using d3-time-format\'s syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}".',
+        DATE_FORMAT_LINK,
+        '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(' ');
 }
-exports.templateFormatStringDescriptionForShapes = templateFormatStringDescriptionForShapes;
 
 function describeVariables(extra) {
     var descPart = extra.description ? ' ' + extra.description : '';
@@ -46,14 +49,13 @@ 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;
 }
-exports.describeVariables = describeVariables;
 
 exports.hovertemplateAttrs = function(opts, extra) {
     opts = opts || {};
@@ -108,3 +110,30 @@ 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(' ')
+    };
+
+    if(opts.arrayOk !== false) {
+        texttemplate.arrayOk = true;
+    }
+    return texttemplate;
+};