Localize auto-formatted x-axis date ticks

Author: TomDemulierChevret

lib/locales/fr.js

@@ -23,6 +23,10 @@ module.exports = {
             'Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun',
             'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'
         ],
-        date: '%d/%m/%Y'
+        date: '%d/%m/%Y',
+        year: '%Y',
+        month: '%b %Y',
+        dayMonth: '%e %b',
+        dayMonthYear: '%e %b %Y'
     }
 };

src/lib/dates.js

@@ -433,17 +433,27 @@ function formatTime(x, tr) {
     return timeStr;
 }
 
-// TODO: do these strings need to be localized?
-// ie this gives "Dec 13, 2017" but some languages may want eg "13-Dec 2017"
-var yearFormatD3 = '%Y';
-var monthFormatD3 = '%b %Y';
-var dayFormatD3 = '%b %-d';
-var yearMonthDayFormatD3 = '%b %-d, %Y';
-
-function yearFormatWorld(cDate) { return cDate.formatDate('yyyy'); }
-function monthFormatWorld(cDate) { return cDate.formatDate('M yyyy'); }
-function dayFormatWorld(cDate) { return cDate.formatDate('M d'); }
-function yearMonthDayFormatWorld(cDate) { return cDate.formatDate('M d, yyyy'); }
+/*
+ * formatWorld: format a calendar date using the d3 format syntax.
+ *
+ *   cDate: the date to format
+ *   d3Format: the d3 format
+ *
+ * returns the formatted date
+ */
+function formatWorld(cDate, d3Format) {
+    var d3ToC = [
+        {d3: '%Y', c: 'yyyy'},
+        {d3: '%b', c: 'M'},
+        {d3: '%-d', c: 'd'},
+        {d3: '%e', c: 'd'}
+    ];
+    var calendarFormat = d3Format;
+    for (var i = 0; i < d3ToC.length; i++) {
+        calendarFormat = calendarFormat.replace(new RegExp(d3ToC[i].d3,"g"), d3ToC[i].c);
+    }
+    return cDate.formatDate(calendarFormat);
+}
 
 /*
  * formatDate: turn a date into tick or hover label text.
@@ -462,7 +472,7 @@ function yearMonthDayFormatWorld(cDate) { return cDate.formatDate('M d, yyyy');
  * the axis may choose to strip things after it when they don't change from
  * one tick to the next (as it does with automatic formatting)
  */
