From f06ef6fbc9743aba3ea593cb8123912b60962752 Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Mon, 25 Aug 2025 09:26:49 -0700
Subject: [PATCH] fix visitDuration calculation and conditionally show
 bounce/visitDuration on session columns

---
 .../(reports)/breakdown/Breakdown.tsx         |  2 +-
 src/components/metrics/CountriesTable.tsx     | 42 -----------------
 src/components/metrics/ListExpandedTable.tsx  | 47 -------------------
 .../metrics/MetricsExpandedTable.tsx          | 43 ++++++++++-------
 4 files changed, 28 insertions(+), 106 deletions(-)
 delete mode 100644 src/components/metrics/CountriesTable.tsx
 delete mode 100644 src/components/metrics/ListExpandedTable.tsx

diff --git a/src/app/(main)/websites/[websiteId]/(reports)/breakdown/Breakdown.tsx b/src/app/(main)/websites/[websiteId]/(reports)/breakdown/Breakdown.tsx
index 404e7de2..a4c00d4a 100644
--- a/src/app/(main)/websites/[websiteId]/(reports)/breakdown/Breakdown.tsx
+++ b/src/app/(main)/websites/[websiteId]/(reports)/breakdown/Breakdown.tsx
@@ -59,7 +59,7 @@ export function Breakdown({ websiteId, selectedFields = [], startDate, endDate }
         </DataColumn>
         <DataColumn id="visitDuration" label={formatMessage(labels.visitDuration)} align="end">
           {row => {
-            const n = (row?.['totaltime'] / row?.['visits']) * 100;
+            const n = row?.['totaltime'] / row?.['visits'];
             return `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`;
           }}
         </DataColumn>
diff --git a/src/components/metrics/CountriesTable.tsx b/src/components/metrics/CountriesTable.tsx
deleted file mode 100644
index 52c82803..00000000
--- a/src/components/metrics/CountriesTable.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { FilterLink } from '@/components/common/FilterLink';
-import { useCountryNames } from '@/components/hooks';
-import { useLocale, useMessages, useFormat } from '@/components/hooks';
-import { MetricsTable, MetricsTableProps } from './MetricsTable';
-import { TypeIcon } from '@/components/common/TypeIcon';
-import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
-
-export interface CountriesTableProps extends MetricsTableProps {
-  isExpanded?: boolean;
-}
-
-export function CountriesTable({ isExpanded, ...props }: CountriesTableProps) {
-  const { locale } = useLocale();
-  const { countryNames } = useCountryNames(locale);
-  const { formatMessage, labels } = useMessages();
-  const { formatCountry } = useFormat();
-
-  const renderLabel = ({ label: code }) => {
-    return (
-      <FilterLink
-        type="country"
-        value={(countryNames[code] && code) || code}
-        label={formatCountry(code)}
-      >
-        <TypeIcon type="country" value={code} />
-      </FilterLink>
-    );
-  };
-
-  const Component = isExpanded ? MetricsExpandedTable : MetricsTable;
-
-  return (
-    <Component
-      {...props}
-      title={formatMessage(labels.countries)}
-      type="country"
-      metric={formatMessage(labels.visitors)}
-      renderLabel={renderLabel}
-      searchFormattedValues={true}
-    />
-  );
-}
diff --git a/src/components/metrics/ListExpandedTable.tsx b/src/components/metrics/ListExpandedTable.tsx
deleted file mode 100644
index a413f0e4..00000000
--- a/src/components/metrics/ListExpandedTable.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-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">
-        {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>
-      <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>
-  );
-}
diff --git a/src/components/metrics/MetricsExpandedTable.tsx b/src/components/metrics/MetricsExpandedTable.tsx
index f90f1b70..35da0ee6 100644
--- a/src/components/metrics/MetricsExpandedTable.tsx
+++ b/src/components/metrics/MetricsExpandedTable.tsx
@@ -6,6 +6,7 @@ import { Close } from '@/components/icons';
 import { DownloadButton } from '@/components/input/DownloadButton';
 import { formatShortTime } from '@/lib/format';
 import { MetricLabel } from '@/components/metrics/MetricLabel';
+import { SESSION_COLUMNS } from '@/lib/constants';
 
 export interface MetricsExpandedTableProps {
   websiteId: string;
@@ -34,6 +35,7 @@ export function MetricsExpandedTable({
   const [search, setSearch] = useState('');
   const { formatMessage, labels } = useMessages();
   const isType = ['browser', 'country', 'device', 'os'].includes(type);
+  const showBounceDuration = SESSION_COLUMNS.includes(type);
 
   const { data, isLoading, isFetching, error } = useWebsiteExpandedMetricsQuery(websiteId, {
     type,
@@ -85,22 +87,31 @@ export function MetricsExpandedTable({
               <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>
+              {showBounceDuration && [
+                <DataColumn
+                  key="bounceRate"
+                  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
+                  key="visitDuration"
+                  id="visitDuration"
+                  label={formatMessage(labels.visitDuration)}
+                  align="end"
+                >
+                  {row => {
+                    const n = row?.['totaltime'] / row?.['visits'];
+                    return `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`;
+                  }}
+                </DataColumn>,
+              ]}
             </DataTable>
           )}
         </Column>