Chart component. Update web utils.

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>
+  );
+}