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,
+      }),
+    );
+  }
+
+  useEffect(() => {
+    loadData();
+  }, [startDate, endDate]);
 
-export default function WebsiteSummary({ data }) {
   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>
   );
 }