From ef1858cb1cba61f0e30c49a197d4c9a510dc229b Mon Sep 17 00:00:00 2001
From: jeremyphilemon <jeremyphilemon@outlook.com>
Date: Fri, 15 May 2020 04:40:07 +0300
Subject: [PATCH] Feat: Localize x-axis in timeseries.

---
 all_locales.json              |  3 ++-
 missing_locales.json          |  6 ------
 src/components/mapexplorer.js |  2 +-
 src/components/row.js         | 19 +++++--------------
 src/components/timeseries.js  | 10 +++++++++-
 src/utils/commonfunctions.js  |  6 ++++++
 6 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/all_locales.json b/all_locales.json
index d32684ae2e..f015e120fd 100644
--- a/all_locales.json
+++ b/all_locales.json
@@ -809,5 +809,6 @@
   "Open Sourced on GitHub": "Open Sourced on GitHub",
   "Crowdsourced Patient Database": "Crowdsourced Patient Database",
   "View updates on Twitter": "View updates on Twitter",
-  "Join Telegram to Collaborate!": "Join Telegram to Collaborate!"
+  "Join Telegram to Collaborate!": "Join Telegram to Collaborate!",
+  "Back": "Back"
 }
diff --git a/missing_locales.json b/missing_locales.json
index f6d4dd6155..e69de29bb2 100644
--- a/missing_locales.json
+++ b/missing_locales.json
@@ -1,6 +0,0 @@
-{
-  "Open Sourced on GitHub": "Open Sourced on GitHub",
-  "Crowdsourced Patient Database": "Crowdsourced Patient Database",
-  "View updates on Twitter": "View updates on Twitter",
-  "Join Telegram to Collaborate!": "Join Telegram to Collaborate!"
-}
diff --git a/src/components/mapexplorer.js b/src/components/mapexplorer.js
index 5fb28a2e4e..d7009fb7d3 100644
--- a/src/components/mapexplorer.js
+++ b/src/components/mapexplorer.js
@@ -494,7 +494,7 @@ function MapExplorer({
             className="button back-button"
             onClick={() => switchMapToState('India')}
           >
-            Back
+            {t('Back')}
           </div>
         ) : null}
 
diff --git a/src/components/row.js b/src/components/row.js
index 8bb8f17808..d36ee1febf 100644
--- a/src/components/row.js
+++ b/src/components/row.js
@@ -1,19 +1,14 @@
-import {
-  STATE_ROW_STATISTICS,
-  DISTRICT_ROW_STATISTICS,
-  LOCALE_SHORTHANDS,
-} from '../constants';
+import {STATE_ROW_STATISTICS, DISTRICT_ROW_STATISTICS} from '../constants';
 import {
   formatDate,
   formatNumber,
+  formatLastUpdated,
   capitalize,
   abbreviate,
 } from '../utils/commonfunctions';
 
 import classnames from 'classnames';
-import {formatDistance} from 'date-fns';
 import equal from 'fast-deep-equal';
-import i18n from 'i18next';
 import React, {useState, useCallback, useMemo} from 'react';
 import * as Icon from 'react-feather';
 import {useTranslation} from 'react-i18next';
@@ -309,12 +304,8 @@ function Row({
               <p>
                 {isNaN(Date.parse(formatDate(state.lastupdatedtime)))
                   ? ''
-                  : `${t('Last updated')} ${formatDistance(
-                      new Date(formatDate(state.lastupdatedtime)),
-                      new Date(),
-                      {
-                        locale: LOCALE_SHORTHANDS[i18n.language],
-                      }
+                  : `${t('Last updated')} ${formatLastUpdated(
+                      state.lastupdatedtime
                     )} ${t('ago')}`}
               </p>
               {sortedDistricts?.Unknown && (
@@ -332,7 +323,7 @@ function Row({
                 history.push(`state/${state.statecode}`);
               }}
             >
-              {t('See more details on {{state}}', {state: state.state})}
+              {t('See more details on {{state}}', {state: t(state.state)})}
             </td>
           </tr>
 
diff --git a/src/components/timeseries.js b/src/components/timeseries.js
index 0044ba8e41..2f0a4da172 100644
--- a/src/components/timeseries.js
+++ b/src/components/timeseries.js
@@ -4,6 +4,7 @@ import {
   sliceTimeseriesFromEnd,
   formatNumber,
   formatTimeseriesDate,
+  formatTimeseriesTickX,
 } from '../utils/commonfunctions';
 import {useResizeObserver} from '../utils/hooks';
 
@@ -86,7 +87,14 @@ function TimeSeries({timeseriesProp, chartType, mode, logMode, isTotal}) {
       const numTicksX = width < 480 ? 4 : 7;
 
       const xAxis = (g) =>
-        g.attr('class', 'x-axis').call(d3.axisBottom(xScale).ticks(numTicksX));
+        g.attr('class', 'x-axis').call(
+          d3
+            .axisBottom(xScale)
+            .ticks(numTicksX)
+            .tickFormat((tick) => {
+              return formatTimeseriesTickX(tick);
+            })
+        );
 
       const xAxis2 = (g, yScale) => {
         g.attr('class', 'x-axis2')
diff --git a/src/utils/commonfunctions.js b/src/utils/commonfunctions.js
index 2f67b50b35..8989d6b98f 100644
--- a/src/utils/commonfunctions.js
+++ b/src/utils/commonfunctions.js
@@ -66,6 +66,12 @@ export const formatTimeseriesDate = (unformattedDate) => {
   });
 };
 
+export const formatTimeseriesTickX = (unformattedDate) => {
+  return format(unformattedDate, 'd MMM', {
+    locale: LOCALE_SHORTHANDS[i18n.language],
+  });
+};
+
 const validateCTS = (data = []) => {
   const dataTypes = [
     'dailyconfirmed',