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

Update RealtimeHeader.tsx

Browse source
This commit is contained in:
Minseo Lee 2024-08-29 22:59:56 +09:00
parent 8f08639058
commit 7676a69190
1 changed files with 17 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/app/(main)/websites/[websiteId]/realtime/RealtimeHeader.tsx
View file

@ -2,10 +2,15 @@ import MetricCard from 'components/metrics/MetricCard';
import { useMessages } from 'components/hooks'; import { useMessages } from 'components/hooks';
import { RealtimeData } from 'lib/types'; import { RealtimeData } from 'lib/types';
import styles from './RealtimeHeader.module.css'; import styles from './RealtimeHeader.module.css';
import { type FormatNumberOptions, useIntl } from 'react-intl';
export function RealtimeHeader({ data }: { data: RealtimeData }) { export function RealtimeHeader({ data }: { data: RealtimeData }) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { totals }: any = data || {}; const { totals }: any = data || {};
const intl = useIntl();
const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
return ( return (
<div className={styles.header}> <div className={styles.header}>
@ -14,21 +19,33 @@ export function RealtimeHeader({ data }: { data: RealtimeData }) {
className={styles.card} className={styles.card}
label={formatMessage(labels.views)} label={formatMessage(labels.views)}
value={totals.views} value={totals.views}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
/> />
<MetricCard <MetricCard
className={styles.card} className={styles.card}
label={formatMessage(labels.visitors)} label={formatMessage(labels.visitors)}
value={totals.visitors} value={totals.visitors}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
/> />
<MetricCard <MetricCard
className={styles.card} className={styles.card}
label={formatMessage(labels.events)} label={formatMessage(labels.events)}
value={totals.events} value={totals.events}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
/> />
<MetricCard <MetricCard
className={styles.card} className={styles.card}
label={formatMessage(labels.countries)} label={formatMessage(labels.countries)}
value={totals.countries} value={totals.countries}
formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
/> />
</div> </div>
</div> </div>