Merge branch 'winh-translate-contributors-page-dates' into 'master'

Translate contributors page dates

Closes #39283 and #38592

See merge request gitlab-org/gitlab-ce!15846

4 files changed, 78 insertions, 14 deletions

diff --git a/app/assets/javascripts/graphs/stat_graph_contributors.js b/app/assets/javascripts/graphs/stat_graph_contributors.js
index e7232ca3712..743c049e9fb 100644
--- a/app/assets/javascripts/graphs/stat_graph_contributors.js
+++ b/app/assets/javascripts/graphs/stat_graph_contributors.js
@@ -1,13 +1,14 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, camelcase, one-var-declaration-per-line, quotes, no-param-reassign, quote-props, comma-dangle, prefer-template, max-len, no-return-assign, no-shadow */
 
 import _ from 'underscore';
-import d3 from 'd3';
 import { ContributorsGraph, ContributorsAuthorGraph, ContributorsMasterGraph } from './stat_graph_contributors_graph';
 import ContributorsStatGraphUtil from './stat_graph_contributors_util';
-import { n__ } from '../locale';
+import { n__, s__, createDateTimeFormat, sprintf } from '../locale';
 
 export default (function() {
-  function ContributorsStatGraph() {}
+  function ContributorsStatGraph() {
+    this.dateFormat = createDateTimeFormat({ year: 'numeric', month: 'long', day: 'numeric' });
+  }
 
   ContributorsStatGraph.prototype.init = function(log) {
     var author_commits, total_commits;
@@ -95,11 +96,15 @@ export default (function() {
   };
 
   ContributorsStatGraph.prototype.change_date_header = function() {
-    var print, print_date_format, x_domain;
-    x_domain = ContributorsGraph.prototype.x_domain;
-    print_date_format = d3.time.format("%B %e %Y");
-    print = print_date_format(x_domain[0]) + " - " + print_date_format(x_domain[1]);
-    return $("#date_header").text(print);
+    const x_domain = ContributorsGraph.prototype.x_domain;
+    const formattedDateRange = sprintf(
+      s__('ContributorsPage|%{startDate} – %{endDate}'),
+      {
+        startDate: this.dateFormat.format(new Date(x_domain[0])),
+        endDate: this.dateFormat.format(new Date(x_domain[1])),
+      },
+    );
+    return $('#date_header').text(formattedDateRange);
   };
 
   ContributorsStatGraph.prototype.redraw_author_commit_info = function(author) {
diff --git a/app/assets/javascripts/graphs/stat_graph_contributors_graph.js b/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
index f64b4638485..187f3c008e8 100644
--- a/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
+++ b/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
@@ -1,6 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, max-len, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, comma-dangle, no-return-assign, prefer-arrow-callback, quotes, prefer-template, newline-per-chained-call, no-else-return, no-shadow */
 import _ from 'underscore';
 import d3 from 'd3';
+import { dateTickFormat } from '../lib/utils/tick_formats';
 
 const extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 const hasProp = {}.hasOwnProperty;
@@ -93,9 +94,12 @@ export const ContributorsMasterGraph = (function(superClass) {
   extend(ContributorsMasterGraph, superClass);
 
   function ContributorsMasterGraph(data1) {
+    const $parentElement = $('#contributors-master');
+    const parentPadding = parseFloat($parentElement.css('padding-left')) + parseFloat($parentElement.css('padding-right'));
+
     this.data = data1;
     this.update_content = this.update_content.bind(this);
-    this.width = $('.content').width() - 70;
+    this.width = $('.content').width() - parentPadding - (this.MARGIN.left + this.MARGIN.right);
     this.height = 200;
     this.x = null;
     this.y = null;
@@ -131,7 +135,10 @@ export const ContributorsMasterGraph = (function(superClass) {
   };
 
   ContributorsMasterGraph.prototype.create_axes = function() {
-    this.x_axis = d3.svg.axis().scale(this.x).orient("bottom");
+    this.x_axis = d3.svg.axis()
+      .scale(this.x)
+      .orient('bottom')
+      .tickFormat(dateTickFormat);
     return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
   };
 
@@ -219,7 +226,11 @@ export const ContributorsAuthorGraph = (function(superClass) {
   };
 
   ContributorsAuthorGraph.prototype.create_axes = function() {
-    this.x_axis = d3.svg.axis().scale(this.x).orient("bottom").ticks(8);
+    this.x_axis = d3.svg.axis()
+      .scale(this.x)
+      .orient('bottom')
+      .ticks(8)
+      .tickFormat(dateTickFormat);
     return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
   };
 
diff --git a/app/assets/javascripts/lib/utils/tick_formats.js b/app/assets/javascripts/lib/utils/tick_formats.js
new file mode 100644
index 00000000000..0c10a85e336
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/tick_formats.js
@@ -0,0 +1,39 @@
+import { createDateTimeFormat } from '../../locale';
+
+let dateTimeFormats;
+
+export const initDateFormats = () => {
+  const dayFormat = createDateTimeFormat({ month: 'short', day: 'numeric' });
+  const monthFormat = createDateTimeFormat({ month: 'long' });
+  const yearFormat = createDateTimeFormat({ year: 'numeric' });
+
+  dateTimeFormats = {
+    dayFormat,
+    monthFormat,
+    yearFormat,
+  };
+};
+
+initDateFormats();
+
+/**
+  Formats a localized date in way that it can be used for d3.js axis.tickFormat().
+
+  That is, it displays
+  - 4-digit for first of January
+  - full month name for first of every month
+  - day and abbreviated month otherwise
+
+  see also https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Axes.md#tickFormat
+  */
+export const dateTickFormat = (date) => {
+  if (date.getDate() !== 1) {
+    return dateTimeFormats.dayFormat.format(date);
+  }
+
+  if (date.getMonth() > 0) {
+    return dateTimeFormats.monthFormat.format(date);
+  }
+
+  return dateTimeFormats.yearFormat.format(date);
+};
diff --git a/app/assets/javascripts/locale/index.js b/app/assets/javascripts/locale/index.js
index 1003b9ba0af..2f4328b56e1 100644
--- a/app/assets/javascripts/locale/index.js
+++ b/app/assets/javascripts/locale/index.js
@@ -1,8 +1,7 @@
 import Jed from 'jed';
 import sprintf from './sprintf';
 
-const langAttribute = document.querySelector('html').getAttribute('lang');
-const lang = (langAttribute || 'en').replace(/-/g, '_');
+const languageCode = () => document.querySelector('html').getAttribute('lang') || 'en';
 const locale = new Jed(window.translations || {});
 delete window.translations;
 
@@ -47,9 +46,19 @@ const pgettext = (keyOrContext, key) => {
   return translated[translated.length - 1];
 };
 
-export { lang };
+/**
+  Creates an instance of Intl.DateTimeFormat for the current locale.
+
+  @param formatOptions for available options, please see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
+  @returns {Intl.DateTimeFormat}
+*/
+const createDateTimeFormat =
+  formatOptions => Intl.DateTimeFormat(languageCode(), formatOptions);
+
+export { languageCode };
 export { gettext as __ };
 export { ngettext as n__ };
 export { pgettext as s__ };
 export { sprintf };
+export { createDateTimeFormat };
 export default locale;