Progress check-in for date compare.

src/app/(main)/profile/DateRangeSetting.tsx

@@ -7,11 +7,11 @@ import styles from './DateRangeSetting.module.css';
 
 export function DateRangeSetting() {
   const { formatMessage, labels } = useMessages();
-  const [dateRange, setDateRange] = useDateRange();
+  const { dateRange, saveDateRange } = useDateRange();
   const { value } = dateRange;
 
-  const handleChange = (value: string | DateRange) => setDateRange(value);
-  const handleReset = () => setDateRange(DEFAULT_DATE_RANGE);
+  const handleChange = (value: string | DateRange) => saveDateRange(value);
+  const handleReset = () => saveDateRange(DEFAULT_DATE_RANGE);
 
   return (
     <Flexbox gap={10} width={300}>

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

@@ -4,17 +4,33 @@ 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);
+export function WebsiteChart({
+  websiteId,
+  compareMode = false,
+}: {
+  websiteId: string;
+  compareMode: boolean;
+}) {
+  const { dateRange, dateCompare } = useDateRange(websiteId);
   const { startDate, endDate, unit } = dateRange;
-  const { data, isLoading } = useWebsitePageviews(websiteId);
+  const { data, isLoading } = useWebsitePageviews(websiteId, compareMode ? dateCompare : undefined);
+  const { pageviews, sessions, compare } = (data || {}) as any;
 
   const chartData = useMemo(() => {
     if (data) {
-      return {
-        pageviews: getDateArray(data.pageviews, startDate, endDate, unit),
-        sessions: getDateArray(data.sessions, startDate, endDate, unit),
+      const result = {
+        pageviews: getDateArray(pageviews, startDate, endDate, unit),
+        sessions: getDateArray(sessions, startDate, endDate, unit),
       };
+
+      if (compare) {
+        result['compare'] = {
+          pageviews: result.pageviews.map(({ x }, i) => ({ x, y: compare.pageviews[i].y })),
+          sessions: result.sessions.map(({ x }, i) => ({ x, y: compare.sessions[i].y })),
+        };
+      }
+
+      return result;
     }
     return { pageviews: [], sessions: [] };
   }, [data, startDate, endDate, unit]);

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

@@ -21,7 +21,9 @@ export function WebsiteFilterButton({
   const { formatMessage, labels } = useMessages();
   const { renderUrl, router } = useNavigation();
   const { fields } = useFields();
-  const [{ startDate, endDate }] = useDateRange(websiteId);
+  const {
+    dateRange: { startDate, endDate },
+  } = useDateRange(websiteId);
 
   const handleAddFilter = ({ name, operator, value }) => {
     const prefix = OPERATOR_PREFIXES[operator];

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

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import classNames from 'classnames';
 import { useMessages, useSticky } from 'components/hooks';
 import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
@@ -9,6 +8,7 @@ import WebsiteFilterButton from './WebsiteFilterButton';
 import useWebsiteStats from 'components/hooks/queries/useWebsiteStats';
 import styles from './WebsiteMetricsBar.module.css';
 import { Dropdown, Item } from 'react-basics';
+import useStore, { setWebsiteDateCompare } from 'store/websites';
 
 export function WebsiteMetricsBar({
   websiteId,
@@ -22,9 +22,12 @@ export function WebsiteMetricsBar({
   compareMode?: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
-  const [compare, setCompare] = useState('prev');
+  const dateCompare = useStore(state => state[websiteId]?.dateCompare);
   const { ref, isSticky } = useSticky({ enabled: sticky });
-  const { data, isLoading, isFetched, error } = useWebsiteStats(websiteId, compare);
+  const { data, isLoading, isFetched, error } = useWebsiteStats(
+    websiteId,
+    compareMode && dateCompare,
+  );
 
   const { pageviews, visitors, visits, bounces, totaltime } = data || {};
 
@@ -106,10 +109,10 @@ export function WebsiteMetricsBar({
             <Dropdown
               className={styles.dropdown}
               items={items}
-              value={compare}
+              value={dateCompare || 'prev'}
               renderValue={value => items.find(i => i.value === value)?.label}
               alignment="end"
-              onChange={(e: any) => setCompare(e)}
+              onChange={(value: any) => setWebsiteDateCompare(websiteId, value)}
             >
               {items.map(({ label, value }) => (
                 <Item key={value}>{label}</Item>

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

@@ -21,7 +21,7 @@ export function WebsiteComparePage({ websiteId }) {
       <WebsiteHeader websiteId={websiteId} />
       <FilterTags websiteId={websiteId} params={params} />
       <WebsiteMetricsBar websiteId={websiteId} compareMode={true} />
-      <WebsiteChart websiteId={websiteId} />
+      <WebsiteChart websiteId={websiteId} compareMode={true} />
     </>
   );
 }

src/app/(main)/websites/[websiteId]/event-data/EventDataMetricsBar.tsx

@@ -7,7 +7,7 @@ import styles from './EventDataMetricsBar.module.css';
 export function EventDataMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
   const { get, useQuery } = useApi();
-  const [dateRange] = useDateRange(websiteId);
+  const { dateRange } = useDateRange(websiteId);
   const { startDate, endDate } = dateRange;
 
   const { data, error, isLoading, isFetched } = useQuery({

src/app/(main)/websites/[websiteId]/event-data/WebsiteEventData.tsx

@@ -6,7 +6,7 @@ import { useDateRange, useApi, useNavigation } from 'components/hooks';
 import styles from './WebsiteEventData.module.css';
 
 function useData(websiteId: string, event: string) {
-  const [dateRange] = useDateRange(websiteId);
+  const { dateRange } = useDateRange(websiteId);
   const { startDate, endDate } = dateRange;
   const { get, useQuery } = useApi();
   const { data, error, isLoading } = useQuery({