From c0a70368036fe541bebe95b94f21cd7e41709e82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Camilo=20Gonz=C3=A1lez?= <info@juancgonzalez.com>
Date: Sun, 29 Nov 2020 18:28:24 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90=20Translate=20JS=20dates=20&=20pro?=
 =?UTF-8?q?pose=20utility=20for=20d3=20locale?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/utilities.js         | 18 ++++++++++++++++--
 src/components/TimelineAxis.jsx |  3 ++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/common/utilities.js b/src/common/utilities.js
index ba931ad..026e5fc 100644
--- a/src/common/utilities.js
+++ b/src/common/utilities.js
@@ -397,7 +397,7 @@ export function makeNiceDate (datetime) {
   if (datetime === null) return null
   // see https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date
   const dateTimeFormat = new Intl.DateTimeFormat(
-    'en',
+    process.env.store.app.language,
     { year: 'numeric', month: 'long', day: '2-digit' }
   )
   const [
@@ -406,5 +406,19 @@ export function makeNiceDate (datetime) {
     { value: year }
   ] = dateTimeFormat.formatToParts(datetime)
 
-  return `${day} ${month} ${year}`
+  return `${day} ${month}, ${year}`
 }
+
+/**
+ * Sets the default locale for d3 to format dates in each available language.
+ * @param {Object} d3 - An instance of D3
+ */
+export function setD3Locale(d3) {
+  const languages = {
+    'es-MX': require('./data/es-MX.json')
+  }
+
+  if (process.env.store.app.language !== 'es-US' && languages[process.env.store.app.language]) {
+    d3.timeFormatDefaultLocale(languages[process.env.store.app.language]);
+  }
+}
\ No newline at end of file
diff --git a/src/components/TimelineAxis.jsx b/src/components/TimelineAxis.jsx
index 64c9aef..44ad71f 100644
--- a/src/components/TimelineAxis.jsx
+++ b/src/components/TimelineAxis.jsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import * as d3 from 'd3'
+import { setD3Locale } from '../common/utilities';
 
 const TEXT_HEIGHT = 15
-
+setD3Locale(d3);
 class TimelineAxis extends React.Component {
   constructor () {
     super()