i18n datetime

This commit is contained in:
Minseo Lee 2024-08-28 14:42:30 +09:00
parent 338c2f3071
commit 4c3f3cbc71
9 changed files with 57 additions and 55 deletions

View file

@ -2,15 +2,15 @@ import { useContext } from 'react';
import classNames from 'classnames';
import { ReportContext } from '../[reportId]/Report';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import { useMessages, useLocale } from 'components/hooks';
import { formatDate } from 'lib/date';
import { useMessages } from 'components/hooks';
import styles from './RetentionTable.module.css';
import { useIntl } from 'react-intl';
const DAYS = [1, 2, 3, 4, 5, 6, 7, 14, 21, 28];
export function RetentionTable({ days = DAYS }) {
const { formatMessage, labels } = useMessages();
const { locale } = useLocale();
const intl = useIntl();
const { report } = useContext(ReportContext);
const { data } = report || {};
@ -52,7 +52,7 @@ export function RetentionTable({ days = DAYS }) {
{rows.map(({ date, visitors, records }, rowIndex) => {
return (
<div key={rowIndex} className={styles.row}>
<div className={styles.date}>{formatDate(date, 'PP', locale)}</div>
<div className={styles.date}>{intl.formatDate(date, { dateStyle: 'medium' })}</div>
<div className={styles.visitors}>{visitors}</div>
{days.map(day => {
if (totalDays - rowIndex < day) {

View file

@ -6,6 +6,7 @@ import { renderDateLabels } from 'lib/charts';
import { formatLongNumber } from 'lib/format';
import { useContext, useMemo } from 'react';
import { ReportContext } from '../[reportId]/Report';
import { useIntl } from 'react-intl';
export interface PageviewsChartProps extends BarChartProps {
isLoading?: boolean;
@ -14,6 +15,7 @@ export interface PageviewsChartProps extends BarChartProps {
export function RevenueChart({ isLoading, ...props }: PageviewsChartProps) {
const { formatMessage, labels } = useMessages();
const { locale } = useLocale();
const intl = useIntl();
const { report } = useContext(ReportContext);
const { data, parameters } = report || {};
@ -88,7 +90,7 @@ export function RevenueChart({ isLoading, ...props }: PageviewsChartProps) {
data={chartData}
unit={parameters?.dateRange.unit}
isLoading={isLoading}
renderXLabel={renderDateLabels(parameters?.dateRange.unit, locale)}
renderXLabel={renderDateLabels(intl, parameters?.dateRange.unit)}
/>
)}
</>