Renamed id routes for API.

src/components/hooks/queries/useWebsiteMetrics.ts

@@ -4,7 +4,7 @@ import { UseQueryOptions } from '@tanstack/react-query';
 export function useWebsiteMetrics(
   websiteId: string,
   params?: { [key: string]: any },
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
+  options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
 ) {
   const { get, useQuery } = useApi();
 
@@ -25,6 +25,8 @@ export function useWebsiteMetrics(
         ...filters,
       });
 
+      options?.onDataLoad?.(data);
+
       return data;
     },
     ...options,

src/components/input/DateFilter.tsx

@@ -11,10 +11,9 @@ export interface DateFilterProps {
   value: string;
   startDate: Date;
   endDate: Date;
-  offset: number;
+  offset?: number;
   className?: string;
   onChange?: (value: string) => void;
-  selectedUnit?: string;
   showAllTime?: boolean;
   alignment?: 'start' | 'center' | 'end';
 }
@@ -23,7 +22,7 @@ export function DateFilter({
   startDate,
   endDate,
   value,
-  offset,
+  offset = 0,
   className,
   onChange,
   showAllTime = false,

src/components/metrics/MetricsTable.tsx

@@ -1,19 +1,21 @@
 import { ReactNode, useMemo, useState } from 'react';
 import { Loading, Icon, Text, SearchField } from 'react-basics';
 import classNames from 'classnames';
-import { percentFilter } from 'lib/filters';
-import { useDateRange } from 'components/hooks';
-import { useNavigation } from 'components/hooks';
 import ErrorMessage from 'components/common/ErrorMessage';
 import LinkButton from 'components/common/LinkButton';
-import ListTable, { ListTableProps } from './ListTable';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
+import { percentFilter } from 'lib/filters';
+import {
+  useDateRange,
+  useNavigation,
+  useWebsiteMetrics,
+  useMessages,
+  useLocale,
+  useFormat,
+} from 'components/hooks';
 import Icons from 'components/icons';
-import { useMessages } from 'components/hooks';
-import { useLocale } from 'components/hooks';
-import useFormat from 'components//hooks/useFormat';
+import ListTable, { ListTableProps } from './ListTable';
 import styles from './MetricsTable.module.css';
-import useWebsiteMetrics from 'components/hooks/queries/useWebsiteMetrics';
 
 export interface MetricsTableProps extends ListTableProps {
   websiteId: string;
@@ -67,7 +69,7 @@ export function MetricsTable({
       region,
       city,
     },
-    { retryDelay: delay || DEFAULT_ANIMATION_DURATION },
+    { retryDelay: delay || DEFAULT_ANIMATION_DURATION, onDataLoad },
   );
 
   const filteredData = useMemo(() => {