More updates to realtime.

components/input/WebsiteSelect.js

@@ -0,0 +1,28 @@
+import { useIntl } from 'react-intl';
+import { Dropdown, Item } from 'react-basics';
+import { labels } from 'components/messages';
+import useApi from 'hooks/useApi';
+
+export default function WebsiteSelect({ websiteId, onSelect }) {
+  const { formatMessage } = useIntl();
+  const { get, useQuery } = useApi();
+  const { data } = useQuery(['websites:me'], () => get('/me/websites'));
+
+  const renderValue = value => {
+    return data?.find(({ id }) => id === value)?.name;
+  };
+
+  return (
+    <Dropdown
+      items={data}
+      value={websiteId}
+      renderValue={renderValue}
+      onChange={onSelect}
+      alignment="end"
+      placeholder={formatMessage(labels.selectWebsite)}
+      style={{ width: 200 }}
+    >
+      {item => <Item key={item.id}>{item.name}</Item>}
+    </Dropdown>
+  );
+}

components/layout/PageHeader.module.css

@@ -19,7 +19,7 @@
 .title {
   display: flex;
   align-items: center;
-  font-size: 18px;
+  font-size: 24px;
-  font-weight: bold;
+  font-weight: 700;
   gap: 20px;
 }

components/messages.js

