Added metrics bar and date range to sessions.

src/components/common/DataTable.tsx

@@ -4,13 +4,13 @@ import { Banner, Loading, SearchField } from 'react-basics';
 import { useMessages, useNavigation } from 'components/hooks';
 import Empty from 'components/common/Empty';
 import Pager from 'components/common/Pager';
-import { FilterQueryResult } from 'lib/types';
+import { PagedQueryResult } from 'lib/types';
 import styles from './DataTable.module.css';
 
 const DEFAULT_SEARCH_DELAY = 600;
 
 export interface DataTableProps {
-  queryResult: FilterQueryResult<any>;
+  queryResult: PagedQueryResult<any>;
   searchDelay?: number;
   allowSearch?: boolean;
   allowPaging?: boolean;

src/components/common/TypeIcon.tsx

@@ -1,17 +1,24 @@
+import { ReactNode } from 'react';
+
 export function TypeIcon({
   type,
   value,
+  children,
 }: {
   type: 'browser' | 'country' | 'device' | 'os';
   value: string;
+  children?: ReactNode;
 }) {
   return (
-    <img
-      src={`${process.env.basePath || ''}/images/${type}/${value || 'unknown'}.png`}
-      alt={value}
-      width={type === 'country' ? undefined : 16}
-      height={type === 'country' ? undefined : 16}
-    />
+    <>
+      <img
+        src={`${process.env.basePath || ''}/images/${type}/${value || 'unknown'}.png`}
+        alt={value}
+        width={type === 'country' ? undefined : 16}
+        height={type === 'country' ? undefined : 16}
+      />
+      {children}
+    </>
   );
 }
 

src/components/hooks/index.ts

@@ -1,6 +1,6 @@
 export * from './queries/useApi';
 export * from './queries/useConfig';
-export * from './queries/useFilterQuery';
+export * from './queries/usePagedQuery';
 export * from './queries/useLogin';
 export * from './queries/useRealtime';
 export * from './queries/useReport';
@@ -19,6 +19,7 @@ export * from './queries/useUsers';
 export * from './queries/useWebsite';
 export * from './queries/useWebsites';
 export * from './queries/useWebsiteEvents';
+export * from './queries/useWebsiteEventsSeries';
 export * from './queries/useWebsiteMetrics';
 export * from './queries/useWebsiteValues';
 export * from './useCountryNames';

src/components/hooks/queries/usePagedQuery.ts

@@ -1,14 +1,14 @@
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useApi } from './useApi';
-import { PageResult, PageParams, FilterQueryResult } from 'lib/types';
+import { PageResult, PageParams, PagedQueryResult } from 'lib/types';
 import { useNavigation } from '../useNavigation';
 
