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

Added metrics bar and date range to sessions.

Browse source
This commit is contained in:
Mike Cao 2024-08-07 00:10:25 -07:00
parent 36663bd52d
commit b9068c0050
44 changed files with 859 additions and 739 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,42 @@
import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
import { Flexbox, Loading } from 'react-basics';
import MetricCard from 'components/metrics/MetricCard';
import { useMessages } from 'components/hooks';
import useWebsiteStats from 'components/hooks/queries/useWebsiteStats';
import { formatLongNumber } from 'lib/format';
export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { data, isLoading } = useWebsiteStats(websiteId);
return (
<Flexbox direction="row" justifyContent="space-between" style={{ height: 120 }}>
<Flexbox direction="row">
{isLoading && <Loading icon="dots" />}
{!isLoading && data && (
<>
<MetricCard
value={data.visitors.value}
label={formatMessage(labels.visitors)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data.visits.value}
label={formatMessage(labels.visits)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data.pageviews.value}
label={formatMessage(labels.views)}
formatValue={formatLongNumber}
/>
<MetricCard value={data?.countries?.value} label={formatMessage(labels.countries)} />
</>
)}
</Flexbox>
<WebsiteDateFilter websiteId={websiteId} />
</Flexbox>
);
}
export default SessionsMetricsBar;