mirror of
https://github.com/kremalicious/umami.git
synced 2024-12-21 08:43:37 +01:00
50 lines
1.5 KiB
JavaScript
50 lines
1.5 KiB
JavaScript
import React from 'react';
|
|
import { FormattedMessage } from 'react-intl';
|
|
import PageHeader from '../layout/PageHeader';
|
|
import DropDown from '../common/DropDown';
|
|
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,
|
|
})),
|
|
);
|
|
|
|
const { pageviews, sessions, events, countries } = data;
|
|
|
|
return (
|
|
<>
|
|
<PageHeader>
|
|
<div>
|
|
<FormattedMessage id="label.realtime" defaultMessage="Realtime" />
|
|
</div>
|
|
<DropDown value={websiteId} options={options} onChange={onSelect} />
|
|
</PageHeader>
|
|
<div className={styles.metrics}>
|
|
<MetricCard
|
|
label={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
|
|
value={pageviews.length}
|
|
/>
|
|
<MetricCard
|
|
label={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
|
|
value={sessions.length}
|
|
/>
|
|
<MetricCard
|
|
label={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
|
|
value={events.length}
|
|
/>
|
|
<MetricCard
|
|
label={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
|
|
value={countries.length}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|