Feat: Localize x-axis in timeseries.

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"
 }

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!"
-}

src/components/mapexplorer.js

@@ -494,7 +494,7 @@ function MapExplorer({
             className="button back-button"
             onClick={() => switchMapToState('India')}
           >
-            Back
+            {t('Back')}
           </div>
         ) : null}
 

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>
 

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

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',