import { useState, useEffect, useMemo, useCallback } from 'react'; import { FormattedMessage } from 'react-intl'; import { subMinutes, startOfMinute } from 'date-fns'; import firstBy from 'thenby'; import Page from 'components/layout/Page'; import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout'; import RealtimeChart from 'components/metrics/RealtimeChart'; import RealtimeLog from 'components/metrics/RealtimeLog'; import RealtimeHeader from 'components/metrics/RealtimeHeader'; import WorldMap from 'components/common/WorldMap'; import DataTable from 'components/metrics/DataTable'; import RealtimeViews from 'components/metrics/RealtimeViews'; import useApi from 'hooks/useApi'; import useLocale from 'hooks/useLocale'; import useCountryNames from 'hooks/useCountryNames'; import { percentFilter } from 'lib/filters'; import { SHARE_TOKEN_HEADER, REALTIME_RANGE, REALTIME_INTERVAL } from 'lib/constants'; import styles from './RealtimeDashboard.module.css'; function mergeData(state, data, time) { const ids = state.map(({ __id }) => __id); return state .concat(data.filter(({ __id }) => !ids.includes(__id))) .filter(({ createdAt }) => new Date(createdAt).getTime() >= time); } function filterWebsite(data, id) { return data.filter(({ websiteId }) => websiteId === id); } export default function RealtimeDashboard() { const { locale } = useLocale(); const countryNames = useCountryNames(locale); const [data, setData] = useState(); const [websiteId, setWebsiteId] = useState(null); const { get, useQuery } = useApi(); const { data: init, isLoading } = useQuery(['realtime:init'], () => get('/realtime/init')); const { data: updates } = useQuery( ['realtime:updates'], () => get('/realtime/update', { startAt: data?.timestamp }, { [SHARE_TOKEN_HEADER]: init?.token }), { disabled: !init?.websites?.length || !data, retryInterval: REALTIME_INTERVAL, }, ); const renderCountryName = useCallback( ({ x }) => {countryNames[x]}, [countryNames], ); const realtimeData = useMemo(() => { if (data) { const { pageviews, sessions, events } = data; if (websiteId) { const { id } = init.websites.find(n => n.id === websiteId); return { pageviews: filterWebsite(pageviews, id), sessions: filterWebsite(sessions, id), events: filterWebsite(events, id), }; } } return data; }, [data, websiteId]); const countries = useMemo(() => { if (realtimeData?.sessions) { return percentFilter( realtimeData.sessions .reduce((arr, { country }) => { if (country) { const row = arr.find(({ x }) => x === country); if (!row) { arr.push({ x: country, y: 1 }); } else { row.y += 1; } } return arr; }, []) .sort(firstBy('y', -1)), ); } return []; }, [realtimeData?.sessions]); useEffect(() => { if (init && !data) { const { websites, data } = init; setData({ websites, ...data }); } }, [init]); useEffect(() => { if (updates) { const { pageviews, sessions, events, timestamp } = updates; const time = subMinutes(startOfMinute(new Date()), REALTIME_RANGE).getTime(); setData(state => ({ ...state, pageviews: mergeData(state.pageviews, pageviews, time), sessions: mergeData(state.sessions, sessions, time), events: mergeData(state.events, events, time), timestamp, })); } }, [updates]); if (!init || !data || isLoading) { return null; } const { websites } = data; return (
} metric={} data={countries} renderLabel={renderCountryName} />
); }