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

Browse source
This commit is contained in:
Minseo Lee 2024-08-29 22:48:32 +09:00
parent dfb45a0795
commit 876286ed28
1 changed files with 17 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
View file

@ -3,12 +3,16 @@ import useWebsiteSessionStats from 'components/hooks/queries/useWebsiteSessionSt
import WebsiteDateFilter from 'components/input/WebsiteDateFilter'; import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
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 { formatLongNumber } from 'lib/format';
import { Flexbox } from 'react-basics'; import { Flexbox } from 'react-basics';
import { type FormatNumberOptions, useIntl } from 'react-intl';
export function SessionsMetricsBar({ websiteId }: { websiteId: string }) { export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId); const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId);
const intl = useIntl();
const optionsNumber: FormatNumberOptions = { notation: 'compact', maximumSignificantDigits: 3 };
const optionsSmallNumber: FormatNumberOptions = { notation: 'compact' };
return ( return (
<Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}> <Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
@ -16,22 +20,30 @@ export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
<MetricCard <MetricCard
value={data?.visitors?.value} value={data?.visitors?.value}
label={formatMessage(labels.visitors)} label={formatMessage(labels.visitors)}
formatValue={formatLongNumber} formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
/> />
<MetricCard <MetricCard
value={data?.visits?.value} value={data?.visits?.value}
label={formatMessage(labels.visits)} label={formatMessage(labels.visits)}
formatValue={formatLongNumber} formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
/> />
<MetricCard <MetricCard
value={data?.pageviews?.value} value={data?.pageviews?.value}
label={formatMessage(labels.views)} label={formatMessage(labels.views)}
formatValue={formatLongNumber} formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
/> />
<MetricCard <MetricCard
value={data?.countries?.value} value={data?.countries?.value}
label={formatMessage(labels.countries)} label={formatMessage(labels.countries)}
formatValue={formatLongNumber} formatValue={(n: number) =>
intl.formatNumber(+n, +n < 100 ? optionsSmallNumber : optionsNumber)
}
/> />
</MetricsBar> </MetricsBar>
<WebsiteDateFilter websiteId={websiteId} /> <WebsiteDateFilter websiteId={websiteId} />