New compare page.

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 {
-  Button,
-  Icon,
-  Row,
-  Text,
-  Select,
-  ListItem,
-  TooltipTrigger,
-  Tooltip,
-} from '@umami/react-zen';
+import { Button, Icon, Row, Text, Select, ListItem } 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,
-}: {
-  websiteId: string;
-  compare?: string;
-  showAllTime?: boolean;
-  showButtons?: boolean;
-  allowCompare?: boolean;
-}) {
+}: WebsiteDateFilterProps) {
   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} />;
   };