From 1591dc246cbf77e214bfc42eb560a8e24a071d41 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 24 Aug 2020 10:40:01 -0700
Subject: [PATCH 01/12] Don't filter subdomains.

---
 lib/filters.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/filters.js b/lib/filters.js
index 6c5a0294..ad72024f 100644
--- a/lib/filters.js
+++ b/lib/filters.js
@@ -54,7 +54,7 @@ export const refFilter = (data, { domain, domainOnly, raw }) => {
   };
 
   if (raw) {
-    const regex = new RegExp(`http[s]?://([^.]+.)?${domain}`);
+    const regex = new RegExp(`http[s]?://${domain}`);
     return data.filter(({ x }) => isValidRef(x) && !regex.test(x));
   }
 

From a19248d71350cb052139894ab2fb9e9e290d304a Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 24 Aug 2020 10:52:47 -0700
Subject: [PATCH 02/12] Fixed bounce rate calculation.

---
 components/metrics/MetricsBar.js | 2 +-
 lib/queries.js                   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js
index 18a1a43b..00238fbe 100644
--- a/components/metrics/MetricsBar.js
+++ b/components/metrics/MetricsBar.js
@@ -35,7 +35,7 @@ export default function MetricsBar({ websiteId, startDate, endDate, className })
       <MetricCard label="Visitors" value={uniques} format={formatFunc} />
       <MetricCard
         label="Bounce rate"
-        value={uniques ? (bounces / uniques) * 100 : 0}
+        value={pageviews ? (bounces / pageviews) * 100 : 0}
         format={n => Number(n).toFixed(0) + '%'}
       />
       <MetricCard
diff --git a/lib/queries.js b/lib/queries.js
index 03b4759f..b9678240 100644
--- a/lib/queries.js
+++ b/lib/queries.js
@@ -236,7 +236,7 @@ export function getMetrics(website_id, start_at, end_at) {
       `
       select sum(t.c) as "pageviews",
         count(distinct t.session_id) as "uniques",
-        sum(case when t.c = 1 then t.c else 0 end) as "bounces",
+        sum(case when t.c = 1 then 1 else 0 end) as "bounces",
         sum(t.time) as "totaltime"
       from (
          select session_id,
@@ -260,7 +260,7 @@ export function getMetrics(website_id, start_at, end_at) {
       `
       select sum(t.c) as "pageviews",
         count(distinct t.session_id) as "uniques",
-        sum(case when t.c = 1 then t.c else 0 end) as "bounces",
+        sum(case when t.c = 1 then 1 else 0 end) as "bounces",
         sum(t.time) as "totaltime"
       from (
          select session_id,

From 5e9299be1e6e802baadde5dfdc0d3748dc40a464 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 24 Aug 2020 23:49:14 -0700
Subject: [PATCH 03/12] Events table.

---
 components/WebsiteDetails.js              |  9 +++++
 components/WebsiteDetails.module.css      |  4 +++
 components/metrics/EventsTable.js         | 32 +++++++++++++++++
 components/metrics/EventsTable.module.css |  7 ++++
 components/metrics/MetricsTable.js        | 43 +++++++++++------------
 components/metrics/PagesTable.js          |  1 +
 components/metrics/ReferrersTable.js      |  8 ++---
 lib/db.js                                 |  1 +
 lib/filters.js                            |  2 +-
 lib/queries.js                            | 38 ++++++++++++++++++++
 pages/api/website/[id]/rankings.js        | 15 ++++++--
 sql/schema.mysql.sql                      |  1 +
 sql/schema.postgresql.sql                 |  1 +
 13 files changed, 131 insertions(+), 31 deletions(-)
 create mode 100644 components/metrics/EventsTable.js
 create mode 100644 components/metrics/EventsTable.module.css

diff --git a/components/WebsiteDetails.js b/components/WebsiteDetails.js
index 4f901efc..5731fe75 100644
--- a/components/WebsiteDetails.js
+++ b/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 && (
diff --git a/components/WebsiteDetails.module.css b/components/WebsiteDetails.module.css
index ce26f8b1..9e7352a9 100644
--- a/components/WebsiteDetails.module.css
+++ b/components/WebsiteDetails.module.css
@@ -42,6 +42,10 @@
   padding-right: 0;
 }
 
+.hidden {
+  display: none;
+}
+
 @media only screen and (max-width: 992px) {
   .row {
     border: 0;
diff --git a/components/metrics/EventsTable.js b/components/metrics/EventsTable.js
new file mode 100644
index 00000000..9110bfb8
--- /dev/null
+++ b/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}
+    />
+  );
+}
diff --git a/components/metrics/EventsTable.module.css b/components/metrics/EventsTable.module.css
new file mode 100644
index 00000000..e6cb3961
--- /dev/null
+++ b/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;
+}
diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index 207366fc..bd66cb85 100644
--- a/components/metrics/MetricsTable.js
+++ b/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,13 +93,13 @@ 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}>
-            {Row}
-          </FixedSizeList>
-        )}
+        {limit
+          ? rankings.map(row => getRow(row))
+          : data?.length > 0 && (
+              <FixedSizeList height={500} itemCount={rankings.length} itemSize={30}>
+                {Row}
+              </FixedSizeList>
+            )}
       </div>
       <div className={styles.footer}>
         {limit && data.length > limit && (
@@ -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>
diff --git a/components/metrics/PagesTable.js b/components/metrics/PagesTable.js
index 48ba85c3..aab8b23c 100644
--- a/components/metrics/PagesTable.js
+++ b/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}
     />
   );
diff --git a/components/metrics/ReferrersTable.js b/components/metrics/ReferrersTable.js
index 480a299e..abaa1208 100644
--- a/components/metrics/ReferrersTable.js
+++ b/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}
     />
   );
 }
diff --git a/lib/db.js b/lib/db.js
index e6d69fdb..d32b9f27 100644
--- a/lib/db.js
+++ b/lib/db.js
@@ -35,5 +35,6 @@ export default prisma;
 export async function runQuery(query) {
   return query.catch(e => {
     console.error(e);
+    throw e;
   });
 }
diff --git a/lib/filters.js b/lib/filters.js
index ad72024f..a1bf1b96 100644
--- a/lib/filters.js
+++ b/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 }));
 };
diff --git a/lib/queries.js b/lib/queries.js
index b9678240..5b2fccad 100644
--- a/lib/queries.js
+++ b/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([]);
+}
diff --git a/pages/api/website/[id]/rankings.js b/pages/api/website/[id]/rankings.js
index a930bca9..d86f3e27 100644
--- a/pages/api/website/[id]/rankings.js
+++ b/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);
 };
diff --git a/sql/schema.mysql.sql b/sql/schema.mysql.sql
index 61a16509..106a6748 100644
--- a/sql/schema.mysql.sql
+++ b/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);
diff --git a/sql/schema.postgresql.sql b/sql/schema.postgresql.sql
index 5206257d..43533349 100644
--- a/sql/schema.postgresql.sql
+++ b/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);

From 13ec32b1c932217aea66e55945e56efd3b3f5e67 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 24 Aug 2020 10:40:01 -0700
Subject: [PATCH 04/12] Don't filter subdomains.

---
 lib/filters.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/filters.js b/lib/filters.js
index 6c5a0294..ad72024f 100644
--- a/lib/filters.js
+++ b/lib/filters.js
@@ -54,7 +54,7 @@ export const refFilter = (data, { domain, domainOnly, raw }) => {
   };
 
   if (raw) {
-    const regex = new RegExp(`http[s]?://([^.]+.)?${domain}`);
+    const regex = new RegExp(`http[s]?://${domain}`);
     return data.filter(({ x }) => isValidRef(x) && !regex.test(x));
   }
 

From 2addb96e4b0c1b3b240cd2a09eb44f8acb77d8eb Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 24 Aug 2020 10:52:47 -0700
Subject: [PATCH 05/12] Fixed bounce rate calculation.

---
 components/metrics/MetricsBar.js | 2 +-
 lib/queries.js                   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js
index 18a1a43b..00238fbe 100644
--- a/components/metrics/MetricsBar.js
+++ b/components/metrics/MetricsBar.js
@@ -35,7 +35,7 @@ export default function MetricsBar({ websiteId, startDate, endDate, className })
       <MetricCard label="Visitors" value={uniques} format={formatFunc} />
       <MetricCard
         label="Bounce rate"
-        value={uniques ? (bounces / uniques) * 100 : 0}
+        value={pageviews ? (bounces / pageviews) * 100 : 0}
         format={n => Number(n).toFixed(0) + '%'}
       />
       <MetricCard
diff --git a/lib/queries.js b/lib/queries.js
index 3bfc27fe..258d910f 100644
--- a/lib/queries.js
+++ b/lib/queries.js
@@ -236,7 +236,7 @@ export function getMetrics(website_id, start_at, end_at) {
       `
       select sum(t.c) as "pageviews",
         count(distinct t.session_id) as "uniques",
-        sum(case when t.c = 1 then t.c else 0 end) as "bounces",
+        sum(case when t.c = 1 then 1 else 0 end) as "bounces",
         sum(t.time) as "totaltime"
       from (
          select session_id,
@@ -260,7 +260,7 @@ export function getMetrics(website_id, start_at, end_at) {
       `
       select sum(t.c) as "pageviews",
         count(distinct t.session_id) as "uniques",
-        sum(case when t.c = 1 then t.c else 0 end) as "bounces",
+        sum(case when t.c = 1 then 1 else 0 end) as "bounces",
         sum(t.time) as "totaltime"
       from (
          select session_id,

From 5206622d5aac332788602ef8ab59cb3d7957a635 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 24 Aug 2020 23:49:14 -0700
Subject: [PATCH 06/12] Events table.

---
 components/WebsiteDetails.js              |  9 +++++
 components/WebsiteDetails.module.css      |  4 +++
 components/metrics/EventsTable.js         | 32 +++++++++++++++++
 components/metrics/EventsTable.module.css |  7 ++++
 components/metrics/MetricsTable.js        | 43 +++++++++++------------
 components/metrics/PagesTable.js          |  1 +
 components/metrics/ReferrersTable.js      |  8 ++---
 lib/db.js                                 |  1 +
 lib/filters.js                            |  2 +-
 lib/queries.js                            | 38 ++++++++++++++++++++
 pages/api/website/[id]/rankings.js        | 15 ++++++--
 sql/schema.mysql.sql                      |  1 +
 sql/schema.postgresql.sql                 |  1 +
 13 files changed, 131 insertions(+), 31 deletions(-)
 create mode 100644 components/metrics/EventsTable.js
 create mode 100644 components/metrics/EventsTable.module.css

diff --git a/components/WebsiteDetails.js b/components/WebsiteDetails.js
index 4f901efc..5731fe75 100644
--- a/components/WebsiteDetails.js
+++ b/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 && (
diff --git a/components/WebsiteDetails.module.css b/components/WebsiteDetails.module.css
index ce26f8b1..9e7352a9 100644
--- a/components/WebsiteDetails.module.css
+++ b/components/WebsiteDetails.module.css
@@ -42,6 +42,10 @@
   padding-right: 0;
 }
 
+.hidden {
+  display: none;
+}
+
 @media only screen and (max-width: 992px) {
   .row {
     border: 0;
diff --git a/components/metrics/EventsTable.js b/components/metrics/EventsTable.js
new file mode 100644
index 00000000..9110bfb8
--- /dev/null
+++ b/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}
+    />
+  );
+}
diff --git a/components/metrics/EventsTable.module.css b/components/metrics/EventsTable.module.css
new file mode 100644
index 00000000..e6cb3961
--- /dev/null
+++ b/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;
+}
diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index 207366fc..bd66cb85 100644
--- a/components/metrics/MetricsTable.js
+++ b/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,13 +93,13 @@ 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}>
-            {Row}
-          </FixedSizeList>
-        )}
+        {limit
+          ? rankings.map(row => getRow(row))
+          : data?.length > 0 && (
+              <FixedSizeList height={500} itemCount={rankings.length} itemSize={30}>
+                {Row}
+              </FixedSizeList>
+            )}
       </div>
       <div className={styles.footer}>
         {limit && data.length > limit && (
@@ -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>
diff --git a/components/metrics/PagesTable.js b/components/metrics/PagesTable.js
index 48ba85c3..aab8b23c 100644
--- a/components/metrics/PagesTable.js
+++ b/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}
     />
   );
diff --git a/components/metrics/ReferrersTable.js b/components/metrics/ReferrersTable.js
index 480a299e..abaa1208 100644
--- a/components/metrics/ReferrersTable.js
+++ b/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}
     />
   );
 }
