watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-19 20:15:41 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Update FunnelChart.tsx

Browse source
This commit is contained in:
Minseo Lee 2024-08-29 23:48:47 +09:00
parent 15cfa5f583
commit b466d2d23b
1 changed files with 12 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/app/(main)/reports/funnel/FunnelChart.tsx
View file

@ -2,7 +2,8 @@ import { useContext } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { useMessages } from 'components/hooks'; import { useMessages } from 'components/hooks';
import { ReportContext } from '../[reportId]/Report'; 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'; import styles from './FunnelChart.module.css';
export interface FunnelChartProps { export interface FunnelChartProps {
@ -13,6 +14,7 @@ export interface FunnelChartProps {
export function FunnelChart({ className }: FunnelChartProps) { export function FunnelChart({ className }: FunnelChartProps) {
const { report } = useContext(ReportContext); const { report } = useContext(ReportContext);
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const intl = useIntl();
const { data } = report || {}; const { data } = report || {};
@ -31,18 +33,23 @@ export function FunnelChart({ className }: FunnelChartProps) {
</div> </div>
<div className={styles.metric}> <div className={styles.metric}>
<div> <div>
<span className={styles.visitors}>{formatLongNumber(visitors)}</span> <span className={styles.visitors}>
{intl.formatNumber(+visitors, formatLongNumberOptions(+visitors))}
</span>
{formatMessage(labels.visitors)} {formatMessage(labels.visitors)}
</div> </div>
<div className={styles.percent}>{(remaining * 100).toFixed(2)}%</div> <div className={styles.percent}>
{intl.formatNumber(+remaining, { style: 'percent', maximumFractionDigits: 2 })}
</div>
</div> </div>
<div className={styles.track}> <div className={styles.track}>
<div className={styles.bar} style={{ width: `${remaining * 100}%` }}></div> <div className={styles.bar} style={{ width: `${remaining * 100}%` }}></div>
</div> </div>
{dropoff > 0 && ( {dropoff > 0 && (
<div className={styles.info}> <div className={styles.info}>
<b>{formatLongNumber(dropped)}</b> {formatMessage(labels.visitorsDroppedOff)} ( <b>{intl.formatNumber(+dropped, formatLongNumberOptions(+dropped))}</b>{' '}
{(dropoff * 100).toFixed(2)}%) {formatMessage(labels.visitorsDroppedOff)} (
{intl.formatNumber(+dropoff, { style: 'percent', maximumFractionDigits: 2 })})
</div> </div>
)} )}
</div> </div>