Added active user count to realtime page.

This commit is contained in:
Mike Cao 2022-01-15 12:39:32 -08:00
parent ddb549258b
commit fa0ec301d0
3 changed files with 20 additions and 7 deletions

View file

@ -1,5 +1,6 @@
import React from 'react';
import React, { useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
import { differenceInMinutes } from 'date-fns';
import PageHeader from '../layout/PageHeader';
import DropDown from '../common/DropDown';
import ActiveUsers from './ActiveUsers';
@ -19,6 +20,12 @@ export default function RealtimeHeader({ websites, data, websiteId, onSelect })
const { pageviews, sessions, events, countries } = data;
const count = useMemo(() => {
return sessions.filter(
({ created_at }) => differenceInMinutes(new Date(), new Date(created_at)) < 5,
).length;
}, [sessions]);
return (
<>
<PageHeader>
@ -26,7 +33,7 @@ export default function RealtimeHeader({ websites, data, websiteId, onSelect })
<FormattedMessage id="label.realtime" defaultMessage="Realtime" />
</div>
<div>
<ActiveUsers className={styles.active} websiteId={websiteId} />
<ActiveUsers className={styles.active} value={count} />
</div>
<DropDown value={websiteId} options={options} onChange={onSelect} />
</PageHeader>