umami/components/metrics/RealtimeHeader.js

65 lines
2.0 KiB
JavaScript
Raw Normal View History

import React, { useMemo } from 'react';
2020-10-10 02:58:27 +02:00
import { FormattedMessage } from 'react-intl';
import { differenceInMinutes } from 'date-fns';
2022-01-16 04:16:58 +01:00
import PageHeader from 'components/layout/PageHeader';
import DropDown from 'components/common/DropDown';
import ActiveUsers from './ActiveUsers';
2020-10-10 02:58:27 +02:00
import MetricCard from './MetricCard';
import styles from './RealtimeHeader.module.css';
export default function RealtimeHeader({ websites, data, websiteId, onSelect }) {
const options = [
{ label: <FormattedMessage id="label.all-websites" defaultMessage="All websites" />, value: 0 },
].concat(
websites.map(({ name, website_id }, index) => ({
label: name,
value: website_id,
divider: index === 0,
})),
);
2020-10-10 02:58:27 +02:00
const { pageviews, sessions, events, countries } = data;
2020-10-10 02:58:27 +02:00
const count = useMemo(() => {
return sessions.filter(
2022-01-16 04:16:58 +01:00
({ created_at }) => differenceInMinutes(new Date(), new Date(created_at)) <= 5,
).length;
2022-04-11 09:26:43 +02:00
}, [sessions, websiteId]);
2020-10-10 02:58:27 +02:00
return (
<>
<PageHeader>
<div>
<FormattedMessage id="label.realtime" defaultMessage="Realtime" />
</div>
<div>
2022-04-11 09:26:43 +02:00
<ActiveUsers className={styles.active} value={count} />
</div>
2020-10-10 02:58:27 +02:00
<DropDown value={websiteId} options={options} onChange={onSelect} />
</PageHeader>
<div className={styles.metrics}>
<MetricCard
label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
value={pageviews.length}
hideComparison
2020-10-10 02:58:27 +02:00
/>
<MetricCard
label={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
value={sessions.length}
hideComparison
2020-10-10 02:58:27 +02:00
/>
<MetricCard
label={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
value={events.length}
hideComparison
2020-10-10 02:58:27 +02:00
/>
<MetricCard
label={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
value={countries.length}
hideComparison
2020-10-10 02:58:27 +02:00
/>
</div>
</>
);
}