Updated filter params logic. Added inline compare dates.

src/components/input/DateFilter.tsx

@@ -98,6 +98,7 @@ export function DateFilter({
         selectedKey={value}
         placeholder={formatMessage(labels.selectDate)}
         onSelectionChange={handleChange}
+        style={{ width: '200px' }}
       >
         {options.map(({ label, value, divider }: any) => {
           return (

src/components/input/WebsiteDateFilter.tsx

@@ -1,19 +1,43 @@
-import { useDateRange } from '@/components/hooks';
+import {
+  Button,
+  Icon,
+  Row,
+  Text,
+  Select,
+  ListItem,
+  TooltipTrigger,
+  Tooltip,
+} from '@umami/react-zen';
 import { isAfter } from 'date-fns';
+import { Icons } from '@/components/icons';
+import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
 import { getOffsetDateRange } from '@/lib/date';
-import { Button, Icon, Icons, Row } from '@umami/react-zen';
-import { DateFilter } from './DateFilter';
 import { DateRange } from '@/lib/types';
+import { DateFilter } from './DateFilter';
 
 export function WebsiteDateFilter({
   websiteId,
   showAllTime = true,
+  showButtons = true,
+  showCompare = true,
 }: {
   websiteId: string;
+  compare?: string;
   showAllTime?: boolean;
+  showButtons?: boolean;
+  showCompare?: boolean;
 }) {
   const { dateRange, saveDateRange } = useDateRange(websiteId);
   const { value, startDate, endDate, offset } = dateRange;
+  const { formatMessage, labels } = useMessages();
+  const {
+    router,
+    renderUrl,
+    query: { compare },
+  } = useNavigation();
+  const isAllTime = value === 'all';
+  const isCustomRange = value.startsWith('range');
+
   const disableForward =
     value === 'all' || isAfter(getOffsetDateRange(dateRange, 1).startDate, new Date());
 
@@ -25,9 +49,17 @@ export function WebsiteDateFilter({
     saveDateRange(getOffsetDateRange(dateRange, increment));
   };
 
+  const handleSelect = (compare: any) => {
+    router.push(renderUrl({ compare }));
+  };
+
+  const handleCompare = () => {
+    router.push(renderUrl({ compare: compare ? undefined : 'prev' }));
+  };
+
   return (
     <Row gap="3">
-      {value !== 'all' && !value.startsWith('range') && (
+      {showButtons && !isAllTime && !isCustomRange && (
         <Row gap="1">
           <Button onPress={() => handleIncrement(-1)} variant="quiet">
             <Icon size="xs" rotate={180}>
@@ -49,6 +81,23 @@ export function WebsiteDateFilter({
         onChange={handleChange}
         showAllTime={showAllTime}
       />
+      {!isAllTime && compare && (
+        <Row alignItems="center" gap>
+          <Text>VS</Text>
+          <Select selectedKey={compare} onSelectionChange={handleSelect} style={{ width: '200px' }}>
+            <ListItem id="prev">{formatMessage(labels.previousPeriod)}</ListItem>
+            <ListItem id="yoy">{formatMessage(labels.previousYear)}</ListItem>
+          </Select>
+        </Row>
+      )}
+      {!isAllTime && showCompare && (
+        <TooltipTrigger delay={0}>
+          <Button variant="quiet" onPress={handleCompare}>
+            <Icon fillColor="currentColor">{compare ? <Icons.Close /> : <Icons.Compare />}</Icon>
+          </Button>
+          <Tooltip>{formatMessage(compare ? labels.cancel : labels.compareDates)}</Tooltip>
+        </TooltipTrigger>
+      )}
     </Row>
   );
 }