Merge branch 'master' into move-gl-dropdownmove-gl-dropdown

2 files changed, 52 insertions, 5 deletions

diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js
index 198b5164c92..1fa6715180e 100644
--- a/app/assets/javascripts/lib/utils/datetime_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime_utility.js
@@ -2,7 +2,7 @@ import timeago from 'timeago.js';
 import dateFormat from 'vendor/date.format';
 import { pluralize } from './text_utility';
 import {
-  lang,
+  languageCode,
   s__,
 } from '../../locale';
 
@@ -24,7 +24,15 @@ export const getDayName = date => ['Sunday', 'Monday', 'Tuesday', 'Wednesday', '
  */
 export const formatDate = datetime => dateFormat(datetime, 'mmm d, yyyy h:MMtt Z');
 
+/**
+ * Timeago uses underscores instead of dashes to separate language from country code.
+ *
+ * see https://github.com/hustcc/timeago.js/tree/v3.0.0/locales
+ */
+const timeagoLanguageCode = languageCode().replace(/-/g, '_');
+
 let timeagoInstance;
+
 /**
  * Sets a timeago Instance
  */
@@ -67,8 +75,8 @@ export function getTimeago() {
       ][index];
     };
 
-    timeago.register(lang, locale);
-    timeago.register(`${lang}-remaining`, localeRemaining);
+    timeago.register(timeagoLanguageCode, locale);
+    timeago.register(`${timeagoLanguageCode}-remaining`, localeRemaining);
     timeagoInstance = timeago();
   }
 
@@ -83,7 +91,7 @@ export const renderTimeago = ($els) => {
   const timeagoEls = $els || document.querySelectorAll('.js-timeago-render');
 
   // timeago.js sets timeouts internally for each timeago value to be updated in real time
-  getTimeago().render(timeagoEls, lang);
+  getTimeago().render(timeagoEls, timeagoLanguageCode);
 };
 
 /**
@@ -118,7 +126,7 @@ export const timeFor = (time, expiredLabel) => {
   if (new Date(time) < new Date()) {
     return expiredLabel || s__('Timeago|Past due');
   }
-  return getTimeago().format(time, `${lang}-remaining`).trim();
+  return getTimeago().format(time, `${timeagoLanguageCode}-remaining`).trim();
 };
 
 export const getDayDifference = (a, b) => {
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);
+};