umami/components/pages/realtime/RealtimeHeader.js

29 lines
943 B
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();
2023-02-23 05:59:59 +01:00
const { pageviews, visitors, events, countries } = data;
2023-02-18 06:42:42 +01:00
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>
);
}