umami/components/pages/RealtimeDashboard.js

import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { subMinutes, startOfMinute } from 'date-fns';
import firstBy from 'thenby';
import { percentFilter } from 'lib/filters';
import Page from 'components/layout/Page';
import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout';
import RealtimeChart from '../metrics/RealtimeChart';
import RealtimeLog from '../metrics/RealtimeLog';
import styles from './RealtimeDashboard.module.css';
import RealtimeHeader from '../metrics/RealtimeHeader';
import useFetch from 'hooks/useFetch';
import WorldMap from '../common/WorldMap';
import DataTable from '../metrics/DataTable';
import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames';
import { FormattedMessage } from 'react-intl';

const REALTIME_RANGE = 30;
const REALTIME_INTERVAL = 55000;

function mergeData(state, data, time) {
  const ids = state.map(({ __id }) => __id);
  return state
    .concat(data.filter(({ __id }) => !ids.includes(__id)))
    .filter(({ created_at }) => new Date(created_at).getTime() >= time);
}

function filterWebsite(data, id) {
  return data.filter(({ website_id }) => website_id === id);
}

export default function RealtimeDashboard() {
  const [locale] = useLocale();
  const countryNames = useCountryNames(locale);
  const [data, setData] = useState();
  const [websiteId, setWebsiteId] = useState(0);
  const { data: init, loading } = useFetch('/api/realtime', { params: { type: 'init' } });
  const { data: updates } = useFetch('/api/realtime', {
    params: { type: 'update', start_at: data?.timestamp },
    disabled: !init?.websites?.length || !data,
    interval: REALTIME_INTERVAL,
    headers: { 'x-umami-token': init?.token },
  });

  const renderCountryName = useCallback(({ x }) => countryNames[x], []);

  const realtimeData = useMemo(() => {
    if (data) {
      const { pageviews, sessions, events } = data;

      if (websiteId) {
        return {
          pageviews: filterWebsite(pageviews, websiteId),
          sessions: filterWebsite(sessions, websiteId),
          events: filterWebsite(events, websiteId),
        };
      }
    }

    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]);

  const referrers = useMemo(() => {
    if (realtimeData?.pageviews) {
      return percentFilter(
        realtimeData.pageviews
          .reduce((arr, { referrer }) => {
            if (referrer?.startsWith('http')) {
              const { hostname } = new URL(referrer);
              const row = arr.find(({ x }) => x === hostname);

              if (!row) {
                arr.push({ x: hostname, y: 1 });
              } else {
                row.y += 1;
              }
            }
            return arr;
          }, [])
          .sort(firstBy('y', -1)),
      );
    }
    return [];
  }, [realtimeData]);

  useEffect(() => {
    if (init && !data) {
      const { websites, data } = init;
      const domains = init.websites.map(({ domain }) => domain);

      setData({ websites, domains, ...data });
    } else 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,
      }));
    }
  }, [init, updates]);

  if (!init || loading || !data) {
    return null;
  }

  const { websites } = data;

  //console.log({realtimeData, countries});

  return (
    <Page>
      <RealtimeHeader
        websites={websites}
        websiteId={websiteId}
        data={{ ...realtimeData, countries }}
        onSelect={setWebsiteId}
      />
      <div className={styles.chart}>
        <RealtimeChart
          websiteId={websiteId}
          data={realtimeData}
          unit="minute"
          records={REALTIME_RANGE}
        />
      </div>
      <GridLayout>
        <GridRow>
          <GridColumn xs={12} lg={4}>
            <DataTable
              title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
              metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
              data={referrers}
              height={400}
              animate={false}
            />
          </GridColumn>
          <GridColumn xs={12} lg={8}>
            <RealtimeLog data={realtimeData} websites={websites} />
          </GridColumn>
        </GridRow>
        <GridRow>
          <GridColumn xs={12} lg={4}>
            <DataTable
              title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
              metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
              data={countries}
              renderLabel={renderCountryName}
              height={500}
              animate={false}
            />
          </GridColumn>
          <GridColumn xs={12} lg={8}>
            <WorldMap data={countries} />
          </GridColumn>
        </GridRow>
      </GridLayout>
    </Page>
  );
}