-exports.formatDate = function(x, fmt, tr, formatter, calendar) {
+exports.formatDate = function(x, fmt, tr, formatter, calendar, extraFormat) {
     var headStr,
         dateStr;
 
@@ -476,14 +486,14 @@ exports.formatDate = function(x, fmt, tr, formatter, calendar) {
                 cDate = Registry.getComponentMethod('calendars', 'getCal')(calendar)
                     .fromJD(dateJD);
 
-            if(tr === 'y') dateStr = yearFormatWorld(cDate);
-            else if(tr === 'm') dateStr = monthFormatWorld(cDate);
+            if(tr === 'y') dateStr = formatWorld(cDate, extraFormat.year);
+            else if(tr === 'm') dateStr = formatWorld(cDate, extraFormat.month);
             else if(tr === 'd') {
-                headStr = yearFormatWorld(cDate);
-                dateStr = dayFormatWorld(cDate);
+                headStr = formatWorld(cDate, extraFormat.year);
+                dateStr = formatWorld(cDate, extraFormat.dayMonth);
             }
             else {
-                headStr = yearMonthDayFormatWorld(cDate);
+                headStr = formatWorld(cDate, extraFormat.dayMonthYear);
                 dateStr = formatTime(x, tr);
             }
         }
@@ -492,14 +502,14 @@ exports.formatDate = function(x, fmt, tr, formatter, calendar) {
     else {
         var d = new Date(Math.floor(x + 0.05));
 
-        if(tr === 'y') dateStr = formatter(yearFormatD3)(d);
-        else if(tr === 'm') dateStr = formatter(monthFormatD3)(d);
+        if(tr === 'y') dateStr = formatter(extraFormat.year)(d);
+        else if(tr === 'm') dateStr = formatter(extraFormat.month)(d);
         else if(tr === 'd') {
-            headStr = formatter(yearFormatD3)(d);
-            dateStr = formatter(dayFormatD3)(d);
+            headStr = formatter(extraFormat.year)(d);
+            dateStr = formatter(extraFormat.dayMonth)(d);
         }
         else {
-            headStr = formatter(yearMonthDayFormatD3)(d);
+            headStr = formatter(extraFormat.dayMonthYear)(d);
             dateStr = formatTime(x, tr);
         }
     }

src/locale-en.js

@@ -1,10 +1,10 @@
 /**
-* Copyright 2012-2018, Plotly, Inc.
-* All rights reserved.
-*
-* This source code is licensed under the MIT license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright 2012-2018, Plotly, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
 'use strict';
 
@@ -32,6 +32,10 @@ module.exports = {
         decimal: '.',
         thousands: ',',
         grouping: [3],
-        currency: ['$', '']
+        currency: ['$', ''],
+        year: '%Y',
+        month: '%b %Y',
+        dayMonth: '%b %e',
+        dayMonthYear: '%b %e, %Y'
     }
 };

src/plots/cartesian/axes.js

@@ -1292,7 +1292,7 @@ function formatDate(ax, out, hover, extraPrecision) {
         else tr = {y: 'm', m: 'd', d: 'M', M: 'S', S: 4}[tr];
     }
 
-    var dateStr = Lib.formatDate(out.x, fmt, tr, ax._dateFormat, ax.calendar),
+    var dateStr = Lib.formatDate(out.x, fmt, tr, ax._dateFormat, ax.calendar, ax._extraFormat),
         headStr;
 
     var splitIndex = dateStr.indexOf('\n');

src/plots/cartesian/set_convert.js

@@ -457,6 +457,7 @@ module.exports = function setConvert(ax, fullLayout) {
     var locale = fullLayout._d3locale;
     if(ax.type === 'date') {
         ax._dateFormat = locale ? locale.timeFormat.utc : d3.time.format.utc;
+        ax._extraFormat = fullLayout._extraFormat;
     }
     // occasionally we need _numFormat to pass through
     // even though it won't be needed by this axis

src/plots/plots.js

@@ -305,7 +305,7 @@ plots.supplyDefaults = function(gd) {
     };
     newFullLayout._traceWord = _(gd, 'trace');
 
-    var formatObj = getD3FormatObj(gd);
+    var formatObj = getFormatObj(gd, d3FormatKeys);
 
     // first fill in what we can of layout without looking at data
     // because fullData needs a few things from layout
@@ -342,6 +342,7 @@ plots.supplyDefaults = function(gd) {
     }
 
     newFullLayout._d3locale = getFormatter(formatObj, newFullLayout.separators);
+    newFullLayout._extraFormat = getFormatObj(gd, extraFormatKeys);
 
     newFullLayout._initialAutoSizeIsDone = true;
 
@@ -481,21 +482,28 @@ function remapTransformedArrays(cd0, newTrace) {
     }
 }
 
-var formatKeys = [
+var d3FormatKeys = [
     'days', 'shortDays', 'months', 'shortMonths', 'periods',
     'dateTime', 'date', 'time',
     'decimal', 'thousands', 'grouping', 'currency'
 ];
 
+var extraFormatKeys = [
+    'year', 'month', 'dayMonth', 'dayMonthYear'
+];
+
 /**
- * getD3FormatObj: use _context to get the d3.locale argument object.
+ * getFormatObj: use _context to get the format object from locale.
+ * Used to get d3.locale argument object and extraFormat argument object
+ *
+ * Regarding d3.locale argument :
  * decimal and thousands can be overridden later by layout.separators
  * grouping and currency are not presently used by our automatic number
  * formatting system but can be used by custom formats.
  *
  * @returns {object} d3.locale format object
  */
-function getD3FormatObj(gd) {
+function getFormatObj(gd, formatKeys) {
     var locale = gd._context.locale;
     if(!locale) locale === 'en-US';