@@ -96,6 +96,7 @@ export const labels = defineMessages({
   selectWebsite: { id: 'label.select-website', defaultMessage: 'Select website' },
   all: { id: 'label.all', defaultMessage: 'All' },
   sessions: { id: 'label.sessions', defaultMessage: 'Sessions' },
+  pageNotFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' },
 });
 
 export const messages = defineMessages({

components/metrics/DataTable.js

@@ -8,7 +8,7 @@ import { formatNumber, formatLongNumber } from 'lib/format';
 import styles from './DataTable.module.css';
 
 export default function DataTable({
-  data,
+  data = [],
   title,
   metric,
   className,

components/metrics/EventDataForm.js

@@ -1,6 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 import classNames from 'classnames';
-import DateFilter from 'components/common/DateFilter';
+import DateFilter from 'components/input/DateFilter';
 import DataTable from 'components/metrics/DataTable';
 import FilterTags from 'components/metrics/FilterTags';
 import useApi from 'hooks/useApi';

components/metrics/WebsiteChart.js

@@ -5,7 +5,7 @@ import Link from 'next/link';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';
 import WebsiteHeader from './WebsiteHeader';
-import DateFilter from 'components/common/DateFilter';
+import DateFilter from 'components/input/DateFilter';
 import StickyHeader from 'components/helpers/StickyHeader';
 import ErrorMessage from 'components/common/ErrorMessage';
 import FilterTags from 'components/metrics/FilterTags';

components/pages/console/TestConsole.js

@@ -6,12 +6,13 @@ import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import EventsChart from 'components/metrics/EventsChart';
 import WebsiteChart from 'components/metrics/WebsiteChart';
+import WebsiteSelect from 'components/input/WebsiteSelect';
 import useApi from 'hooks/useApi';
 import styles from './TestConsole.module.css';
 
 export default function TestConsole() {
   const { get, useQuery } = useApi();
-  const { data, isLoading, error } = useQuery(['websites:test-console'], () => get('/websites'));
+  const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
   const router = useRouter();
   const {
     basePath,
@@ -50,15 +51,7 @@ export default function TestConsole() {
         )}
       </Head>
       <PageHeader title="Test console">
-        <Dropdown
+        <WebsiteSelect websiteId={website?.id} onSelect={handleChange} />
-          items={data}
-          renderValue={() => website?.name || 'Select website'}
-          value={website?.id}
-          onChange={handleChange}
-          style={{ width: 300 }}
-        >
-          {({ id, name }) => <Item key={id}>{name}</Item>}
-        </Dropdown>
       </PageHeader>
       {website && (
         <>

components/pages/realtime/RealtimeDashboard.js

@@ -7,43 +7,38 @@ import Page from 'components/layout/Page';
 import RealtimeChart from 'components/metrics/RealtimeChart';
 import RealtimeLog from 'components/pages/realtime/RealtimeLog';
 import RealtimeHeader from 'components/pages/realtime/RealtimeHeader';
+import StickyHeader from 'components/helpers/StickyHeader';
+import PageHeader from 'components/layout/PageHeader';
 import WorldMap from 'components/common/WorldMap';
 import DataTable from 'components/metrics/DataTable';
-import RealtimeViews from 'components/pages/realtime/RealtimeViews';
+import RealtimeUrls from 'components/pages/realtime/RealtimeUrls';
 import useApi from 'hooks/useApi';
 import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
 import { percentFilter } from 'lib/filters';
 import { labels } from 'components/messages';
-import { SHARE_TOKEN_HEADER, REALTIME_RANGE, REALTIME_INTERVAL } from 'lib/constants';
+import { REALTIME_RANGE, REALTIME_INTERVAL } from 'lib/constants';
 import styles from './RealtimeDashboard.module.css';
-import StickyHeader from 'components/helpers/StickyHeader';
+import WebsiteSelect from '../../input/WebsiteSelect';
-import PageHeader from 'components/layout/PageHeader';
+import { useRouter } from 'next/router';
-import ActiveUsers from 'components/metrics/ActiveUsers';
 
-function mergeData(state, data, time) {
+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) {
+export default function RealtimeDashboard({ websiteId }) {
-  return data.filter(({ websiteId }) => websiteId === id);
-}
-
-export default function RealtimeDashboard() {
   const { formatMessage } = useIntl();
   const { locale } = useLocale();
+  const router = useRouter();
   const countryNames = useCountryNames(locale);
-  const [data, setData] = useState();
+  const [currentData, setCurrentData] = useState();
-  const [websiteId, setWebsiteId] = useState();
   const { get, useQuery } = useApi();
-  const { data: websites, isLoading } = useQuery(['websites:me'], () => get('/me/websites'));
+  const { data, isLoading, error } = useQuery(
-
+    ['realtime', websiteId],
-  const { data: updates } = useQuery(
+    () => get(`/realtime/${websiteId}`, { startAt: currentData?.timestamp }),
-    ['realtime:updates'],
-    () => get('/realtime/update', { startAt: data?.timestamp }),
     {
       enabled: !!websiteId,
       retryInterval: REALTIME_INTERVAL,
@@ -55,91 +50,67 @@ export default function RealtimeDashboard() {
     [countryNames],
   );
 
-  const realtimeData = useMemo(() => {
-    if (data) {
-      const { pageviews, sessions, events } = data;
-
-      if (websiteId) {
-        const { id } = websites.find(n => n.id === websiteId);
-        return {
-          pageviews: filterWebsite(pageviews, id),
-          sessions: filterWebsite(sessions, id),
-          events: filterWebsite(events, id),
-        };
-      }
-    }
-
-    return data;
-  }, [data, websiteId]);
-
-  const count = useMemo(() => {
-    if (data) {
-      const { sessions } = data;
-      return sessions.filter(
-        ({ createdAt }) => differenceInMinutes(new Date(), new Date(createdAt)) <= 5,
-      ).length;
-    }
-  }, [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 (updates) {
+    if (data) {
-      const { pageviews, sessions, events, timestamp } = updates;
+      const { pageviews, sessions, events, timestamp } = data;
       const time = subMinutes(startOfMinute(new Date()), REALTIME_RANGE).getTime();
 
-      setData(state => ({
+      setCurrentData(state => ({
         ...state,
-        pageviews: mergeData(state.pageviews, pageviews, time),
+        pageviews: mergeData(state?.pageviews, pageviews, time),
-        sessions: mergeData(state.sessions, sessions, time),
+        sessions: mergeData(state?.sessions, sessions, time),
-        events: mergeData(state.events, events, time),
+        events: mergeData(state?.events, events, time),
         timestamp,
       }));
     }
-  }, [updates]);
+  }, [data]);
+
+  const realtimeData = useMemo(() => {
+    if (!currentData) {
+      return { pageviews: [], sessions: [], events: [], countries: [] };
+    }
+
+    currentData.countries = percentFilter(
+      currentData.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 currentData;
+  }, [currentData]);
+
+  const handleSelect = id => {
+    router.push(`/realtime/${id}`);
+  };
 
   return (
-    <Page loading={isLoading || !websites}>
+    <Page loading={isLoading} error={error}>
       <PageHeader title={formatMessage(labels.realtime)}>
-        <ActiveUsers value={count} />
+        <WebsiteSelect websiteId={websiteId} onSelect={handleSelect} />
       </PageHeader>
       <StickyHeader stickyClassName={styles.sticky}>
-        <RealtimeHeader
+        <RealtimeHeader websiteId={websiteId} data={currentData} />
-          websites={websites}
-          websiteId={websiteId}
-          data={{ ...realtimeData, countries }}
-          onSelect={setWebsiteId}
-        />
       </StickyHeader>
       <div className={styles.chart}>
         <RealtimeChart data={realtimeData} unit="minute" records={REALTIME_RANGE} />
       </div>
       <GridRow>
         <GridColumn xs={12} sm={12} md={12} lg={4} xl={4}>
-          <RealtimeViews websiteId={websiteId} data={realtimeData} websites={websites} />
+          <RealtimeUrls websiteId={websiteId} data={realtimeData} />
         </GridColumn>
         <GridColumn xs={12} sm={12} md={12} lg={8} xl={8}>
-          <RealtimeLog websiteId={websiteId} data={realtimeData} websites={websites} />
+          <RealtimeLog websiteId={websiteId} data={realtimeData} />
         </GridColumn>
       </GridRow>
       <GridRow>
@@ -147,12 +118,12 @@ export default function RealtimeDashboard() {
           <DataTable
             title={formatMessage(labels.countries)}
             metric={formatMessage(labels.visitors)}
-            data={countries}
+            data={realtimeData?.countries}
             renderLabel={renderCountryName}
           />
         </GridColumn>
         <GridColumn xs={12} lg={8}>
-          <WorldMap data={countries} />
+          <WorldMap data={realtimeData?.countries} />
         </GridColumn>
       </GridRow>
     </Page>

components/pages/realtime/RealtimeHeader.js

@@ -1,18 +1,12 @@
 import { useIntl } from 'react-intl';
-import { Dropdown, Item } from 'react-basics';
 import MetricCard from 'components/metrics/MetricCard';
 import { labels } from 'components/messages';
 import styles from './RealtimeHeader.module.css';
 
-export default function RealtimeHeader({ data, websiteId, websites, onSelect }) {
+export default function RealtimeHeader({ data = {} }) {
   const { formatMessage } = useIntl();
-
   const { pageviews, sessions, events, countries } = data;
 
-  const renderValue = value => {
-    return websites?.find(({ id }) => id === value)?.name;
-  };
-
   return (
     <div className={styles.header}>
       <div className={styles.metrics}>
@@ -25,20 +19,10 @@ export default function RealtimeHeader({ data, websiteId, websites, onSelect })
         <MetricCard label={formatMessage(labels.events)} value={events?.length} hideComparison />
         <MetricCard
           label={formatMessage(labels.countries)}
-          value={countries.length}
+          value={countries?.length}
           hideComparison
         />
       </div>
-      <Dropdown
-        items={websites}
-        value={websiteId}
-        renderValue={renderValue}
-        onChange={onSelect}
-        alignment="end"
-        placeholder={formatMessage(labels.selectWebsite)}
-      >
-        {item => <Item key={item.id}>{item.name}</Item>}
-      </Dropdown>
     </div>
   );
 }

components/pages/realtime/RealtimeHome.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { useIntl } from 'react-intl';
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import useApi from 'hooks/useApi';
+import { labels, messages } from 'components/messages';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+
+export default function RealtimeHome() {
+  const { formatMessage } = useIntl();
+  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]);
+
+  return (
+    <Page loading={isLoading || !data} error={error}>
+      <PageHeader title={formatMessage(labels.realtime)} />
+      {data?.length === 0 && <EmptyPlaceholder message={formatMessage(messages.noWebsites)} />}
+    </Page>
+  );
+}

components/pages/realtime/RealtimeLog.js

@@ -26,7 +26,7 @@ const TYPE_ICONS = {
   [TYPE_EVENT]: <Icons.Bolt />,
 };
 
-export default function RealtimeLog({ data, websites, websiteId }) {
+export default function RealtimeLog({ data, websiteDomain }) {
   const { formatMessage } = useIntl();
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
@@ -92,10 +92,6 @@ export default function RealtimeLog({ data, websites, websiteId }) {
     return TYPE_ICONS[getType(row)];
   }
 
-  function getWebsite({ websiteId }) {
-    return websites.find(n => n.id === websiteId);
-  }
-
   function getDetail({
     eventName,
     pageviewId,
@@ -111,11 +107,10 @@ export default function RealtimeLog({ data, websites, websiteId }) {
       return <div>{eventName}</div>;
     }
     if (pageviewId) {
-      const domain = getWebsite({ websiteId })?.domain;
       return (
         <a
           className={styles.link}
-          href={`//${domain}${url}`}
+          href={`//${websiteDomain}${url}`}
           target="_blank"
           rel="noreferrer noopener"
         >
@@ -146,7 +141,7 @@ export default function RealtimeLog({ data, websites, websiteId }) {
   function getColor(row) {
     const { sessionId } = row;
 
-    return stringToColor(uuids[sessionId] || `${sessionId}${getWebsite(row)}`);
+    return stringToColor(uuids[sessionId] || `${sessionId}}`);
   }
 
   const Row = ({ index, style }) => {
@@ -161,9 +156,6 @@ export default function RealtimeLog({ data, websites, websiteId }) {
           <Icon className={styles.icon} icon={getIcon(row)} />
           {getDetail(row)}
         </div>
-        {!websiteId && websites.length > 1 && (
-          <div className={styles.website}>{getWebsite(row)?.domain}</div>
-        )}
       </div>
     );
   };

components/pages/realtime/RealtimeUrls.js

@@ -1,5 +1,5 @@
-import { useMemo, useState, useCallback } from 'react';
+import { useMemo, useState } from 'react';
-import { ButtonGroup, Button } from 'react-basics';
+import { ButtonGroup, Button, Flexbox } from 'react-basics';
 import { useIntl } from 'react-intl';
 import firstBy from 'thenby';
 import { percentFilter } from 'lib/filters';
@@ -7,18 +7,10 @@ import DataTable from 'components/metrics/DataTable';
 import { FILTER_PAGES, FILTER_REFERRERS } from 'lib/constants';
 import { labels } from 'components/messages';
 
-export default function RealtimeViews({ websiteId, data = {}, websites }) {
+export default function RealtimeUrls({ websiteDomain, data = {} }) {
   const { formatMessage } = useIntl();
   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(({ websiteId }) => websiteId === id)?.domain,
-    [websites],
-  );
 
   const buttons = [
     {
@@ -32,7 +24,7 @@ export default function RealtimeViews({ websiteId, data = {}, websites }) {
   ];
 
   const renderLink = ({ x }) => {
-    const domain = x.startsWith('/') ? getDomain(websiteId) : '';
+    const domain = x.startsWith('/') ? websiteDomain : '';
     return (
       <a href={`//${domain}${x}`} target="_blank" rel="noreferrer noopener">
         {x}
@@ -48,7 +40,7 @@ export default function RealtimeViews({ websiteId, data = {}, websites }) {
             if (referrer?.startsWith('http')) {
               const hostname = new URL(referrer).hostname.replace(/^www\./, '');
 
-              if (hostname && !domains.includes(hostname)) {
+              if (hostname) {
                 const row = arr.find(({ x }) => x === hostname);
 
                 if (!row) {
@@ -65,11 +57,8 @@ export default function RealtimeViews({ websiteId, data = {}, websites }) {
 
       const pages = percentFilter(
         pageviews
-          .reduce((arr, { url, websiteId }) => {
+          .reduce((arr, { url }) => {
             if (url?.startsWith('/')) {
-              if (!websiteId && websites.length > 1) {
-                url = `${getDomain(websiteId)}${url}`;
-              }
               const row = arr.find(({ x }) => x === url);
 
               if (!row) {
@@ -91,9 +80,11 @@ export default function RealtimeViews({ websiteId, data = {}, websites }) {
 
   return (
     <>
-      <ButtonGroup items={buttons} selectedKey={filter} onSelect={setFilter}>
+      <Flexbox justifyContent="center">
-        {({ key, label }) => <Button key={key}>{label}</Button>}
+        <ButtonGroup items={buttons} selectedKey={filter} onSelect={setFilter}>
-      </ButtonGroup>
+          {({ key, label }) => <Button key={key}>{label}</Button>}
+        </ButtonGroup>
+      </Flexbox>
       {filter === FILTER_REFERRERS && (
         <DataTable
           title={formatMessage(labels.referrers)}

components/pages/settings/profile/DateRangeSetting.js

@@ -1,5 +1,5 @@
 import { useIntl } from 'react-intl';
-import DateFilter from 'components/common/DateFilter';
+import DateFilter from 'components/input/DateFilter';
 import { Button, Flexbox } from 'react-basics';
 import useDateRange from 'hooks/useDateRange';
 import { DEFAULT_DATE_RANGE } from 'lib/constants';

hooks/useLocale.js

@@ -51,7 +51,7 @@ export default function useLocale() {
   }, [locale]);
 
   useEffect(() => {
-    const url = new URL(window.location.href);
+    const url = new URL(window?.location?.href);
     const locale = url.searchParams.get('locale');
 
     if (locale) {

hooks/useTheme.js

@@ -24,7 +24,7 @@ export default function useTheme() {
   }, [theme]);
 
   useEffect(() => {
-    const url = new URL(window.location.href);
+    const url = new URL(window?.location?.href);
     const theme = url.searchParams.get('theme');
 
     if (['light', 'dark'].includes(theme)) {

next.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 require('dotenv').config();
 const pkg = require('./package.json');
 

pages/404.js

@@ -1,18 +1,20 @@
+import { Row, Column, Flexbox } from 'react-basics';
+import { useIntl } from 'react-intl';
 import AppLayout from 'components/layout/AppLayout';
-import { useIntl, defineMessages } from 'react-intl';
+import { labels } from 'components/messages';
-
-const messages = defineMessages({
-  notFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' },
-});
 
 export default function Custom404() {
   const { formatMessage } = useIntl();
 
   return (
     <AppLayout>
-      <div className="row justify-content-center">
+      <Row>
-        <h1 style={{ textAlign: 'center' }}>{formatMessage(messages.notFound)}</h1>
+        <Column>
-      </div>
+          <Flexbox alignItems="center" justifyContent="center" flex={1} style={{ minHeight: 600 }}>
+            <h1>{formatMessage(labels.pageNotFound)}</h1>
+          </Flexbox>
+        </Column>
+      </Row>
     </AppLayout>
   );
 }

pages/api/realtime/[id].ts

@@ -0,0 +1,20 @@
+import { subMinutes } from 'date-fns';
+import { RealtimeInit, NextApiRequestAuth } from 'lib/types';
+import { useAuth } from 'lib/middleware';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok } from 'next-basics';
+import { getRealtimeData } from 'queries';
+
+export default async (req: NextApiRequestAuth, res: NextApiResponse<RealtimeInit>) => {
+  await useAuth(req, res);
+
+  if (req.method === 'GET') {
+    const { id } = req.query;
+
+    const data = await getRealtimeData(id, subMinutes(new Date(), 30));
+
+    return ok(res, data);
+  }
+
+  return methodNotAllowed(res);
+};

pages/api/realtime/init.ts

@@ -1,28 +0,0 @@
-import { subMinutes } from 'date-fns';
-import { RealtimeInit, NextApiRequestAuth } from 'lib/types';
-import { secret } from 'lib/crypto';
-import { useAuth } from 'lib/middleware';
-import { NextApiResponse } from 'next';
-import { createToken, methodNotAllowed, ok } from 'next-basics';
-import { getRealtimeData, getUserWebsites } from 'queries';
-
-export default async (req: NextApiRequestAuth, res: NextApiResponse<RealtimeInit>) => {
-  await useAuth(req, res);
-
-  if (req.method === 'GET') {
-    const { id: userId } = req.auth.user;
-
-    const websites = await getUserWebsites(userId);
-    const ids = websites.map(({ id }) => id);
-    const token = createToken({ websites: ids }, secret());
-    const data = await getRealtimeData(ids, subMinutes(new Date(), 30));
-
-    return ok(res, {
-      websites,
-      token,
-      data,
-    });
-  }
-
-  return methodNotAllowed(res);
-};

pages/api/realtime/update.ts

@@ -1,36 +0,0 @@
-import { ok, methodNotAllowed, badRequest, parseToken } from 'next-basics';
-import { useAuth } from 'lib/middleware';
-import { getRealtimeData } from 'queries';
-import { SHARE_TOKEN_HEADER } from 'lib/constants';
-import { secret } from 'lib/crypto';
-import { NextApiRequestQueryBody, RealtimeUpdate } from 'lib/types';
-import { NextApiResponse } from 'next';
-
-export interface InitUpdateRequestQuery {
-  startAt: string;
-}
-
-export default async (
-  req: NextApiRequestQueryBody<InitUpdateRequestQuery>,
-  res: NextApiResponse<RealtimeUpdate>,
-) => {
-  await useAuth(req, res);
-
-  if (req.method === 'GET') {
-    const { startAt } = req.query;
-
-    const token = req.headers[SHARE_TOKEN_HEADER];
-
-    if (!token) {
-      return badRequest(res);
-    }
-
-    const { websites } = parseToken(token, secret());
-
-    const data = await getRealtimeData(websites, new Date(+startAt));
-
-    return ok(res, data);
-  }
-
-  return methodNotAllowed(res);
-};

pages/realtime/[id]/index.js

@@ -0,0 +1,18 @@
+import { useRouter } from 'next/router';
+import AppLayout from 'components/layout/AppLayout';
+import RealtimeDashboard from 'components/pages/realtime/RealtimeDashboard';
+
+export default function RealtimeDetailsPage() {
+  const router = useRouter();
+  const { id: websiteId } = router.query;
+
+  if (!websiteId) {
+    return null;
+  }
+
+  return (
+    <AppLayout>
+      <RealtimeDashboard websiteId={websiteId} />
+    </AppLayout>
+  );
+}

pages/realtime/index.js

@@ -1,10 +1,10 @@
 import AppLayout from 'components/layout/AppLayout';
-import RealtimeDashboard from 'components/pages/realtime/RealtimeDashboard';
+import RealtimeHome from 'components/pages/realtime/RealtimeHome';
 
 export default function RealtimePage() {
   return (
     <AppLayout>
-      <RealtimeDashboard />
+      <RealtimeHome />
     </AppLayout>
   );
 }

queries/analytics/event/getEvents.ts

@@ -3,19 +3,17 @@ import clickhouse from 'lib/clickhouse';
 import { runQuery, CLICKHOUSE, PRISMA } from 'lib/db';
 import { EVENT_TYPE } from 'lib/constants';
 
-export function getEvents(...args: [websites: string[], startAt: Date]) {
+export function getEvents(...args: [websiteId: string, startAt: Date]) {
   return runQuery({
     [PRISMA]: () => relationalQuery(...args),
     [CLICKHOUSE]: () => clickhouseQuery(...args),
   });
 }
 
-function relationalQuery(websites: string[], startAt: Date) {
+function relationalQuery(websiteId: string, startAt: Date) {
-  return prisma.client.event.findMany({
+  return prisma.client.websiteEvent.findMany({
     where: {
-      websiteId: {
+      websiteId,
-        in: websites,
-      },
       createdAt: {
         gte: startAt,
       },
@@ -23,7 +21,7 @@ function relationalQuery(websites: string[], startAt: Date) {
   });
 }
 
-function clickhouseQuery(websites: string[], startAt: Date) {
+function clickhouseQuery(websiteId: string, startAt: Date) {
   const { rawQuery } = clickhouse;
 
   return rawQuery(
@@ -36,10 +34,10 @@ function clickhouseQuery(websites: string[], startAt: Date) {
       event_name
     from event
     where event_type = ${EVENT_TYPE.customEvent}
-      and ${websites && websites.length > 0 ? `website_id in {websites:Array(UUID)}` : '0 = 0'}
+      and website_id = {websiteId:UUID}
       and created_at >= {startAt:DateTime('UTC')}`,
     {
-      websites,
+      websiteId,
       startAt,
     },
   );

queries/analytics/pageview/getPageviews.ts

@@ -3,19 +3,17 @@ import clickhouse from 'lib/clickhouse';
 import { runQuery, CLICKHOUSE, PRISMA } from 'lib/db';
 import { EVENT_TYPE } from 'lib/constants';
 
-export async function getPageviews(...args: [websites: string[], startAt: Date]) {
+export async function getPageviews(...args: [websiteId: string, startAt: Date]) {
   return runQuery({
     [PRISMA]: () => relationalQuery(...args),
     [CLICKHOUSE]: () => clickhouseQuery(...args),
   });
 }
 
-async function relationalQuery(websites: string[], startAt: Date) {
+async function relationalQuery(websiteId: string, startAt: Date) {
-  return prisma.client.pageview.findMany({
+  return prisma.client.websiteEvent.findMany({
     where: {
-      websiteId: {
+      websiteId,
-        in: websites,
-      },
       createdAt: {
         gte: startAt,
       },
@@ -23,21 +21,21 @@ async function relationalQuery(websites: string[], startAt: Date) {
   });
 }
 
-async function clickhouseQuery(websites: string[], startAt: Date) {
+async function clickhouseQuery(websiteId: string, startAt: Date) {
   const { rawQuery } = clickhouse;
 
   return rawQuery(
     `select
-        website_id,
+        website_id as websiteId,
-        session_id,
+        session_id as sessionId,
-        created_at,
+        created_at as createdAt,
         url
       from event
       where event_type = ${EVENT_TYPE.pageView}
-        and ${websites && websites.length > 0 ? `website_id in {websites:Array(UUID)}` : '0 = 0'}
+        and website_id = {websiteId:UUID}
         and created_at >= {startAt:DateTime('UTC')}`,
     {
-      websites,
+      websiteId,
       startAt,
     },
   );

queries/analytics/session/getSessions.ts

@@ -2,23 +2,17 @@ import prisma from 'lib/prisma';
 import clickhouse from 'lib/clickhouse';
 import { runQuery, PRISMA, CLICKHOUSE } from 'lib/db';
 
-export async function getSessions(...args: [websites: string[], startAt: Date]) {
+export async function getSessions(...args: [websiteId: string, startAt: Date]) {
   return runQuery({
     [PRISMA]: () => relationalQuery(...args),
     [CLICKHOUSE]: () => clickhouseQuery(...args),
   });
 }
 
-async function relationalQuery(websites: string[], startAt: Date) {
+async function relationalQuery(websiteId: string, startAt: Date) {
   return prisma.client.session.findMany({
     where: {
-      ...(websites && websites.length > 0
+      websiteId,
-        ? {
-            websiteId: {
-              in: websites,
-            },
-          }
-        : {}),
       createdAt: {
         gte: startAt,
       },
@@ -26,7 +20,7 @@ async function relationalQuery(websites: string[], startAt: Date) {
   });
 }
 
-async function clickhouseQuery(websites: string[], startAt: Date) {
+async function clickhouseQuery(websiteId: string, startAt: Date) {
   const { rawQuery } = clickhouse;
 
   return rawQuery(
@@ -42,10 +36,10 @@ async function clickhouseQuery(websites: string[], startAt: Date) {
       language,
       country
     from event
-    where ${websites && websites.length > 0 ? `website_id in {websites:Array(UUID)}` : '0 = 0'}
+    where website_id = {websiteId:UUID}
       and created_at >= {startAt:DateTime('UTC')}`,
     {
-      websites,
+      websiteId,
       startAt,
     },
   );

queries/analytics/stats/getRealtimeData.ts

@@ -2,11 +2,11 @@ import { getPageviews } from '../pageview/getPageviews';
 import { getSessions } from '../session/getSessions';
 import { getEvents } from '../event/getEvents';
 
-export async function getRealtimeData(websites, time) {
+export async function getRealtimeData(websiteId, time) {
   const [pageviews, sessions, events] = await Promise.all([
-    getPageviews(websites, time),
+    getPageviews(websiteId, time),
-    getSessions(websites, time),
+    getSessions(websiteId, time),
-    getEvents(websites, time),
+    getEvents(websiteId, time),
   ]);
 
   return {