umami/components/pages/realtime/RealtimeHeader.js

40 lines
1.1 KiB
JavaScript
Raw Normal View History

import MetricCard from 'components/metrics/MetricCard';
2023-03-22 22:05:55 +01:00
import useMessages from 'hooks/useMessages';
import styles from './RealtimeHeader.module.css';
2023-02-15 11:27:18 +01:00
export default function RealtimeHeader({ data = {} }) {
2023-03-22 22:05:55 +01:00
const { formatMessage, labels } = useMessages();
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
className={styles.card}
label={formatMessage(labels.views)}
value={pageviews?.length}
hideComparison
/>
<MetricCard
className={styles.card}
label={formatMessage(labels.visitors)}
2023-02-18 06:42:42 +01:00
value={visitors?.length}
hideComparison
/>
<MetricCard
className={styles.card}
label={formatMessage(labels.events)}
value={events?.length}
hideComparison
/>
<MetricCard
className={styles.card}
label={formatMessage(labels.countries)}
2023-02-15 11:27:18 +01:00
value={countries?.length}
hideComparison
/>
</div>
</div>
);
}