diff --git a/src/app/(main)/reports/funnel/FunnelChart.tsx b/src/app/(main)/reports/funnel/FunnelChart.tsx index 0da71d6f5..fa5562f11 100644 --- a/src/app/(main)/reports/funnel/FunnelChart.tsx +++ b/src/app/(main)/reports/funnel/FunnelChart.tsx @@ -2,7 +2,8 @@ import { useContext } from 'react'; import classNames from 'classnames'; import { useMessages } from 'components/hooks'; import { ReportContext } from '../[reportId]/Report'; -import { formatLongNumber } from 'lib/format'; +import { formatLongNumberOptions } from 'lib/format'; +import { useIntl } from 'react-intl'; import styles from './FunnelChart.module.css'; export interface FunnelChartProps { @@ -13,6 +14,7 @@ export interface FunnelChartProps { export function FunnelChart({ className }: FunnelChartProps) { const { report } = useContext(ReportContext); const { formatMessage, labels } = useMessages(); + const intl = useIntl(); const { data } = report || {}; @@ -31,18 +33,23 @@ export function FunnelChart({ className }: FunnelChartProps) {
- {formatLongNumber(visitors)} + + {intl.formatNumber(+visitors, formatLongNumberOptions(+visitors))} + {formatMessage(labels.visitors)}
-
{(remaining * 100).toFixed(2)}%
+
+ {intl.formatNumber(+remaining, { style: 'percent', maximumFractionDigits: 2 })} +
{dropoff > 0 && (
- {formatLongNumber(dropped)} {formatMessage(labels.visitorsDroppedOff)} ( - {(dropoff * 100).toFixed(2)}%) + {intl.formatNumber(+dropped, formatLongNumberOptions(+dropped))}{' '} + {formatMessage(labels.visitorsDroppedOff)} ( + {intl.formatNumber(+dropoff, { style: 'percent', maximumFractionDigits: 2 })})
)}