Moved code into src folder. Added build for component library.

src/components/pages/realtime/RealtimeCountries.js

@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+import { useRouter } from 'next/router';
+import DataTable from 'components/metrics/DataTable';
+import useLocale from 'components/hooks/useLocale';
+import useCountryNames from 'components/hooks/useCountryNames';
+import useMessages from 'components/hooks/useMessages';
+import classNames from 'classnames';
+import styles from './RealtimeCountries.module.css';
+
+export function RealtimeCountries({ data }) {
+  const { formatMessage, labels } = useMessages();
+  const { locale } = useLocale();
+  const countryNames = useCountryNames(locale);
+  const { basePath } = useRouter();
+
+  const renderCountryName = useCallback(
+    ({ x: code }) => (
+      <span className={classNames(locale, styles.row)}>
+        <img src={`${basePath}/images/flags/${code?.toLowerCase() || 'xx'}.png`} alt={code} />
+        {countryNames[code]}
+      </span>
+    ),
+    [countryNames, locale, basePath],
+  );
+
+  return (
+    <DataTable
+      title={formatMessage(labels.countries)}
+      metric={formatMessage(labels.visitors)}
+      data={data}
+      renderLabel={renderCountryName}
+    />
+  );
+}
+
+export default RealtimeCountries;

src/components/pages/realtime/RealtimeCountries.module.css

@@ -0,0 +1,5 @@
+.row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}

src/components/pages/realtime/RealtimeHeader.js

@@ -0,0 +1,41 @@
+import MetricCard from 'components/metrics/MetricCard';
+import useMessages from 'components/hooks/useMessages';
+import styles from './RealtimeHeader.module.css';
+
+export function RealtimeHeader({ data = {} }) {
+  const { formatMessage, labels } = useMessages();
+  const { pageviews, visitors, events, countries } = data;
+
+  return (
+    <div className={styles.header}>
+      <div className={styles.metrics}>
+        <MetricCard
+          className={styles.card}
+          label={formatMessage(labels.views)}
+          value={pageviews?.length}
+          hideComparison
+        />
+        <MetricCard
+          className={styles.card}
+          label={formatMessage(labels.visitors)}
+          value={visitors?.length}
+          hideComparison
+        />
+        <MetricCard
+          className={styles.card}
+          label={formatMessage(labels.events)}
+          value={events?.length}
+          hideComparison
+        />
+        <MetricCard
+          className={styles.card}
+          label={formatMessage(labels.countries)}
+          value={countries?.length}
+          hideComparison
+        />
+      </div>
+    </div>
+  );
+}
+
+export default RealtimeHeader;

src/components/pages/realtime/RealtimeHeader.module.css

@@ -0,0 +1,21 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.metrics {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.card {
+  justify-self: flex-start;
+}
+
+@media only screen and (max-width: 992px) {
+  .card {
+    flex-basis: calc(50% - 20px);
+  }
+}

src/components/pages/realtime/RealtimeHome.js

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import useApi from 'components/hooks/useApi';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import useMessages from 'components/hooks/useMessages';
+
+export function RealtimeHome() {
+  const { formatMessage, labels, messages } = useMessages();
+  const { get, useQuery } = useApi();
+  const router = useRouter();
+  const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
+
+  useEffect(() => {
+    if (data?.length) {
+      router.push(`realtime/${data[0].id}`);
+    }
+  }, [data, router]);
+
+  return (
+    <Page loading={isLoading || data?.length > 0} error={error}>
+      <PageHeader title={formatMessage(labels.realtime)} />
+      {data?.length === 0 && (
+        <EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)} />
+      )}
+    </Page>
+  );
+}
+
+export default RealtimeHome;

src/components/pages/realtime/RealtimeLog.js

