mirror of
https://github.com/kremalicious/umami.git
synced 2024-06-30 13:41:50 +02:00
54 lines
1.7 KiB
JavaScript
54 lines
1.7 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 }) => ({ label: name, value: website_id })));
|
||
|
|
||
|
const { pageviews, sessions, events } = data;
|
||
|
const countries = sessions.reduce((obj, { country }) => {
|
||
|
if (country) {
|
||
|
if (!obj[country]) {
|
||
|
obj[country] = 1;
|
||
|
} else {
|
||
|
obj[country] += 1;
|
||
|
}
|
||
|
}
|
||
|
return obj;
|
||
|
}, {});
|
||
|
|
||
|
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={Object.keys(countries).length}
|
||
|
/>
|
||
|
</div>
|
||
|
</>
|
||
|
);
|
||
|
}
|