Added hooks for website stats and pageviews.

src/components/hooks/queries/useWebsitePageviews.ts

@@ -0,0 +1,35 @@
+import { useApi, useDateRange, useNavigation, useTimezone } from 'components/hooks';
+
+export function useWebsitePageviews(websiteId: string, options?: { [key: string]: string }) {
+  const { get, useQuery } = useApi();
+  const [dateRange] = useDateRange(websiteId);
+  const { startDate, endDate, unit } = dateRange;
+  const [timezone] = useTimezone();
+  const {
+    query: { url, referrer, os, browser, device, country, region, city, title },
+  } = useNavigation();
+
+  const params = {
+    startAt: +startDate,
+    endAt: +endDate,
+    unit,
+    timezone,
+    url,
+    referrer,
+    os,
+    browser,
+    device,
+    country,
+    region,
+    city,
+    title,
+  };
+
+  return useQuery({
+    queryKey: ['websites:pageviews', params],
+    queryFn: () => get(`/websites/${websiteId}/pageviews`, params),
+    ...options,
+  });
+}
+
+export default useWebsitePageviews;

src/components/hooks/queries/useWebsiteStats.ts

@@ -0,0 +1,32 @@
+import { useApi, useDateRange, useNavigation } from 'components/hooks';
+
+export function useWebsiteStats(websiteId: string, options?: { [key: string]: string }) {
+  const { get, useQuery } = useApi();
+  const [dateRange] = useDateRange(websiteId);
+  const { startDate, endDate } = dateRange;
+  const {
+    query: { url, referrer, title, os, browser, device, country, region, city },
+  } = useNavigation();
+
+  const params = {
+    startAt: +startDate,
+    endAt: +endDate,
+    url,
+    referrer,
+    title,
+    os,
+    browser,
+    device,
+    country,
+    region,
+    city,
+  };
+
+  return useQuery({
+    queryKey: ['websites:stats', params],
+    queryFn: () => get(`/websites/${websiteId}/stats`, params),
+    ...options,
+  });
+}
+
+export default useWebsiteStats;

src/components/metrics/BarChart.tsx

@@ -136,10 +136,7 @@ export function BarChart({
   const updateChart = () => {
     setTooltipPopup(null);
 
-    datasets.forEach((dataset, index) => {
-      chart.current.data.datasets[index].data = dataset.data;
-      chart.current.data.datasets[index].label = dataset.label;
-    });
+    chart.current.data.datasets = datasets;
 
     chart.current.options = getOptions();