Display page views and unique visitors.

components/WebsiteStats.js

@@ -1,10 +1,20 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import PageviewsChart from './PageviewsChart';
 import { get } from 'lib/web';
-import { getTimezone } from 'lib/date';
+import { getDateArray, getTimezone } from 'lib/date';
+import WebsiteSummary from './WebsiteSummary';
 
 export default function WebsiteStats({ websiteId, startDate, endDate, unit }) {
   const [data, setData] = useState();
+  const [pageviews, uniques] = useMemo(() => {
+    if (data) {
+      return [
+        getDateArray(data.pageviews, startDate, endDate, unit),
+        getDateArray(data.uniques, startDate, endDate, unit),
+      ];
+    }
+    return [[], []];
+  }, [data]);
 
   async function loadData() {
     setData(
@@ -19,7 +29,12 @@ export default function WebsiteStats({ websiteId, startDate, endDate, unit }) {
 
   useEffect(() => {
     loadData();
-  }, [websiteId, startDate, endDate]);
+  }, [websiteId, startDate, endDate, unit]);
 
-  return <PageviewsChart data={data} />;
+  return (
+    <div>
+      <WebsiteSummary data={{ pageviews, uniques }} />
+      <PageviewsChart data={{ pageviews, uniques }} />
+    </div>
+  );
 }