Added summary stats query.

components/WebsiteStats.js

@@ -33,7 +33,7 @@ export default function WebsiteStats({ websiteId, startDate, endDate, unit }) {
 
   return (
     <div>
-      <WebsiteSummary data={{ pageviews, uniques }} />
+      <WebsiteSummary websiteId={websiteId} startDate={startDate} endDate={endDate} />
       <PageviewsChart data={{ pageviews, uniques }} unit={unit} />
     </div>
   );

components/WebsiteSummary.js

@@ -1,16 +1,30 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import MetricCard from './MetricCard';
+import { get } from '../lib/web';
 import styles from './WebsiteSummary.module.css';
 
-function getTotal(data) {
-  return data.reduce((n, v) => n + v.y, 0);
+export default function WebsiteSummary({ websiteId, startDate, endDate }) {
+  const [data, setData] = useState({});
+  const { pageviews, uniques, bounces } = data;
+
+  async function loadData() {
+    setData(
+      await get(`/api/website/${websiteId}/summary`, {
+        start_at: +startDate,
+        end_at: +endDate,
+      }),
+    );
   }
 
-export default function WebsiteSummary({ data }) {
+  useEffect(() => {
+    loadData();
+  }, [startDate, endDate]);
+
   return (
     <div className={styles.container}>
-      <MetricCard label="Views" value={getTotal(data.pageviews)} />
-      <MetricCard label="Visitors" value={getTotal(data.uniques)} />
+      <MetricCard label="Views" value={pageviews} />
+      <MetricCard label="Visitors" value={uniques} />
+      <MetricCard label="Bounce rate" value={`${~~((bounces / uniques) * 100)}%`} />
     </div>
   );
 }

lib/db.js

@@ -179,3 +179,33 @@ export async function getPageviewData(
     ),
   );
 }
+
+export async function getSummary(website_id, start_at, end_at) {
+  return runQuery(
+    prisma.queryRaw(
+      `
+      select
+         (select count(*)
+            from pageview
+            where website_id=${website_id}
+            and created_at between '${start_at}' and '${end_at}'
+          ) as "pageviews",
+         (select
+            count(distinct session_id)
+            from pageview
+            where website_id=${website_id}
+            and created_at between '${start_at}' and '${end_at}'
+         ) as "uniques",
+         (select sum(t.c) from
+           (select count(*) c
+              from pageview
+              where website_id=${website_id}
+              and created_at between '${start_at}' and '${end_at}'
+              group by session_id
+              having count(*) = 1
+          ) t
+         ) as "bounces"
+      `,
+    ),
+  );
+}

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

@@ -1,13 +1,17 @@
-import { getPageviews } from 'lib/db';
+import { getSummary } from 'lib/db';
 import { useAuth } from 'lib/middleware';
+import { format } from 'date-fns';
 
 export default async (req, res) => {
   await useAuth(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));
+  const summary = await getSummary(
+    +id,
+    format(new Date(+start_at), 'yyyy-MM-dd hh:mm:ss'),
+    format(new Date(+end_at), 'yyyy-MM-dd hh:mm:ss'),
+  );
 
-  return res.status(200).json({ pageviews });
+  return res.status(200).json(summary[0]);
 };

pages/index.js

@@ -29,7 +29,7 @@ export default function HomePage({ username }) {
 }
 
 export async function getServerSideProps({ req, res }) {
-  const token = parse(req.headers.cookie)['umami.auth'];
+  const token = parse(req.headers.cookie || '')['umami.auth'];
 
   try {
     const payload = await verifySecureToken(token);