implement sessions metric expanded queries

src/components/hooks/index.ts

@@ -31,6 +31,7 @@ export * from './queries/useWebsitesQuery';
 export * from './queries/useWebsiteEventsQuery';
 export * from './queries/useWebsiteEventsSeriesQuery';
 export * from './queries/useWebsiteMetricsQuery';
+export * from './queries/useWebsiteExpandedMetricsQuery';
 export * from './queries/useWebsiteValuesQuery';
 export * from './useApi';
 export * from './useConfig';

src/components/hooks/queries/useWebsiteExpandedMetricsQuery.ts

@@ -0,0 +1,45 @@
+import { keepPreviousData } from '@tanstack/react-query';
+import { useApi } from '../useApi';
+import { useFilterParameters } from '../useFilterParameters';
+import { useDateParameters } from '../useDateParameters';
+import { ReactQueryOptions } from '@/lib/types';
+
+export type WebsiteExpandedMetricsData = {
+  label: string;
+  pageviews: number;
+  visitors: number;
+  visits: number;
+  bounces: number;
+  totaltime: number;
+}[];
+
+export function useWebsiteExpandedMetricsQuery(
+  websiteId: string,
+  params: { type: string; limit?: number; search?: string },
+  options?: ReactQueryOptions<WebsiteExpandedMetricsData>,
+) {
+  const { get, useQuery } = useApi();
+  const date = useDateParameters(websiteId);
+  const filters = useFilterParameters();
+
+  return useQuery<WebsiteExpandedMetricsData>({
+    queryKey: [
+      'websites:metrics:expanded',
+      {
+        websiteId,
+        ...date,
+        ...filters,
+        ...params,
+      },
+    ],
+    queryFn: async () =>
+      get(`/websites/${websiteId}/metrics/expanded`, {
+        ...date,
+        ...filters,
+        ...params,
+      }),
+    enabled: !!websiteId,
+    placeholderData: keepPreviousData,
+    ...options,
+  });
+}

src/components/metrics/ListExpandedTable.tsx

@@ -0,0 +1,47 @@
+import { useMessages } from '@/components/hooks';
+import { formatShortTime } from '@/lib/format';
+import { DataColumn, DataTable } from '@umami/react-zen';
+import { ReactNode } from 'react';
+
+export interface ListExpandedTableProps {
+  data?: any[];
+  title?: string;
+  renderLabel?: (row: any, index: number) => ReactNode;
+}
+
+export function ListExpandedTable({ data = [], title, renderLabel }: ListExpandedTableProps) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <DataTable data={data}>
+      <DataColumn id="label" label={title} align="start" width="300px">
+        {row =>
+          renderLabel
+            ? renderLabel({ x: row?.label, country: row?.['country'] }, Number(row.id))
+            : (row.label ?? formatMessage(labels.unknown))
+        }
+      </DataColumn>
+      <DataColumn id="visitors" label={formatMessage(labels.visitors)} align="end">
+        {row => row?.['visitors']?.toLocaleString()}
+      </DataColumn>
+      <DataColumn id="visits" label={formatMessage(labels.visits)} align="end">
+        {row => row?.['visits']?.toLocaleString()}
+      </DataColumn>
+      <DataColumn id="pageviews" label={formatMessage(labels.views)} align="end">
+        {row => row?.['pageviews']?.toLocaleString()}
+      </DataColumn>
+      <DataColumn id="bounceRate" label={formatMessage(labels.bounceRate)} align="end">
+        {row => {
+          const n = (Math.min(row?.['visits'], row?.['bounces']) / row?.['visits']) * 100;
+          return Math.round(+n) + '%';
+        }}
+      </DataColumn>
+      <DataColumn id="visitDuration" label={formatMessage(labels.visitDuration)} align="end">
+        {row => {
+          const n = (row?.['totaltime'] / row?.['visits']) * 100;
+          return `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`;
+        }}
+      </DataColumn>
+    </DataTable>
+  );
+}

src/components/metrics/MetricsTable.tsx

@@ -1,13 +1,20 @@
-import { ReactNode, useMemo, useState } from 'react';
-import { Icon, Text, SearchField, Row, Column } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
+import { LoadingPanel } from '@/components/common/LoadingPanel';
+import {
+  useFormat,
+  useMessages,
+  useNavigation,
+  useWebsiteExpandedMetricsQuery,
+  useWebsiteMetricsQuery,
+} from '@/components/hooks';
+import { Arrow } from '@/components/icons';
+import { DownloadButton } from '@/components/input/DownloadButton';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
 import { percentFilter } from '@/lib/filters';
-import { useNavigation, useWebsiteMetricsQuery, useMessages, useFormat } from '@/components/hooks';
-import { Arrow } from '@/components/icons';
+import { Column, Icon, Row, SearchField, Text } from '@umami/react-zen';
+import { ReactNode, useMemo, useState } from 'react';
+import { ListExpandedTable, ListExpandedTableProps } from './ListExpandedTable';
 import { ListTable, ListTableProps } from './ListTable';
-import { LoadingPanel } from '@/components/common/LoadingPanel';
-import { DownloadButton } from '@/components/input/DownloadButton';
 
 export interface MetricsTableProps extends ListTableProps {
   websiteId: string;
@@ -21,6 +28,7 @@ export interface MetricsTableProps extends ListTableProps {
   showMore?: boolean;
   params?: { [key: string]: any };
   allowDownload?: boolean;
+  expanded?: boolean;
   children?: ReactNode;
 }
 
@@ -35,6 +43,7 @@ export function MetricsTable({
   showMore = true,
   params,
   allowDownload = true,
+  expanded = false,
   children,
   ...props
 }: MetricsTableProps) {
@@ -43,7 +52,21 @@ export function MetricsTable({
   const { updateParams } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
-  const { data, isLoading, isFetching, error } = useWebsiteMetricsQuery(
+  const expandedQuery = useWebsiteExpandedMetricsQuery(
+    websiteId,
+    {
+      type,
+      limit: 30,
+      search: searchFormattedValues ? undefined : search,
+      ...params,
+    },
+    {
+      retryDelay: delay || DEFAULT_ANIMATION_DURATION,
+      enabled: expanded,
+    },
+  );
+
+  const query = useWebsiteMetricsQuery(
     websiteId,
     {
       type,
@@ -53,9 +76,12 @@ export function MetricsTable({
     },
     {
       retryDelay: delay || DEFAULT_ANIMATION_DURATION,
+      enabled: !expanded,
     },
   );
 
+  const { data, isLoading, isFetching, error } = expanded ? expandedQuery : query;
+
   const filteredData = useMemo(() => {
     if (data) {
       let items = data as any[];
@@ -95,7 +121,12 @@ export function MetricsTable({
             {allowDownload && <DownloadButton filename={type} data={filteredData} />}
           </Row>
         </Row>
-        {data && <ListTable {...(props as ListTableProps)} data={filteredData} />}
+        {data &&
+          (expanded ? (
+            <ListExpandedTable {...(props as ListExpandedTableProps)} data={data} />
+          ) : (
+            <ListTable {...(props as ListTableProps)} data={filteredData} />
+          ))}
         <Row justifyContent="center">
           {showMore && data && !error && limit && (
             <LinkButton href={updateParams({ view: type })} variant="quiet">