umami/components/pages/realtime/RealtimeHeader.js

36 lines
1.1 KiB
JavaScript
Raw Normal View History

import { useIntl } from 'react-intl';
import MetricCard from 'components/metrics/MetricCard';
import { labels } from 'components/messages';
import styles from './RealtimeHeader.module.css';
2023-02-15 11:27:18 +01:00
export default function RealtimeHeader({ data = {} }) {
const { formatMessage } = useIntl();
const { pageviews, sessions, events, countries } = data;
2023-02-18 06:42:42 +01:00
const visitors = sessions?.reduce((arr, { sessionId }) => {
if (sessionId && !arr.includes(sessionId)) {
return arr.concat(sessionId);
}
return arr;
}, []);
return (
<div className={styles.header}>
<div className={styles.metrics}>
<MetricCard label={formatMessage(labels.views)} value={pageviews?.length} hideComparison />
<MetricCard
label={formatMessage(labels.visitors)}
2023-02-18 06:42:42 +01:00
value={visitors?.length}
hideComparison
/>
<MetricCard label={formatMessage(labels.events)} value={events?.length} hideComparison />
<MetricCard
label={formatMessage(labels.countries)}
2023-02-15 11:27:18 +01:00
value={countries?.length}
hideComparison
/>
</div>
</div>
);
}