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()