formatLongNumberOptions

This commit is contained in:
Minseo Lee 2024-08-29 23:15:14 +09:00
parent 7676a69190
commit b60bd074f4
5 changed files with 36 additions and 56 deletions

View file

@ -1,38 +1,29 @@
import { useMessages } from 'components/hooks';
import MetricCard from 'components/metrics/MetricCard';
import MetricsBar from 'components/metrics/MetricsBar';
import { formatShortTime } from 'lib/format';
import { type FormatNumberOptions, useIntl } from 'react-intl';
import { formatLongNumberOptions, formatShortTime } from 'lib/format';
import { useIntl } from 'react-intl';
export function SessionStats({ data }) {
const { formatMessage, labels } = useMessages();
const intl = useIntl();
const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
return (
<MetricsBar isFetched={true}>
<MetricCard
label={formatMessage(labels.visits)}
value={data?.visits}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
/>
<MetricCard
label={formatMessage(labels.views)}
value={data?.views}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
/>
<MetricCard
label={formatMessage(labels.events)}
value={data?.events}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
formatValue={(n: number) => intl.formatNumber(+n, formatLongNumberOptions(+n))}
/>
<MetricCard
label={formatMessage(labels.visitDuration)}