@@ -0,0 +1,158 @@
+import { useMemo, useState } from 'react';
+import { StatusLight, Icon, Text } from 'react-basics';
+import { FixedSizeList } from 'react-window';
+import firstBy from 'thenby';
+import FilterButtons from 'components/common/FilterButtons';
+import Empty from 'components/common/Empty';
+import useLocale from 'components/hooks/useLocale';
+import useCountryNames from 'components/hooks/useCountryNames';
+import { BROWSERS } from 'lib/constants';
+import { stringToColor } from 'lib/format';
+import { formatDate } from 'lib/date';
+import { safeDecodeURI } from 'next-basics';
+import Icons from 'components/icons';
+import styles from './RealtimeLog.module.css';
+import useMessages from 'components/hooks/useMessages';
+
+const TYPE_ALL = 'all';
+const TYPE_PAGEVIEW = 'pageview';
+const TYPE_SESSION = 'session';
+const TYPE_EVENT = 'event';
+
+const icons = {
+  [TYPE_PAGEVIEW]: <Icons.Eye />,
+  [TYPE_SESSION]: <Icons.Visitor />,
+  [TYPE_EVENT]: <Icons.Bolt />,
+};
+
+export function RealtimeLog({ data, websiteDomain }) {
+  const { formatMessage, labels, messages, FormattedMessage } = useMessages();
+  const { locale } = useLocale();
+  const countryNames = useCountryNames(locale);
+  const [filter, setFilter] = useState(TYPE_ALL);
+
+  const buttons = [
+    {
+      label: formatMessage(labels.all),
+      key: TYPE_ALL,
+    },
+    {
+      label: formatMessage(labels.views),
+      key: TYPE_PAGEVIEW,
+    },
+    {
+      label: formatMessage(labels.visitors),
+      key: TYPE_SESSION,
+    },
+    {
+      label: formatMessage(labels.events),
+      key: TYPE_EVENT,
+    },
+  ];
+
+  const getTime = ({ createdAt }) => formatDate(new Date(createdAt), 'pp', locale);
+
+  const getColor = ({ id, sessionId }) => stringToColor(sessionId || id);
+
+  const getIcon = ({ __type }) => icons[__type];
+
+  const getDetail = log => {
+    const { __type, eventName, urlPath: url, browser, os, country, device } = log;
+
+    if (__type === TYPE_EVENT) {
+      return (
+        <FormattedMessage
+          {...messages.eventLog}
+          values={{
+            event: <b>{eventName || formatMessage(labels.unknown)}</b>,
+            url: (
+              <a
+                href={`//${websiteDomain}${url}`}
+                className={styles.link}
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                {url}
+              </a>
+            ),
+          }}
+        />
+      );
+    }
+
+    if (__type === TYPE_PAGEVIEW) {
+      return (
+        <a
+          href={`//${websiteDomain}${url}`}
+          className={styles.link}
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          {safeDecodeURI(url)}
+        </a>
+      );
+    }
+
+    if (__type === TYPE_SESSION) {
+      return (
+        <FormattedMessage
+          {...messages.visitorLog}
+          values={{
+            country: <b>{countryNames[country] || formatMessage(labels.unknown)}</b>,
+            browser: <b>{BROWSERS[browser]}</b>,
+            os: <b>{os}</b>,
+            device: <b>{formatMessage(labels[device] || labels.unknown)}</b>,
+          }}
+        />
+      );
+    }
+  };
+
+  const Row = ({ index, style }) => {
+    const row = logs[index];
+    return (
+      <div className={styles.row} style={style}>
+        <div>
+          <StatusLight color={getColor(row)} />
+        </div>
+        <div className={styles.time}>{getTime(row)}</div>
+        <div className={styles.detail}>
+          <Icon className={styles.icon}>{getIcon(row)}</Icon>
+          <Text>{getDetail(row)}</Text>
+        </div>
+      </div>
+    );
+  };
+
+  const logs = useMemo(() => {
+    if (!data) {
+      return [];
+    }
+
+    const { pageviews, visitors, events } = data;
+    const logs = [...pageviews, ...visitors, ...events].sort(firstBy('createdAt', -1));
+
+    if (filter !== TYPE_ALL) {
+      return logs.filter(({ __type }) => __type === filter);
+    }
+
+    return logs;
+  }, [data, filter]);
+
+  return (
+    <div className={styles.table}>
+      <FilterButtons items={buttons} selectedKey={filter} onSelect={setFilter} />
+      <div className={styles.header}>{formatMessage(labels.activityLog)}</div>
+      <div className={styles.body}>
+        {logs?.length === 0 && <Empty />}
+        {logs?.length > 0 && (
+          <FixedSizeList height={500} itemCount={logs.length} itemSize={50}>
+            {Row}
+          </FixedSizeList>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default RealtimeLog;

src/components/pages/realtime/RealtimeLog.module.css

@@ -0,0 +1,69 @@
+.table {
+  font-size: var(--font-size-sm);
+  overflow: hidden;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--font-size-md);
+  line-height: 40px;
+  font-weight: 700;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 50px;
+  border-bottom: 1px solid var(--base300);
+}
+
+.body {
+  overflow: auto;
+  height: 100%;
+}
+
+.icon {
+  margin-right: 10px;
+}
+
+.time {
+  min-width: 60px;
+  overflow: hidden;
+}
+
+.website {
+  text-align: right;
+  padding: 0 20px;
+}
+
+.detail {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 10px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.detail > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.row .link {
+  color: var(--base900);
+  text-decoration: none;
+}
+
+.row .link:hover {
+  color: var(--primary400);
+}

src/components/pages/realtime/RealtimePage.js

@@ -0,0 +1,117 @@
+import { useState, useEffect, useMemo } from 'react';
+import { subMinutes, startOfMinute } from 'date-fns';
+import firstBy from 'thenby';
+import { GridRow, GridColumn } from 'components/layout/Grid';
+import Page from 'components/layout/Page';
+import RealtimeChart from 'components/metrics/RealtimeChart';
+import WorldMap from 'components/common/WorldMap';
+import RealtimeLog from 'components/pages/realtime/RealtimeLog';
+import RealtimeHeader from 'components/pages/realtime/RealtimeHeader';
+import RealtimeUrls from 'components/pages/realtime/RealtimeUrls';
+import RealtimeCountries from 'components/pages/realtime/RealtimeCountries';
+import WebsiteHeader from 'components/pages/websites/WebsiteHeader';
+import useApi from 'components/hooks/useApi';
+import { percentFilter } from 'lib/filters';
+import { REALTIME_RANGE, REALTIME_INTERVAL } from 'lib/constants';
+import styles from './RealtimePage.module.css';
+import { useWebsite } from 'components/hooks';
+
+function mergeData(state = [], data = [], time) {
+  const ids = state.map(({ __id }) => __id);
+  return state
+    .concat(data.filter(({ __id }) => !ids.includes(__id)))
+    .filter(({ timestamp }) => timestamp >= time);
+}
+
+export function RealtimePage({ websiteId }) {
+  const [currentData, setCurrentData] = useState();
+  const { get, useQuery } = useApi();
+  const { data: website } = useWebsite(websiteId);
+  const { data, isLoading, error } = useQuery(
+    ['realtime', websiteId],
+    () => get(`/realtime/${websiteId}`, { startAt: currentData?.timestamp || 0 }),
+    {
+      enabled: !!(websiteId && website),
+      refetchInterval: REALTIME_INTERVAL,
+      cache: false,
+    },
+  );
+
+  useEffect(() => {
+    if (data) {
+      const date = subMinutes(startOfMinute(new Date()), REALTIME_RANGE);
+      const time = date.getTime();
+
+      setCurrentData(state => ({
+        pageviews: mergeData(state?.pageviews, data.pageviews, time),
+        sessions: mergeData(state?.sessions, data.sessions, time),
+        events: mergeData(state?.events, data.events, time),
+        timestamp: data.timestamp,
+      }));
+    }
+  }, [data]);
+
+  const realtimeData = useMemo(() => {
+    if (!currentData) {
+      return { pageviews: [], sessions: [], events: [], countries: [], visitors: [] };
+    }
+
+    currentData.countries = percentFilter(
+      currentData.sessions
+        .reduce((arr, data) => {
+          if (!arr.find(({ id }) => id === data.id)) {
+            return arr.concat(data);
+          }
+          return arr;
+        }, [])
+        .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)),
+    );
+
+    currentData.visitors = currentData.sessions.reduce((arr, val) => {
+      if (!arr.find(({ id }) => id === val.id)) {
+        return arr.concat(val);
+      }
+      return arr;
+    }, []);
+
+    return currentData;
+  }, [currentData]);
+
+  return (
+    <Page loading={isLoading} error={error}>
+      <WebsiteHeader websiteId={websiteId} />
+      <RealtimeHeader websiteId={websiteId} data={currentData} />
+      <RealtimeChart className={styles.chart} data={realtimeData} unit="minute" />
+      <GridRow>
+        <GridColumn xs={12} sm={12} md={12} lg={4} xl={4}>
+          <RealtimeUrls websiteId={websiteId} websiteDomain={website?.domain} data={realtimeData} />
+        </GridColumn>
+        <GridColumn xs={12} sm={12} md={12} lg={8} xl={8}>
+          <RealtimeLog websiteId={websiteId} websiteDomain={website?.domain} data={realtimeData} />
+        </GridColumn>
+      </GridRow>
+      <GridRow>
+        <GridColumn xs={12} lg={4}>
+          <RealtimeCountries data={realtimeData?.countries} />
+        </GridColumn>
+        <GridColumn xs={12} lg={8}>
+          <WorldMap data={realtimeData?.countries} />
+        </GridColumn>
+      </GridRow>
+    </Page>
+  );
+}
+
+export default RealtimePage;

src/components/pages/realtime/RealtimePage.module.css

@@ -0,0 +1,16 @@
+.container {
+  display: flex;
+}
+
+.chart {
+  margin-bottom: 30px;
+}
+
+.sticky {
+  position: fixed;
+  top: 0;
+  background: var(--base50);
+  border-bottom: 1px solid var(--base300);
+  z-index: var(--z-index-overlay);
+  padding: 10px 0;
+}

src/components/pages/realtime/RealtimeUrls.js

@@ -0,0 +1,104 @@
+import { useMemo, useState } from 'react';
+import { ButtonGroup, Button, Flexbox } from 'react-basics';
+import firstBy from 'thenby';
+import { percentFilter } from 'lib/filters';
+import DataTable from 'components/metrics/DataTable';
+import { FILTER_PAGES, FILTER_REFERRERS } from 'lib/constants';
+import useMessages from 'components/hooks/useMessages';
+
+export function RealtimeUrls({ websiteDomain, data = {} }) {
+  const { formatMessage, labels } = useMessages();
+  const { pageviews } = data;
+  const [filter, setFilter] = useState(FILTER_REFERRERS);
+  const limit = 15;
+
+  const buttons = [
+    {
+      label: formatMessage(labels.referrers),
+      key: FILTER_REFERRERS,
+    },
+    {
+      label: formatMessage(labels.pages),
+      key: FILTER_PAGES,
+    },
+  ];
+
+  const renderLink = ({ x }) => {
+    const domain = x.startsWith('/') ? websiteDomain : '';
+    return (
+      <a href={`//${domain}${x}`} target="_blank" rel="noreferrer noopener">
+        {x}
+      </a>
+    );
+  };
+
+  const [referrers = [], pages = []] = useMemo(() => {
+    if (pageviews) {
+      const referrers = percentFilter(
+        pageviews
+          .reduce((arr, { referrerDomain }) => {
+            if (referrerDomain) {
+              const row = arr.find(({ x }) => x === referrerDomain);
+
+              if (!row) {
+                arr.push({ x: referrerDomain, y: 1 });
+              } else {
+                row.y += 1;
+              }
+            }
+            return arr;
+          }, [])
+          .sort(firstBy('y', -1))
+          .slice(0, limit),
+      );
+
+      const pages = percentFilter(
+        pageviews
+          .reduce((arr, { urlPath }) => {
+            const row = arr.find(({ x }) => x === urlPath);
+
+            if (!row) {
+              arr.push({ x: urlPath, y: 1 });
+            } else {
+              row.y += 1;
+            }
+            return arr;
+          }, [])
+          .sort(firstBy('y', -1))
+          .slice(0, limit),
+      );
+
+      return [referrers, pages];
+    }
+
+    return [];
+  }, [pageviews]);
+
+  return (
+    <>
+      <Flexbox justifyContent="center">
+        <ButtonGroup items={buttons} selectedKey={filter} onSelect={setFilter}>
+          {({ key, label }) => <Button key={key}>{label}</Button>}
+        </ButtonGroup>
+      </Flexbox>
+      {filter === FILTER_REFERRERS && (
+        <DataTable
+          title={formatMessage(labels.referrers)}
+          metric={formatMessage(labels.views)}
+          renderLabel={renderLink}
+          data={referrers}
+        />
+      )}
+      {filter === FILTER_PAGES && (
+        <DataTable
+          title={formatMessage(labels.pages)}
+          metric={formatMessage(labels.views)}
+          renderLabel={renderLink}
+          data={pages}
+        />
+      )}
+    </>
+  );
+}
+
+export default RealtimeUrls;