Updated filter params logic. Added inline compare dates.

package.json

@@ -78,7 +78,7 @@
     "@react-spring/web": "^9.7.5",
     "@tanstack/react-query": "^5.71.10",
     "@umami/prisma-client": "^0.16.0",
-    "@umami/react-zen": "^0.81.0",
+    "@umami/react-zen": "^0.83.0",
     "@umami/redis-client": "^0.27.0",
     "bcryptjs": "^2.4.3",
     "chalk": "^4.1.2",

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

@@ -1,5 +0,0 @@
-import { Row } from '@umami/react-zen';
-
-export function WebsiteCompareBar({ websiteId }: { websiteId: string }) {
-  return <Row>compare {websiteId}</Row>;
-}

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

@@ -10,7 +10,7 @@ import { WebsiteTableView } from './WebsiteTableView';
 
 export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
   const {
-    query: { view },
+    query: { view, compare },
   } = useNavigation();
 
   return (
@@ -20,7 +20,7 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
         <WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} />
       </Panel>
       <Panel>
-        <WebsiteChart websiteId={websiteId} />
+        <WebsiteChart websiteId={websiteId} compareMode={compare} />
       </Panel>
       {!view && <WebsiteTableView websiteId={websiteId} />}
       {view && <WebsiteExpandedView websiteId={websiteId} />}

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

@@ -1,7 +1,6 @@
 import { Button, Icon, Icons, DialogTrigger, Dialog, Modal, Text } from '@umami/react-zen';
 import { FilterEditForm } from '@/components/common/FilterEditForm';
 import { useMessages, useNavigation, useFilters } from '@/components/hooks';
-import { OPERATORS } from '@/lib/constants';
 
 export function WebsiteFilterButton({
   websiteId,
@@ -20,7 +19,7 @@ export function WebsiteFilterButton({
     const params = filters.reduce((obj, filter) => {
       const { name, operator, value } = filter;
 
-      obj[name] = operator === OPERATORS.equals ? value : `${operator}~${value}`;
+      obj[name] = `${operator}.${value}`;
 
       return obj;
     }, {});

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

@@ -7,7 +7,6 @@ import { WebsiteFilterButton } from '@/app/(main)/websites/[websiteId]/WebsiteFi
 import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
 import { FilterBar } from '@/components/metrics/FilterBar';
 import { WebsiteMenu } from '@/app/(main)/websites/[websiteId]/WebsiteMenu';
-import { WebsiteCompareBar } from '@/app/(main)/websites/[websiteId]/WebsiteCompareBar';
 
 export function WebsiteHeader({
   websiteId,
@@ -17,7 +16,6 @@ export function WebsiteHeader({
   websiteId: string;
   showFilter?: boolean;
   allowEdit?: boolean;
-  compareMode?: boolean;
 }) {
   const website = useWebsite();
   const { name, domain } = website || {};
@@ -36,7 +34,6 @@ export function WebsiteHeader({
           {allowEdit && <WebsiteMenu websiteId={websiteId} />}
         </Row>
       </Row>
-      <WebsiteCompareBar websiteId={websiteId} />
       <FilterBar websiteId={websiteId} />
       <WebsiteTabs websiteId={websiteId} />
     </Column>

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

@@ -11,17 +11,26 @@ import {
 } from '@umami/react-zen';
 import { Fragment } from 'react';
 import { Lucide } from '@/components/icons';
-import { useMessages } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
+import { InputItem } from '@/lib/types';
 
 export function WebsiteMenu({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
+  const { router, renderUrl, renderTeamUrl } = useNavigation();
 
-  const menuItems = [
-    { label: formatMessage(labels.compare), icon: <Lucide.GitCompare /> },
-    { label: formatMessage(labels.share), icon: <Lucide.Share /> },
-    { label: formatMessage(labels.edit), icon: <Lucide.Edit />, seperator: true },
+  const menuItems: InputItem[] = [
+    { id: 'share', label: formatMessage(labels.share), icon: <Lucide.Share /> },
+    { id: 'edit', label: formatMessage(labels.edit), icon: <Lucide.Edit />, seperator: true },
   ];
 
+  const handleAction = (id: any) => {
+    if (id === 'compare') {
+      router.push(renderUrl({ compare: 'prev' }));
+    } else if (id === 'edit') {
+      router.push(renderTeamUrl(`/settings/websites/${websiteId}`));
+    }
+  };
+
   return (
     <MenuTrigger>
       <Button variant="quiet">
@@ -29,13 +38,13 @@ export function WebsiteMenu({ websiteId }: { websiteId: string }) {
           <Icons.More />
         </Icon>
       </Button>
-      <Popover placement="bottom end">
-        <Menu>
-          {menuItems.map(({ label, icon, seperator }, index) => {
+      <Popover placement="bottom">
+        <Menu onAction={handleAction}>
+          {menuItems.map(({ id, label, icon, seperator }, index) => {
             return (
               <Fragment key={index}>
                 {seperator && <MenuSeparator />}
-                <MenuItem>
+                <MenuItem id={id}>
                   <Icon>{icon}</Icon>
                   <Text>{label}</Text>
                 </MenuItem>

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} />

src/lib/constants.ts

@@ -101,13 +101,6 @@ export const OPERATORS = {
   after: 'af',
 } as const;
 
-export const OPERATOR_PREFIXES = {
-  [OPERATORS.equals]: '',
-  [OPERATORS.notEquals]: '!',
-  [OPERATORS.contains]: '~',
-  [OPERATORS.doesNotContain]: '!~',
-};
-
 export const DATA_TYPES = {
   [DATA_TYPE.string]: 'string',
   [DATA_TYPE.number]: 'number',

src/lib/params.ts

@@ -1,13 +1,9 @@
-import { FILTER_COLUMNS, OPERATOR_PREFIXES, OPERATORS } from '@/lib/constants';
+import { FILTER_COLUMNS, OPERATORS } from '@/lib/constants';
 import { QueryFilters, QueryOptions } from '@/lib/types';
 
 export function parseParameterValue(param: any) {
   if (typeof param === 'string') {
-    const [, prefix, value] = param.match(/^(!~|!|~)?(.*)$/);
-
-    const operator =
-      Object.keys(OPERATOR_PREFIXES).find(key => OPERATOR_PREFIXES[key] === prefix) ||
-      OPERATORS.equals;
+    const [, operator, value] = param.match(/^([a-z]+)\.(.*)/) || [];
 
     return { operator, value };
   }

src/lib/types.ts

@@ -1,3 +1,4 @@
+import { Dispatch, SetStateAction } from 'react';
 import {
   COLLECTION_TYPE,
   DATA_TYPE,
@@ -8,13 +9,11 @@ import {
   ROLES,
 } from './constants';
 import { TIME_UNIT } from './date';
-import { Dispatch, SetStateAction } from 'react';
 
 type ObjectValues<T> = T[keyof T];
 
 export type TimeUnit = ObjectValues<typeof TIME_UNIT>;
 export type Permission = ObjectValues<typeof PERMISSIONS>;
-
 export type CollectionType = ObjectValues<typeof COLLECTION_TYPE>;
 export type Role = ObjectValues<typeof ROLES>;
 export type EventType = ObjectValues<typeof EVENT_TYPE>;
@@ -203,3 +202,10 @@ export interface SessionData {
   ip?: string;
   userAgent?: string;
 }
+
+export interface InputItem {
+  id: string;
+  label: string;
+  icon: any;
+  seperator?: boolean;
+}