Merge remote-tracking branch 'origin/dev' into dev

# Conflicts:
#	src/app/(main)/App.tsx

src/components/hooks/index.ts

@@ -32,6 +32,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 = {
+  name: 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.module.css

@@ -0,0 +1,7 @@
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 300px;
+  display: block;
+}

src/components/metrics/ListExpandedTable.tsx

@@ -0,0 +1,57 @@
+import { useMessages } from '@/components/hooks';
+import { formatShortTime } from '@/lib/format';
+import { DataColumn, DataTable } from '@umami/react-zen';
+import { ReactNode } from 'react';
+import styles from './ListExpandedTable.module.css';
+
+export interface ListExpandedTableProps {
+  data?: any[];
+  title?: string;
+  type?: string;
+  renderLabel?: (row: any, index: number) => ReactNode;
+}
+
+export function ListExpandedTable({ data = [], title, type, renderLabel }: ListExpandedTableProps) {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <DataTable data={data}>
+      <DataColumn id="label" label={title} align="start" className={styles.truncate}>
+        {row =>
+          renderLabel
+            ? renderLabel({ x: row?.['name'], country: row?.['country'] }, Number(row.id))
+            : (row?.['name'] ?? 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>
+      {type !== 'exit' && type !== 'entry' ? (
+        <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>
+      ) : (
+        <></>
+      )}
+      {type !== 'exit' && type !== 'entry' ? (
+        <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,20 @@ export function MetricsTable({
   const { updateParams } = useNavigation();
   const { formatMessage, labels } = useMessages();
 
-  const { data, isLoading, isFetching, error } = useWebsiteMetricsQuery(
+  const expandedQuery = useWebsiteExpandedMetricsQuery(
+    websiteId,
+    {
+      type,
+      search: searchFormattedValues ? undefined : search,
+      ...params,
+    },
+    {
+      retryDelay: delay || DEFAULT_ANIMATION_DURATION,
+      enabled: expanded,
+    },
+  );
+
+  const query = useWebsiteMetricsQuery(
     websiteId,
     {
       type,
@@ -53,9 +75,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[];
@@ -85,6 +110,8 @@ export function MetricsTable({
     return [];
   }, [data, dataFilter, search, limit, formatValue, type]);
 
+  const downloadData = expanded ? data : filteredData;
+
   return (
     <Column gap="3" justifyContent="space-between">
       <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error} gap>
@@ -92,10 +119,15 @@ export function MetricsTable({
           {allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
           <Row>
             {children}
-            {allowDownload && <DownloadButton filename={type} data={filteredData} />}
+            {allowDownload && <DownloadButton filename={type} data={downloadData} />}
           </Row>
         </Row>
-        {data && <ListTable {...(props as ListTableProps)} data={filteredData} />}
+        {data &&
+          (expanded ? (
+            <ListExpandedTable {...(props as ListExpandedTableProps)} data={data} type={type} />
+          ) : (
+            <ListTable {...(props as ListTableProps)} data={filteredData} />
+          ))}
         <Row justifyContent="center">
           {showMore && data && !error && limit && (
             <LinkButton href={updateParams({ view: type })} variant="quiet">

src/components/metrics/QueryParametersTable.tsx

@@ -58,6 +58,7 @@ export function QueryParametersTable({
       dataFilter={filters[filter]}
       renderLabel={renderLabel}
       delay={0}
+      expanded={false}
     >
       {allowFilter && <FilterButtons items={buttons} value={filter} onChange={setFilter} />}
     </MetricsTable>