Website components. Update chart component.

components/DateFilter.js

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { getDateRange } from 'lib/date';
+
+const filterOptions = ['24h', '7d', '30d'];
+
+export default function DateFilter({ onChange }) {
+  const [selected, setSelected] = useState('7d');
+
+  function handleChange(e) {
+    const value = e.target.value;
+    setSelected(value);
+    onChange(getDateRange(value));
+  }
+
+  return (
+    <select value={selected} onChange={handleChange}>
+      {filterOptions.map(option => (
+        <option name={option}>{option}</option>
+      ))}
+    </select>
+  );
+}

components/PageviewsChart.js

@@ -1,38 +1,28 @@
-import React, { useState, useMemo, useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useMemo } from 'react';
 import ChartJS from 'chart.js';
-import { get } from 'lib/web';
-import { getTimezone, getLocalTime } from 'lib/date';
+import { getLocalTime } from 'lib/date';
 
-export default function Chart({ websiteId, startDate, endDate }) {
-  const [data, setData] = useState();
+export default function PageviewsChart({ data }) {
   const canvas = useRef();
   const chart = useRef();
-  const metrics = useMemo(() => {
+  const pageviews = useMemo(() => {
     if (data) {
       return data.pageviews.map(({ t, y }) => ({ t: getLocalTime(t), y }));
     }
+    return [];
   }, [data]);
-  console.log(metrics);
-
-  async function loadData() {
-    setData(
-      await get(`/api/website/${websiteId}/pageviews`, {
-        start_at: +startDate,
-        end_at: +endDate,
-        tz: getTimezone(),
-      }),
-    );
-  }
 
   function draw() {
-    if (!chart.current && canvas.current) {
+    if (!canvas.current) return;
+
+    if (!chart.current) {
       chart.current = new ChartJS(canvas.current, {
         type: 'bar',
         data: {
           datasets: [
             {
               label: 'page views',
-              data: Object.values(metrics),
+              data: pageviews,
               lineTension: 0,
               backgroundColor: 'rgb(38, 128, 235, 0.1)',
               borderColor: 'rgb(13, 102, 208, 0.2)',
@@ -74,18 +64,17 @@ export default function Chart({ websiteId, startDate, endDate }) {
           },
         },
       });
+    } else {
+      chart.current.data.datasets[0].data = pageviews;
+      chart.current.update();
     }
   }
 
   useEffect(() => {
-    loadData();
-  }, []);
-
-  useEffect(() => {
-    if (metrics) {
+    if (data) {
       draw();
     }
-  }, [metrics]);
+  }, [data]);
 
   return (
     <div>

components/WebsiteList.js

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react';
+import { get } from 'lib/web';
+import WebsiteStats from './WebsiteStats';
+import DateFilter from './DateFilter';
+import { getDateRange } from '../lib/date';
+
+export default function WebsiteList() {
+  const [data, setData] = useState();
+  const [dateRange, setDateRange] = useState(getDateRange('7d'));
+  const { startDate, endDate, unit } = dateRange;
+
+  async function loadData() {
+    setData(await get(`/api/website`));
+  }
+
+  function handleDateChange(value) {
+    setDateRange(value);
+  }
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  return (
+    <div>
+      <DateFilter onChange={handleDateChange} />
+      {data &&
+        data.websites.map(({ website_id, label }) => (
+          <div>
+            <h2>{label}</h2>
+            <WebsiteStats
+              websiteId={website_id}
+              startDate={startDate}
+              endDate={endDate}
+              unit={unit}
+            />
+          </div>
+        ))}
+    </div>
+  );
+}

components/WebsiteStats.js

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from 'react';
+import PageviewsChart from './PageviewsChart';
+import { get } from 'lib/web';
+import { getTimezone } from 'lib/date';
+
+export default function WebsiteStats({ websiteId, startDate, endDate, unit }) {
+  const [data, setData] = useState();
+
+  async function loadData() {
+    setData(
+      await get(`/api/website/${websiteId}/pageviews`, {
+        start_at: +startDate,
+        end_at: +endDate,
+        unit,
+        tz: getTimezone(),
+      }),
+    );
+  }
+
+  useEffect(() => {
+    loadData();
+  }, [websiteId, startDate, endDate]);
+
+  return <PageviewsChart data={data} />;
+}