From e7b92cd097d67d586bc71fe46765e8587d65d13f Mon Sep 17 00:00:00 2001
From: MoltenCoffee <13321277+MoltenCoffee@users.noreply.github.com>
Date: Fri, 19 Feb 2021 10:17:30 +0100
Subject: [PATCH] Add timestamp localization

---
 components/metrics/BarChart.js | 5 +++--
 lib/lang.js                    | 9 +++++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index 4354f18c..ad1f611f 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import ChartJS from 'chart.js';
 import Legend from 'components/metrics/Legend';
 import { formatLongNumber } from 'lib/format';
-import { dateFormat } from 'lib/lang';
+import { dateFormat, timeFormat } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
 import useTheme from 'hooks/useTheme';
 import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
@@ -46,7 +46,7 @@ export default function BarChart({
       case 'minute':
         return index % 2 === 0 ? dateFormat(d, 'h:mm', locale) : '';
       case 'hour':
-        return dateFormat(d, 'ha', locale);
+        return timeFormat(d, locale);
       case 'day':
         if (records > 31) {
           if (w <= 500) {
@@ -131,6 +131,7 @@ export default function BarChart({
               minRotation: 0,
               maxRotation: 0,
               fontColor: colors.text,
+              autoSkipPadding: 1,
             },
             gridLines: {
               display: false,
diff --git a/lib/lang.js b/lib/lang.js
index c2c93891..3bb6ffe8 100644
--- a/lib/lang.js
+++ b/lib/lang.js
@@ -118,6 +118,11 @@ export const dateLocales = {
   'it-IT': it,
 };
 
+const timeFormats = {
+  // https://date-fns.org/v2.17.0/docs/format
+  'en-US': 'ha',
+};
+
 export const menuOptions = [
   { label: '中文', value: 'zh-CN', display: 'cn' },
   { label: '中文(繁體)', value: 'zh-TW', display: 'tw' },
@@ -152,3 +157,7 @@ export const menuOptions = [
 export function dateFormat(date, str, locale) {
   return format(date, str, { locale: dateLocales[locale] || enUS });
 }
+
+export function timeFormat(date, locale = 'en-US') {
+  return format(date, timeFormats[locale] || 'p', { locale: dateLocales[locale] });
+}