Added hooks for website stats and pageviews.

src/app/(main)/websites/[websiteId]/WebsiteChart.tsx

@@ -1,39 +1,13 @@
 import { useMemo } from 'react';
 import PageviewsChart from 'components/metrics/PageviewsChart';
-import { useApi, useDateRange, useTimezone, useNavigation } from 'components/hooks';
 import { getDateArray } from 'lib/date';
+import useWebsitePageviews from 'components/hooks/queries/useWebsitePageviews';
+import { useDateRange } from 'components/hooks';
 
 export function WebsiteChart({ websiteId }: { websiteId: string }) {
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, unit } = dateRange;
-  const [timezone] = useTimezone();
+  const { data, isLoading } = useWebsitePageviews(websiteId);
-  const {
-    query: { url, referrer, os, browser, device, country, region, city, title },
-  } = useNavigation();
-  const { get, useQuery } = useApi();
-
-  const { data, isLoading } = useQuery({
-    queryKey: [
-      'websites:pageviews',
-      { websiteId, url, referrer, os, browser, device, country, region, city, title },
-    ],
-    queryFn: () =>
-      get(`/websites/${websiteId}/pageviews`, {
-        startAt: +startDate,
-        endAt: +endDate,
-        unit,
-        timezone,
-        url,
-        referrer,
-        os,
-        browser,
-        device,
-        country,
-        region,
-        city,
-        title,
-      }),
-  });
 
   const chartData = useMemo(() => {
     if (data) {

src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx

@@ -1,11 +1,12 @@
 import classNames from 'classnames';
-import { useApi, useDateRange, useMessages, useNavigation, useSticky } from 'components/hooks';
+import { useMessages, useSticky } from 'components/hooks';
 import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
 import MetricCard from 'components/metrics/MetricCard';
 import MetricsBar from 'components/metrics/MetricsBar';
 import { formatShortTime } from 'lib/format';
 import WebsiteFilterButton from './WebsiteFilterButton';
 import styles from './WebsiteMetricsBar.module.css';
+import useWebsiteStats from 'components/hooks/queries/useWebsiteStats';
 
 export function WebsiteMetricsBar({
   websiteId,
@@ -17,34 +18,8 @@ export function WebsiteMetricsBar({
   sticky?: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
-  const { get, useQuery } = useApi();
-  const [dateRange] = useDateRange(websiteId);
-  const { startDate, endDate } = dateRange;
   const { ref, isSticky } = useSticky({ enabled: sticky });
-  const {
+  const { data, isLoading, isFetched, error } = useWebsiteStats(websiteId);
-    query: { url, referrer, title, os, browser, device, country, region, city },
-  } = useNavigation();
-
-  const { data, error, isLoading, isFetched } = useQuery({
-    queryKey: [
-      'websites:stats',
-      { websiteId, url, referrer, title, os, browser, device, country, region, city },
-    ],
-    queryFn: () =>
-      get(`/websites/${websiteId}/stats`, {
-        startAt: +startDate,
-        endAt: +endDate,
-        url,
-        referrer,
-        title,
-        os,
-        browser,
-        device,
-        country,
-        region,
-        city,
-      }),
-  });
 
   const { pageviews, uniques, bounces, totaltime } = data || {};
   const num = Math.min(data && uniques.value, data && bounces.value);

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 = datasets;
-      chart.current.data.datasets[index].data = dataset.data;
-      chart.current.data.datasets[index].label = dataset.label;
-    });
 
     chart.current.options = getOptions();