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 SessionStats.tsx

Browse source
This commit is contained in:
Minseo Lee 2024-08-29 22:58:08 +09:00
parent 876286ed28
commit 8f08639058
1 changed files with 26 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionStats.tsx
View file

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