Initial commit

Created from https://vercel.com/new

components/pages/RealtimeDashboard.js

@@ -0,0 +1,158 @@
+import React, { 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 useFetch from 'hooks/useFetch';
+import useLocale from 'hooks/useLocale';
+import useCountryNames from 'hooks/useCountryNames';
+import { percentFilter } from 'lib/filters';
+import { 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(({ 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/init');
+  const { data: updates } = useFetch('/api/realtime/update', {
+    params: { start_at: data?.timestamp },
+    disabled: !init?.websites?.length || !data,
+    interval: REALTIME_INTERVAL,
+    headers: { [TOKEN_HEADER]: init?.token },
+  });
+
+  const renderCountryName = useCallback(
+    ({ x }) => <span className={locale}>{countryNames[x]}</span>,
+    [countryNames],
+  );
+
+  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?.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 || loading) {
+    return null;
+  }
+
+  const { websites } = data;
+
+  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}>
+            <RealtimeViews websiteId={websiteId} data={realtimeData} websites={websites} />
+          </GridColumn>
+          <GridColumn xs={12} lg={8}>
+            <RealtimeLog websiteId={websiteId} 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}
+            />
+          </GridColumn>
+          <GridColumn xs={12} lg={8}>
+            <WorldMap data={countries} />
+          </GridColumn>
+        </GridRow>
+      </GridLayout>
+    </Page>
+  );
+}

components/pages/RealtimeDashboard.module.css

@@ -0,0 +1,7 @@
+.container {
+  display: flex;
+}
+
+.chart {
+  margin-bottom: 30px;
+}

components/pages/Settings.js

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { useRouter } from 'next/router';
+import Page from 'components/layout/Page';
+import MenuLayout from 'components/layout/MenuLayout';
+import WebsiteSettings from '../settings/WebsiteSettings';
+import AccountSettings from '../settings/AccountSettings';
+import ProfileSettings from '../settings/ProfileSettings';
+import { useSelector } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+
+const WEBSITES = '/settings';
+const ACCOUNTS = '/settings/accounts';
+const PROFILE = '/settings/profile';
+
+export default function Settings() {
+  const user = useSelector(state => state.user);
+  const [option, setOption] = useState(WEBSITES);
+  const router = useRouter();
+  const { pathname } = router;
+
+  const menuOptions = [
+    {
+      label: <FormattedMessage id="label.websites" defaultMessage="Websites" />,
+      value: WEBSITES,
+    },
+    {
+      label: <FormattedMessage id="label.accounts" defaultMessage="Accounts" />,
+      value: ACCOUNTS,
+      hidden: !user?.is_admin,
+    },
+    {
+      label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
+      value: PROFILE,
+    },
+  ];
+
+  return (
+    <Page>
+      <MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}>
+        {pathname === WEBSITES && <WebsiteSettings />}
+        {pathname === ACCOUNTS && <AccountSettings />}
+        {pathname === PROFILE && <ProfileSettings />}
+      </MenuLayout>
+    </Page>
+  );
+}

components/pages/TestConsole.js

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import classNames from 'classnames';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import Page from '../layout/Page';
+import PageHeader from '../layout/PageHeader';
+import useFetch from '../../hooks/useFetch';
+import DropDown from '../common/DropDown';
+import styles from './TestConsole.module.css';
+import WebsiteChart from '../metrics/WebsiteChart';
+import EventsChart from '../metrics/EventsChart';
+import Button from '../common/Button';
+import EmptyPlaceholder from '../common/EmptyPlaceholder';
+
+export default function TestConsole() {
+  const user = useSelector(state => state.user);
+  const [website, setWebsite] = useState();
+  const { basePath } = useRouter();
+  const { data } = useFetch('/api/websites');
+
+  if (!data || !user?.is_admin) {
+    return null;
+  }
+
+  const options = data.map(({ name, website_id }) => ({ label: name, value: website_id }));
+  const selectedValue = options.find(({ value }) => value === website?.website_id)?.value;
+
+  function handleSelect(value) {
+    setWebsite(data.find(({ website_id }) => website_id === value));
+  }
+
+  function handleClick() {
+    window.umami('event (default)');
+    window.umami.trackView('/page-view', 'https://www.google.com');
+    window.umami.trackEvent('event (custom)', 'custom-type');
+  }
+
+  return (
+    <Page>
+      <Head>
+        {typeof window !== 'undefined' && website && (
+          <script async defer data-website-id={website.website_uuid} src={`${basePath}/umami.js`} />
+        )}
+      </Head>
+      <PageHeader>
+        <div>Test Console</div>
+        <DropDown
+          value={selectedValue || 'Select website'}
+          options={options}
+          onChange={handleSelect}
+        />
+      </PageHeader>
+      {!selectedValue && <EmptyPlaceholder msg="I hope you know what you're doing here" />}
+      {selectedValue && (
+        <>
+          <div className={classNames(styles.test, 'row')}>
+            <div className="col-4">
+              <PageHeader>Page links</PageHeader>
+              <div>
+                <Link href={`?page=1`}>
+                  <a>page one</a>
+                </Link>
+              </div>
+              <div>
+                <Link href={`?page=2`}>
+                  <a>page two</a>
+                </Link>
+              </div>
+            </div>
+            <div className="col-4">
+              <PageHeader>CSS events</PageHeader>
+              <Button id="primary-button" className="umami--click--primary-button" variant="action">
+                Send event
+              </Button>
+            </div>
+            <div className="col-4">
+              <PageHeader>Javascript events</PageHeader>
+              <Button id="manual-button" variant="action" onClick={handleClick}>
+                Run script
+              </Button>
+            </div>
+          </div>
+          <div className="row">
+            <div className="col-12">
+              <WebsiteChart
+                websiteId={website.website_id}
+                title={website.name}
+                domain={website.domain}
+                showLink
+              />
+              <PageHeader>Events</PageHeader>
+              <EventsChart websiteId={website.website_id} />
+            </div>
+          </div>
+        </>
+      )}
+    </Page>
+  );
+}

