Updated date formatting for locales.

This commit is contained in:
Mike Cao 2021-02-26 22:41:05 -08:00
parent 50bc2371b8
commit d6d0f99daa
6 changed files with 25 additions and 24 deletions

View File

@ -18,7 +18,7 @@ import {
} from 'date-fns'; } from 'date-fns';
import Button from './Button'; import Button from './Button';
import useLocale from 'hooks/useLocale'; import useLocale from 'hooks/useLocale';
import { dateFormat } from 'lib/lang'; import { dateFormat } from 'lib/date';
import { chunk } from 'lib/array'; import { chunk } from 'lib/array';
import Chevron from 'assets/chevron-down.svg'; import Chevron from 'assets/chevron-down.svg';
import Cross from 'assets/times.svg'; import Cross from 'assets/times.svg';

View File

@ -6,8 +6,7 @@ import Modal from './Modal';
import DropDown from './DropDown'; import DropDown from './DropDown';
import DatePickerForm from 'components/forms/DatePickerForm'; import DatePickerForm from 'components/forms/DatePickerForm';
import useLocale from 'hooks/useLocale'; import useLocale from 'hooks/useLocale';
import { getDateRange } from 'lib/date'; import { getDateRange, dateFormat } from 'lib/date';
import { dateFormat } from 'lib/lang';
import Calendar from 'assets/calendar-alt.svg'; import Calendar from 'assets/calendar-alt.svg';
import Icon from './Icon'; import Icon from './Icon';

View File

@ -3,7 +3,7 @@ import classNames from 'classnames';
import ChartJS from 'chart.js'; import ChartJS from 'chart.js';
import Legend from 'components/metrics/Legend'; import Legend from 'components/metrics/Legend';
import { formatLongNumber } from 'lib/format'; import { formatLongNumber } from 'lib/format';
import { dateFormat, timeFormat } from 'lib/lang'; import { dateFormat } from 'lib/date';
import useLocale from 'hooks/useLocale'; import useLocale from 'hooks/useLocale';
import useTheme from 'hooks/useTheme'; import useTheme from 'hooks/useTheme';
import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants'; import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
@ -46,7 +46,7 @@ export default function BarChart({
case 'minute': case 'minute':
return index % 2 === 0 ? dateFormat(d, 'H:mm', locale) : ''; return index % 2 === 0 ? dateFormat(d, 'H:mm', locale) : '';
case 'hour': case 'hour':
return timeFormat(d, locale); return dateFormat(d, 'p', locale);
case 'day': case 'day':
if (records > 31) { if (records > 31) {
if (w <= 500) { if (w <= 500) {
@ -93,9 +93,9 @@ export default function BarChart({
function getTooltipFormat(unit) { function getTooltipFormat(unit) {
switch (unit) { switch (unit) {
case 'hour': case 'hour':
return 'EEE ha — MMM d yyyy'; return 'EEE p — PPP';
default: default:
return 'EEE MMMM d yyyy'; return 'PPPP';
} }
} }

View File

@ -2,11 +2,11 @@ import React, { useMemo, useState } from 'react';
import { FormattedMessage, useIntl } from 'react-intl'; import { FormattedMessage, useIntl } from 'react-intl';
import { FixedSizeList } from 'react-window'; import { FixedSizeList } from 'react-window';
import firstBy from 'thenby'; import firstBy from 'thenby';
import { format } from 'date-fns';
import Icon from 'components/common/Icon'; import Icon from 'components/common/Icon';
import Tag from 'components/common/Tag'; import Tag from 'components/common/Tag';
import Dot from 'components/common/Dot'; import Dot from 'components/common/Dot';
import FilterButtons from 'components/common/FilterButtons'; import FilterButtons from 'components/common/FilterButtons';
import NoData from 'components/common/NoData';
import { devices } from 'components/messages'; import { devices } from 'components/messages';
import useLocale from 'hooks/useLocale'; import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames'; import useCountryNames from 'hooks/useCountryNames';
@ -15,8 +15,8 @@ import Bolt from 'assets/bolt.svg';
import Visitor from 'assets/visitor.svg'; import Visitor from 'assets/visitor.svg';
import Eye from 'assets/eye.svg'; import Eye from 'assets/eye.svg';
import { stringToColor } from 'lib/format'; import { stringToColor } from 'lib/format';
import { dateFormat } from 'lib/date';
import styles from './RealtimeLog.module.css'; import styles from './RealtimeLog.module.css';
import NoData from '../common/NoData';
const TYPE_ALL = 0; const TYPE_ALL = 0;
const TYPE_PAGEVIEW = 1; const TYPE_PAGEVIEW = 1;
@ -145,7 +145,7 @@ export default function RealtimeLog({ data, websites, websiteId }) {
} }
function getTime({ created_at }) { function getTime({ created_at }) {
return format(new Date(created_at), 'h:mm:ss'); return dateFormat(new Date(created_at), 'pp', locale);
} }
function getColor(row) { function getColor(row) {

View File

@ -23,7 +23,10 @@ import {
differenceInCalendarDays, differenceInCalendarDays,
differenceInCalendarMonths, differenceInCalendarMonths,
differenceInCalendarYears, differenceInCalendarYears,
format,
} from 'date-fns'; } from 'date-fns';
import { enUS } from 'date-fns/locale';
import { dateLocales } from 'lib/lang';
export function getTimezone() { export function getTimezone() {
return moment.tz.guess(); return moment.tz.guess();
@ -150,3 +153,16 @@ export function getDateLength(startDate, endDate, unit) {
const [diff] = dateFuncs[unit]; const [diff] = dateFuncs[unit];
return diff(endDate, startDate) + 1; return diff(endDate, startDate) + 1;
} }
export const customFormats = {
'en-US': {
p: 'ha',
pp: 'h:mm:ss',
},
};
export function dateFormat(date, str, locale = 'en-US') {
return format(date, customFormats?.[locale]?.[str] || str, {
locale: dateLocales[locale] || enUS,
});
}

View File

@ -1,4 +1,3 @@
import { format } from 'date-fns';
import { import {
cs, cs,
da, da,
@ -118,11 +117,6 @@ export const dateLocales = {
'it-IT': it, 'it-IT': it,
}; };
const timeFormats = {
// https://date-fns.org/v2.17.0/docs/format
'en-US': 'ha',
};
export const menuOptions = [ export const menuOptions = [
{ label: '中文', value: 'zh-CN', display: 'cn' }, { label: '中文', value: 'zh-CN', display: 'cn' },
{ label: '中文(繁體)', value: 'zh-TW', display: 'tw' }, { label: '中文(繁體)', value: 'zh-TW', display: 'tw' },
@ -153,11 +147,3 @@ export const menuOptions = [
{ label: 'Türkçe', value: 'tr-TR', display: 'tr' }, { label: 'Türkçe', value: 'tr-TR', display: 'tr' },
{ label: 'українська', value: 'uk-UA', display: 'uk' }, { label: 'українська', value: 'uk-UA', display: 'uk' },
]; ];
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] });
}