Metrics components refactoring. New event data page.

components/pages/websites/WebsiteChart.js

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import PageviewsChart from 'components/metrics/PageviewsChart';
+import { useApi, useDateRange, useTimezone, usePageQuery } from 'hooks';
+import { getDateArray, getDateLength } from 'lib/date';
+
+export function WebsiteChart({ websiteId }) {
+  const [dateRange] = useDateRange(websiteId);
+  const { startDate, endDate, unit, modified } = dateRange;
+  const [timezone] = useTimezone();
+  const {
+    query: { url, referrer, os, browser, device, country, region, city, title },
+  } = usePageQuery();
+  const { get, useQuery } = useApi();
+
+  const { data, isLoading } = useQuery(
+    [
+      'websites:pageviews',
+      { websiteId, modified, url, referrer, os, browser, device, country, region, city, title },
+    ],
+    () =>
+      get(`/websites/${websiteId}/pageviews`, {
+        startAt: +startDate,
+        endAt: +endDate,
+        unit,
+        timezone,
+        url,
+        referrer,
+        os,
+        browser,
+        device,
+        country,
+        region,
+        city,
+        title,
+      }),
+  );
+
+  const chartData = useMemo(() => {
+    if (data) {
+      return {
+        pageviews: getDateArray(data.pageviews, startDate, endDate, unit),
+        sessions: getDateArray(data.sessions, startDate, endDate, unit),
+      };
+    }
+    return { pageviews: [], sessions: [] };
+  }, [data, startDate, endDate, unit, modified]);
+
+  return (
+    <PageviewsChart
+      websiteId={websiteId}
+      data={chartData}
+      unit={unit}
+      records={getDateLength(startDate, endDate, unit)}
+      loading={isLoading}
+    />
+  );
+}
+
+export default WebsiteChart;