Made filters work for all reports.

src/components/hooks/queries/useResultQuery.ts

@@ -9,7 +9,7 @@ export function useResultQuery<T>(
 ) {
   const { websiteId } = params;
   const { post, useQuery } = useApi();
-  const filterParams = useFilterParams(websiteId);
+  const filters = useFilterParams(websiteId);
 
   return useQuery<T>({
     queryKey: [
@@ -17,11 +17,11 @@ export function useResultQuery<T>(
       {
         type,
         websiteId,
-        ...filterParams,
+        ...filters,
         ...params,
       },
     ],
-    queryFn: () => post(`/reports/${type}`, { type, ...filterParams, ...params }),
+    queryFn: () => post(`/reports/${type}`, { type, ...filters, ...params }),
     enabled: !!type,
     ...options,
   });

src/components/hooks/useFilterParams.ts

@@ -21,6 +21,7 @@ export function useFilterParams(websiteId: string) {
       city,
       event,
       tag,
+      hostname,
     },
   } = useNavigation();
 
@@ -42,5 +43,6 @@ export function useFilterParams(websiteId: string) {
     city,
     event,
     tag,
+    hostname,
   };
 }

src/components/hooks/usePagedQuery.ts

@@ -25,7 +25,7 @@ export function usePagedQuery<T = any>({
   return {
     result: data as PageResult<T>,
     query,
-    params,
+    filterParams: params,
     setParams,
   };
 }

src/components/metrics/WorldMap.tsx

@@ -1,5 +1,5 @@
-import { FloatingTooltip, Column, useTheme } from '@umami/react-zen';
-import { useState, useMemo, HTMLAttributes } from 'react';
+import { FloatingTooltip, Column, useTheme, ColumnProps } from '@umami/react-zen';
+import { useState, useMemo } from 'react';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
 import classNames from 'classnames';
 import { colord } from 'colord';
@@ -16,16 +16,12 @@ import { percentFilter } from '@/lib/filters';
 import styles from './WorldMap.module.css';
 import { getThemeColors } from '@/lib/colors';
 
-export function WorldMap({
-  websiteId,
-  data,
-  className,
-  ...props
-}: {
+export interface WorldMapProps extends ColumnProps {
   websiteId?: string;
   data?: any[];
-  className?: string;
-} & HTMLAttributes<HTMLDivElement>) {
+}
+
+export function WorldMap({ websiteId, data, className, ...props }: WorldMapProps) {
   const [tooltip, setTooltipPopup] = useState();
   const { theme } = useTheme();
   const { colors } = getThemeColors(theme);