provide underscore other keys to add optional space before or after

Author: archmoj

src/lib/index.js

@@ -1043,14 +1043,31 @@ function templateFormatString(string, labels, d3locale) {
     // just in case it speeds things up *slightly*:
     var getterCache = {};
 
-
-    return string.replace(lib.TEMPLATE_STRING_REGEX, function(match, key, format) {
+    return string.replace(lib.TEMPLATE_STRING_REGEX, function(match, rawKey, format) {
         var isOther =
-            key === 'xother' ||
-            key === 'yother';
+            rawKey === 'xother' ||
+            rawKey === 'yother';
+
+        var isSpaceOther =
+            rawKey === '_xother' ||
+            rawKey === '_yother';
+
+        var isSpaceOtherSpace =
+            rawKey === '_xother_' ||
+            rawKey === '_yother_';
+
+        var isOtherSpace =
+            rawKey === 'xother_' ||
+            rawKey === 'yother_';
+
+        var hasOther = isOther || isSpaceOther || isOtherSpace || isSpaceOtherSpace;
+
+        var key = rawKey;
+        if(isSpaceOther || isSpaceOtherSpace) key = key.substring(1);
+        if(isOtherSpace || isSpaceOtherSpace) key = key.substring(0, key.length - 1);
 
         var value;
-        if(isOther) {
+        if(hasOther) {
             value = labels[key];
             if(value === undefined) return '';
         } else {
@@ -1103,8 +1120,10 @@ function templateFormatString(string, labels, d3locale) {
             if(labels.hasOwnProperty(keyLabel)) value = labels[keyLabel];
         }
 
-        if(isOther) {
-            value = ' (' + value + ') ';
+        if(hasOther) {
+            value = '(' + value + ')';
+            if(isSpaceOther || isSpaceOtherSpace) value = ' ' + value;
+            if(isOtherSpace || isSpaceOtherSpace) value = value + ' ';
         }
 
         return value;

src/plots/template_attributes.js

@@ -9,7 +9,11 @@ function templateFormatStringDescription(opts) {
 
     return [
         'Variables are inserted using %{variable},',
-        'for example "y: %{y}".' + (supportOther ? ' as well as %{xother} when positions do not match' : ''),
+        'for example "y: %{y}"' + (
+            supportOther ?
+                ' as well as %{xother}, {%_xother}, {%_xother_}, {%xother_}, when positions do not match. Please note that underscore could be used before or after *(x|y)other* to provide optional space.' :
+                '.'
+        ),
         'Numbers are formatted using d3-format\'s syntax %{variable:d3-format}, for example "Price: %{y:$.2f}".',
         FORMAT_LINK,
         'for details on the formatting syntax.',

test/jasmine/tests/hover_label_test.js

@@ -4834,17 +4834,27 @@ describe('hovermode: (x|y)unified', function() {
     it('should format differing position using *xother* `hovertemplate` and in respect to `xhoverformat`', function(done) {
         Plotly.newPlot(gd, [{
             type: 'bar',
-            hovertemplate: '%{y:.1f}%{xother:.2f}',
+            hovertemplate: '%{y}%{_xother:.2f}',
             x: [0, 1.001],
-            y: [1.001, 2.001]
+            y: [2, 1]
         }, {
             x: [0, 0.749],
-            y: [1.999, 0.999]
+            y: [1, 2]
         }, {
-            hovertemplate: '%{y:.1f}%{xother}',
+            hovertemplate: '(x)y:%{xother}%{y}',
             xhoverformat: '.1f',
             x: [0, 1.251],
-            y: [2.001, 3.001]
+            y: [2, 3]
+        }, {
+            hovertemplate: '(x)y:%{xother_}%{y}',
+            xhoverformat: '.2f',
+            x: [0, 1.351],
+            y: [3, 4]
+        }, {
+            hovertemplate: '(x)y:%{_xother_}%{y}',
+            xhoverformat: '.3f',
+            x: [0, 1.451],
+            y: [4, 5]
         }], {
             hoverdistance: -1,
             hovermode: 'x unified',
@@ -4860,26 +4870,32 @@ describe('hovermode: (x|y)unified', function() {
         })
         .then(function() {
             _hover(gd, { xpx: 100, ypx: 200 });
-            assertLabel({title: '0', items: [
-                'trace 0 : 1.0',
-                'trace 1 : 1.999',
-                'trace 2 : 2.0 (0.0) '
+            assertLabel({title: '0.000', items: [
+                'trace 0 : 2 (0.00)',
+                'trace 1 : (0, 1)',
+                'trace 2 : (x)y:(0.0)2',
+                'trace 3 : (x)y:(0.00) 3',
+                'trace 4 : (x)y:4',
             ]});
         })
         .then(function() {
             _hover(gd, { xpx: 250, ypx: 200 });
             assertLabel({title: '0.749', items: [
-                'trace 0 : 2.0 (1.00) ',
-                'trace 1 : 0.999',
-                'trace 2 : 3.0 (1.3) '
+                'trace 0 : 1 (1.00)',
+                'trace 1 : 2',
+                'trace 2 : (x)y:(1.3)3',
+                'trace 3 : (x)y:(1.35) 4',
+                'trace 4 : (x)y: (1.451) 5',
             ]});
         })
         .then(function() {
             _hover(gd, { xpx: 350, ypx: 200 });
-            assertLabel({title: '1.3', items: [
-                'trace 0 : 2.0 (1.00) ',
-                'trace 1 : (0.749, 0.999)',
-                'trace 2 : 3.0'
+            assertLabel({title: '1.35', items: [
+                'trace 0 : 1 (1.00)',
+                'trace 1 : (0.749, 2)',
+                'trace 2 : (x)y:(1.3)3',
+                'trace 3 : (x)y:4',
+                'trace 4 : (x)y: (1.451) 5',
             ]});
         })
         .then(done, done.fail);