+
{props?.x?.to(x => formatValue(x))}
{showChange && (
@@ -47,7 +49,9 @@ export const MetricCard = ({
title={formatValue(change)}
reverseColors={reverseColors}
>
- {changeProps?.x?.to(x => `${Math.abs(~~x)}%`)}
+
+ {changeProps?.x?.to(x => intl.formatNumber(Math.abs(~~x) / 100, { style: 'percent' }))}
+
)}
{showPrevious && (
diff --git a/src/components/metrics/MetricsBar.tsx b/src/components/metrics/MetricsBar.tsx
index 60a217067b..01a6035cec 100644
--- a/src/components/metrics/MetricsBar.tsx
+++ b/src/components/metrics/MetricsBar.tsx
@@ -1,7 +1,8 @@
import { ReactNode } from 'react';
import { Loading, cloneChildren } from 'react-basics';
import ErrorMessage from 'components/common/ErrorMessage';
-import { formatLongNumber } from 'lib/format';
+import { formatLongNumberOptions } from 'lib/format';
+import { useIntl } from 'react-intl';
import styles from './MetricsBar.module.css';
export interface MetricsBarProps {
@@ -12,7 +13,8 @@ export interface MetricsBarProps {
}
export function MetricsBar({ children, isLoading, isFetched, error }: MetricsBarProps) {
- const formatFunc = n => (n >= 0 ? formatLongNumber(n) : `-${formatLongNumber(Math.abs(n))}`);
+ const intl = useIntl();
+ const formatFunc = (n: number) => intl.formatNumber(n, formatLongNumberOptions(n));
return (
diff --git a/src/components/metrics/PageviewsChart.tsx b/src/components/metrics/PageviewsChart.tsx
index 6ca0309494..36371f2912 100644
--- a/src/components/metrics/PageviewsChart.tsx
+++ b/src/components/metrics/PageviewsChart.tsx
@@ -2,6 +2,7 @@ import { useMemo } from 'react';
import BarChart, { BarChartProps } from 'components/charts/BarChart';
import { useLocale, useTheme, useMessages } from 'components/hooks';
import { renderDateLabels } from 'lib/charts';
+import { useIntl } from 'react-intl';
export interface PagepageviewsChartProps extends BarChartProps {
data: {
@@ -20,6 +21,7 @@ export function PagepageviewsChart({ data, unit, isLoading, ...props }: Pagepage
const { formatMessage, labels } = useMessages();
const { colors } = useTheme();
const { locale } = useLocale();
+ const intl = useIntl();
const chartData = useMemo(() => {
if (!data) {
@@ -74,7 +76,7 @@ export function PagepageviewsChart({ data, unit, isLoading, ...props }: Pagepage
data={chartData}
unit={unit}
isLoading={isLoading}
- renderXLabel={renderDateLabels(unit, locale)}
+ renderXLabel={renderDateLabels(intl, unit)}
/>
);
}
diff --git a/src/components/metrics/RegionsTable.tsx b/src/components/metrics/RegionsTable.tsx
index 215551af8b..92869077ae 100644
--- a/src/components/metrics/RegionsTable.tsx
+++ b/src/components/metrics/RegionsTable.tsx
@@ -1,17 +1,16 @@
import FilterLink from 'components/common/FilterLink';
import { emptyFilter } from 'lib/filters';
-import { useMessages, useLocale, useRegionNames } from 'components/hooks';
+import { useMessages, useRegionNames } from 'components/hooks';
import MetricsTable, { MetricsTableProps } from './MetricsTable';
import TypeIcon from 'components/common/TypeIcon';
export function RegionsTable(props: MetricsTableProps) {
- const { locale } = useLocale();
const { formatMessage, labels } = useMessages();
- const { getRegionName } = useRegionNames(locale);
+ const { getRegionName } = useRegionNames();
const renderLink = ({ x: code, country }) => {
return (
-
+
);
diff --git a/src/components/metrics/WorldMap.tsx b/src/components/metrics/WorldMap.tsx
index 4a16f98f77..89c84009b8 100644
--- a/src/components/metrics/WorldMap.tsx
+++ b/src/components/metrics/WorldMap.tsx
@@ -5,10 +5,10 @@ import { colord } from 'colord';
import HoverTooltip from 'components/common/HoverTooltip';
import { ISO_COUNTRIES, MAP_FILE } from 'lib/constants';
import { useDateRange, useTheme, useWebsiteMetrics } from 'components/hooks';
-import { useCountryNames } from 'components/hooks';
+import { useIntl } from 'react-intl';
import { useLocale } from 'components/hooks';
import { useMessages } from 'components/hooks';
-import { formatLongNumber } from 'lib/format';
+import { formatLongNumberOptions } from 'lib/format';
import { percentFilter } from 'lib/filters';
import styles from './WorldMap.module.css';
@@ -26,7 +26,7 @@ export function WorldMap({
const { theme, colors } = useTheme();
const { locale } = useLocale();
const { formatMessage, labels } = useMessages();
- const { countryNames } = useCountryNames(locale);
+ const intl = useIntl();
const visitorsLabel = formatMessage(labels.visitors).toLocaleLowerCase(locale);
const {
dateRange: { startDate, endDate },
@@ -62,7 +62,10 @@ export function WorldMap({
if (code === 'AQ') return;
const country = metrics?.find(({ x }) => x === code);
setTooltipPopup(
- `${countryNames[code]}: ${formatLongNumber(country?.y || 0)} ${visitorsLabel}` as any,
+ `${intl.formatDisplayName(code, { type: 'region' })}: ${intl.formatNumber(
+ country?.y || 0,
+ formatLongNumberOptions(country?.y || 0),
+ )} ${visitorsLabel}` as any,
);
};
diff --git a/src/lib/charts.ts b/src/lib/charts.ts
index 8939b3c1b6..332a22e7b8 100644
--- a/src/lib/charts.ts
+++ b/src/lib/charts.ts
@@ -1,25 +1,20 @@
-import { formatDate } from 'lib/date';
-import { formatLongNumber } from 'lib/format';
+import { type IntlShape } from 'react-intl';
-export function renderNumberLabels(label: string) {
- return +label > 1000 ? formatLongNumber(+label) : label;
-}
-
-export function renderDateLabels(unit: string, locale: string) {
+export function renderDateLabels(intl: IntlShape, unit: string) {
return (label: string, index: number, values: any[]) => {
const d = new Date(values[index].value);
switch (unit) {
case 'minute':
- return formatDate(d, 'h:mm', locale);
+ return intl.formatDate(d, { timeStyle: 'short' });
case 'hour':
- return formatDate(d, 'p', locale);
+ return intl.formatDate(d, { timeStyle: 'short' });
case 'day':
- return formatDate(d, 'MMM d', locale);
+ return intl.formatDate(d, { month: 'short', day: 'numeric' });
case 'month':
- return formatDate(d, 'MMM', locale);
+ return intl.formatDate(d, { month: 'short' });
case 'year':
- return formatDate(d, 'YYY', locale);
+ return intl.formatDate(d, { year: 'numeric' });
default:
return label;
}
diff --git a/src/lib/date.ts b/src/lib/date.ts
index b731140cf2..332be5028f 100644
--- a/src/lib/date.ts
+++ b/src/lib/date.ts
@@ -27,7 +27,6 @@ import {
differenceInCalendarWeeks,
differenceInCalendarMonths,
differenceInCalendarYears,
- format,
max,
min,
isDate,
@@ -288,16 +287,6 @@ export function getDateArray(data: any[], startDate: Date, endDate: Date, unit:
return arr;
}
-export function formatDate(date: string | number | Date, str: string, locale = 'en-US') {
- return format(
- typeof date === 'string' ? new Date(date) : date,
- CUSTOM_FORMATS?.[locale]?.[str] || str,
- {
- locale: getDateLocale(locale),
- },
- );
-}
-
export function maxDate(...args: Date[]) {
return max(args.filter(n => isDate(n)));
}
diff --git a/src/lib/format.ts b/src/lib/format.ts
index a662a9eb49..e293e0e480 100644
--- a/src/lib/format.ts
+++ b/src/lib/format.ts
@@ -1,3 +1,5 @@
+import type { FormatNumberOptions, IntlShape } from 'react-intl';
+
export function parseTime(val: number) {
const days = ~~(val / 86400);
const hours = ~~(val / 3600) - days * 24;
@@ -14,24 +16,26 @@ export function parseTime(val: number) {
};
}
-export function formatTime(val: number) {
- const { hours, minutes, seconds } = parseTime(val);
- const h = hours > 0 ? `${hours}:` : '';
- const m = hours > 0 ? minutes.toString().padStart(2, '0') : minutes;
- const s = seconds.toString().padStart(2, '0');
-
- return `${h}${m}:${s}`;
-}
-
-export function formatShortTime(val: number, formats = ['m', 's'], space = '') {
+export function formatShortTime(
+ intl: IntlShape,
+ useMessages: any,
+ val: number,
+ formats = ['m', 's'],
+) {
+ const { formatMessage, labels } = useMessages;
const { days, hours, minutes, seconds, ms } = parseTime(val);
let t = '';
- if (days > 0 && formats.indexOf('d') !== -1) t += `${days}d${space}`;
- if (hours > 0 && formats.indexOf('h') !== -1) t += `${hours}h${space}`;
- if (minutes > 0 && formats.indexOf('m') !== -1) t += `${minutes}m${space}`;
- if (seconds > 0 && formats.indexOf('s') !== -1) t += `${seconds}s${space}`;
- if (ms > 0 && formats.indexOf('ms') !== -1) t += `${ms}ms`;
+ if (days > 0 && formats.indexOf('d') !== -1)
+ t += `${formatMessage(labels.days, { x: intl.formatNumber(days) })} `;
+ if (hours > 0 && formats.indexOf('h') !== -1)
+ t += `${formatMessage(labels.hours, { x: intl.formatNumber(hours) })} `;
+ if (minutes > 0 && formats.indexOf('m') !== -1)
+ t += `${formatMessage(labels.minutes, { x: intl.formatNumber(minutes) })} `;
+ if (seconds > 0 && formats.indexOf('s') !== -1)
+ t += `${formatMessage(labels.seconds, { x: intl.formatNumber(seconds) })} `;
+ if (ms > 0 && formats.indexOf('ms') !== -1)
+ t += formatMessage(labels.milliseconds, { x: intl.formatNumber(ms) });
if (!t) {
return `0${formats[formats.length - 1]}`;
@@ -44,23 +48,16 @@ export function formatNumber(n: string | number) {
return Number(n).toFixed(0);
}
-export function formatLongNumber(value: number) {
- const n = Number(value);
-
- if (n >= 1000000) {
- return `${(n / 1000000).toFixed(1)}m`;
- }
- if (n >= 100000) {
- return `${(n / 1000).toFixed(0)}k`;
- }
- if (n >= 10000) {
- return `${(n / 1000).toFixed(1)}k`;
- }
- if (n >= 1000) {
- return `${(n / 1000).toFixed(2)}k`;
- }
-
- return formatNumber(n);
+export function formatLongNumberOptions(value: number): FormatNumberOptions {
+ return value < 100
+ ? {
+ notation: 'compact',
+ maximumFractionDigits: 0,
+ }
+ : {
+ notation: 'compact',
+ maximumSignificantDigits: 3,
+ };
}
export function stringToColor(str: string) {
diff --git a/src/styles/locale.css b/src/styles/locale.css
deleted file mode 100644
index dddf495b6a..0000000000
--- a/src/styles/locale.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.zh-CN {
- font-family: '方体', 'PingFang SC', '黑体', 'Heiti SC', 'Microsoft JhengHei UI',
- 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK SC', sans-serif !important;
-}
-
-.zh-TW {
- font-family: '方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI',
- 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif !important;
-}
-
-.ja-JP {
- font-family: '游ゴシック体', YuGothic, 'ヒラギノ丸ゴ', 'Hiragino Sans', 'Yu Gothic UI',
- 'Meiryo UI', 'MS Gothic', Roboto, Noto, 'Noto Sans CJK JP', sans-serif !important;
-}
-
-.ko-KR {
- font-family: 'Nanum Gothic', 'Apple SD Gothic Neo', 'Malgun Gothic', Roboto, Noto,
- 'Noto Sans CJK KR', sans-serif !important;
-}
-
-.ar-SA {
- font-family: 'Geeza Pro', 'Arabic Typesetting', Roboto, Noto, 'Noto Naskh Arabic',
- 'Times New Roman', serif !important;
-}
-
-.he-IL {
- font-family: 'New Peninim MT', 'Arial Hebrew', Gisha, 'Times New Roman', Roboto, Noto,
- 'Noto Sans Hebrew', sans-serif !important;
-}