diff --git a/lib/db.js b/lib/db.js
index e6d69fdb..d32b9f27 100644
--- a/lib/db.js
+++ b/lib/db.js
@@ -35,5 +35,6 @@ export default prisma;
 export async function runQuery(query) {
   return query.catch(e => {
     console.error(e);
+    throw e;
   });
 }
diff --git a/lib/filters.js b/lib/filters.js
index ad72024f..a1bf1b96 100644
--- a/lib/filters.js
+++ b/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 }));
 };
diff --git a/lib/queries.js b/lib/queries.js
index 258d910f..bc5ed7fd 100644
--- a/lib/queries.js
+++ b/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([]);
+}
diff --git a/pages/api/website/[id]/rankings.js b/pages/api/website/[id]/rankings.js
index a930bca9..d86f3e27 100644
--- a/pages/api/website/[id]/rankings.js
+++ b/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);
 };
diff --git a/sql/schema.mysql.sql b/sql/schema.mysql.sql
index 61a16509..106a6748 100644
--- a/sql/schema.mysql.sql
+++ b/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);
diff --git a/sql/schema.postgresql.sql b/sql/schema.postgresql.sql
index 5206257d..43533349 100644
--- a/sql/schema.postgresql.sql
+++ b/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);

From 5f47f328bed02187c64ec0cf7d9ca7e99d6c55ea Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Wed, 26 Aug 2020 09:58:24 -0700
Subject: [PATCH 07/12] BarChart component.

---
 components/metrics/BarChart.js            | 150 ++++++++++++++++
 components/metrics/EventsChart.js         | 174 +++++++++++++++++++
 components/metrics/EventsChart.module.css |   3 +
 components/metrics/PageviewsChart.js      | 197 +++++-----------------
 components/metrics/WebsiteChart.js        |  15 +-
 5 files changed, 373 insertions(+), 166 deletions(-)
 create mode 100644 components/metrics/BarChart.js
 create mode 100644 components/metrics/EventsChart.js
 create mode 100644 components/metrics/EventsChart.module.css

diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
new file mode 100644
index 00000000..96063fd6
--- /dev/null
+++ b/components/metrics/BarChart.js
@@ -0,0 +1,150 @@
+import React, { useState, useRef, useEffect } from 'react';
+import ReactTooltip from 'react-tooltip';
+import classNames from 'classnames';
+import ChartJS from 'chart.js';
+import styles from './PageviewsChart.module.css';
+import { format } from 'date-fns';
+
+export default function BarChart({
+  chartId,
+  datasets,
+  unit,
+  records,
+  animationDuration = 300,
+  className,
+  onUpdate = () => {},
+}) {
+  const canvas = useRef();
+  const chart = useRef();
+  const [tooltip, setTooltip] = useState({});
+
+  const renderLabel = (label, index, values) => {
+    const d = new Date(values[index].value);
+    const n = records;
+
+    switch (unit) {
+      case 'hour':
+        return format(d, 'ha');
+      case 'day':
+        if (n >= 15) {
+          return index % ~~(n / 15) === 0 ? format(d, 'MMM d') : '';
+        }
+        return format(d, 'EEE M/d');
+      case 'month':
+        return format(d, 'MMMM');
+      default:
+        return label;
+    }
+  };
+
+  const renderTooltip = model => {
+    const { opacity, title, body, labelColors } = model;
+
+    if (!opacity) {
+      setTooltip(null);
+    } else {
+      const [label, value] = body[0].lines[0].split(':');
+
+      setTooltip({
+        title: title[0],
+        value,
+        label,
+        labelColor: labelColors[0].backgroundColor,
+      });
+    }
+  };
+
+  function draw() {
+    if (!chart.current) {
+      chart.current = new ChartJS(canvas.current, {
+        type: 'bar',
+        data: {
+          datasets,
+        },
+        options: {
+          animation: {
+            duration: animationDuration,
+          },
+          tooltips: {
+            enabled: false,
+            custom: renderTooltip,
+          },
+          hover: {
+            animationDuration: 0,
+          },
+          responsiveAnimationDuration: 0,
+          scales: {
+            xAxes: [
+              {
+                type: 'time',
+                distribution: 'series',
+                time: {
+                  unit,
+                  tooltipFormat: 'ddd MMMM DD YYYY',
+                },
+                ticks: {
+                  callback: renderLabel,
+                  minRotation: 0,
+                  maxRotation: 0,
+                },
+                gridLines: {
+                  display: false,
+                },
+                offset: true,
+                stacked: true,
+              },
+            ],
+            yAxes: [
+              {
+                ticks: {
+                  beginAtZero: true,
+                },
+              },
+            ],
+          },
+        },
+      });
+    } else {
+      const { options } = chart.current;
+
+      options.scales.xAxes[0].time.unit = unit;
+      options.scales.xAxes[0].ticks.callback = renderLabel;
+
+      onUpdate(chart.current);
+    }
+  }
+
+  useEffect(() => {
+    if (datasets) {
+      draw();
+      setTooltip(null);
+    }
+  }, [datasets]);
+
+  return (
+    <div
+      data-tip=""
+      data-for={`${chartId}-tooltip`}
+      className={classNames(styles.chart, className)}
+    >
+      <canvas ref={canvas} width={960} height={400} />
+      <ReactTooltip id={`${chartId}-tooltip`}>
+        {tooltip ? <Tooltip {...tooltip} /> : null}
+      </ReactTooltip>
+    </div>
+  );
+}
+
+const Tooltip = ({ title, value, label, labelColor }) => (
+  <div className={styles.tooltip}>
+    <div className={styles.content}>
+      <div className={styles.title}>{title}</div>
+      <div className={styles.metric}>
+        <div className={styles.dot}>
+          <div className={styles.color} style={{ backgroundColor: labelColor }} />
+        </div>
+        {value} {label}
+      </div>
+    </div>
+  </div>
+);
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
new file mode 100644
index 00000000..56a4a1a9
--- /dev/null
+++ b/components/metrics/EventsChart.js
@@ -0,0 +1,174 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import ReactTooltip from 'react-tooltip';
+import classNames from 'classnames';
+import ChartJS from 'chart.js';
+import { format } from 'date-fns';
+import styles from './EventsChart.module.css';
+
+export default function EventsChart({
+  websiteId,
+  data,
+  unit,
+  animationDuration = 300,
+  className,
+  children,
+}) {
+  const canvas = useRef();
+  const chart = useRef();
+  const [tooltip, setTooltip] = useState({});
+
+  const renderLabel = useCallback(
+    (label, index, values) => {
+      const d = new Date(values[index].value);
+      const n = data.pageviews.length;
+
+      switch (unit) {
+        case 'day':
+          if (n >= 15) {
+            return index % ~~(n / 15) === 0 ? format(d, 'MMM d') : '';
+          }
+          return format(d, 'EEE M/d');
+        case 'month':
+          return format(d, 'MMMM');
+        default:
+          return label;
+      }
+    },
+    [unit, data],
+  );
+
+  const renderTooltip = model => {
+    const { opacity, title, body, labelColors } = model;
+
+    if (!opacity) {
+      setTooltip(null);
+    } else {
+      const [label, value] = body[0].lines[0].split(':');
+
+      setTooltip({
+        title: title[0],
+        value,
+        label,
+        labelColor: labelColors[0].backgroundColor,
+      });
+    }
+  };
+
+  function draw() {
+    if (!canvas.current) return;
+
+    if (!chart.current) {
+      chart.current = new ChartJS(canvas.current, {
+        type: 'bar',
+        data: {
+          datasets: [
+            {
+              label: 'unique visitors',
+              data: data.uniques,
+              lineTension: 0,
+              backgroundColor: 'rgb(38, 128, 235, 0.4)',
+              borderColor: 'rgb(13, 102, 208, 0.4)',
+              borderWidth: 1,
+            },
+            {
+              label: 'page views',
+              data: data.pageviews,
+              lineTension: 0,
+              backgroundColor: 'rgb(38, 128, 235, 0.2)',
+              borderColor: 'rgb(13, 102, 208, 0.2)',
+              borderWidth: 1,
+            },
+          ],
+        },
+        options: {
+          animation: {
+            duration: animationDuration,
+          },
+          tooltips: {
+            enabled: false,
+            custom: renderTooltip,
+          },
+          hover: {
+            animationDuration: 0,
+          },
+          scales: {
+            xAxes: [
+              {
+                type: 'time',
+                distribution: 'series',
+                time: {
+                  unit,
+                  tooltipFormat: 'ddd MMMM DD YYYY',
+                },
+                ticks: {
+                  callback: renderLabel,
+                  maxRotation: 0,
+                },
+                gridLines: {
+                  display: false,
+                },
+                offset: true,
+                stacked: true,
+              },
+            ],
+            yAxes: [
+              {
+                ticks: {
+                  beginAtZero: true,
+                },
+              },
+            ],
+          },
+        },
+      });
+    } else {
+      const {
+        data: { datasets },
+        options,
+      } = chart.current;
+
+      datasets[0].data = data.uniques;
+      datasets[1].data = data.pageviews;
+      options.scales.xAxes[0].time.unit = unit;
+      options.scales.xAxes[0].ticks.callback = renderLabel;
+      options.animation.duration = animationDuration;
+
+      chart.current.update();
+    }
+  }
+
+  useEffect(() => {
+    if (data) {
+      draw();
+      setTooltip(null);
+    }
+  }, [data]);
+
+  return (
+    <div
+      data-tip=""
+      data-for={`${websiteId}-tooltip`}
+      className={classNames(styles.chart, className)}
+    >
+      <canvas ref={canvas} width={960} height={400} />
+      <ReactTooltip id={`${websiteId}-tooltip`}>
+        {tooltip ? <Tooltip {...tooltip} /> : null}
+      </ReactTooltip>
+      {children}
+    </div>
+  );
+}
+
+const Tooltip = ({ title, value, label, labelColor }) => (
+  <div className={styles.tooltip}>
+    <div className={styles.content}>
+      <div className={styles.title}>{title}</div>
+      <div className={styles.metric}>
+        <div className={styles.dot}>
+          <div className={styles.color} style={{ backgroundColor: labelColor }} />
+        </div>
+        {value} {label}
+      </div>
+    </div>
+  </div>
+);
diff --git a/components/metrics/EventsChart.module.css b/components/metrics/EventsChart.module.css
new file mode 100644
index 00000000..d586bead
--- /dev/null
+++ b/components/metrics/EventsChart.module.css
@@ -0,0 +1,3 @@
+.chart {
+  display: flex;
+}
diff --git a/components/metrics/PageviewsChart.js b/components/metrics/PageviewsChart.js
index fe8c44e4..f174d604 100644
--- a/components/metrics/PageviewsChart.js
+++ b/components/metrics/PageviewsChart.js
@@ -1,174 +1,53 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import ReactTooltip from 'react-tooltip';
 import classNames from 'classnames';
-import ChartJS from 'chart.js';
+import BarChart from './BarChart';
 import { format } from 'date-fns';
 import styles from './PageviewsChart.module.css';
 
