fix compare screens

Author: franciscao633

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

@@ -1,8 +1,8 @@
-import { useMemo } from 'react';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { PageviewsChart } from '@/components/metrics/PageviewsChart';
-import { useWebsitePageviewsQuery } from '@/components/hooks/queries/useWebsitePageviewsQuery';
 import { useDateRange } from '@/components/hooks';
+import { useWebsitePageviewsQuery } from '@/components/hooks/queries/useWebsitePageviewsQuery';
+import { PageviewsChart } from '@/components/metrics/PageviewsChart';
+import { useMemo } from 'react';
 
 export function WebsiteChart({
   websiteId,
@@ -15,7 +15,7 @@ export function WebsiteChart({
   const { startDate, endDate, unit, value } = dateRange;
   const { data, isLoading, isFetching, error } = useWebsitePageviewsQuery({
     websiteId,
-    compare: compareMode ? dateCompare?.['value'] : undefined,
+    compare: compareMode ? dateCompare?.compare : undefined,
   });
   const { pageviews, sessions, compare } = (data || {}) as any;
 

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

@@ -1,12 +1,11 @@
-import { useState } from 'react';
-import { Grid, Heading, Column, Row, Select, ListItem } from '@umami/react-zen';
-import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
-import { MetricsTable } from '@/components/metrics/MetricsTable';
-import { Panel } from '@/components/common/Panel';
 import { DateDisplay } from '@/components/common/DateDisplay';
+import { Panel } from '@/components/common/Panel';
+import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
 import { ChangeLabel } from '@/components/metrics/ChangeLabel';
-import { getCompareDate } from '@/lib/date';
+import { MetricsTable } from '@/components/metrics/MetricsTable';
 import { formatNumber } from '@/lib/format';
+import { Column, Grid, Heading, ListItem, Row, Select } from '@umami/react-zen';
+import { useState } from 'react';
 
 export function CompareTables({ websiteId }: { websiteId: string }) {
   const [data, setData] = useState([]);
@@ -17,11 +16,7 @@ export function CompareTables({ websiteId }: { websiteId: string }) {
     updateParams,
     query: { view = 'path' },
   } = useNavigation();
-  const { startDate, endDate } = getCompareDate(
-    dateCompare,
-    dateRange.startDate,
-    dateRange.endDate,
-  );
+  const { startDate, endDate } = dateCompare;
 
   const params = {
     startAt: startDate.getTime(),

src/lib/date.ts

@@ -289,13 +289,13 @@ export function minDate(...args: any[]) {
 
 export function getCompareDate(compare: string, startDate: Date, endDate: Date) {
   if (compare === 'yoy') {
-    return { startDate: subYears(startDate, 1), endDate: subYears(endDate, 1) };
+    return { compare, startDate: subYears(startDate, 1), endDate: subYears(endDate, 1) };
   }
 
   if (compare === 'prev') {
     const diff = differenceInMinutes(endDate, startDate);
 
-    return { startDate: subMinutes(startDate, diff), endDate: subMinutes(endDate, diff) };
+    return { compare, startDate: subMinutes(startDate, diff), endDate: subMinutes(endDate, diff) };
   }
 
   return {};