From 590a70c2ffe8df0c59a43164f0bef4aaf29c7598 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sun, 26 Jul 2020 00:12:42 -0700
Subject: [PATCH] Chart component. Update web utils.

---
 components/Chart.js                 | 111 ++++++++++++++++++++++++++++
 lib/db.js                           |   8 +-
 lib/web.js                          |  26 ++++++-
 pages/api/website/[id]/pageviews.js |  10 +++
 pages/index.js                      |  10 ++-
 public/umami.js                     |   2 +-
 6 files changed, 159 insertions(+), 8 deletions(-)
 create mode 100644 components/Chart.js
 create mode 100644 pages/api/website/[id]/pageviews.js

diff --git a/components/Chart.js b/components/Chart.js
new file mode 100644
index 00000000..1324e51b
--- /dev/null
+++ b/components/Chart.js
@@ -0,0 +1,111 @@
+import React, { useState, useMemo, useRef, useEffect } from 'react';
+import ChartJS from 'chart.js';
+import { format, subDays, subHours, startOfHour } from 'date-fns';
+import { get } from 'lib/web';
+
+export default function Chart({ websiteId, startDate, endDate }) {
+  const [data, setData] = useState();
+  const canvas = useRef();
+  const chart = useRef();
+  const metrics = useMemo(() => {
+    if (data) {
+      const points = {};
+      const now = startOfHour(new Date());
+
+      for (let i = 0; i <= 168; i++) {
+        const d = new Date(subHours(now, 168 - i));
+        const key = format(d, 'yyyy-MM-dd-HH');
+        points[key] = { t: startOfHour(d).toISOString(), y: 0 };
+      }
+
+      data.pageviews.forEach(e => {
+        const key = format(new Date(e.created_at), 'yyyy-MM-dd-HH');
+        points[key].y += 1;
+      });
+
+      return points;
+    }
+  }, [data]);
+  console.log(metrics);
+
+  async function loadData() {
+    setData(
+      await get(`/api/website/${websiteId}/pageviews`, {
+        start_at: startDate,
+        end_at: endDate,
+      }),
+    );
+  }
+
+  function draw() {
+    if (!chart.current && canvas.current) {
+      chart.current = new ChartJS(canvas.current, {
+        type: 'bar',
+        data: {
+          datasets: [
+            {
+              label: 'page views',
+              data: Object.values(metrics),
+              lineTension: 0,
+            },
+          ],
+        },
+        options: {
+          animation: {
+            duration: 300,
+          },
+          tooltips: {
+            intersect: false,
+          },
+          hover: {
+            animationDuration: 0,
+          },
+          scales: {
+            xAxes: [
+              {
+                type: 'time',
+                distribution: 'series',
+                time: {
+                  unit: 'hour',
+                  displayFormats: {
+                    hour: 'ddd M/DD',
+                  },
+                  tooltipFormat: 'ddd M/DD hA',
+                },
+                ticks: {
+                  autoSkip: true,
+                  minRotation: 0,
+                  maxRotation: 0,
+                  maxTicksLimit: 7,
+                },
+              },
+            ],
+            yAxes: [
+              {
+                ticks: {
+                  beginAtZero: true,
+                },
+              },
+            ],
+          },
+        },
+      });
+    }
+  }
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  useEffect(() => {
+    if (metrics) {
+      draw();
+    }
+  }, [metrics]);
+
+  return (
+    <div>
+      <canvas ref={canvas} width={960} height={400} />
+    </div>
+  );
+}
diff --git a/lib/db.js b/lib/db.js
index 29eaf809..bfc6de0e 100644
--- a/lib/db.js
+++ b/lib/db.js
@@ -11,7 +11,7 @@ export const prisma = new PrismaClient({
 
 prisma.on('query', e => {
   if (process.env.LOG_QUERY) {
-    console.log(`${e.query} (${e.duration}ms)`);
+    console.log(`${e.params} -> ${e.query} (${e.duration}ms)`);
   }
 });
 
@@ -113,11 +113,15 @@ export async function getAccount(username = '') {
   );
 }
 
-export async function getPageviews(website_id) {
+export async function getPageviews(website_id, start_at, end_at) {
   return runQuery(
     prisma.pageview.findMany({
       where: {
         website_id,
+        created_at: {
+          gte: start_at,
+          lte: end_at,
+        },
       },
     }),
   );
diff --git a/lib/web.js b/lib/web.js
index 0b8acb5a..3bd967a9 100644
--- a/lib/web.js
+++ b/lib/web.js
@@ -1,13 +1,31 @@
-export const post = (url, params) =>
+export const apiRequest = (method, url, body) =>
   fetch(url, {
-    method: 'post',
+    method,
     cache: 'no-cache',
     headers: {
       Accept: 'application/json',
       'Content-Type': 'application/json',
     },
-    body: JSON.stringify(params),
-  }).then(res => (res.status === 200 ? res.json() : null));
+    body,
+  }).then(res => (res.ok ? res.json() : null));
+
+function parseQuery(url, params) {
+  const query =
+    params &&
+    Object.keys(params).reduce((values, key) => {
+      if (params[key] !== undefined) {
+        return values.concat(`${key}=${encodeURIComponent(params[key])}`);
+      }
+      return values;
+    }, []);
+  return query.length ? `${url}?${query.join('&')}` : url;
+}
+
+export const get = (url, params) => apiRequest('get', parseQuery(url, params));
+
+export const post = (url, params) => apiRequest('post', url, JSON.stringify(params));
+
+export const del = (url, params) => apiRequest('del', parseQuery(url, params));
 
 export const hook = (_this, method, callback) => {
   const orig = _this[method];
diff --git a/pages/api/website/[id]/pageviews.js b/pages/api/website/[id]/pageviews.js
new file mode 100644
index 00000000..a4bfb18a
--- /dev/null
+++ b/pages/api/website/[id]/pageviews.js
@@ -0,0 +1,10 @@
+import { getPageviews } from 'lib/db';
+
+export default async (req, res) => {
+  console.log(req.query);
+  const { id, start_at, end_at } = req.query;
+
+  const pageviews = await getPageviews(+id, new Date(+start_at), new Date(+end_at));
+
+  res.status(200).json({ pageviews });
+};
diff --git a/pages/index.js b/pages/index.js
index c9a58dfd..c5187520 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Link from 'next/link';
 import cookies from 'next-cookies';
 import Layout from 'components/Layout';
+import Chart from 'components/Chart';
 import { verifySecureToken } from 'lib/crypto';
 
 export default function HomePage({ username }) {
@@ -10,6 +11,13 @@ export default function HomePage({ username }) {
       <h2>
         You've successfully logged in as <b>{username}</b>.
       </h2>
+      <div>
+        <Chart
+          websiteId={3}
+          startDate={Date.now() - 1000 * 60 * 60 * 24 * 7}
+          endDate={Date.now()}
+        />
+      </div>
       <Link href="/logout">
         <a>Logout 🡒</a>
       </Link>
@@ -25,7 +33,7 @@ export async function getServerSideProps(context) {
 
     return {
       props: {
-        username: payload.username,
+        ...payload,
       },
     };
   } catch {
diff --git a/public/umami.js b/public/umami.js
index 210f8a56..d5580f55 100644
--- a/public/umami.js
+++ b/public/umami.js
@@ -1 +1 @@
-!function(){"use strict";function e(e){var t=this.constructor;return this.then((function(n){return t.resolve(e()).then((function(){return n}))}),(function(n){return t.resolve(e()).then((function(){return t.reject(n)}))}))}var t=setTimeout;function n(e){return Boolean(e&&void 0!==e.length)}function r(){}function o(e){if(!(this instanceof o))throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=0,this._handled=!1,this._value=void 0,this._deferreds=[],f(e,this)}function i(e,t){for(;3===e._state;)e=e._value;0!==e._state?(e._handled=!0,o._immediateFn((function(){var n=1===e._state?t.onFulfilled:t.onRejected;if(null!==n){var r;try{r=n(e._value)}catch(e){return void s(t.promise,e)}u(t.promise,r)}else(1===e._state?u:s)(t.promise,e._value)}))):e._deferreds.push(t)}function u(e,t){try{if(t===e)throw new TypeError("A promise cannot be resolved with itself.");if(t&&("object"==typeof t||"function"==typeof t)){var n=t.then;if(t instanceof o)return e._state=3,e._value=t,void a(e);if("function"==typeof n)return void f((r=n,i=t,function(){r.apply(i,arguments)}),e)}e._state=1,e._value=t,a(e)}catch(t){s(e,t)}var r,i}function s(e,t){e._state=2,e._value=t,a(e)}function a(e){2===e._state&&0===e._deferreds.length&&o._immediateFn((function(){e._handled||o._unhandledRejectionFn(e._value)}));for(var t=0,n=e._deferreds.length;t<n;t++)i(e,e._deferreds[t]);e._deferreds=null}function c(e,t,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.promise=n}function f(e,t){var n=!1;try{e((function(e){n||(n=!0,u(t,e))}),(function(e){n||(n=!0,s(t,e))}))}catch(e){if(n)return;n=!0,s(t,e)}}o.prototype["catch"]=function(e){return this.then(null,e)},o.prototype.then=function(e,t){var n=new this.constructor(r);return i(this,new c(e,t,n)),n},o.prototype["finally"]=e,o.all=function(e){return new o((function(t,r){if(!n(e))return r(new TypeError("Promise.all accepts an array"));var o=Array.prototype.slice.call(e);if(0===o.length)return t([]);var i=o.length;function u(e,n){try{if(n&&("object"==typeof n||"function"==typeof n)){var s=n.then;if("function"==typeof s)return void s.call(n,(function(t){u(e,t)}),r)}o[e]=n,0==--i&&t(o)}catch(e){r(e)}}for(var s=0;s<o.length;s++)u(s,o[s])}))},o.resolve=function(e){return e&&"object"==typeof e&&e.constructor===o?e:new o((function(t){t(e)}))},o.reject=function(e){return new o((function(t,n){n(e)}))},o.race=function(e){return new o((function(t,r){if(!n(e))return r(new TypeError("Promise.race accepts an array"));for(var i=0,u=e.length;i<u;i++)o.resolve(e[i]).then(t,r)}))},o._immediateFn="function"==typeof setImmediate&&function(e){setImmediate(e)}||function(e){t(e,0)},o._unhandledRejectionFn=function(e){"undefined"!=typeof console&&console&&console.warn("Possible Unhandled Promise Rejection:",e)};var l=function(){if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if("undefined"!=typeof global)return global;throw new Error("unable to locate global object")}();"Promise"in l?l.Promise.prototype["finally"]||(l.Promise.prototype["finally"]=e):l["Promise"]=o,self.fetch||(self.fetch=function(e,t){return t=t||{},new Promise((function(n,r){var o=new XMLHttpRequest,i=[],u=[],s={},a=function(){return{ok:2==(o.status/100|0),statusText:o.statusText,status:o.status,url:o.responseURL,text:function(){return Promise.resolve(o.responseText)},json:function(){return Promise.resolve(JSON.parse(o.responseText))},blob:function(){return Promise.resolve(new Blob([o.response]))},clone:a,headers:{keys:function(){return i},entries:function(){return u},get:function(e){return s[e.toLowerCase()]},has:function(e){return e.toLowerCase()in s}}}};for(var c in o.open(t.method||"get",e,!0),o.onload=function(){o.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm,(function(e,t,n){i.push(t=t.toLowerCase()),u.push([t,n]),s[t]=s[t]?s[t]+","+n:n})),n(a())},o.onerror=r,o.withCredentials="include"==t.credentials,t.headers)o.setRequestHeader(c,t.headers[c]);o.send(t.body||null)}))});var h=function(e,t,n){var r=e[t];return function(){for(var t=[],o=arguments.length;o--;)t[o]=arguments[o];return n.apply(null,t),r.apply(e,t)}};!function(e,t){var n=e.screen,r=n.width,o=n.height,i=e.navigator.language,u=e.location,s=u.hostname,a=u.pathname,c=u.search,f=e.localStorage,l=e.document,p=e.history,d=l.querySelector("script[data-website-id]"),v=d&&d.getAttribute("data-website-id"),y=new URL(d.src).origin,m=r+"x"+o,w=[],_=""+a+c,g=l.referrer,b=function(e,n){var r={session:f.getItem(t),url:_,referrer:g,website:v,hostname:s,screen:m,language:i};return n&&Object.keys(n).forEach((function(e){r[e]=n[e]})),function(e,t){return fetch(e,{method:"post",cache:"no-cache",headers:{Accept:"application/json","Content-Type":"application/json"},body:JSON.stringify(t)}).then((function(e){return 200===e.status?e.json():null}))}(y+"/api/collect",{type:e,payload:r}).then((function(e){var n=e.session;return n&&f.setItem(t,n)}))},j=function(){return b("pageview").then((function(){return setTimeout(T,300)}))},P=function(e,t,n){E(),g=_,_=n,j()};p.pushState=h(p,"pushState",P),p.replaceState=h(p,"replaceState",P);var E=function(){w.forEach((function(e){var t=e[0],n=e[1],r=e[2];t&&t.removeEventListener(n,r,!0)})),w.length=0},T=function(){l.querySelectorAll("[class*='umami--']").forEach((function(e){e.className.split(" ").forEach((function(t){if(/^umami--([a-z]+)--([a-z0-9_]+[a-z0-9-_]+)$/.test(t)){var n=t.split("--"),r=n[1],o=n[2],i=function(){return b("event",{event_type:r,event_value:o})};w.push([e,r,i]),e.addEventListener(r,i,!0)}}))}))};j()}(window,"umami.session")}();
+!function(){"use strict";function e(e){var t=this.constructor;return this.then((function(n){return t.resolve(e()).then((function(){return n}))}),(function(n){return t.resolve(e()).then((function(){return t.reject(n)}))}))}var t=setTimeout;function n(e){return Boolean(e&&void 0!==e.length)}function r(){}function o(e){if(!(this instanceof o))throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=0,this._handled=!1,this._value=void 0,this._deferreds=[],f(e,this)}function i(e,t){for(;3===e._state;)e=e._value;0!==e._state?(e._handled=!0,o._immediateFn((function(){var n=1===e._state?t.onFulfilled:t.onRejected;if(null!==n){var r;try{r=n(e._value)}catch(e){return void s(t.promise,e)}u(t.promise,r)}else(1===e._state?u:s)(t.promise,e._value)}))):e._deferreds.push(t)}function u(e,t){try{if(t===e)throw new TypeError("A promise cannot be resolved with itself.");if(t&&("object"==typeof t||"function"==typeof t)){var n=t.then;if(t instanceof o)return e._state=3,e._value=t,void a(e);if("function"==typeof n)return void f((r=n,i=t,function(){r.apply(i,arguments)}),e)}e._state=1,e._value=t,a(e)}catch(t){s(e,t)}var r,i}function s(e,t){e._state=2,e._value=t,a(e)}function a(e){2===e._state&&0===e._deferreds.length&&o._immediateFn((function(){e._handled||o._unhandledRejectionFn(e._value)}));for(var t=0,n=e._deferreds.length;t<n;t++)i(e,e._deferreds[t]);e._deferreds=null}function c(e,t,n){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof t?t:null,this.promise=n}function f(e,t){var n=!1;try{e((function(e){n||(n=!0,u(t,e))}),(function(e){n||(n=!0,s(t,e))}))}catch(e){if(n)return;n=!0,s(t,e)}}o.prototype["catch"]=function(e){return this.then(null,e)},o.prototype.then=function(e,t){var n=new this.constructor(r);return i(this,new c(e,t,n)),n},o.prototype["finally"]=e,o.all=function(e){return new o((function(t,r){if(!n(e))return r(new TypeError("Promise.all accepts an array"));var o=Array.prototype.slice.call(e);if(0===o.length)return t([]);var i=o.length;function u(e,n){try{if(n&&("object"==typeof n||"function"==typeof n)){var s=n.then;if("function"==typeof s)return void s.call(n,(function(t){u(e,t)}),r)}o[e]=n,0==--i&&t(o)}catch(e){r(e)}}for(var s=0;s<o.length;s++)u(s,o[s])}))},o.resolve=function(e){return e&&"object"==typeof e&&e.constructor===o?e:new o((function(t){t(e)}))},o.reject=function(e){return new o((function(t,n){n(e)}))},o.race=function(e){return new o((function(t,r){if(!n(e))return r(new TypeError("Promise.race accepts an array"));for(var i=0,u=e.length;i<u;i++)o.resolve(e[i]).then(t,r)}))},o._immediateFn="function"==typeof setImmediate&&function(e){setImmediate(e)}||function(e){t(e,0)},o._unhandledRejectionFn=function(e){"undefined"!=typeof console&&console&&console.warn("Possible Unhandled Promise Rejection:",e)};var l=function(){if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if("undefined"!=typeof global)return global;throw new Error("unable to locate global object")}();"Promise"in l?l.Promise.prototype["finally"]||(l.Promise.prototype["finally"]=e):l["Promise"]=o,self.fetch||(self.fetch=function(e,t){return t=t||{},new Promise((function(n,r){var o=new XMLHttpRequest,i=[],u=[],s={},a=function(){return{ok:2==(o.status/100|0),statusText:o.statusText,status:o.status,url:o.responseURL,text:function(){return Promise.resolve(o.responseText)},json:function(){return Promise.resolve(JSON.parse(o.responseText))},blob:function(){return Promise.resolve(new Blob([o.response]))},clone:a,headers:{keys:function(){return i},entries:function(){return u},get:function(e){return s[e.toLowerCase()]},has:function(e){return e.toLowerCase()in s}}}};for(var c in o.open(t.method||"get",e,!0),o.onload=function(){o.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm,(function(e,t,n){i.push(t=t.toLowerCase()),u.push([t,n]),s[t]=s[t]?s[t]+","+n:n})),n(a())},o.onerror=r,o.withCredentials="include"==t.credentials,t.headers)o.setRequestHeader(c,t.headers[c]);o.send(t.body||null)}))});var h=function(e,t){return function(e,t,n){return fetch(t,{method:e,cache:"no-cache",headers:{Accept:"application/json","Content-Type":"application/json"},body:n}).then((function(e){return e.ok?e.json():null}))}("post",e,JSON.stringify(t))},p=function(e,t,n){var r=e[t];return function(){for(var t=[],o=arguments.length;o--;)t[o]=arguments[o];return n.apply(null,t),r.apply(e,t)}};!function(e,t){var n=e.screen,r=n.width,o=n.height,i=e.navigator.language,u=e.location,s=u.hostname,a=u.pathname,c=u.search,f=e.localStorage,l=e.document,d=e.history,v=l.querySelector("script[data-website-id]"),y=v&&v.getAttribute("data-website-id"),m=new URL(v.src).origin,w=r+"x"+o,_=[],g=""+a+c,b=l.referrer,j=function(e,n){var r={session:f.getItem(t),url:g,referrer:b,website:y,hostname:s,screen:w,language:i};return n&&Object.keys(n).forEach((function(e){r[e]=n[e]})),h(m+"/api/collect",{type:e,payload:r}).then((function(e){var n=e.session;return n&&f.setItem(t,n)}))},P=function(){return j("pageview").then((function(){return setTimeout(S,300)}))},E=function(e,t,n){T(),b=g,g=n,P()};d.pushState=p(d,"pushState",E),d.replaceState=p(d,"replaceState",E);var T=function(){_.forEach((function(e){var t=e[0],n=e[1],r=e[2];t&&t.removeEventListener(n,r,!0)})),_.length=0},S=function(){l.querySelectorAll("[class*='umami--']").forEach((function(e){e.className.split(" ").forEach((function(t){if(/^umami--([a-z]+)--([a-z0-9_]+[a-z0-9-_]+)$/.test(t)){var n=t.split("--"),r=n[1],o=n[2],i=function(){return j("event",{event_type:r,event_value:o})};_.push([e,r,i]),e.addEventListener(r,i,!0)}}))}))};P()}(window,"umami.session")}();