Initial commit

Created from https://vercel.com/new

components/metrics/RealtimeViews.js

@@ -0,0 +1,113 @@
+import React, { useMemo, useState, useCallback } from 'react';
+import { FormattedMessage } from 'react-intl';
+import firstBy from 'thenby';
+import { percentFilter } from 'lib/filters';
+import DataTable from './DataTable';
+import FilterButtons from 'components/common/FilterButtons';
+
+const FILTER_REFERRERS = 0;
+const FILTER_PAGES = 1;
+
+export default function RealtimeViews({ websiteId, data, websites }) {
+  const { pageviews } = data;
+  const [filter, setFilter] = useState(FILTER_REFERRERS);
+  const domains = useMemo(() => websites.map(({ domain }) => domain), [websites]);
+  const getDomain = useCallback(
+    id =>
+      websites.length === 1
+        ? websites[0]?.domain
+        : websites.find(({ website_id }) => website_id === id)?.domain,
+    [websites],
+  );
+
+  const buttons = [
+    {
+      label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
+      value: FILTER_REFERRERS,
+    },
+    {
+      label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
+      value: FILTER_PAGES,
+    },
+  ];
+
+  const renderLink = ({ x }) => {
+    const domain = x.startsWith('/') ? getDomain(websiteId) : '';
+    return (
+      <a href={`//${domain}${x}`} target="_blank" rel="noreferrer noopener">
+        {x}
+      </a>
+    );
+  };
+
+  const [referrers, pages] = useMemo(() => {
+    if (pageviews) {
+      const referrers = percentFilter(
+        pageviews
+          .reduce((arr, { referrer }) => {
+            if (referrer?.startsWith('http')) {
+              const hostname = new URL(referrer).hostname.replace(/^www\./, '');
+
+              if (hostname && !domains.includes(hostname)) {
+                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)),
+      );
+
+      const pages = percentFilter(
+        pageviews
+          .reduce((arr, { url, website_id }) => {
+            if (url?.startsWith('/')) {
+              if (!websiteId && websites.length > 1) {
+                url = `${getDomain(website_id)}${url}`;
+              }
+              const row = arr.find(({ x }) => x === url);
+
+              if (!row) {
+                arr.push({ x: url, y: 1 });
+              } else {
+                row.y += 1;
+              }
+            }
+            return arr;
+          }, [])
+          .sort(firstBy('y', -1)),
+      );
+
+      return [referrers, pages];
+    }
+    return [];
+  }, [pageviews]);
+
+  return (
+    <>
+      <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />
+      {filter === FILTER_REFERRERS && (
+        <DataTable
+          title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
+          metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+          data={referrers}
+          height={400}
+        />
+      )}
+      {filter === FILTER_PAGES && (
+        <DataTable
+          title={<FormattedMessage id="metrics.pages" defaultMessage="Pages" />}
+          metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
+          renderLabel={renderLink}
+          data={pages}
+          height={400}
+        />
+      )}
+    </>
+  );
+}