Events table.

components/WebsiteDetails.js

@@ -16,6 +16,7 @@ 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';
 
 export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
   const [data, setData] = useState();
@@ -23,6 +24,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
   const [countryData, setCountryData] = useState();
   const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
   const [expand, setExpand] = useState();
+  const [showEvents, setShowEvents] = useState(false);
   const { startDate, endDate } = dateRange;
 
   const BackButton = () => (
@@ -50,6 +52,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
       value: 'country',
       component: props => <CountriesTable {...props} onDataLoad={data => setCountryData(data)} />,
     },
+    { label: 'Events', value: 'event', component: EventsTable },
   ];
 
   const tableProps = {
@@ -135,6 +138,12 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
               <CountriesTable {...tableProps} onDataLoad={data => setCountryData(data)} />
             </div>
           </div>
+          <div className={classNames(styles.row, 'row', { [styles.hidden]: !showEvents })}>
+            <div className="col-12 col-md-12 col-lg-4">
+              <EventsTable {...tableProps} onDataLoad={data => setShowEvents(data.length > 0)} />
+            </div>
+            <div className="col-12 col-md-12 col-lg-8">events</div>
+          </div>
         </>
       )}
       {expand && (

components/WebsiteDetails.module.css

@@ -42,6 +42,10 @@
   padding-right: 0;
 }
 
+.hidden {
+  display: none;
+}
+
 @media only screen and (max-width: 992px) {
   .row {
     border: 0;

components/metrics/EventsTable.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import MetricsTable from './MetricsTable';
+import styles from './EventsTable.module.css';
+
+export default function DevicesTable({
+  websiteId,
+  startDate,
+  endDate,
+  limit,
+  onExpand,
+  onDataLoad,
+}) {
+  return (
+    <MetricsTable
+      title="Events"
+      type="event"
+      metric="Actions"
+      websiteId={websiteId}
+      startDate={startDate}
+      endDate={endDate}
+      limit={limit}
+      renderLabel={({ w, x }) => (
+        <>
+          <span className={styles.type}>{w}</span>
+          {x}
+        </>
+      )}
+      onExpand={onExpand}
+      onDataLoad={onDataLoad}
+    />
+  );
+}

components/metrics/EventsTable.module.css

@@ -0,0 +1,7 @@
+.type {
+  font-size: var(--font-size-small);
+  padding: 2px 4px;
+  border: 1px solid var(--gray300);
+  border-radius: 4px;
+  margin-right: 10px;
+}

components/metrics/MetricsTable.js

@@ -21,9 +21,9 @@ export default function MetricsTable({
   filterOptions,
   limit,
   headerComponent,
+  renderLabel,
   onDataLoad = () => {},
   onExpand = () => {},
-  labelRenderer = e => e,
 }) {
   const [data, setData] = useState();
   const [format, setFormat] = useState(true);
@@ -43,37 +43,34 @@ export default function MetricsTable({
 
   async function loadData() {
     const data = await get(`/api/website/${websiteId}/rankings`, {
+      type,
       start_at: +startDate,
       end_at: +endDate,
-      type,
     });
 
     setData(data);
     onDataLoad(data);
   }
 
-  function handleSetFormat() {
-    setFormat(state => !state);
-  }
+  const handleSetFormat = () => setFormat(state => !state);
 
-  function getRow(x, y, z) {
+  const getRow = row => {
+    const { x: label, y: value, z: percent } = row;
     return (
       <AnimatedRow
-        key={x}
-        label={x}
-        value={y}
-        percent={z}
+        key={label}
+        label={renderLabel ? renderLabel(row) : label}
+        value={value}
+        percent={percent}
         animate={shouldAnimate}
         format={formatFunc}
         onClick={handleSetFormat}
-        labelRenderer={labelRenderer}
       />
     );
-  }
+  };
 
   const Row = ({ index, style }) => {
-    const { x, y, z } = rankings[index];
-    return <div style={style}>{getRow(x, y, z)}</div>;
+    return <div style={style}>{getRow(rankings[index])}</div>;
   };
 
   useEffect(() => {
@@ -96,10 +93,10 @@ export default function MetricsTable({
         </div>
       </div>
       <div className={styles.body}>
-        {limit ? (
-          rankings.map(({ x, y, z }) => getRow(x, y, z))
-        ) : (
-          <FixedSizeList height={600} itemCount={rankings.length} itemSize={30}>
+        {limit
+          ? rankings.map(row => getRow(row))
+          : data?.length > 0 && (
+              <FixedSizeList height={500} itemCount={rankings.length} itemSize={30}>
                 {Row}
               </FixedSizeList>
             )}
@@ -115,7 +112,7 @@ export default function MetricsTable({
   );
 }
 
-const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick, labelRenderer }) => {
+const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick }) => {
   const props = useSpring({
     width: percent,
     y: value,
@@ -125,7 +122,7 @@ const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick, labe
 
   return (
     <div className={styles.row}>
-      <div className={styles.label}>{labelRenderer(decodeURI(label))}</div>
+      <div className={styles.label}>{label}</div>
       <div className={styles.value} onClick={onClick}>
         <animated.div className={styles.value}>{props.y?.interpolate(format)}</animated.div>
       </div>

components/metrics/PagesTable.js

@@ -25,6 +25,7 @@ export default function PagesTable({
       limit={limit}
       dataFilter={urlFilter}
       filterOptions={{ domain: websiteDomain, raw: filter === 'Raw' }}
+      renderLabel={({ x }) => decodeURI(x)}
       onExpand={onExpand}
     />
   );

components/metrics/ReferrersTable.js

@@ -13,13 +13,13 @@ export default function Referrers({
 }) {
   const [filter, setFilter] = useState('Combined');
 
-  const renderLink = url => {
+  const renderLink = ({ x: url }) => {
     return url.startsWith('http') ? (
       <a href={url} target="_blank" rel="noreferrer">
-        {url}
+        {decodeURI(url)}
       </a>
     ) : (
-      url
+      decodeURI(url)
     );
   };
 
@@ -40,7 +40,7 @@ export default function Referrers({
         raw: filter === 'Raw',
       }}
       onExpand={onExpand}
-      labelRenderer={renderLink}
+      renderLabel={renderLink}
     />
   );
 }

lib/db.js

@@ -35,5 +35,6 @@ export default prisma;
 export async function runQuery(query) {
   return query.catch(e => {
     console.error(e);
+    throw e;
   });
 }

lib/filters.js

@@ -124,5 +124,5 @@ export const countryFilter = data =>
 
 export const percentFilter = data => {
   const total = data.reduce((n, { y }) => n + y, 0);
-  return data.map(({ x, y }) => ({ x, y, z: total ? (y / total) * 100 : 0 }));
+  return data.map(({ x, y, ...props }) => ({ x, y, z: total ? (y / total) * 100 : 0, ...props }));
 };

lib/queries.js

@@ -400,3 +400,41 @@ export function getActiveVisitors(website_id) {
 
   return Promise.resolve([]);
 }
+
+export function getEvents(website_id, start_at, end_at) {
+  const db = getDatabase();
+
+  if (db === POSTGRESQL) {
+    return prisma.$queryRaw(
+      `
+      select distinct event_type w, event_value x, count(*) y
+      from event
+      where website_id=$1
+      and created_at between $2 and $3
+      group by 1, 2
+      order by 3 desc
+      `,
+      website_id,
+      start_at,
+      end_at,
+    );
+  }
+
+  if (db === MYSQL) {
+    return prisma.$queryRaw(
+      `
+      select distinct event_type w, event_value x, count(*) y
+      from event
+      where website_id=?
+      and created_at between ? and ?
+      group by 1, 2
+      order by 3 desc
+      `,
+      website_id,
+      start_at,
+      end_at,
+    );
+  }
+
+  return Promise.resolve([]);
+}

pages/api/website/[id]/rankings.js

@@ -1,4 +1,4 @@
-import { getRankings } from 'lib/queries';
+import { getRankings, getEvents } from 'lib/queries';
 import { ok, badRequest } from 'lib/response';
 
 const sessionColumns = ['browser', 'os', 'device', 'country'];
@@ -6,14 +6,23 @@ const pageviewColumns = ['url', 'referrer'];
 
 export default async (req, res) => {
   const { id, type, start_at, end_at } = req.query;
+  const websiteId = +id;
+  const startDate = new Date(+start_at);
+  const endDate = new Date(+end_at);
 
-  if (!sessionColumns.includes(type) && !pageviewColumns.includes(type)) {
+  if (type !== 'event' && !sessionColumns.includes(type) && !pageviewColumns.includes(type)) {
     return badRequest(res);
   }
 
+  if (type === 'event') {
+    const events = await getEvents(websiteId, startDate, endDate);
+
+    return ok(res, events);
+  }
+
   const table = sessionColumns.includes(type) ? 'session' : 'pageview';
 
-  const rankings = await getRankings(+id, new Date(+start_at), new Date(+end_at), type, table);
+  const rankings = await getRankings(websiteId, startDate, endDate, type, table);
 
   return ok(res, rankings);
 };

sql/schema.mysql.sql

@@ -71,6 +71,7 @@ create index session_website_id_idx on session(website_id);
 create index pageview_created_at_idx on pageview(created_at);
 create index pageview_website_id_idx on pageview(website_id);
 create index pageview_session_id_idx on pageview(session_id);
+create index pageview_website_id_created_at_idx on pageview(website_id, created_at);
 
 create index event_created_at_idx on event(created_at);
 create index event_website_id_idx on event(website_id);

sql/schema.postgresql.sql

@@ -64,6 +64,7 @@ create index session_website_id_idx on session(website_id);
 create index pageview_created_at_idx on pageview(created_at);
 create index pageview_website_id_idx on pageview(website_id);
 create index pageview_session_id_idx on pageview(session_id);
+create index pageview_website_id_created_at_idx on pageview(website_id, created_at);
 
 create index event_created_at_idx on event(created_at);
 create index event_website_id_idx on event(website_id);