support formatting date in (hover|text)template

Author: antoinerg

src/components/fx/hovertemplate_attributes.js

@@ -9,6 +9,7 @@
 'use strict';
 
 var FORMAT_LINK = require('../../constants/docs').FORMAT_LINK;
+var DATE_FORMAT_LINK = require('../../constants/docs').DATE_FORMAT_LINK;
 
 module.exports = function(opts, extra) {
     opts = opts || {};
@@ -41,6 +42,9 @@ module.exports = function(opts, extra) {
             'Numbers are formatted using d3-format\'s syntax %{variable:d3-format}, for example "Price: %{y:$.2f}".',
             FORMAT_LINK,
             'for details on the formatting syntax.',
+            'Dates are formatted using d3-time-format\'s syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}".',
+            DATE_FORMAT_LINK,
+            'for details on the date 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.',
             'Additionally, every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available.',
             descPart,

src/lib/index.js

@@ -964,7 +964,7 @@ lib.numSeparate = function(value, separators, separatethousands) {
     return x1 + x2;
 };
 
-lib.TEMPLATE_STRING_REGEX = /%{([^\s%{}:]*)(:[^}]*)?}/g;
+lib.TEMPLATE_STRING_REGEX = /%{([^\s%{}:]*)([:|\|][^}]*)?}/g;
 var SIMPLE_PROPERTY_REGEX = /^\w*$/;
 
 /**
@@ -1011,7 +1011,7 @@ lib.texttemplateString = function() {
     return templateFormatString.apply(texttemplateWarnings, arguments);
 };
 
-var TEMPLATE_STRING_FORMAT_SEPARATOR = /^:/;
+var TEMPLATE_STRING_FORMAT_SEPARATOR = /^[:|\|]/;
 /**
  * Substitute values from an object into a string and optionally formats them using d3-format,
  * or fallback to associated labels.
@@ -1067,12 +1067,20 @@ function templateFormatString(string, labels, d3locale) {
 
         if(format) {
             var fmt;
-            if(d3locale) {
-                fmt = d3locale.numberFormat;
-            } else {
-                fmt = d3.format;
+            if(format[0] === ':') {
+                if(d3locale) {
+                    fmt = d3locale.numberFormat;
+                } else {
+                    fmt = d3.format;
+                }
+                value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value);
+            }
+
+            if(format[0] === '|') {
+                fmt = d3.time.format.utc;
+                var ms = lib.dateTime2ms(value);
+                value = lib.formatDate(ms, format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''), false, fmt);
             }
-            value = fmt(format.replace(TEMPLATE_STRING_FORMAT_SEPARATOR, ''))(value);
         } else {
             if(labels.hasOwnProperty(key + 'Label')) value = labels[key + 'Label'];
         }

src/plots/texttemplate_attributes.js

@@ -9,6 +9,7 @@
 'use strict';
 
 var FORMAT_LINK = require('../constants/docs').FORMAT_LINK;
+var DATE_FORMAT_LINK = require('../constants/docs').DATE_FORMAT_LINK;
 
 module.exports = function(opts, extra) {
     opts = opts || {};
@@ -42,6 +43,9 @@ module.exports = function(opts, extra) {
             'Numbers are formatted using d3-format\'s syntax %{variable:d3-format}, for example "Price: %{y:$.2f}".',
             FORMAT_LINK,
             'for details on the formatting syntax.',
+            'Dates are formatted using d3-time-format\'s syntax %{variable|d3-time-format}, for example "Day: %{2019-01-01|%A}".',
+            DATE_FORMAT_LINK,
+            'for details on the date formatting syntax.',
             'Every attributes that can be specified per-point (the ones that are `arrayOk: true`) are available.',
             descPart
         ].join(' ')

test/jasmine/tests/lib_test.js

@@ -2225,12 +2225,17 @@ describe('Test lib.js:', function() {
             expect(Lib.hovertemplateString('y: %{y}', {}, locale, {y: 0}, {y: 1})).toEqual('y: 0');
         });
 
-        it('formats value using d3 mini-language', function() {
+        it('formats numbers using d3-format mini-language when `:`', function() {
             expect(Lib.hovertemplateString('a: %{a:.0%}', {}, locale, {a: 0.123})).toEqual('a: 12%');
             expect(Lib.hovertemplateString('a: %{a:0.2%}', {}, locale, {a: 0.123})).toEqual('a: 12.30%');
             expect(Lib.hovertemplateString('b: %{b:2.2f}', {}, locale, {b: 43})).toEqual('b: 43.00');
         });
 
+        it('formats date using d3-time-format mini-language `|`', function() {
+            expect(Lib.hovertemplateString('a: %{a|%A}', {}, locale, {a: '2019-05-22'})).toEqual('a: Wednesday');
+            expect(Lib.hovertemplateString('%{x|%b %-d, %Y}', {}, locale, {x: '2019-01-01'})).toEqual('Jan 1, 2019');
+        });
+
         it('looks for default label if no format is provided', function() {
             expect(Lib.hovertemplateString('y: %{y}', {yLabel: '0.1'}, locale, {y: 0.123})).toEqual('y: 0.1');
         });