Updated filter params logic. Added inline compare dates.

src/components/common/FilterLink.tsx

@@ -37,7 +37,7 @@ export function FilterLink({
       {children}
       {!value && `(${label || formatMessage(labels.unknown)})`}
       {value && (
-        <Link href={renderUrl({ [id]: value })} className={styles.label} replace>
+        <Link href={renderUrl({ [id]: `eq.${value}` })} className={styles.label} replace>
           {label || value}
         </Link>
       )}

src/components/hooks/queries/useWebsiteMetricsQuery.ts

@@ -9,7 +9,7 @@ export function useWebsiteMetricsQuery(
   options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
 ) {
   const { get, useQuery } = useApi();
-  const params = useFilterParams(websiteId);
+  const filterParams = useFilterParams(websiteId);
   const searchParams = useSearchParams();
 
   return useQuery({
@@ -17,13 +17,13 @@ export function useWebsiteMetricsQuery(
       'websites:metrics',
       {
         websiteId,
-        ...params,
+        ...filterParams,
         ...queryParams,
       },
     ],
     queryFn: async () => {
       const data = await get(`/websites/${websiteId}/metrics`, {
-        ...params,
+        ...filterParams,
         [searchParams.get('view')]: undefined,
         ...queryParams,
       });

src/components/hooks/useFilters.ts

@@ -81,7 +81,7 @@ export function useFilters() {
       let value = safeDecodeURIComponent(query[key]);
       const label = fields.find(({ name }) => name === key)?.label;
 
-      const match = value.match(/^([a-z]+)~(.*)/);
+      const match = value.match(/^([a-z]+)\.(.*)/);
 
       if (match) {
         operator = match[1];

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>
   );
 }

src/components/messages.ts

@@ -273,6 +273,7 @@ export const labels = defineMessages({
     id: 'label.journey-description',
     defaultMessage: 'Understand how users navigate through your website.',
   },
+  compareDates: { id: 'label.compare-dates', defaultMessage: 'Compare dates' },
   compare: { id: 'label.compare', defaultMessage: 'Compare' },
   current: { id: 'label.current', defaultMessage: 'Current' },
   previous: { id: 'label.previous', defaultMessage: 'Previous' },

src/components/metrics/FilterBar.tsx

@@ -45,20 +45,29 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
           const paramValue = isSearchOperator(operator) ? value : formatValue(value, key);
 
           return (
-            <Button key={name} variant="outline">
-              <Row alignItems="center" gap="6">
+            <Row
+              key={name}
+              border
+              padding
+              backgroundColor
+              borderRadius
+              shadow="1"
+              alignItems="center"
+              justifyContent="space-between"
+            >
+              <Row alignItems="center" gap="4">
                 <Row alignItems="center" gap="2">
                   <Text weight="bold">{label}</Text>
-                  <Text transform="uppercase" color="11" size="1">
-                    {operatorLabels[operator]}
-                  </Text>
+                  <Text color="11">{operatorLabels[operator]}</Text>
                   <Text weight="bold">{paramValue}</Text>
                 </Row>
-                <Icon onClick={e => handleCloseFilter(name, e)}>
-                  <Icons.Close />
-                </Icon>
+                <Button variant="quiet" size="xs" style={{ left: '5px' }}>
+                  <Icon onClick={e => handleCloseFilter(name, e)} size="xs">
+                    <Icons.Close />
+                  </Icon>
+                </Button>
               </Row>
-            </Button>
+            </Row>
           );
         })}
         <WebsiteFilterButton websiteId={websiteId} alignment="center" showText={false} />