-export default function PageviewsChart({
-  websiteId,
-  data,
-  unit,
-  animationDuration = 300,
-  className,
-  children,
-}) {
-  const canvas = useRef();
-  const chart = useRef();
-  const [tooltip, setTooltip] = useState({});
+export default function PageviewsChart({ websiteId, data, unit, className, animationDuration }) {
+  const handleUpdate = chart => {
+    const {
+      data: { datasets },
+      options,
+    } = chart;
 
-  const renderLabel = useCallback(
-    (label, index, values) => {
-      const d = new Date(values[index].value);
-      const n = data.pageviews.length;
+    datasets[0].data = data.uniques;
+    datasets[1].data = data.pageviews;
+    options.animation.duration = animationDuration;
 
-      switch (unit) {
-        case 'day':
-          if (n >= 15) {
-            return index % ~~(n / 15) === 0 ? format(d, 'MMM d') : '';
-          }
-          return format(d, 'EEE M/d');
-        case 'month':
-          return format(d, 'MMMM');
-        default:
-          return label;
-      }
-    },
-    [unit, data],
-  );
-
-  const renderTooltip = model => {
-    const { opacity, title, body, labelColors } = model;
-
-    if (!opacity) {
-      setTooltip(null);
-    } else {
-      const [label, value] = body[0].lines[0].split(':');
-
-      setTooltip({
-        title: title[0],
-        value,
-        label,
-        labelColor: labelColors[0].backgroundColor,
-      });
-    }
+    chart.update();
   };
 
-  function draw() {
-    if (!canvas.current) return;
-
-    if (!chart.current) {
-      chart.current = new ChartJS(canvas.current, {
-        type: 'bar',
-        data: {
-          datasets: [
-            {
-              label: 'unique visitors',
-              data: data.uniques,
-              lineTension: 0,
-              backgroundColor: 'rgb(38, 128, 235, 0.4)',
-              borderColor: 'rgb(13, 102, 208, 0.4)',
-              borderWidth: 1,
-            },
-            {
-              label: 'page views',
-              data: data.pageviews,
-              lineTension: 0,
-              backgroundColor: 'rgb(38, 128, 235, 0.2)',
-              borderColor: 'rgb(13, 102, 208, 0.2)',
-              borderWidth: 1,
-            },
-          ],
-        },
-        options: {
-          animation: {
-            duration: animationDuration,
-          },
-          tooltips: {
-            enabled: false,
-            custom: renderTooltip,
-          },
-          hover: {
-            animationDuration: 0,
-          },
-          scales: {
-            xAxes: [
-              {
-                type: 'time',
-                distribution: 'series',
-                time: {
-                  unit,
-                  tooltipFormat: 'ddd MMMM DD YYYY',
-                },
-                ticks: {
-                  callback: renderLabel,
-                  maxRotation: 0,
-                },
-                gridLines: {
-                  display: false,
-                },
-                offset: true,
-                stacked: true,
-              },
-            ],
-            yAxes: [
-              {
-                ticks: {
-                  beginAtZero: true,
-                },
-              },
-            ],
-          },
-        },
-      });
-    } else {
-      const {
-        data: { datasets },
-        options,
-      } = chart.current;
-
-      datasets[0].data = data.uniques;
-      datasets[1].data = data.pageviews;
-      options.scales.xAxes[0].time.unit = unit;
-      options.scales.xAxes[0].ticks.callback = renderLabel;
-      options.animation.duration = animationDuration;
-
-      chart.current.update();
-    }
+  if (!data) {
+    return null;
   }
 
-  useEffect(() => {
-    if (data) {
-      draw();
-      setTooltip(null);
-    }
-  }, [data]);
-
   return (
-    <div
-      data-tip=""
-      data-for={`${websiteId}-tooltip`}
-      className={classNames(styles.chart, className)}
-    >
-      <canvas ref={canvas} width={960} height={400} />
-      <ReactTooltip id={`${websiteId}-tooltip`}>
-        {tooltip ? <Tooltip {...tooltip} /> : null}
-      </ReactTooltip>
-      {children}
+    <div className={classNames(styles.chart, className)}>
+      <BarChart
+        chartId={websiteId}
+        datasets={[
+          {
+            label: 'unique visitors',
+            data: data.uniques,
+            lineTension: 0,
+            backgroundColor: 'rgb(38, 128, 235, 0.4)',
+            borderColor: 'rgb(13, 102, 208, 0.4)',
+            borderWidth: 1,
+          },
+          {
+            label: 'page views',
+            data: data.pageviews,
+            lineTension: 0,
+            backgroundColor: 'rgb(38, 128, 235, 0.2)',
+            borderColor: 'rgb(13, 102, 208, 0.2)',
+            borderWidth: 1,
+          },
+        ]}
+        unit={unit}
+        records={data.pageviews.length}
+        onUpdate={handleUpdate}
+      />
     </div>
   );
 }
-
-const Tooltip = ({ title, value, label, labelColor }) => (
-  <div className={styles.tooltip}>
-    <div className={styles.content}>
-      <div className={styles.title}>{title}</div>
-      <div className={styles.metric}>
-        <div className={styles.dot}>
-          <div className={styles.color} style={{ backgroundColor: labelColor }} />
-        </div>
-        {value} {label}
-      </div>
-    </div>
-  </div>
-);
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index 4f066808..f93a985a 100644
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@@ -76,14 +76,15 @@ export default function WebsiteChart({
       <div className="row">
         <CheckVisible className="col">
           {visible => (
-            <PageviewsChart
-              websiteId={websiteId}
-              data={{ pageviews, uniques }}
-              unit={unit}
-              animationDuration={visible ? 300 : 0}
-            >
+            <>
+              <PageviewsChart
+                websiteId={websiteId}
+                data={{ pageviews, uniques }}
+                unit={unit}
+                animationDuration={visible ? 300 : 0}
+              />
               <QuickButtons value={value} onChange={handleDateChange} />
-            </PageviewsChart>
+            </>
           )}
         </CheckVisible>
       </div>

From 4618dc7f1529c3cbe8070270ad5b886226353dfc Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 27 Aug 2020 03:42:24 -0700
Subject: [PATCH 08/12] Events chart.

---
 components/WebsiteDetails.js         |  22 ++-
 components/metrics/BarChart.js       | 120 ++++++++-------
 components/metrics/EventsChart.js    | 218 ++++++++-------------------
 components/metrics/PageviewsChart.js |   3 +-
 lib/date.js                          |   2 +-
 lib/queries.js                       |  47 +++++-
 pages/api/website/[id]/events.js     |  21 +++
 pages/api/website/[id]/pageviews.js  |   9 +-
 pages/api/website/[id]/rankings.js   |   4 +-
 9 files changed, 220 insertions(+), 226 deletions(-)
 create mode 100644 pages/api/website/[id]/events.js

diff --git a/components/WebsiteDetails.js b/components/WebsiteDetails.js
index 5731fe75..6606bc2d 100644
--- a/components/WebsiteDetails.js
+++ b/components/WebsiteDetails.js
@@ -17,6 +17,7 @@ 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';
 
 export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
   const [data, setData] = useState();
@@ -25,7 +26,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
   const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
   const [expand, setExpand] = useState();
   const [showEvents, setShowEvents] = useState(false);
-  const { startDate, endDate } = dateRange;
+  const { startDate, endDate, unit } = dateRange;
 
   const BackButton = () => (
     <Button
@@ -55,10 +56,15 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     { label: 'Events', value: 'event', component: EventsTable },
   ];
 
-  const tableProps = {
+  const dataProps = {
     websiteId,
     startDate,
     endDate,
+    unit,
+  };
+
+  const tableProps = {
+    ...dataProps,
     limit: 10,
     onExpand: handleExpand,
     websiteDomain: data?.domain,
@@ -66,6 +72,10 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
 
   const DetailsComponent = expand?.component;
 
+  function getSelectedMenuOption(value) {
+    return menuOptions.find(e => e.value === value);
+  }
+
   async function loadData() {
     setData(await get(`/api/website/${websiteId}`));
   }
@@ -79,11 +89,11 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
   }
 
   function handleExpand(value) {
-    setExpand(menuOptions.find(e => e.value === value));
+    setExpand(getSelectedMenuOption(value));
   }
 
   function handleMenuSelect(value) {
-    setExpand(menuOptions.find(e => e.value === value));
+    setExpand(getSelectedMenuOption(value));
   }
 
   useEffect(() => {
@@ -142,7 +152,9 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
             <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 className="col-12 col-md-12 col-lg-8">
+              <EventsChart {...dataProps} />
+            </div>
           </div>
         </>
       )}
diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index 96063fd6..c411bb14 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -12,6 +12,7 @@ export default function BarChart({
   records,
   animationDuration = 300,
   className,
+  stacked = false,
   onUpdate = () => {},
 }) {
   const canvas = useRef();
@@ -54,70 +55,75 @@ export default function BarChart({
     }
   };
 
-  function draw() {
-    if (!chart.current) {
-      chart.current = new ChartJS(canvas.current, {
-        type: 'bar',
-        data: {
-          datasets,
+  const createChart = () => {
+    chart.current = new ChartJS(canvas.current, {
+      type: 'bar',
+      data: {
+        datasets,
+      },
+      options: {
+        animation: {
+          duration: animationDuration,
         },
-        options: {
-          animation: {
-            duration: animationDuration,
-          },
-          tooltips: {
-            enabled: false,
-            custom: renderTooltip,
-          },
-          hover: {
-            animationDuration: 0,
-          },
-          responsiveAnimationDuration: 0,
-          scales: {
-            xAxes: [
-              {
-                type: 'time',
-                distribution: 'series',
-                time: {
-                  unit,
-                  tooltipFormat: 'ddd MMMM DD YYYY',
-                },
-                ticks: {
-                  callback: renderLabel,
-                  minRotation: 0,
-                  maxRotation: 0,
-                },
-                gridLines: {
-                  display: false,
-                },
-                offset: true,
-                stacked: true,
-              },
-            ],
-            yAxes: [
-              {
-                ticks: {
-                  beginAtZero: true,
-                },
-              },
-            ],
-          },
+        tooltips: {
+          enabled: false,
+          custom: renderTooltip,
         },
-      });
-    } else {
-      const { options } = chart.current;
+        hover: {
+          animationDuration: 0,
+        },
+        responsiveAnimationDuration: 0,
+        scales: {
+          xAxes: [
+            {
+              type: 'time',
+              distribution: 'series',
+              time: {
+                unit,
+                tooltipFormat: 'ddd MMMM DD YYYY',
+              },
+              ticks: {
+                callback: renderLabel,
+                minRotation: 0,
+                maxRotation: 0,
+              },
+              gridLines: {
+                display: false,
+              },
+              offset: true,
+              stacked: true,
+            },
+          ],
+          yAxes: [
+            {
+              ticks: {
+                beginAtZero: true,
+              },
+              stacked,
+            },
+          ],
+        },
+      },
+    });
+  };
 
-      options.scales.xAxes[0].time.unit = unit;
-      options.scales.xAxes[0].ticks.callback = renderLabel;
+  const updateChart = () => {
+    const { options } = chart.current;
 
-      onUpdate(chart.current);
-    }
-  }
+    options.scales.xAxes[0].time.unit = unit;
+    options.scales.xAxes[0].ticks.callback = renderLabel;
+
+    onUpdate(chart.current);
+  };
 
   useEffect(() => {
     if (datasets) {
-      draw();
-      setTooltip(null);
+      if (!chart.current) {
+        createChart();
+      } else {
+        setTooltip(null);
+        updateChart();
+      }
     }
   }, [datasets]);
 
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index 56a4a1a9..8ee622dc 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -1,174 +1,84 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import ReactTooltip from 'react-tooltip';
+import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
-import ChartJS from 'chart.js';
-import { format } from 'date-fns';
-import styles from './EventsChart.module.css';
+import BarChart from './BarChart';
+import { get } from 'lib/web';
+import { getTimezone, getDateArray } from 'lib/date';
+import styles from './PageviewsChart.module.css';
 
-export default function EventsChart({
-  websiteId,
-  data,
-  unit,
-  animationDuration = 300,
-  className,
-  children,
-}) {
-  const canvas = useRef();
-  const chart = useRef();
-  const [tooltip, setTooltip] = useState({});
+const COLORS = [
+  'rgba(38, 128, 235, 0.5)',
+  'rgba(227, 72, 80, 0.5)',
+  'rgba(45, 157, 120, 0.5)',
+  'rgba(103, 103, 236, 0.5)',
+  'rgba(68, 181, 86, 0.5)',
+  'rgba(146, 86, 217, 0.5)',
+];
 
-  const renderLabel = useCallback(
-    (label, index, values) => {
-      const d = new Date(values[index].value);
-      const n = data.pageviews.length;
+export default function EventsChart({ websiteId, startDate, endDate, unit, className }) {
+  const [data, setData] = useState();
 
-      switch (unit) {
-        case 'day':
-          if (n >= 15) {
-            return index % ~~(n / 15) === 0 ? format(d, 'MMM d') : '';
-          }
-          return format(d, 'EEE M/d');
-        case 'month':
-          return format(d, 'MMMM');
-        default:
-          return label;
+  async function loadData() {
+    const data = await get(`/api/website/${websiteId}/events`, {
+      start_at: +startDate,
+      end_at: +endDate,
+      unit,
+      tz: getTimezone(),
+    });
+    console.log({ data });
+    const map = data.reduce((obj, { x, t, y }) => {
+      if (!obj[x]) {
+        obj[x] = [];
       }
-    },
-    [unit, data],
-  );
 
-  const renderTooltip = model => {
-    const { opacity, title, body, labelColors } = model;
+      obj[x].push({ t, y });
 
-    if (!opacity) {
-      setTooltip(null);
-    } else {
-      const [label, value] = body[0].lines[0].split(':');
+      return obj;
+    }, {});
 
-      setTooltip({
-        title: title[0],
-        value,
-        label,
-        labelColor: labelColors[0].backgroundColor,
-      });
-    }
-  };
+    Object.keys(map).forEach(key => {
+      map[key] = getDateArray(map[key], startDate, endDate, unit);
+    });
 
-  function draw() {
-    if (!canvas.current) return;
+    setData(map);
+  }
 
-    if (!chart.current) {
-      chart.current = new ChartJS(canvas.current, {
-        type: 'bar',
-        data: {
-          datasets: [
-            {
-              label: 'unique visitors',
-              data: data.uniques,
-              lineTension: 0,
-              backgroundColor: 'rgb(38, 128, 235, 0.4)',
-              borderColor: 'rgb(13, 102, 208, 0.4)',
-              borderWidth: 1,
-            },
-            {
-              label: 'page views',
-              data: data.pageviews,
-              lineTension: 0,
-              backgroundColor: 'rgb(38, 128, 235, 0.2)',
-              borderColor: 'rgb(13, 102, 208, 0.2)',
-              borderWidth: 1,
-            },
-          ],
-        },
-        options: {
-          animation: {
-            duration: animationDuration,
-          },
-          tooltips: {
-            enabled: false,
-            custom: renderTooltip,
-          },
-          hover: {
-            animationDuration: 0,
-          },
-          scales: {
-            xAxes: [
-              {
-                type: 'time',
-                distribution: 'series',
-                time: {
-                  unit,
-                  tooltipFormat: 'ddd MMMM DD YYYY',
-                },
-                ticks: {
-                  callback: renderLabel,
-                  maxRotation: 0,
-                },
-                gridLines: {
-                  display: false,
-                },
-                offset: true,
-                stacked: true,
-              },
-            ],
-            yAxes: [
-              {
-                ticks: {
-                  beginAtZero: true,
-                },
-              },
-            ],
-          },
-        },
-      });
-    } else {
-      const {
-        data: { datasets },
-        options,
-      } = chart.current;
+  function handleUpdate(chart) {
+    const {
+      data: { datasets },
+      options,
+    } = chart;
 
-      datasets[0].data = data.uniques;
-      datasets[1].data = data.pageviews;
-      options.scales.xAxes[0].time.unit = unit;
-      options.scales.xAxes[0].ticks.callback = renderLabel;
-      options.animation.duration = animationDuration;
+    datasets[0].data = data.uniques;
+    datasets[1].data = data.pageviews;
 
-      chart.current.update();
-    }
+    chart.update();
   }
 
   useEffect(() => {
-    if (data) {
-      draw();
-      setTooltip(null);
-    }
-  }, [data]);
+    loadData();
+  }, [websiteId, startDate, endDate]);
+
+  if (!data) {
+    return null;
+  }
 
   return (
-    <div
-      data-tip=""
-      data-for={`${websiteId}-tooltip`}
-      className={classNames(styles.chart, className)}
-    >
-      <canvas ref={canvas} width={960} height={400} />
-      <ReactTooltip id={`${websiteId}-tooltip`}>
-        {tooltip ? <Tooltip {...tooltip} /> : null}
-      </ReactTooltip>
-      {children}
+    <div className={classNames(styles.chart, className)}>
+      <BarChart
+        chartId={websiteId}
+        datasets={Object.keys(data).map((key, index) => ({
+          label: key,
+          data: data[key],
+          lineTension: 0,
+          backgroundColor: COLORS[index],
+          borderColor: COLORS[index],
+          borderWidth: 1,
+        }))}
+        unit={unit}
+        records={7}
+        onUpdate={handleUpdate}
+        stacked
+      />
     </div>
   );
 }
-
-const Tooltip = ({ title, value, label, labelColor }) => (
-  <div className={styles.tooltip}>
-    <div className={styles.content}>
-      <div className={styles.title}>{title}</div>
-      <div className={styles.metric}>
-        <div className={styles.dot}>
-          <div className={styles.color} style={{ backgroundColor: labelColor }} />
-        </div>
-        {value} {label}
-      </div>
-    </div>
-  </div>
-);
diff --git a/components/metrics/PageviewsChart.js b/components/metrics/PageviewsChart.js
index f174d604..d810acf3 100644
--- a/components/metrics/PageviewsChart.js
+++ b/components/metrics/PageviewsChart.js
@@ -1,7 +1,6 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import BarChart from './BarChart';
-import { format } from 'date-fns';
 import styles from './PageviewsChart.module.css';
 
 export default function PageviewsChart({ websiteId, data, unit, className, animationDuration }) {
diff --git a/lib/date.js b/lib/date.js
index f53521b9..7cfcb8f3 100644
--- a/lib/date.js
+++ b/lib/date.js
@@ -108,7 +108,7 @@ export function getDateArray(data, startDate, endDate, unit) {
     const t = add(startDate, i);
     const y = findData(t);
 
-    arr.push({ t, y });
+    arr.push({ ...data[i], t, y });
   }
 
   return arr;
diff --git a/lib/queries.js b/lib/queries.js
index bc5ed7fd..592ae85c 100644
--- a/lib/queries.js
+++ b/lib/queries.js
@@ -401,7 +401,7 @@ export function getActiveVisitors(website_id) {
   return Promise.resolve([]);
 }
 
-export function getEvents(website_id, start_at, end_at) {
+export function getEventRankings(website_id, start_at, end_at) {
   const db = getDatabase();
 
   if (db === POSTGRESQL) {
@@ -438,3 +438,48 @@ export function getEvents(website_id, start_at, end_at) {
 
   return Promise.resolve([]);
 }
+
+export function getEvents(website_id, start_at, end_at, timezone = 'utc', unit = 'day') {
+  const db = getDatabase();
+
+  if (db === POSTGRESQL) {
+    return prisma.$queryRaw(
+      `
+      select
+        event_value x,
+        date_trunc('${unit}', created_at at time zone '${timezone}') t,
+        count(*) y
+      from event
+      where website_id=$1
+      and created_at between $2 and $3
+      group by 1, 2
+      order by 2
+      `,
+      website_id,
+      start_at,
+      end_at,
+    );
+  }
+
+  if (db === MYSQL) {
+    const tz = moment.tz(timezone).format('Z');
+    return prisma.$queryRaw(
+      `
+      select
+        event_value x,
+        date_trunc('${unit}', convert_tz(created_at,'+00:00','${tz}')) t,
+        count(*) y
+      from event
+      where website_id=?
+      and created_at between ? and ?
+      group by 1, 2
+      order by 2
+      `,
+      website_id,
+      start_at,
+      end_at,
+    );
+  }
+
+  return Promise.resolve([]);
+}
diff --git a/pages/api/website/[id]/events.js b/pages/api/website/[id]/events.js
new file mode 100644
index 00000000..d7ead27c
--- /dev/null
+++ b/pages/api/website/[id]/events.js
@@ -0,0 +1,21 @@
+import moment from 'moment-timezone';
+import { getEvents } from 'lib/queries';
+import { ok, badRequest } from 'lib/response';
+
+const unitTypes = ['month', 'hour', 'day'];
+
+export default async (req, res) => {
+  const { id, start_at, end_at, unit, tz } = req.query;
+
+  if (!moment.tz.zone(tz) || !unitTypes.includes(unit)) {
+    return badRequest(res);
+  }
+
+  const websiteId = +id;
+  const startDate = new Date(+start_at);
+  const endDate = new Date(+end_at);
+
+  const events = await getEvents(websiteId, startDate, endDate, tz, unit);
+
+  return ok(res, events);
+};
diff --git a/pages/api/website/[id]/pageviews.js b/pages/api/website/[id]/pageviews.js
index 5e07c0ab..c90e1c6b 100644
--- a/pages/api/website/[id]/pageviews.js
+++ b/pages/api/website/[id]/pageviews.js
@@ -11,12 +11,13 @@ export default async (req, res) => {
     return badRequest(res);
   }
 
-  const start = new Date(+start_at);
-  const end = new Date(+end_at);
+  const websiteId = +id;
+  const startDate = new Date(+start_at);
+  const endDate = new Date(+end_at);
 
   const [pageviews, uniques] = await Promise.all([
-    getPageviews(+id, start, end, tz, unit, '*'),
-    getPageviews(+id, start, end, tz, unit, 'distinct session_id'),
+    getPageviews(websiteId, startDate, endDate, tz, unit, '*'),
+    getPageviews(websiteId, startDate, endDate, tz, unit, 'distinct session_id'),
   ]);
 
   return ok(res, { pageviews, uniques });
diff --git a/pages/api/website/[id]/rankings.js b/pages/api/website/[id]/rankings.js
index d86f3e27..9c742390 100644
--- a/pages/api/website/[id]/rankings.js
+++ b/pages/api/website/[id]/rankings.js
@@ -1,4 +1,4 @@
-import { getRankings, getEvents } from 'lib/queries';
+import { getRankings, getEventRankings } from 'lib/queries';
 import { ok, badRequest } from 'lib/response';
 
 const sessionColumns = ['browser', 'os', 'device', 'country'];
@@ -15,7 +15,7 @@ export default async (req, res) => {
   }
 
   if (type === 'event') {
-    const events = await getEvents(websiteId, startDate, endDate);
+    const events = await getEventRankings(websiteId, startDate, endDate);
 
     return ok(res, events);
   }

From d936ecc86eb743dd95bd8c048c535a7f8005a3c3 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 27 Aug 2020 13:46:05 -0700
Subject: [PATCH 09/12] Refactor BarChart component.

---
 components/metrics/BarChart.js    | 91 ++++++++++++++++---------------
 components/metrics/EventsChart.js | 40 +++++++-------
 lib/date.js                       |  5 ++
 3 files changed, 73 insertions(+), 63 deletions(-)

diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index c411bb14..e3853b0d 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -13,6 +13,7 @@ export default function BarChart({
   animationDuration = 300,
   className,
   stacked = false,
+  onCreate = () => {},
   onUpdate = () => {},
 }) {
   const canvas = useRef();
@@ -56,54 +57,58 @@ export default function BarChart({
   };
 
   const createChart = () => {
+    const options = {
+      animation: {
+        duration: animationDuration,
+      },
+      tooltips: {
+        enabled: false,
+        custom: renderTooltip,
+      },
+      hover: {
+        animationDuration: 0,
+      },
+      responsiveAnimationDuration: 0,
+      scales: {
+        xAxes: [
+          {
+            type: 'time',
+            distribution: 'series',
+            time: {
+              unit,
+              tooltipFormat: 'ddd MMMM DD YYYY',
+            },
+            ticks: {
+              callback: renderLabel,
+              minRotation: 0,
+              maxRotation: 0,
+            },
+            gridLines: {
+              display: false,
+            },
+            offset: true,
+            stacked: true,
+          },
+        ],
+        yAxes: [
+          {
+            ticks: {
+              beginAtZero: true,
+            },
+            stacked,
+          },
+        ],
+      },
+    };
+
+    onCreate(options);
+
     chart.current = new ChartJS(canvas.current, {
       type: 'bar',
       data: {
         datasets,
       },
-      options: {
-        animation: {
-          duration: animationDuration,
-        },
-        tooltips: {
-          enabled: false,
-          custom: renderTooltip,
-        },
-        hover: {
-          animationDuration: 0,
-        },
-        responsiveAnimationDuration: 0,
-        scales: {
-          xAxes: [
-            {
-              type: 'time',
-              distribution: 'series',
-              time: {
-                unit,
-                tooltipFormat: 'ddd MMMM DD YYYY',
-              },
-              ticks: {
-                callback: renderLabel,
-                minRotation: 0,
-                maxRotation: 0,
-              },
-              gridLines: {
-                display: false,
-              },
-              offset: true,
-              stacked: true,
-            },
-          ],
-          yAxes: [
-            {
-              ticks: {
-                beginAtZero: true,
-              },
-              stacked,
-            },
-          ],
-        },
-      },
+      options,
     });
   };
 
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index 8ee622dc..6400539a 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -1,21 +1,34 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import BarChart from './BarChart';
 import { get } from 'lib/web';
-import { getTimezone, getDateArray } from 'lib/date';
+import { getTimezone, getDateArray, getDateLength } from 'lib/date';
 import styles from './PageviewsChart.module.css';
 
 const COLORS = [
   'rgba(38, 128, 235, 0.5)',
-  'rgba(227, 72, 80, 0.5)',
+  'rgba(146, 86, 217, 0.5)',
   'rgba(45, 157, 120, 0.5)',
+  'rgba(216, 55, 144, 0.5)',
+  'rgba(227, 72, 80, 0.5)',
   'rgba(103, 103, 236, 0.5)',
   'rgba(68, 181, 86, 0.5)',
-  'rgba(146, 86, 217, 0.5)',
 ];
 
 export default function EventsChart({ websiteId, startDate, endDate, unit, className }) {
   const [data, setData] = useState();
+  const datasets = useMemo(() => {
+    if (!data) return [];
+
+    return Object.keys(data).map((key, index) => ({
+      label: key,
+      data: data[key],
+      lineTension: 0,
+      backgroundColor: COLORS[index],
+      borderColor: COLORS[index],
+      borderWidth: 1,
+    }));
+  }, [data]);
 
   async function loadData() {
     const data = await get(`/api/website/${websiteId}/events`, {
@@ -43,13 +56,7 @@ export default function EventsChart({ websiteId, startDate, endDate, unit, class
   }
 
   function handleUpdate(chart) {
-    const {
-      data: { datasets },
-      options,
-    } = chart;
-
-    datasets[0].data = data.uniques;
-    datasets[1].data = data.pageviews;
+    chart.data.datasets = datasets;
 
     chart.update();
   }
@@ -66,16 +73,9 @@ export default function EventsChart({ websiteId, startDate, endDate, unit, class
     <div className={classNames(styles.chart, className)}>
       <BarChart
         chartId={websiteId}
-        datasets={Object.keys(data).map((key, index) => ({
-          label: key,
-          data: data[key],
-          lineTension: 0,
-          backgroundColor: COLORS[index],
-          borderColor: COLORS[index],
-          borderWidth: 1,
-        }))}
+        datasets={datasets}
         unit={unit}
-        records={7}
+        records={getDateLength(startDate, endDate, unit)}
         onUpdate={handleUpdate}
         stacked
       />
diff --git a/lib/date.js b/lib/date.js
index 7cfcb8f3..6e10f610 100644
--- a/lib/date.js
+++ b/lib/date.js
@@ -113,3 +113,8 @@ export function getDateArray(data, startDate, endDate, unit) {
 
   return arr;
 }
+
+export function getDateLength(startDate, endDate, unit) {
+  const [diff] = dateFuncs[unit];
+  return diff(endDate, startDate) + 1;
+}

From a7e7469d22400862b010b1184725429b8cadc825 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 27 Aug 2020 18:44:20 -0700
Subject: [PATCH 10/12] Bar chart styling.

---
 components/WebsiteDetails.js                  | 12 ++--
 components/common/ButtonGroup.module.css      |  8 ++-
 components/metrics/BarChart.js                | 22 ++++---
 ...wsChart.module.css => BarChart.module.css} |  0
 components/metrics/EventsChart.js             | 66 +++++++++++--------
 components/metrics/EventsTable.js             | 19 ++++--
 components/metrics/PageviewsChart.js          | 53 +++++++--------
 lib/queries.js                                | 38 -----------
 pages/api/website/[id]/rankings.js            | 37 ++++++++---
 9 files changed, 130 insertions(+), 125 deletions(-)
 rename components/metrics/{PageviewsChart.module.css => BarChart.module.css} (100%)

diff --git a/components/WebsiteDetails.js b/components/WebsiteDetails.js
index 6606bc2d..4ebe5a0d 100644
--- a/components/WebsiteDetails.js
+++ b/components/WebsiteDetails.js
@@ -23,9 +23,9 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
   const [data, setData] = useState();
   const [chartLoaded, setChartLoaded] = useState(false);
   const [countryData, setCountryData] = useState();
+  const [eventsData, setEventsData] = useState();
   const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
   const [expand, setExpand] = useState();
-  const [showEvents, setShowEvents] = useState(false);
   const { startDate, endDate, unit } = dateRange;
 
   const BackButton = () => (
@@ -145,14 +145,16 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
               <WorldMap data={countryData} />
             </div>
             <div className="col-12 col-md-12 col-lg-4">
-              <CountriesTable {...tableProps} onDataLoad={data => setCountryData(data)} />
+              <CountriesTable {...tableProps} onDataLoad={setCountryData} />
             </div>
           </div>
-          <div className={classNames(styles.row, 'row', { [styles.hidden]: !showEvents })}>
+          <div
+            className={classNames(styles.row, 'row', { [styles.hidden]: !eventsData?.length > 0 })}
+          >
             <div className="col-12 col-md-12 col-lg-4">
-              <EventsTable {...tableProps} onDataLoad={data => setShowEvents(data.length > 0)} />
+              <EventsTable {...tableProps} onDataLoad={setEventsData} />
             </div>
-            <div className="col-12 col-md-12 col-lg-8">
+            <div className="col-12 col-md-12 col-lg-8 pt-5 pb-5">
               <EventsChart {...dataProps} />
             </div>
           </div>
diff --git a/components/common/ButtonGroup.module.css b/components/common/ButtonGroup.module.css
index b93189e5..d18a8e9c 100644
--- a/components/common/ButtonGroup.module.css
+++ b/components/common/ButtonGroup.module.css
@@ -2,13 +2,13 @@
   display: inline-flex;
   border-radius: 4px;
   overflow: hidden;
-  border: 1px solid var(--gray400);
+  border: 1px solid var(--gray500);
 }
 
 .group .button {
   border-radius: 0;
   background: var(--gray50);
-  border-left: 1px solid var(--gray400);
+  border-left: 1px solid var(--gray500);
   padding: 4px 8px;
 }
 
@@ -16,6 +16,10 @@
   border: 0;
 }
 
+.group .button:hover {
+  background: var(--gray100);
+}
+
 .group .button + .button {
   margin: 0;
 }
diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index e3853b0d..fdce6330 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import ReactTooltip from 'react-tooltip';
 import classNames from 'classnames';
 import ChartJS from 'chart.js';
-import styles from './PageviewsChart.module.css';
+import styles from './BarChart.module.css';
 import { format } from 'date-fns';
 
 export default function BarChart({
@@ -10,6 +10,7 @@ export default function BarChart({
   datasets,
   unit,
   records,
+  height = 400,
   animationDuration = 300,
   className,
   stacked = false,
@@ -68,7 +69,9 @@ export default function BarChart({
       hover: {
         animationDuration: 0,
       },
+      responsive: true,
       responsiveAnimationDuration: 0,
+      maintainAspectRatio: false,
       scales: {
         xAxes: [
           {
@@ -133,16 +136,19 @@ export default function BarChart({
   }, [datasets]);
 
   return (
-    <div
-      data-tip=""
-      data-for={`${chartId}-tooltip`}
-      className={classNames(styles.chart, className)}
-    >
-      <canvas ref={canvas} width={960} height={400} />
+    <>
+      <div
+        data-tip=""
+        data-for={`${chartId}-tooltip`}
+        className={classNames(styles.chart, className)}
+        style={{ height }}
+      >
+        <canvas ref={canvas} />
+      </div>
       <ReactTooltip id={`${chartId}-tooltip`}>
         {tooltip ? <Tooltip {...tooltip} /> : null}
       </ReactTooltip>
-    </div>
+    </>
   );
 }
 
diff --git a/components/metrics/PageviewsChart.module.css b/components/metrics/BarChart.module.css
similarity index 100%
rename from components/metrics/PageviewsChart.module.css
rename to components/metrics/BarChart.module.css
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index 6400539a..1825116f 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -1,33 +1,38 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
+import tinycolor from 'tinycolor2';
 import BarChart from './BarChart';
 import { get } from 'lib/web';
 import { getTimezone, getDateArray, getDateLength } from 'lib/date';
-import styles from './PageviewsChart.module.css';
+import styles from './BarChart.module.css';
 
 const COLORS = [
-  'rgba(38, 128, 235, 0.5)',
-  'rgba(146, 86, 217, 0.5)',
-  'rgba(45, 157, 120, 0.5)',
-  'rgba(216, 55, 144, 0.5)',
-  'rgba(227, 72, 80, 0.5)',
-  'rgba(103, 103, 236, 0.5)',
-  'rgba(68, 181, 86, 0.5)',
+  '#2680eb',
+  '#9256d9',
+  '#44b556',
+  '#e68619',
+  '#e34850',
+  '#1b959a',
+  '#d83790',
+  '#85d044',
 ];
 
-export default function EventsChart({ websiteId, startDate, endDate, unit, className }) {
+export default function EventsChart({ websiteId, startDate, endDate, unit }) {
   const [data, setData] = useState();
   const datasets = useMemo(() => {
     if (!data) return [];
 
-    return Object.keys(data).map((key, index) => ({
-      label: key,
-      data: data[key],
-      lineTension: 0,
-      backgroundColor: COLORS[index],
-      borderColor: COLORS[index],
-      borderWidth: 1,
-    }));
+    return Object.keys(data).map((key, index) => {
+      const color = tinycolor(COLORS[index]);
+      return {
+        label: key,
+        data: data[key],
+        lineTension: 0,
+        backgroundColor: color.setAlpha(0.4).toRgbString(),
+        borderColor: color.setAlpha(0.5).toRgbString(),
+        borderWidth: 1,
+      };
+    });
   }, [data]);
 
   async function loadData() {
@@ -55,6 +60,14 @@ export default function EventsChart({ websiteId, startDate, endDate, unit, class
     setData(map);
   }
 
+  function handleCreate(options) {
+    const legend = {
+      position: 'bottom',
+    };
+
+    options.legend = legend;
+  }
+
   function handleUpdate(chart) {
     chart.data.datasets = datasets;
 
@@ -70,15 +83,14 @@ export default function EventsChart({ websiteId, startDate, endDate, unit, class
   }
 
   return (
-    <div className={classNames(styles.chart, className)}>
-      <BarChart
-        chartId={websiteId}
-        datasets={datasets}
-        unit={unit}
-        records={getDateLength(startDate, endDate, unit)}
-        onUpdate={handleUpdate}
-        stacked
-      />
-    </div>
+    <BarChart
+      chartId={`events-${websiteId}`}
+      datasets={datasets}
+      unit={unit}
+      records={getDateLength(startDate, endDate, unit)}
+      onCreate={handleCreate}
+      onUpdate={handleUpdate}
+      stacked
+    />
   );
 }
diff --git a/components/metrics/EventsTable.js b/components/metrics/EventsTable.js
index 9110bfb8..91e5a401 100644
--- a/components/metrics/EventsTable.js
+++ b/components/metrics/EventsTable.js
@@ -2,7 +2,7 @@ import React from 'react';
 import MetricsTable from './MetricsTable';
 import styles from './EventsTable.module.css';
 
-export default function DevicesTable({
+export default function EventsTable({
   websiteId,
   startDate,
   endDate,
@@ -19,14 +19,19 @@ export default function DevicesTable({
       startDate={startDate}
       endDate={endDate}
       limit={limit}
-      renderLabel={({ w, x }) => (
-        <>
-          <span className={styles.type}>{w}</span>
-          {x}
-        </>
-      )}
+      renderLabel={({ x }) => <Label value={x} />}
       onExpand={onExpand}
       onDataLoad={onDataLoad}
     />
   );
 }
+
+const Label = ({ value }) => {
+  const [event, label] = value.split(':');
+  return (
+    <>
+      <span className={styles.type}>{event}</span>
+      {label}
+    </>
+  );
+};
diff --git a/components/metrics/PageviewsChart.js b/components/metrics/PageviewsChart.js
index d810acf3..1052452b 100644
--- a/components/metrics/PageviewsChart.js
+++ b/components/metrics/PageviewsChart.js
@@ -1,7 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
 import BarChart from './BarChart';
-import styles from './PageviewsChart.module.css';
 
 export default function PageviewsChart({ websiteId, data, unit, className, animationDuration }) {
   const handleUpdate = chart => {
@@ -22,31 +20,30 @@ export default function PageviewsChart({ websiteId, data, unit, className, anima
   }
 
   return (
-    <div className={classNames(styles.chart, className)}>
-      <BarChart
-        chartId={websiteId}
-        datasets={[
-          {
-            label: 'unique visitors',
-            data: data.uniques,
-            lineTension: 0,
-            backgroundColor: 'rgb(38, 128, 235, 0.4)',
-            borderColor: 'rgb(13, 102, 208, 0.4)',
-            borderWidth: 1,
-          },
-          {
-            label: 'page views',
-            data: data.pageviews,
-            lineTension: 0,
-            backgroundColor: 'rgb(38, 128, 235, 0.2)',
-            borderColor: 'rgb(13, 102, 208, 0.2)',
-            borderWidth: 1,
-          },
-        ]}
-        unit={unit}
-        records={data.pageviews.length}
-        onUpdate={handleUpdate}
-      />
-    </div>
+    <BarChart
+      className={className}
+      chartId={websiteId}
+      datasets={[
+        {
+          label: 'unique visitors',
+          data: data.uniques,
+          lineTension: 0,
+          backgroundColor: 'rgb(38, 128, 235, 0.4)',
+          borderColor: 'rgb(13, 102, 208, 0.4)',
+          borderWidth: 1,
+        },
+        {
+          label: 'page views',
+          data: data.pageviews,
+          lineTension: 0,
+          backgroundColor: 'rgb(38, 128, 235, 0.2)',
+          borderColor: 'rgb(13, 102, 208, 0.2)',
+          borderWidth: 1,
+        },
+      ]}
+      unit={unit}
+      records={data.pageviews.length}
+      onUpdate={handleUpdate}
+    />
   );
 }
diff --git a/lib/queries.js b/lib/queries.js
index 592ae85c..1907a954 100644
--- a/lib/queries.js
+++ b/lib/queries.js
@@ -401,44 +401,6 @@ export function getActiveVisitors(website_id) {
   return Promise.resolve([]);
 }
 
-export function getEventRankings(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([]);
-}
-
 export function getEvents(website_id, start_at, end_at, timezone = 'utc', unit = 'day') {
   const db = getDatabase();
 
diff --git a/pages/api/website/[id]/rankings.js b/pages/api/website/[id]/rankings.js
index 9c742390..8d1d95bf 100644
--- a/pages/api/website/[id]/rankings.js
+++ b/pages/api/website/[id]/rankings.js
@@ -1,9 +1,28 @@
-import { getRankings, getEventRankings } from 'lib/queries';
+import { getRankings } from 'lib/queries';
 import { ok, badRequest } from 'lib/response';
 
 const sessionColumns = ['browser', 'os', 'device', 'country'];
 const pageviewColumns = ['url', 'referrer'];
 
+function getTable(type) {
+  if (type === 'event') {
+    return 'event';
+  }
+
+  if (sessionColumns.includes(type)) {
+    return 'session';
+  }
+
+  return 'pageview';
+}
+
+function getColumn(type) {
+  if (type === 'event') {
+    return `concat(event_type, ':', event_value)`;
+  }
+  return type;
+}
+
 export default async (req, res) => {
   const { id, type, start_at, end_at } = req.query;
   const websiteId = +id;
@@ -14,15 +33,13 @@ export default async (req, res) => {
     return badRequest(res);
   }
 
-  if (type === 'event') {
-    const events = await getEventRankings(websiteId, startDate, endDate);
-
-    return ok(res, events);
-  }
-
-  const table = sessionColumns.includes(type) ? 'session' : 'pageview';
-
-  const rankings = await getRankings(websiteId, startDate, endDate, type, table);
+  const rankings = await getRankings(
+    websiteId,
+    startDate,
+    endDate,
+    getColumn(type),
+    getTable(type),
+  );
 
   return ok(res, rankings);
 };

From ccb98f836fef74dfa7f056c238af5f3e0ea455eb Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 27 Aug 2020 23:45:37 -0700
Subject: [PATCH 11/12] MySQL query optimization. Added loading component.

---
 components/common/Loading.js            | 13 ++++++
 components/common/Loading.module.css    | 41 +++++++++++++++++
 components/layout/MenuLayout.module.css |  1 +
 components/metrics/BarChart.js          |  3 +-
 components/metrics/EventsChart.js       |  2 +-
 components/metrics/MetricsTable.js      | 55 ++++++++++++-----------
 components/metrics/PageviewsChart.js    | 60 +++++++++++++------------
 components/metrics/WebsiteChart.js      | 20 +++------
 lib/date.js                             |  6 +++
 lib/filters.js                          |  5 ++-
 lib/queries.js                          | 30 ++++++++++---
 sql/schema.mysql.sql                    | 30 +------------
 sql/schema.postgresql.sql               |  1 +
 13 files changed, 158 insertions(+), 109 deletions(-)
 create mode 100644 components/common/Loading.js
 create mode 100644 components/common/Loading.module.css

diff --git a/components/common/Loading.js b/components/common/Loading.js
new file mode 100644
index 00000000..46e72f17
--- /dev/null
+++ b/components/common/Loading.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './Loading.module.css';
+
+export default function Loading({ className }) {
+  return (
+    <div className={classNames(styles.loading, className)}>
+      <div />
+      <div />
+      <div />
+    </div>
+  );
+}
diff --git a/components/common/Loading.module.css b/components/common/Loading.module.css
new file mode 100644
index 00000000..2a210078
--- /dev/null
+++ b/components/common/Loading.module.css
@@ -0,0 +1,41 @@
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+
+.loading {
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+}
+
+.loading div {
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+  background: var(--gray400);
+  animation: blink 1.4s infinite;
+  animation-fill-mode: both;
+}
+
+.loading div + div {
+  margin-left: 10px;
+}
+
+.loading div:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.loading div:nth-child(3) {
+  animation-delay: 0.4s;
+}
diff --git a/components/layout/MenuLayout.module.css b/components/layout/MenuLayout.module.css
index 62233fd6..1bdd7473 100644
--- a/components/layout/MenuLayout.module.css
+++ b/components/layout/MenuLayout.module.css
@@ -10,6 +10,7 @@
 }
 
 .container .content {
+  position: relative;
   border-left: 1px solid var(--gray300);
   padding-left: 30px;
 }
diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index fdce6330..25c14fe5 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -120,6 +120,7 @@ export default function BarChart({
 
     options.scales.xAxes[0].time.unit = unit;
     options.scales.xAxes[0].ticks.callback = renderLabel;
+    options.animation.duration = animationDuration;
 
     onUpdate(chart.current);
   };
@@ -133,7 +134,7 @@ export default function BarChart({
         updateChart();
       }
     }
-  }, [datasets]);
+  }, [datasets, unit, animationDuration]);
 
   return (
     <>
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index 1825116f..7a751b5b 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -42,7 +42,7 @@ export default function EventsChart({ websiteId, startDate, endDate, unit }) {
       unit,
       tz: getTimezone(),
     });
-    console.log({ data });
+
     const map = data.reduce((obj, { x, t, y }) => {
       if (!obj[x]) {
         obj[x] = [];
diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index bd66cb85..566ceed3 100644
--- a/components/metrics/MetricsTable.js
+++ b/components/metrics/MetricsTable.js
@@ -8,6 +8,7 @@ import { get } from 'lib/web';
 import { percentFilter } from 'lib/filters';
 import { formatNumber, formatLongNumber } from 'lib/format';
 import styles from './MetricsTable.module.css';
+import Loading from '../common/Loading';
 
 export default function MetricsTable({
   title,
@@ -79,35 +80,37 @@ export default function MetricsTable({
     }
   }, [websiteId, startDate, endDate, type]);
 
-  if (!data) {
-    return null;
-  }
-
   return (
     <div className={classNames(styles.container, className)}>
-      <div className={styles.header}>
-        <div className={styles.title}>{title}</div>
-        {headerComponent}
-        <div className={styles.metric} onClick={handleSetFormat}>
-          {metric}
-        </div>
-      </div>
-      <div className={styles.body}>
-        {limit
-          ? rankings.map(row => getRow(row))
-          : data?.length > 0 && (
-              <FixedSizeList height={500} itemCount={rankings.length} itemSize={30}>
-                {Row}
-              </FixedSizeList>
+      {data ? (
+        <>
+          <div className={styles.header}>
+            <div className={styles.title}>{title}</div>
+            {headerComponent}
+            <div className={styles.metric} onClick={handleSetFormat}>
+              {metric}
+            </div>
+          </div>
+          <div className={styles.body}>
+            {limit
+              ? rankings.map(row => getRow(row))
+              : data?.length > 0 && (
+                  <FixedSizeList height={500} itemCount={rankings.length} itemSize={30}>
+                    {Row}
+                  </FixedSizeList>
+                )}
+          </div>
+          <div className={styles.footer}>
+            {limit && data.length > limit && (
+              <Button icon={<Arrow />} size="xsmall" onClick={() => onExpand(type)}>
+                <div>More</div>
+              </Button>
             )}
-      </div>
-      <div className={styles.footer}>
-        {limit && data.length > limit && (
-          <Button icon={<Arrow />} size="xsmall" onClick={() => onExpand(type)}>
-            <div>More</div>
-          </Button>
-        )}
-      </div>
+          </div>
+        </>
+      ) : (
+        <Loading />
+      )}
     </div>
   );
 }
diff --git a/components/metrics/PageviewsChart.js b/components/metrics/PageviewsChart.js
index 1052452b..f8aa0cdc 100644
--- a/components/metrics/PageviewsChart.js
+++ b/components/metrics/PageviewsChart.js
@@ -1,16 +1,15 @@
 import React from 'react';
+import CheckVisible from 'components/helpers/CheckVisible';
 import BarChart from './BarChart';
 
-export default function PageviewsChart({ websiteId, data, unit, className, animationDuration }) {
+export default function PageviewsChart({ websiteId, data, unit, className }) {
   const handleUpdate = chart => {
     const {
       data: { datasets },
-      options,
     } = chart;
 
     datasets[0].data = data.uniques;
     datasets[1].data = data.pageviews;
-    options.animation.duration = animationDuration;
 
     chart.update();
   };
@@ -20,30 +19,35 @@ export default function PageviewsChart({ websiteId, data, unit, className, anima
   }
 
   return (
-    <BarChart
-      className={className}
-      chartId={websiteId}
-      datasets={[
-        {
-          label: 'unique visitors',
-          data: data.uniques,
-          lineTension: 0,
-          backgroundColor: 'rgb(38, 128, 235, 0.4)',
-          borderColor: 'rgb(13, 102, 208, 0.4)',
-          borderWidth: 1,
-        },
-        {
-          label: 'page views',
-          data: data.pageviews,
-          lineTension: 0,
-          backgroundColor: 'rgb(38, 128, 235, 0.2)',
-          borderColor: 'rgb(13, 102, 208, 0.2)',
-          borderWidth: 1,
-        },
-      ]}
-      unit={unit}
-      records={data.pageviews.length}
-      onUpdate={handleUpdate}
-    />
+    <CheckVisible>
+      {visible => (
+        <BarChart
+          className={className}
+          chartId={websiteId}
+          datasets={[
+            {
+              label: 'unique visitors',
+              data: data.uniques,
+              lineTension: 0,
+              backgroundColor: 'rgb(38, 128, 235, 0.4)',
+              borderColor: 'rgb(13, 102, 208, 0.4)',
+              borderWidth: 1,
+            },
+            {
+              label: 'page views',
+              data: data.pageviews,
+              lineTension: 0,
+              backgroundColor: 'rgb(38, 128, 235, 0.2)',
+              borderColor: 'rgb(13, 102, 208, 0.2)',
+              borderWidth: 1,
+            },
+          ]}
+          unit={unit}
+          records={data.pageviews.length}
+          animationDuration={visible ? 300 : 0}
+          onUpdate={handleUpdate}
+        />
+      )}
+    </CheckVisible>
   );
 }
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index f93a985a..9c53a560 100644
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@@ -1,7 +1,6 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import PageviewsChart from './PageviewsChart';
-import CheckVisible from '../helpers/CheckVisible';
 import MetricsBar from './MetricsBar';
 import QuickButtons from './QuickButtons';
 import DateFilter from '../common/DateFilter';
@@ -74,19 +73,10 @@ export default function WebsiteChart({
         </StickyHeader>
       </div>
       <div className="row">
-        <CheckVisible className="col">
-          {visible => (
-            <>
-              <PageviewsChart
-                websiteId={websiteId}
-                data={{ pageviews, uniques }}
-                unit={unit}
-                animationDuration={visible ? 300 : 0}
-              />
-              <QuickButtons value={value} onChange={handleDateChange} />
-            </>
-          )}
-        </CheckVisible>
+        <div className="col">
+          <PageviewsChart websiteId={websiteId} data={{ pageviews, uniques }} unit={unit} />
+          <QuickButtons value={value} onChange={handleDateChange} />
+        </div>
       </div>
     </>
   );
diff --git a/lib/date.js b/lib/date.js
index 6e10f610..80980e27 100644
--- a/lib/date.js
+++ b/lib/date.js
@@ -98,6 +98,12 @@ export function getDateArray(data, startDate, endDate, unit) {
 
   function findData(t) {
     const x = data.find(e => {
+      console.log(
+        new Date(e.t),
+        getLocalTime(new Date(e.t)),
+        getLocalTime(new Date(e.t)).getTime(),
+        normalize(new Date(t)).getTime(),
+      );
       return getLocalTime(new Date(e.t)).getTime() === normalize(new Date(t)).getTime();
     });
 
diff --git a/lib/filters.js b/lib/filters.js
index a1bf1b96..09f27e70 100644
--- a/lib/filters.js
+++ b/lib/filters.js
@@ -49,12 +49,13 @@ export const urlFilter = (data, { domain, raw }) => {
 };
 
 export const refFilter = (data, { domain, domainOnly, raw }) => {
+  const regex = new RegExp(domain.startsWith('http') ? domain : `http[s]?://${domain}`);
+
   const isValidRef = ref => {
     return ref !== '' && !ref.startsWith('/') && !ref.startsWith('#');
   };
 
   if (raw) {
-    const regex = new RegExp(`http[s]?://${domain}`);
     return data.filter(({ x }) => isValidRef(x) && !regex.test(x));
   }
 
@@ -62,7 +63,7 @@ export const refFilter = (data, { domain, domainOnly, raw }) => {
     try {
       const { hostname, origin, pathname, searchParams, protocol } = new URL(url);
 
-      if (hostname === domain) {
+      if (hostname === domain || regex.test(url)) {
         return null;
       }
 
diff --git a/lib/queries.js b/lib/queries.js
index 1907a954..7c8a9875 100644
--- a/lib/queries.js
+++ b/lib/queries.js
@@ -5,10 +5,28 @@ import { subMinutes } from 'date-fns';
 const POSTGRESQL = 'postgresql';
 const MYSQL = 'mysql';
 
+const DATE_FORMATS = {
+  minute: '%Y-%m-%d %H:%i:00',
+  hour: '%Y-%m-%d %H:00:00',
+  day: '%Y-%m-%d',
+  month: '%Y-%m-01',
+  year: '%Y-01-01',
+};
+
 export function getDatabase() {
   return process.env.DATABASE_TYPE || process.env.DATABASE_URL.split(':')[0];
 }
 
+export function getDateQuery(field, unit, timezone) {
+  if (timezone) {
+    const tz = moment.tz(timezone).format('Z');
+
+    return `DATE_FORMAT(convert_tz(${field},'+00:00','${tz}'), '${DATE_FORMATS[unit]}')`;
+  }
+
+  return `DATE_FORMAT(${field}, '${DATE_FORMATS[unit]}')`;
+}
+
 export async function getWebsiteById(website_id) {
   return runQuery(
     prisma.website.findOne({
@@ -264,7 +282,7 @@ export function getMetrics(website_id, start_at, end_at) {
         sum(t.time) as "totaltime"
       from (
          select session_id,
-           date_trunc('hour', created_at),
+           ${getDateQuery('created_at', 'hour')},
            count(*) c,
            floor(unix_timestamp(max(created_at)) - unix_timestamp(min(created_at))) as "time"
          from pageview
@@ -296,7 +314,7 @@ export function getPageviews(
     return prisma.$queryRaw(
       `
       select date_trunc('${unit}', created_at at time zone '${timezone}') t,
-      count(${count}) y
+        count(${count}) y
       from pageview
       where website_id=$1
       and created_at between $2 and $3
@@ -310,11 +328,10 @@ export function getPageviews(
   }
 
   if (db === MYSQL) {
-    const tz = moment.tz(timezone).format('Z');
     return prisma.$queryRaw(
       `
-      select date_trunc('${unit}', convert_tz(created_at,'+00:00','${tz}')) t,
-      count(${count}) y
+      select ${getDateQuery('created_at', unit, timezone)} t,
+        count(${count}) y
       from pageview
       where website_id=?
       and created_at between ? and ?
@@ -424,12 +441,11 @@ export function getEvents(website_id, start_at, end_at, timezone = 'utc', unit =
   }
 
   if (db === MYSQL) {
-    const tz = moment.tz(timezone).format('Z');
     return prisma.$queryRaw(
       `
       select
         event_value x,
-        date_trunc('${unit}', convert_tz(created_at,'+00:00','${tz}')) t,
+        ${getDateQuery('created_at', unit, timezone)} t,
         count(*) y
       from event
       where website_id=?
diff --git a/sql/schema.mysql.sql b/sql/schema.mysql.sql
index 106a6748..a4fd87f0 100644
--- a/sql/schema.mysql.sql
+++ b/sql/schema.mysql.sql
@@ -3,7 +3,6 @@ drop table if exists pageview;
 drop table if exists session;
 drop table if exists website;
 drop table if exists account;
-drop function if exists date_trunc;
 
 create table account (
     user_id int unsigned not null auto_increment primary key,
@@ -72,37 +71,10 @@ 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 pageview_website_id_session_id_created_at_idx on pageview(website_id, session_id, created_at);
 
 create index event_created_at_idx on event(created_at);
 create index event_website_id_idx on event(website_id);
 create index event_session_id_idx on event(session_id);
 
-delimiter $$
-
-create function date_trunc(
-  in_granularity enum('minute', 'hour', 'day', 'month', 'year'),
-  in_datetime datetime(6)
-)
-returns datetime(6)
-deterministic 
-begin
-  if (in_granularity = 'minute') then
-    return DATE_FORMAT(in_datetime, '%Y-%m-%d %H:%i:00.0000');
-  end if;
-  if (in_granularity = 'hour') then
-    return DATE_FORMAT(in_datetime, '%Y-%m-%d %H:00:00.0000');
-  end if;
-  if (in_granularity = 'day') then
-    return DATE_FORMAT(in_datetime, '%Y-%m-%d 00:00:00.0000');
-  end if;
-  if (in_granularity = 'month') then
-    return DATE_FORMAT(in_datetime, '%Y-%m-01 00:00:00.0000');
-  end if;
-  if (in_granularity = 'year') then
-    return DATE_FORMAT(in_datetime, '%Y-01-01 00:00:00.0000');
-  end if;
-end;
-
-$$
-
 insert into account (username, password, is_admin) values ('admin', '$2b$10$BUli0c.muyCW1ErNJc3jL.vFRFtFJWrT8/GcR4A.sUdCznaXiqFXa', true);
\ No newline at end of file
diff --git a/sql/schema.postgresql.sql b/sql/schema.postgresql.sql
index 43533349..28297c4a 100644
--- a/sql/schema.postgresql.sql
+++ b/sql/schema.postgresql.sql
@@ -65,6 +65,7 @@ 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 pageview_website_id_session_id_created_at_idx on pageview(website_id, session_id, created_at);
 
 create index event_created_at_idx on event(created_at);
 create index event_website_id_idx on event(website_id);

From a9765c7ea70bf4a23086e2ea84a670cd43763d48 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 27 Aug 2020 23:57:53 -0700
Subject: [PATCH 12/12] Bump version. Updated packages.

---
 package.json |  12 ++--
 yarn.lock    | 186 ++++++++++++++++++++++++++++-----------------------
 2 files changed, 110 insertions(+), 88 deletions(-)

diff --git a/package.json b/package.json
index f7821a63..b9c7a59e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.16.3",
+  "version": "0.17.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",
@@ -45,7 +45,7 @@
     "classnames": "^2.2.6",
     "cookie": "^0.4.1",
     "cors": "^2.8.5",
-    "date-fns": "^2.15.0",
+    "date-fns": "^2.16.0",
     "date-fns-tz": "^1.0.10",
     "detect-browser": "^5.1.1",
     "dotenv": "^8.2.0",
@@ -62,7 +62,7 @@
     "react-redux": "^7.2.1",
     "react-simple-maps": "^2.1.2",
     "react-spring": "^8.0.27",
-    "react-tooltip": "^4.2.8",
+    "react-tooltip": "^4.2.9",
     "react-window": "^1.8.5",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
@@ -86,14 +86,14 @@
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.0",
     "husky": "^4.2.5",
-    "lint-staged": "^10.2.9",
+    "lint-staged": "^10.2.13",
     "npm-run-all": "^4.1.5",
     "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-import": "^12.0.1",
     "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.0.5",
+    "prettier": "^2.1.1",
     "prettier-eslint": "^11.0.0",
-    "rollup": "^2.26.5",
+    "rollup": "^2.26.6",
     "rollup-plugin-hashbang": "^2.2.2",
     "rollup-plugin-terser": "^7.0.0",
     "stylelint": "^13.6.0",
diff --git a/yarn.lock b/yarn.lock
index 8215dc0e..588dd177 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1086,7 +1086,7 @@
     levenary "^1.1.1"
     semver "^5.5.0"
 
-"@babel/preset-modules@0.1.3", "@babel/preset-modules@^0.1.3":
+"@babel/preset-modules@0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.3.tgz#13242b53b5ef8c883c3cf7dddd55b36ce80fbc72"
   integrity sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==
@@ -1097,6 +1097,17 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
+"@babel/preset-modules@^0.1.3":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.4.tgz#362f2b68c662842970fdb5e254ffc8fc1c2e415e"
+  integrity sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
 "@babel/preset-react@7.9.4":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.9.4.tgz#c6c97693ac65b6b9c0b4f25b948a8f665463014d"
@@ -1458,9 +1469,9 @@
   integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=
 
 "@types/node@*":
-  version "14.6.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.6.0.tgz#7d4411bf5157339337d7cff864d9ff45f177b499"
-  integrity sha512-mikldZQitV94akrc4sCcSjtJfsTKt4p+e/s0AGscVA6XArQ9kFclP+ZiYUMnq987rc6QlYxXv/EivqlfSLxpKA==
+  version "14.6.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.6.1.tgz#fdf6f6c6c73d3d8eee9c98a9a0485bc524b048d7"
+  integrity sha512-HnYlg/BRF8uC1FyKRFZwRaCPTPYKa+6I8QiUZFLredaGOou481cgFS4wKRFyKvQtX8xudqkSdBczJHIYSQYKrQ==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
@@ -1489,40 +1500,40 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
   integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
 
-"@typescript-eslint/experimental-utils@3.9.1":
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.9.1.tgz#b140b2dc7a7554a44f8a86fb6fe7cbfe57ca059e"
-  integrity sha512-lkiZ8iBBaYoyEKhCkkw4SAeatXyBq9Ece5bZXdLe1LWBUwTszGbmbiqmQbwWA8cSYDnjWXp9eDbXpf9Sn0hLAg==
+"@typescript-eslint/experimental-utils@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.10.1.tgz#e179ffc81a80ebcae2ea04e0332f8b251345a686"
+  integrity sha512-DewqIgscDzmAfd5nOGe4zm6Bl7PKtMG2Ad0KG8CUZAHlXfAKTF9Ol5PXhiMh39yRL2ChRH1cuuUGOcVyyrhQIw==
   dependencies:
     "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/types" "3.9.1"
-    "@typescript-eslint/typescript-estree" "3.9.1"
+    "@typescript-eslint/types" "3.10.1"
+    "@typescript-eslint/typescript-estree" "3.10.1"
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
 "@typescript-eslint/parser@^3.0.0":
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.9.1.tgz#ab7983abaea0ae138ff5671c7c7739d8a191b181"
-  integrity sha512-y5QvPFUn4Vl4qM40lI+pNWhTcOWtpZAJ8pOEQ21fTTW4xTJkRplMjMRje7LYTXqVKKX9GJhcyweMz2+W1J5bMg==
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.10.1.tgz#1883858e83e8b442627e1ac6f408925211155467"
+  integrity sha512-Ug1RcWcrJP02hmtaXVS3axPPTTPnZjupqhgj+NnZ6BCkwSImWk/283347+x9wN+lqOdK9Eo3vsyiyDHgsmiEJw==
   dependencies:
     "@types/eslint-visitor-keys" "^1.0.0"
-    "@typescript-eslint/experimental-utils" "3.9.1"
-    "@typescript-eslint/types" "3.9.1"
-    "@typescript-eslint/typescript-estree" "3.9.1"
+    "@typescript-eslint/experimental-utils" "3.10.1"
+    "@typescript-eslint/types" "3.10.1"
+    "@typescript-eslint/typescript-estree" "3.10.1"
     eslint-visitor-keys "^1.1.0"
 
-"@typescript-eslint/types@3.9.1":
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.9.1.tgz#b2a6eaac843cf2f2777b3f2464fb1fbce5111416"
-  integrity sha512-15JcTlNQE1BsYy5NBhctnEhEoctjXOjOK+Q+rk8ugC+WXU9rAcS2BYhoh6X4rOaXJEpIYDl+p7ix+A5U0BqPTw==
+"@typescript-eslint/types@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727"
+  integrity sha512-+3+FCUJIahE9q0lDi1WleYzjCwJs5hIsbugIgnbB+dSCYUxl8L6PwmsyOPFZde2hc1DlTo/xnkOgiTLSyAbHiQ==
 
-"@typescript-eslint/typescript-estree@3.9.1":
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.9.1.tgz#fd81cada74bc8a7f3a2345b00897acb087935779"
-  integrity sha512-IqM0gfGxOmIKPhiHW/iyAEXwSVqMmR2wJ9uXHNdFpqVvPaQ3dWg302vW127sBpAiqM9SfHhyS40NKLsoMpN2KA==
+"@typescript-eslint/typescript-estree@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.10.1.tgz#fd0061cc38add4fad45136d654408569f365b853"
+  integrity sha512-QbcXOuq6WYvnB3XPsZpIwztBoquEYLXh2MtwVU+kO8jgYCiv4G5xrSP/1wg4tkvrEE+esZVquIPX/dxPlePk1w==
   dependencies:
-    "@typescript-eslint/types" "3.9.1"
-    "@typescript-eslint/visitor-keys" "3.9.1"
+    "@typescript-eslint/types" "3.10.1"
+    "@typescript-eslint/visitor-keys" "3.10.1"
     debug "^4.1.1"
     glob "^7.1.6"
     is-glob "^4.0.1"
@@ -1530,10 +1541,10 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/visitor-keys@3.9.1":
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.9.1.tgz#92af3747cdb71509199a8f7a4f00b41d636551d1"
-  integrity sha512-zxdtUjeoSh+prCpogswMwVUJfEFmCOjdzK9rpNjNBfm6EyPt99x3RrJoBOGZO23FCt0WPKUCOL5mb/9D5LjdwQ==
+"@typescript-eslint/visitor-keys@3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.10.1.tgz#cd4274773e3eb63b2e870ac602274487ecd1e931"
+  integrity sha512-9JgC82AaQeglebjZMgYR5wgmfUdUc+EitGUUMW8u2nDckaeimzW+VsoLV6FoimPv2id3VQzfjwBxEMVz08ameQ==
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
@@ -2352,9 +2363,9 @@ camelcase@^6.0.0:
   integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
 
 caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001111:
-  version "1.0.30001117"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001117.tgz#69a9fae5d480eaa9589f7641a83842ad396d17c4"
-  integrity sha512-4tY0Fatzdx59kYjQs+bNxUwZB03ZEBgVmJ1UkFPz/Q8OLiUUbjct2EdpnXj0fvFTPej2EkbPIG0w8BWsjAyk1Q==
+  version "1.0.30001119"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001119.tgz#99185d04bc00e76a86c9ff731dc5ec8e53aefca1"
+  integrity sha512-Hpwa4obv7EGP+TjkCh/wVvbtNJewxmtg4yVJBLFnxo35vbPapBr138bUWENkb5j5L9JZJ9RXLn4OrXRG/cecPQ==
 
 ccount@^1.0.0:
   version "1.0.5"
@@ -2536,7 +2547,7 @@ cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
-cli-truncate@2.1.0, cli-truncate@^2.1.0:
+cli-truncate@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-2.1.0.tgz#c39e28bf05edcde5be3b98992a22deed5a2b93c7"
   integrity sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==
@@ -2637,10 +2648,10 @@ commander@2, commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
-  integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
+commander@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-6.1.0.tgz#f8d722b78103141006b66f4c7ba1e97315ba75bc"
+  integrity sha512-wl7PNrYWd2y5mp1OK/LhTlv8Ff4kQJQRXXAvF+uU/TPNiVJUxZLRYGj/B0y/lPGAVcSbJqH2Za/cvHmrPMC8mA==
 
 common-tags@^1.4.0:
   version "1.8.0"
@@ -2765,6 +2776,17 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
+cosmiconfig@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3"
+  integrity sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -3092,10 +3114,10 @@ date-fns-tz@^1.0.10:
   resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.0.10.tgz#30fef0038f80534fddd8e133a6b8ca55ba313748"
   integrity sha512-cHQAz0/9uDABaUNDM80Mj1FL4ODlxs1xEY4b0DQuAooO2UdNKvDkNbV8ogLnxLbv02Ru1HXFcot0pVvDRBgptg==
 
-date-fns@^2.15.0:
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.15.0.tgz#424de6b3778e4e69d3ff27046ec136af58ae5d5f"
-  integrity sha512-ZCPzAMJZn3rNUvvQIMlXhDr4A+Ar07eLeGsGREoWU19a3Pqf5oYa+ccd+B3F6XVtQY6HANMFdOQ8A+ipFnvJdQ==
+date-fns@^2.16.0:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.16.0.tgz#d34f0f5f2fd498c984513042e8f7247ea86c4cb7"
+  integrity sha512-DWTRyfOA85sZ4IiXPHhiRIOs3fW5U6Msrp+gElXARa6EpoQTXPyHQmh7hr+ssw2nx9FtOQWnAMJKgL5vaJqILw==
 
 debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   version "4.1.1"
@@ -3351,9 +3373,9 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     stream-shift "^1.0.0"
 
 electron-to-chromium@^1.3.488, electron-to-chromium@^1.3.523:
-  version "1.3.544"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.544.tgz#ac1f7d319f6060f3d6d122261d542ec77eb1427e"
-  integrity sha512-jx6H7M1db76Q/dI3MadZC4qwNTvpiq8tdYEJswxexrIm5bH+LKRdg+VAteMF1tJJbBLrcuogE9N3nxT3Dp1gag==
+  version "1.3.553"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.553.tgz#c4693d8660470a3aa830907890e446a9f3b26376"
+  integrity sha512-wi/hoMuTGK6OJoLOHqmXFA9BWOQGF2nInCfk+/Owhd4VVfuenKE2LZr9TtFCmwyda2SE9hG+sRnqRCwhYgFeIg==
 
 elliptic@^6.5.3:
   version "6.5.3"
@@ -3404,7 +3426,7 @@ enhanced-resolve@^4.3.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-enquirer@^2.3.5:
+enquirer@^2.3.5, enquirer@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
   integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
@@ -3746,7 +3768,7 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
-execa@^4.0.1:
+execa@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.3.tgz#0a34dabbad6d66100bd6f2c576c8669403f317f2"
   integrity sha512-WFDXGHckXPWZX19t1kCsXzOpqX9LWYNqn4C+HqZlk/V0imTkzJZqf87ZBhvpHaftERYknpk0fjSylnXVlVgI0A==
@@ -4435,11 +4457,11 @@ ignore@^5.1.4, ignore@^5.1.8:
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
 immer@^7.0.3:
-  version "7.0.7"
-  resolved "https://registry.yarnpkg.com/immer/-/immer-7.0.7.tgz#9dfe713d49bf871cc59aedfce59b1992fa37a977"
-  integrity sha512-Q8yYwVADJXrNfp1ZUAh4XDHkcoE3wpdpb4mC5abDSajs2EbW8+cGdPyAnglMyLnm7EF6ojD2xBFX7L5i4TIytw==
+  version "7.0.8"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-7.0.8.tgz#41dcbc5669a76500d017bef3ad0d03ce0a1d7c1e"
+  integrity sha512-XnpIN8PXBBaOD43U8Z17qg6RQiKQYGDGGCIbz1ixmLGwBkSWwmrmx5X7d+hTtXDM8ur7m5OdLE0PiO+y5RB3pw==
 
-import-fresh@^3.0.0, import-fresh@^3.1.0:
+import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
   integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
@@ -4999,20 +5021,20 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
-lint-staged@^10.2.9:
-  version "10.2.11"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.2.11.tgz#713c80877f2dc8b609b05bc59020234e766c9720"
-  integrity sha512-LRRrSogzbixYaZItE2APaS4l2eJMjjf5MbclRZpLJtcQJShcvUzKXsNeZgsLIZ0H0+fg2tL4B59fU9wHIHtFIA==
+lint-staged@^10.2.13:
+  version "10.2.13"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.2.13.tgz#b9c504683470edfc464b7d3fe3845a5a1efcd814"
+  integrity sha512-conwlukNV6aL9SiMWjFtDp5exeDnTMekdNPDZsKGnpfQuHcO0E3L3Bbf58lcR+M7vk6LpCilxDAVks/DDVBYlA==
   dependencies:
-    chalk "^4.0.0"
-    cli-truncate "2.1.0"
-    commander "^5.1.0"
-    cosmiconfig "^6.0.0"
+    chalk "^4.1.0"
+    cli-truncate "^2.1.0"
+    commander "^6.0.0"
+    cosmiconfig "^7.0.0"
     debug "^4.1.1"
     dedent "^0.7.0"
-    enquirer "^2.3.5"
-    execa "^4.0.1"
-    listr2 "^2.1.0"
+    enquirer "^2.3.6"
+    execa "^4.0.3"
+    listr2 "^2.6.0"
     log-symbols "^4.0.0"
     micromatch "^4.0.2"
     normalize-path "^3.0.0"
@@ -5020,10 +5042,10 @@ lint-staged@^10.2.9:
     string-argv "0.3.1"
     stringify-object "^3.3.0"
 
-listr2@^2.1.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/listr2/-/listr2-2.6.0.tgz#788a3d202978a1b8582062952cbc49272c8e206a"
-  integrity sha512-nwmqTJYQQ+AsKb4fCXH/6/UmLCEDL1jkRAdSn9M6cEUzoRGrs33YD/3N86gAZQnGZ6hxV18XSdlBcJ1GTmetJA==
+listr2@^2.6.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-2.6.1.tgz#fbbabd8eea723924df7530042c1990b346e81706"
+  integrity sha512-1aPX9GkS+W0aHfPUDedJqeqj0DOe1605NaNoqdwEYw/UF2UbZgCIIMpXXZALeG/8xzwMBztguzQEubU5Xw1Qbw==
   dependencies:
     chalk "^4.1.0"
     cli-truncate "^2.1.0"
@@ -5164,9 +5186,9 @@ loglevel-colored-level-prefix@^1.0.0:
     loglevel "^1.4.1"
 
 loglevel@^1.4.1:
-  version "1.6.8"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171"
-  integrity sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.0.tgz#728166855a740d59d38db01cf46f042caa041bb0"
+  integrity sha512-i2sY04nal5jDcagM3FMfG++T69GEEM8CYuOfeOIvmXzOIcwE9a/CJPR0MFM97pYMj/u10lzz7/zd7+qwhrBTqQ==
 
 longest-streak@^2.0.1:
   version "2.0.4"
@@ -6779,10 +6801,10 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^2.0.0, prettier@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
-  integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
+prettier@^2.0.0, prettier@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.1.1.tgz#d9485dd5e499daa6cb547023b87a6cf51bee37d6"
+  integrity sha512-9bY+5ZWCfqj3ghYBLxApy2zf6m+NJo5GzmLTpr9FsApsfjriNnS2dahWReHMi7qNPhhHl9SYHJs2cHZLgexNIw==
 
 pretty-format@^23.0.1:
   version "23.6.0"
@@ -6999,10 +7021,10 @@ react-spring@^8.0.27:
     "@babel/runtime" "^7.3.1"
     prop-types "^15.5.8"
 
-react-tooltip@^4.2.8:
-  version "4.2.8"
-  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.8.tgz#270858fee46fab73b66de316271aa94145f7446b"
-  integrity sha512-pDWa0/khTAgIfldp95tHgyuYyBhWNlfaU2LF9ubAKxpoqNe15uyf+uLlnhK/Lstb6FU8E8/SL28Wp6oEO9xw3g==
+react-tooltip@^4.2.9:
+  version "4.2.9"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.9.tgz#0dd08d14191f5d0e56b51c822fa20c2d81a24272"
+  integrity sha512-DgZyg5oxk9/orgePDLLeuDtlwwYv7CalJRahk9nNsoEJDzIO58GC6zSAet4bKTm6c01hg1z3EocP9H0nmMHTMA==
   dependencies:
     prop-types "^15.7.2"
     uuid "^7.0.3"
@@ -7417,10 +7439,10 @@ rollup-plugin-terser@^7.0.0:
     serialize-javascript "^4.0.0"
     terser "^5.0.0"
 
-rollup@^2.26.5:
-  version "2.26.5"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.26.5.tgz#5562ec36fcba3eed65cfd630bd78e037ad0e0307"
-  integrity sha512-rCyFG3ZtQdnn9YwfuAVH0l/Om34BdO5lwCA0W6Hq+bNB21dVEBbCRxhaHOmu1G7OBFDWytbzAC104u7rxHwGjA==
+rollup@^2.26.6:
+  version "2.26.6"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.26.6.tgz#0b460c1da224c6af12a1e948a28c513aa11f2b93"
+  integrity sha512-iSB7eE3k/VNQHnI7ckS++4yIqTamoUCB1xo7MswhJ/fg22oFYR5+xCrUZVviBj97jvc5A31MPbVMw1Wc3jWxmw==
   optionalDependencies:
     fsevents "~2.1.2"
 
@@ -8986,7 +9008,7 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.7.2:
+yaml@^1.10.0, yaml@^1.7.2:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
   integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==