New compare page.

src/app/(main)/links/[linkId]/LinkControls.tsx

@@ -10,12 +10,10 @@ export function LinkControls({
   allowFilter = true,
   allowDateFilter = true,
   allowMonthFilter,
-  allowCompare,
   allowDownload = false,
 }: {
   linkId: string;
   allowFilter?: boolean;
-  allowCompare?: boolean;
   allowDateFilter?: boolean;
   allowMonthFilter?: boolean;
   allowDownload?: boolean;
@@ -24,13 +22,7 @@ export function LinkControls({
     <Column gap>
       <Row alignItems="center" justifyContent="space-between" gap="3">
         {allowFilter ? <WebsiteFilterButton websiteId={websiteId} /> : <div />}
-        {allowDateFilter && (
+        {allowDateFilter && <WebsiteDateFilter websiteId={websiteId} showAllTime={false} />}
-          <WebsiteDateFilter
-            websiteId={websiteId}
-            allowCompare={allowCompare}
-            showAllTime={false}
-          />
-        )}
         {allowDownload && <ExportButton websiteId={websiteId} />}
         {allowMonthFilter && <WebsiteMonthSelect websiteId={websiteId} />}
       </Row>

src/app/(main)/pixels/[pixelId]/PixelControls.tsx

@@ -10,12 +10,10 @@ export function PixelControls({
   allowFilter = true,
   allowDateFilter = true,
   allowMonthFilter,
-  allowCompare,
   allowDownload = false,
 }: {
   pixelId: string;
   allowFilter?: boolean;
-  allowCompare?: boolean;
   allowDateFilter?: boolean;
   allowMonthFilter?: boolean;
   allowDownload?: boolean;
@@ -24,13 +22,7 @@ export function PixelControls({
     <Column gap>
       <Row alignItems="center" justifyContent="space-between" gap="3">
         {allowFilter ? <WebsiteFilterButton websiteId={websiteId} /> : <div />}
-        {allowDateFilter && (
+        {allowDateFilter && <WebsiteDateFilter websiteId={websiteId} showAllTime={false} />}
-          <WebsiteDateFilter
-            websiteId={websiteId}
-            allowCompare={allowCompare}
-            showAllTime={false}
-          />
-        )}
         {allowDownload && <ExportButton websiteId={websiteId} />}
         {allowMonthFilter && <WebsiteMonthSelect websiteId={websiteId} />}
       </Row>

src/app/(main)/websites/[websiteId]/(reports)/utm/UTMPage.tsx

@@ -11,7 +11,7 @@ export function UTMPage({ websiteId }: { websiteId: string }) {
 
   return (
     <Column gap>
-      <WebsiteControls websiteId={websiteId} allowCompare={false} />
+      <WebsiteControls websiteId={websiteId} />
       <UTM websiteId={websiteId} startDate={startDate} endDate={endDate} />
     </Column>
   );

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

@@ -9,7 +9,7 @@ export function WebsiteChart({
   compareMode,
 }: {
   websiteId: string;
-  compareMode?: string;
+  compareMode?: boolean;
 }) {
   const { dateRange, dateCompare } = useDateRange(websiteId);
   const { startDate, endDate, unit, value } = dateRange;

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

@@ -10,15 +10,15 @@ export function WebsiteControls({
   allowFilter = true,
   allowDateFilter = true,
   allowMonthFilter,
-  allowCompare,
   allowDownload = false,
+  allowCompare = false,
 }: {
   websiteId: string;
   allowFilter?: boolean;
-  allowCompare?: boolean;
   allowDateFilter?: boolean;
   allowMonthFilter?: boolean;
   allowDownload?: boolean;
+  allowCompare?: boolean;
 }) {
   return (
     <Column gap>

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

@@ -13,6 +13,7 @@ import {
   Network,
   ChartPie,
   UserPlus,
+  Compare,
 } from '@/components/icons';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { SideMenu } from '@/components/common/SideMenu';
@@ -22,7 +23,8 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
   const { pathname, renderUrl, teamId } = useNavigation();
 
-  const renderPath = (path: string) => renderUrl(`/websites/${websiteId}${path}`);
+  const renderPath = (path: string) =>
+    renderUrl(`/websites/${websiteId}${path}`, { event: undefined });
 
   const items = [
     {
@@ -52,6 +54,12 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
           icon: <Clock />,
           path: renderPath('/realtime'),
         },
+        {
+          id: 'compare',
+          label: formatMessage(labels.compare),
+          icon: <Compare />,
+          path: renderPath('/compare'),
+        },
         {
           id: 'breakdown',
           label: formatMessage(labels.breakdown),
@@ -132,8 +140,8 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
   ];
 
   const selectedKey =
-    items.flatMap(e => e.items).find(({ path }) => path && pathname.endsWith(path))?.id ||
+    items.flatMap(e => e.items).find(({ path }) => path && pathname.endsWith(path.split('?')[0]))
-    'overview';
+      ?.id || 'overview';
 
   return (
     <SideMenu items={items} selectedKey={selectedKey} allowMinimize={false}>

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

@@ -27,7 +27,7 @@ export function WebsitePage({ websiteId }: { websiteId: string }) {
 
   return (
     <Column gap>
-      <WebsiteControls websiteId={websiteId} allowCompare={true} />
+      <WebsiteControls websiteId={websiteId} />
       <WebsiteMetricsBar websiteId={websiteId} showChange={true} />
       <Panel minHeight="520px">
         <WebsiteChart websiteId={websiteId} compareMode={compare} />

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

@@ -0,0 +1,20 @@
+'use client';
+import { Column } from '@umami/react-zen';
+import { CompareTables } from './CompareTables';
+import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
+import { WebsiteMetricsBar } from '@/app/(main)/websites/[websiteId]/WebsiteMetricsBar';
+import { Panel } from '@/components/common/Panel';
+import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
+
+export function ComparePage({ websiteId }: { websiteId: string }) {
+  return (
+    <Column gap>
+      <WebsiteControls websiteId={websiteId} allowCompare={true} />
+      <WebsiteMetricsBar websiteId={websiteId} showChange={true} />
+      <Panel minHeight="520px">
+        <WebsiteChart websiteId={websiteId} compareMode={true} />
+      </Panel>
+      <CompareTables websiteId={websiteId} />
+    </Column>
+  );
+}

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

@@ -1,26 +1,27 @@
-import { Grid, Heading, Column, Row, NavMenu, NavMenuItem, Text } from '@umami/react-zen';
+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 { getCompareDate } from '@/lib/date';
-import { formatNumber } from '@/lib/format';
-import { useState } from 'react';
 import { Panel } from '@/components/common/Panel';
 import { DateDisplay } from '@/components/common/DateDisplay';
 import { ChangeLabel } from '@/components/metrics/ChangeLabel';
+import { getCompareDate } from '@/lib/date';
+import { formatNumber } from '@/lib/format';
 
-export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
+export function CompareTables({ websiteId }: { websiteId: string }) {
-  const [data] = useState([]);
+  const [data, setData] = useState([]);
   const { dateRange, dateCompare } = useDateRange(websiteId);
   const { formatMessage, labels } = useMessages();
   const {
+    router,
     updateParams,
-    query: { view },
+    query: { view = 'path' },
   } = useNavigation();
 
   const items = [
     {
       id: 'path',
-      label: formatMessage(labels.pages),
+      label: formatMessage(labels.path),
       path: updateParams({ view: 'path' }),
     },
     {
@@ -73,11 +74,6 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
       label: formatMessage(labels.events),
       path: updateParams({ view: 'event' }),
     },
-    {
-      id: 'query',
-      label: formatMessage(labels.queryParameters),
-      path: updateParams({ view: 'query' }),
-    },
     {
       id: 'hostname',
       label: formatMessage(labels.hostname),
@@ -90,7 +86,8 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
     },
   ];
 
-  const renderChange = ({ label: x, count: y }) => {
+  const renderChange = props => {
+    const { label: x, count: y } = props;
     const prev = data.find(d => d.x === x)?.y;
     const value = y - prev;
     const change = Math.abs(((y - prev) / prev) * 100);
@@ -104,6 +101,10 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
     );
   };
 
+  const handleChange = id => {
+    router.push(updateParams({ view: id }));
+  };
+
   const { startDate, endDate } = getCompareDate(
     dateCompare,
     dateRange.startDate,
@@ -116,44 +117,53 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
   };
 
   return (
-    <Panel>
+    <>
-      <Grid columns={{ xs: '1fr', lg: '200px 1fr 1fr' }} gap="6">
+      <Row width="300px">
-        <NavMenu>
+        <Select
-          {items.map(({ id, label }) => {
+          items={items}
-            return (
+          label={formatMessage(labels.compare)}
-              <NavMenuItem key={id}>
+          value={view}
-                <Text>{label}</Text>
+          defaultValue={view}
-              </NavMenuItem>
+          onChange={handleChange}
-            );
+        >
-          })}
+          {items.map(({ id, label }) => (
-        </NavMenu>
+            <ListItem key={id} id={id}>
-        <Column border="left" paddingLeft="6" gap="6">
+              {label}
-          <Row alignItems="center" justifyContent="space-between">
+            </ListItem>
-            <Heading size="1">{formatMessage(labels.previous)}</Heading>
+          ))}
-            <DateDisplay startDate={startDate} endDate={endDate} />
+        </Select>
-          </Row>
+      </Row>
-          <MetricsTable
+      <Panel>
-            websiteId={websiteId}
+        <Grid columns={{ xs: '1fr', lg: '1fr 1fr' }} gap="6">
-            type={view}
+          <Column gap="6">
-            limit={20}
+            <Row alignItems="center" justifyContent="space-between">
-            showMore={false}
+              <Heading size="2">{formatMessage(labels.previous)}</Heading>
-            params={params}
+              <DateDisplay startDate={startDate} endDate={endDate} />
-          />
+            </Row>
-        </Column>
+            <MetricsTable
-        <Column border="left" paddingLeft="6" gap="6">
+              websiteId={websiteId}
-          <Row alignItems="center" justifyContent="space-between">
+              type={view}
-            <Heading size="1"> {formatMessage(labels.current)}</Heading>
+              limit={20}
-            <DateDisplay startDate={dateRange.startDate} endDate={dateRange.endDate} />
+              showMore={false}
-          </Row>
+              params={params}
-          <MetricsTable
+              onDataLoad={setData}
-            websiteId={websiteId}
+            />
-            type={view}
+          </Column>
-            limit={20}
+          <Column border="left" paddingLeft="6" gap="6">
-            showMore={false}
+            <Row alignItems="center" justifyContent="space-between">
-            renderChange={renderChange}
+              <Heading size="2"> {formatMessage(labels.current)}</Heading>
-          />
+              <DateDisplay startDate={dateRange.startDate} endDate={dateRange.endDate} />
-        </Column>
+            </Row>
-      </Grid>
+            <MetricsTable
-    </Panel>
+              websiteId={websiteId}
+              type={view}
+              limit={20}
+              showMore={false}
+              renderChange={renderChange}
+            />
+          </Column>
+        </Grid>
+      </Panel>
+    </>
   );
 }

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

@@ -0,0 +1,12 @@
+import { Metadata } from 'next';
+import { ComparePage } from './ComparePage';
+
+export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
+  const { websiteId } = await params;
+
+  return <ComparePage websiteId={websiteId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Compare',
+};

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

@@ -43,7 +43,7 @@ export function EventsPage({ websiteId }) {
                 websiteId={websiteId}
                 type="event"
                 title={formatMessage(labels.events)}
-                metric={formatMessage(labels.actions)}
+                metric={formatMessage(labels.count)}
               />
             </Column>
           </TabPanel>

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

@@ -11,8 +11,9 @@ import {
 import { subMonths, endOfDay } from 'date-fns';
 import { FieldFilters } from '@/components/input/FieldFilters';
 import { useState } from 'react';
-import { useApi, useMessages, useModified, useWebsiteSegmentQuery } from '@/components/hooks';
+import { useMessages, useUpdateQuery, useWebsiteSegmentQuery } from '@/components/hooks';
 import { filtersArrayToObject } from '@/lib/params';
+import { messages } from '@/components/messages';
 
 export function SegmentEditForm({
   segmentId,
@@ -32,24 +33,23 @@ export function SegmentEditForm({
   const { data } = useWebsiteSegmentQuery(websiteId, segmentId);
   const { formatMessage, labels } = useMessages();
   const [currentFilters, setCurrentFilters] = useState(filters);
-  const { touch } = useModified();
   const startDate = subMonths(endOfDay(new Date()), 6);
   const endDate = endOfDay(new Date());
 
-  const { post, useMutation } = useApi();
+  const { mutate, error, isPending, touch, toast } = useUpdateQuery(
-  const { mutate, error, isPending } = useMutation({
+    `/websites/${websiteId}/segments${segmentId ? `/${segmentId}` : ''}`,
-    mutationFn: (data: any) =>
+    {
-      post(`/websites/${websiteId}/segments${segmentId ? `/${segmentId}` : ''}`, {
+      ...data,
-        ...data,
+      type: 'segment',
-        type: 'segment',
+    },
-      }),
+  );
-  });
 
   const handleSubmit = async (data: any) => {
     mutate(
       { ...data, parameters: filtersArrayToObject(currentFilters) },
       {
         onSuccess: async () => {
+          toast(formatMessage(messages.saved));
           touch('segments');
           onSave?.();
           onClose?.();

src/components/hooks/useFields.ts

@@ -5,10 +5,8 @@ export function useFields() {
 
   const fields = [
     { name: 'path', type: 'string', label: formatMessage(labels.path) },
-    // { name: 'cohort', type: 'string', label: formatMessage(labels.cohort) },
     { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
     { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
-    //{ name: 'query', type: 'string', label: formatMessage(labels.query) },
     { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
     { name: 'os', type: 'string', label: formatMessage(labels.os) },
     { name: 'device', type: 'string', label: formatMessage(labels.device) },
@@ -17,6 +15,7 @@ export function useFields() {
     { name: 'city', type: 'string', label: formatMessage(labels.city) },
     { name: 'hostname', type: 'string', label: formatMessage(labels.hostname) },
     { name: 'tag', type: 'string', label: formatMessage(labels.tag) },
+    { name: 'event', type: 'string', label: formatMessage(labels.event) },
   ];
 
   return { fields };

src/components/input/FilterBar.tsx

@@ -27,10 +27,11 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
     router,
     updateParams,
     replaceParams,
-    query: { segment },
+    query: { segment, cohort },
   } = useNavigation();
   const { filters, operatorLabels } = useFilters();
   const { data, isLoading } = useWebsiteSegmentQuery(websiteId, segment);
+  const canSave = filters.length > 0 && !segment && !cohort;
 
   const handleCloseFilter = (param: string) => {
     router.push(updateParams({ [param]: undefined }));
@@ -78,7 +79,7 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
       </Row>
       <Row alignItems="center">
         <DialogTrigger>
-          {!!filters.length && (
+          {canSave && (
             <TooltipTrigger delay={0}>
               <Button variant="zero">
                 <Icon>

src/components/input/WebsiteDateFilter.tsx

@@ -1,37 +1,30 @@
-import {
+import { Button, Icon, Row, Text, Select, ListItem } from '@umami/react-zen';
-  Button,
-  Icon,
-  Row,
-  Text,
-  Select,
-  ListItem,
-  TooltipTrigger,
-  Tooltip,
-} from '@umami/react-zen';
 import { isAfter } from 'date-fns';
-import { Chevron, Close, Compare } from '@/components/icons';
+import { Chevron } from '@/components/icons';
 import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
 import { DateFilter } from './DateFilter';
 
+export interface WebsiteDateFilterProps {
+  websiteId: string;
+  compare?: string;
+  showAllTime?: boolean;
+  showButtons?: boolean;
+  allowCompare?: boolean;
+}
+
 export function WebsiteDateFilter({
   websiteId,
   showAllTime = true,
   showButtons = true,
   allowCompare,
-}: {
+}: WebsiteDateFilterProps) {
-  websiteId: string;
-  compare?: string;
-  showAllTime?: boolean;
-  showButtons?: boolean;
-  allowCompare?: boolean;
-}) {
   const { dateRange } = useDateRange(websiteId);
   const { value, startDate, endDate } = dateRange;
   const { formatMessage, labels } = useMessages();
   const {
     router,
     updateParams,
-    query: { compare, offset = 0 },
+    query: { compare = 'prev', offset = 0 },
   } = useNavigation();
   const isAllTime = value === 'all';
   const isCustomRange = value.startsWith('range');
@@ -50,10 +43,6 @@ export function WebsiteDateFilter({
     router.push(updateParams({ compare }));
   };
 
-  const handleCompare = () => {
-    router.push(updateParams({ compare: compare ? undefined : 'prev' }));
-  };
-
   return (
     <Row gap>
       {showButtons && !isAllTime && !isCustomRange && (
@@ -78,7 +67,7 @@ export function WebsiteDateFilter({
         showAllTime={showAllTime}
         renderDate={+offset !== 0}
       />
-      {!isAllTime && compare && (
+      {allowCompare && !isAllTime && (
         <Row alignItems="center" gap>
           <Text weight="bold">VS</Text>
           <Row width="200px">
@@ -93,14 +82,6 @@ export function WebsiteDateFilter({
           </Row>
         </Row>
       )}
-      {!isAllTime && allowCompare && (
-        <TooltipTrigger delay={0}>
-          <Button variant="quiet" onPress={handleCompare}>
-            <Icon fillColor>{compare ? <Close /> : <Compare />}</Icon>
-          </Button>
-          <Tooltip>{formatMessage(compare ? labels.cancel : labels.compareDates)}</Tooltip>
-        </TooltipTrigger>
-      )}
     </Row>
   );
 }

src/components/metrics/MetricsTable.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Icon, Row, Text } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
@@ -15,6 +15,7 @@ export interface MetricsTableProps extends ListTableProps {
   limit?: number;
   showMore?: boolean;
   params?: Record<string, any>;
+  onDataLoad?: (data: any) => void;
 }
 
 export function MetricsTable({
@@ -24,6 +25,7 @@ export function MetricsTable({
   limit,
   showMore = false,
   params,
+  onDataLoad,
   ...props
 }: MetricsTableProps) {
   const { updateParams } = useNavigation();
@@ -55,6 +57,12 @@ export function MetricsTable({
     return [];
   }, [data, dataFilter, limit, type]);
 
+  useEffect(() => {
+    if (data) {
+      onDataLoad?.(data);
+    }
+  }, [data]);
+
   const renderLabel = (row: any) => {
     return <MetricLabel type={type} data={row} />;
   };

src/lib/request.ts

@@ -116,5 +116,6 @@ export async function getQueryFilters(
     orderBy: params?.orderBy,
     sortDescending: params?.sortDescending,
     search: params?.search,
+    compare: params?.compare,
   };
 }