components/pages/TestConsole.module.css

@@ -0,0 +1,5 @@
+.test {
+  border: 1px solid var(--gray200);
+  border-radius: 5px;
+  padding: 0 20px 20px 20px;
+}

components/pages/WebsiteDetails.js

@@ -0,0 +1,182 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import WebsiteChart from 'components/metrics/WebsiteChart';
+import WorldMap from 'components/common/WorldMap';
+import Page from 'components/layout/Page';
+import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout';
+import MenuLayout from 'components/layout/MenuLayout';
+import Link from 'components/common/Link';
+import Loading from 'components/common/Loading';
+import Arrow from 'assets/arrow-right.svg';
+import styles from './WebsiteDetails.module.css';
+import PagesTable from '../metrics/PagesTable';
+import ReferrersTable from '../metrics/ReferrersTable';
+import BrowsersTable from '../metrics/BrowsersTable';
+import OSTable from '../metrics/OSTable';
+import DevicesTable from '../metrics/DevicesTable';
+import CountriesTable from '../metrics/CountriesTable';
+import EventsTable from '../metrics/EventsTable';
+import EventsChart from '../metrics/EventsChart';
+import useFetch from 'hooks/useFetch';
+import usePageQuery from 'hooks/usePageQuery';
+import useShareToken from 'hooks/useShareToken';
+import { DEFAULT_ANIMATION_DURATION, TOKEN_HEADER } from 'lib/constants';
+
+const views = {
+  url: PagesTable,
+  referrer: ReferrersTable,
+  browser: BrowsersTable,
+  os: OSTable,
+  device: DevicesTable,
+  country: CountriesTable,
+  event: EventsTable,
+};
+
+export default function WebsiteDetails({ websiteId }) {
+  const shareToken = useShareToken();
+  const { data } = useFetch(`/api/website/${websiteId}`, {
+    headers: { [TOKEN_HEADER]: shareToken?.token },
+  });
+  const [chartLoaded, setChartLoaded] = useState(false);
+  const [countryData, setCountryData] = useState();
+  const [eventsData, setEventsData] = useState();
+  const {
+    resolve,
+    query: { view },
+  } = usePageQuery();
+
+  const BackButton = () => (
+    <div key="back-button" className={styles.backButton}>
+      <Link key="back-button" href={resolve({ view: undefined })} icon={<Arrow />} size="small">
+        <FormattedMessage id="label.back" defaultMessage="Back" />
+      </Link>
+    </div>
+  );
+
+  const menuOptions = [
+    {
+      render: BackButton,
+    },
+    {
+      label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
+      value: resolve({ view: 'url' }),
+    },
+    {
+      label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
+      value: resolve({ view: 'referrer' }),
+    },
+    {
+      label: <FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />,
+      value: resolve({ view: 'browser' }),
+    },
+    {
+      label: <FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />,
+      value: resolve({ view: 'os' }),
+    },
+    {
+      label: <FormattedMessage id="metrics.devices" defaultMessage="Devices" />,
+      value: resolve({ view: 'device' }),
+    },
+    {
+      label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />,
+      value: resolve({ view: 'country' }),
+    },
+    {
+      label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
+      value: resolve({ view: 'event' }),
+    },
+  ];
+
+  const tableProps = {
+    websiteId,
+    websiteDomain: data?.domain,
+    limit: 10,
+  };
+
+  const DetailsComponent = views[view];
+
+  function handleDataLoad() {
+    if (!chartLoaded) {
+      setTimeout(() => setChartLoaded(true), DEFAULT_ANIMATION_DURATION);
+    }
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <Page>
+      <div className="row">
+        <div className={classNames(styles.chart, 'col')}>
+          <WebsiteChart
+            websiteId={websiteId}
+            title={data.name}
+            domain={data.domain}
+            onDataLoad={handleDataLoad}
+            showLink={false}
+            stickyHeader
+          />
+          {!chartLoaded && <Loading />}
+        </div>
+      </div>
+      {chartLoaded && !view && (
+        <GridLayout>
+          <GridRow>
+            <GridColumn md={12} lg={6}>
+              <PagesTable {...tableProps} />
+            </GridColumn>
+            <GridColumn md={12} lg={6}>
+              <ReferrersTable {...tableProps} />
+            </GridColumn>
+          </GridRow>
+          <GridRow>
+            <GridColumn md={12} lg={4}>
+              <BrowsersTable {...tableProps} />
+            </GridColumn>
+            <GridColumn md={12} lg={4}>
+              <OSTable {...tableProps} />
+            </GridColumn>
+            <GridColumn md={12} lg={4}>
+              <DevicesTable {...tableProps} />
+            </GridColumn>
+          </GridRow>
+          <GridRow>
+            <GridColumn xs={12} md={12} lg={8}>
+              <WorldMap data={countryData} />
+            </GridColumn>
+            <GridColumn xs={12} md={12} lg={4}>
+              <CountriesTable {...tableProps} onDataLoad={setCountryData} />
+            </GridColumn>
+          </GridRow>
+          <GridRow className={classNames({ [styles.hidden]: !eventsData?.length > 0 })}>
+            <GridColumn xs={12} md={12} lg={4}>
+              <EventsTable {...tableProps} onDataLoad={setEventsData} />
+            </GridColumn>
+            <GridColumn xs={12} md={12} lg={8}>
+              <EventsChart className={styles.eventschart} websiteId={websiteId} />
+            </GridColumn>
+          </GridRow>
+        </GridLayout>
+      )}
+      {view && chartLoaded && (
+        <MenuLayout
+          className={styles.view}
+          menuClassName={styles.menu}
+          contentClassName={styles.content}
+          menu={menuOptions}
+        >
+          <DetailsComponent
+            {...tableProps}
+            height={500}
+            limit={false}
+            animte={false}
+            showFilters
+            virtualize
+          />
+        </MenuLayout>
+      )}
+    </Page>
+  );
+}