-export function useFilterQuery<T = any>({
+export function usePagedQuery<T = any>({
   queryKey,
   queryFn,
   ...options
-}: Omit<UseQueryOptions, 'queryFn'> & { queryFn: (params?: object) => any }): FilterQueryResult<T> {
+}: Omit<UseQueryOptions, 'queryFn'> & { queryFn: (params?: object) => any }): PagedQueryResult<T> {
   const { query: queryParams } = useNavigation();
   const [params, setParams] = useState<PageParams>({
     query: '',
@@ -30,4 +30,4 @@ export function useFilterQuery<T = any>({
   };
 }
 
-export default useFilterQuery;
+export default usePagedQuery;

src/components/hooks/queries/useReports.ts

@@ -1,11 +1,11 @@
 import useApi from './useApi';
-import useFilterQuery from './useFilterQuery';
+import usePagedQuery from './usePagedQuery';
 import useModified from '../useModified';
 
 export function useReports({ websiteId, teamId }: { websiteId?: string; teamId?: string }) {
   const { modified } = useModified(`reports`);
   const { get, del, useMutation } = useApi();
-  const queryResult = useFilterQuery({
+  const queryResult = usePagedQuery({
     queryKey: ['reports', { websiteId, teamId, modified }],
     queryFn: (params: any) => {
       return get('/reports', { websiteId, teamId, ...params });

src/components/hooks/queries/useTeamMembers.ts

@@ -1,12 +1,12 @@
 import useApi from './useApi';
-import useFilterQuery from './useFilterQuery';
+import usePagedQuery from './usePagedQuery';
 import useModified from '../useModified';
 
 export function useTeamMembers(teamId: string) {
   const { get } = useApi();
   const { modified } = useModified(`teams:members`);
 
-  return useFilterQuery({
+  return usePagedQuery({
     queryKey: ['teams:members', { teamId, modified }],
     queryFn: (params: any) => {
       return get(`/teams/${teamId}/users`, params);

src/components/hooks/queries/useTeamWebsites.ts

@@ -1,12 +1,12 @@
 import useApi from './useApi';
-import useFilterQuery from './useFilterQuery';
+import usePagedQuery from './usePagedQuery';
 import useModified from '../useModified';
 
 export function useTeamWebsites(teamId: string) {
   const { get } = useApi();
   const { modified } = useModified(`websites`);
 
-  return useFilterQuery({
+  return usePagedQuery({
     queryKey: ['teams:websites', { teamId, modified }],
     queryFn: (params: any) => {
       return get(`/teams/${teamId}/websites`, params);

src/components/hooks/queries/useTeams.ts

@@ -1,12 +1,12 @@
 import useApi from './useApi';
-import useFilterQuery from './useFilterQuery';
+import usePagedQuery from './usePagedQuery';
 import useModified from '../useModified';
 
 export function useTeams(userId: string) {
   const { get } = useApi();
   const { modified } = useModified(`teams`);
 
-  return useFilterQuery({
+  return usePagedQuery({
     queryKey: ['teams', { userId, modified }],
     queryFn: (params: any) => {
       return get(`/users/${userId}/teams`, params);

src/components/hooks/queries/useUsers.ts

@@ -1,12 +1,12 @@
 import useApi from './useApi';
-import useFilterQuery from './useFilterQuery';
+import usePagedQuery from './usePagedQuery';
 import useModified from '../useModified';
 
 export function useUsers() {
   const { get } = useApi();
   const { modified } = useModified(`users`);
 
-  return useFilterQuery({
+  return usePagedQuery({
     queryKey: ['users', { modified }],
     queryFn: (params: any) => {
       return get('/admin/users', {

src/components/hooks/queries/useWebsiteEvents.ts

@@ -1,7 +1,7 @@
 import useApi from './useApi';
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
-import { useFilterQuery } from 'components/hooks';
+import { usePagedQuery } from 'components/hooks';
 
 export function useWebsiteEvents(
   websiteId: string,
@@ -10,7 +10,7 @@ export function useWebsiteEvents(
   const { get } = useApi();
   const params = useFilterParams(websiteId);
 
-  return useFilterQuery({
+  return usePagedQuery({
     queryKey: ['websites:events', { websiteId, ...params }],
     queryFn: pageParams =>
       get(`/websites/${websiteId}/events`, { ...params, ...pageParams, pageSize: 20 }),

src/components/hooks/queries/useWebsiteEventsSeries.ts

@@ -0,0 +1,20 @@
+import useApi from './useApi';
+import { UseQueryOptions } from '@tanstack/react-query';
+import { useFilterParams } from '../useFilterParams';
+
+export function useWebsiteEventsSeries(
+  websiteId: string,
+  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
+) {
+  const { get, useQuery } = useApi();
+  const params = useFilterParams(websiteId);
+
+  return useQuery({
+    queryKey: ['websites:events:series', { websiteId, ...params }],
+    queryFn: () => get(`/websites/${websiteId}/events/series`, { ...params }),
+    enabled: !!websiteId,
+    ...options,
+  });
+}
+
+export default useWebsiteEventsSeries;

src/components/hooks/queries/useWebsiteSessions.ts

@@ -1,17 +1,20 @@
 import { useApi } from './useApi';
-import { useFilterQuery } from './useFilterQuery';
+import { usePagedQuery } from './usePagedQuery';
 import useModified from '../useModified';
+import { useFilterParams } from 'components/hooks/useFilterParams';
 
 export function useWebsiteSessions(websiteId: string, params?: { [key: string]: string | number }) {
   const { get } = useApi();
   const { modified } = useModified(`sessions`);
+  const filters = useFilterParams(websiteId);
 
-  return useFilterQuery({
-    queryKey: ['sessions', { websiteId, modified, ...params }],
+  return usePagedQuery({
+    queryKey: ['sessions', { websiteId, modified, ...params, ...filters }],
     queryFn: (data: any) => {
       return get(`/websites/${websiteId}/sessions`, {
         ...data,
         ...params,
+        ...filters,
       });
     },
   });

src/components/hooks/queries/useWebsites.ts

@@ -1,5 +1,5 @@
 import { useApi } from './useApi';
-import { useFilterQuery } from './useFilterQuery';
+import { usePagedQuery } from './usePagedQuery';
 import { useLogin } from './useLogin';
 import useModified from '../useModified';
 
@@ -11,7 +11,7 @@ export function useWebsites(
   const { user } = useLogin();
   const { modified } = useModified(`websites`);
 
-  return useFilterQuery({
+  return usePagedQuery({
     queryKey: ['websites', { userId, teamId, modified, ...params }],
     queryFn: (data: any) => {
       return get(teamId ? `/teams/${teamId}/websites` : `/users/${userId || user.id}/websites`, {

src/components/messages.ts

@@ -88,8 +88,8 @@ export const labels = defineMessages({
   leaveTeam: { id: 'label.leave-team', defaultMessage: 'Leave team' },
   refresh: { id: 'label.refresh', defaultMessage: 'Refresh' },
   pages: { id: 'label.pages', defaultMessage: 'Pages' },
-  entry: { id: 'label.entry', defaultMessage: 'Entry URL' },
-  exit: { id: 'label.exit', defaultMessage: 'Exit URL' },
+  entry: { id: 'label.entry', defaultMessage: 'Entry path' },
+  exit: { id: 'label.exit', defaultMessage: 'Exit path' },
   referrers: { id: 'label.referrers', defaultMessage: 'Referrers' },
   hosts: { id: 'label.hosts', defaultMessage: 'Hosts' },
   screens: { id: 'label.screens', defaultMessage: 'Screens' },
@@ -165,6 +165,8 @@ export const labels = defineMessages({
   },
   url: { id: 'label.url', defaultMessage: 'URL' },
   urls: { id: 'label.urls', defaultMessage: 'URLs' },
+  path: { id: 'label.path', defaultMessage: 'Path' },
+  paths: { id: 'label.paths', defaultMessage: 'Paths' },
   add: { id: 'label.add', defaultMessage: 'Add' },
   update: { id: 'label.update', defaultMessage: 'Update' },
   window: { id: 'label.window', defaultMessage: 'Window' },
@@ -276,7 +278,6 @@ export const labels = defineMessages({
   lastSeen: { id: 'label.last-seen', defaultMessage: 'Last seen' },
   firstSeen: { id: 'label.first-seen', defaultMessage: 'First seen' },
   properties: { id: 'label.properties', defaultMessage: 'Properties' },
-  path: { id: 'label.path', defaultMessage: 'Path' },
 });
 
 export const messages = defineMessages({

src/components/metrics/EventsChart.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { colord } from 'colord';
 import BarChart from 'components/charts/BarChart';
 import { getDateArray } from 'lib/date';
-import { useLocale, useDateRange, useWebsiteEvents } from 'components/hooks';
+import { useLocale, useDateRange, useWebsiteEventsSeries } from 'components/hooks';
 import { CHART_COLORS } from 'lib/constants';
 import { renderDateLabels } from 'lib/charts';
 
@@ -16,7 +16,7 @@ export function EventsChart({ websiteId, className }: EventsChartProps) {
     dateRange: { startDate, endDate, unit },
   } = useDateRange(websiteId);
   const { locale } = useLocale();
-  const { data, isLoading } = useWebsiteEvents(websiteId);
+  const { data, isLoading } = useWebsiteEventsSeries(websiteId);
 
   const chartData = useMemo(() => {
     if (!data) return [];

src/components/metrics/MetricCard.tsx

@@ -10,7 +10,7 @@ export interface MetricCardProps {
   change?: number;
   label?: string;
   reverseColors?: boolean;
-  formatValue?: typeof formatNumber;
+  formatValue?: (n: any) => string;
   showLabel?: boolean;
   showChange?: boolean;
   showPrevious?: boolean;

src/components/metrics/PagesTable.tsx

@@ -25,7 +25,7 @@ export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
 
   const buttons = [
     {
-      label: 'URL',
+      label: formatMessage(labels.path),
       key: 'url',
     },
     {