import React, { useMemo } from 'react'; import { FormattedMessage } from 'react-intl'; import { differenceInMinutes } from 'date-fns'; import PageHeader from 'components/layout/PageHeader'; import DropDown from 'components/common/DropDown'; import ActiveUsers from './ActiveUsers'; import MetricCard from './MetricCard'; import styles from './RealtimeHeader.module.css'; export default function RealtimeHeader({ websites, data, websiteId, onSelect }) { const options = [ { label: , value: 0 }, ].concat( websites.map(({ name, id }, index) => ({ label: name, value: id, divider: index === 0, })), ); const { pageviews, sessions, events, countries } = data; const count = useMemo(() => { return sessions.filter( ({ createdAt }) => differenceInMinutes(new Date(), new Date(createdAt)) <= 5, ).length; }, [sessions, websiteId]); return ( <>
} value={pageviews.length} hideComparison /> } value={sessions.length} hideComparison /> } value={events.length} hideComparison /> } value={countries.length} hideComparison />
); }