components/pages/WebsiteDetails.module.css

@@ -0,0 +1,35 @@
+.chart {
+  margin-bottom: 30px;
+}
+
+.view {
+  border-top: 1px solid var(--gray300);
+}
+
+.menu {
+  font-size: var(--font-size-small);
+}
+
+.content {
+  min-height: 600px;
+  padding: 20px 0;
+}
+
+.backButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.backButton svg {
+  transform: rotate(180deg);
+}
+
+.hidden {
+  display: none;
+}
+
+.eventschart {
+  padding-top: 30px;
+}

components/pages/WebsiteList.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import Link from 'components/common/Link';
+import WebsiteChart from 'components/metrics/WebsiteChart';
+import Page from 'components/layout/Page';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import Button from 'components/common/Button';
+import useFetch from 'hooks/useFetch';
+import Arrow from 'assets/arrow-right.svg';
+import Chart from 'assets/chart-bar.svg';
+import styles from './WebsiteList.module.css';
+
+export default function WebsiteList({ userId }) {
+  const { data } = useFetch('/api/websites', { params: { user_id: userId } });
+  const [hideCharts, setHideCharts] = useState(false);
+
+  if (!data) {
+    return null;
+  }
+
+  if (data.length === 0) {
+    return (
+      <Page>
+        <EmptyPlaceholder
+          msg={
+            <FormattedMessage
+              id="message.no-websites-configured"
+              defaultMessage="You don't have any websites configured."
+            />
+          }
+        >
+          <Link href="/settings" icon={<Arrow />} iconRight>
+            <FormattedMessage id="message.go-to-settings" defaultMessage="Go to settings" />
+          </Link>
+        </EmptyPlaceholder>
+      </Page>
+    );
+  }
+
+  return (
+    <Page>
+      <div className={styles.menubar}>
+        <Button
+          tooltip={<FormattedMessage id="message.toggle-charts" defaultMessage="Toggle charts" />}
+          icon={<Chart />}
+          onClick={() => setHideCharts(!hideCharts)}
+        />
+      </div>
+      {data.map(({ website_id, name, domain }) => (
+        <div key={website_id} className={styles.website}>
+          <WebsiteChart
+            websiteId={website_id}
+            title={name}
+            domain={domain}
+            hideChart={hideCharts}
+            showLink
+          />
+        </div>
+      ))}
+    </Page>
+  );
+}

components/pages/WebsiteList.module.css

@@ -0,0 +1,18 @@
+.website {
+  padding-bottom: 30px;
+  border-bottom: 1px solid var(--gray300);
+  margin-bottom: 30px;
+  align-self: stretch;
+}
+
+.website:last-child {
+  border-bottom: 0;
+  margin-bottom: 0;
+}
+
+.menubar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-top: 10px;
+}