More metrics for location modals + better details titles

assets/js/dashboard/stats/pages/details.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { revenueAvailable, Filter } from '../../dashboard-state'
+import { revenueAvailable, Filter, DashboardState } from '../../dashboard-state'
 import { useDashboardStateContext } from '../../dashboard-state-context'
 import { useSiteContext } from '../../site-context'
 import {
@@ -98,7 +98,7 @@ export function PagesDetails({
   return (
     <Modal>
       <DetailsBreakdown
-        title={reportConfig.detailsTitle}
+        title={pagesDetailsTitle(breakdownReportKey, dashboardState)}
         dimensionLabel={reportConfig.dimensionLabel}
         dimensions={reportConfig.dimensions}
         metrics={metrics}
@@ -129,3 +129,18 @@ const PathDimensionElement = (props: DimensionCellProps) => {
     />
   )
 }
+
+export function pagesDetailsTitle(
+  reportKey: BreakdownReportKey,
+  dashboardState: DashboardState
+) {
+  if (
+    [BreakdownReportKey.pages, BreakdownReportKey.pagesWithHostname].includes(
+      reportKey
+    ) &&
+    hasConversionGoalFilter(dashboardState)
+  ) {
+    return 'Conversion pages'
+  }
+  return BREAKDOWN_REPORTS[reportKey].detailsTitle
+}

assets/js/dashboard/stats/pages/index.tsx

@@ -35,6 +35,7 @@ import {
   BlurMenuButtonOnEscape,
   SelectedCheckmark
 } from '../../components/popover'
+import { pagesDetailsTitle } from './details'
 
 const BAR_COLOR = 'bg-orange-50 group-hover/row:bg-orange-100'
 const MAX_DIMENSION_LENGTH = 70
@@ -114,22 +115,17 @@ export default function Pages() {
           <TabWrapper>
             {(
               [
-                {
-                  label: hasConversionGoalFilter(dashboardState)
-                    ? 'Conversion pages'
-                    : 'Top pages',
-                  value: BreakdownReportKey.pages
-                },
-                { label: 'Entry pages', value: BreakdownReportKey.entryPages },
-                { label: 'Exit pages', value: BreakdownReportKey.exitPages }
+                BreakdownReportKey.pages,
+                BreakdownReportKey.entryPages,
+                BreakdownReportKey.exitPages
               ] as const
-            ).map(({ value, label }) => (
+            ).map((reportKey) => (
               <TabButton
-                key={value}
-                active={tab === value}
-                onClick={() => switchTab(value)}
+                key={reportKey}
+                active={tab === reportKey}
+                onClick={() => switchTab(reportKey)}
               >
-                {label}
+                {pagesDetailsTitle(reportKey, dashboardState)}
               </TabButton>
             ))}
           </TabWrapper>

assets/js/dashboard/stats/reports/reports-config.ts

@@ -309,14 +309,14 @@ export const BREAKDOWN_REPORTS: Record<
   [BreakdownReportKey.channels]: {
     dimensions: ['visit:channel'],
     getMetrics: createGetMetricsFn(COMMON_BREAKDOWN_METRICS_BY_CONTEXT),
-    detailsTitle: 'Top acquisition channels',
+    detailsTitle: 'Acquisition channels',
     detailsPath: 'channels',
     dimensionLabel: 'Channel'
   },
   [BreakdownReportKey.sources]: {
     dimensions: ['visit:source'],
     getMetrics: createGetMetricsFn(COMMON_BREAKDOWN_METRICS_BY_CONTEXT),
-    detailsTitle: 'Top sources',
+    detailsTitle: 'Sources',
     detailsPath: 'sources',
     dimensionLabel: 'Source'
   },
@@ -371,10 +371,9 @@ export const BREAKDOWN_REPORTS: Record<
     dimensions: ['visit:country_name', 'visit:country'],
     getMetrics: createGetMetricsFn({
       ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-      defaultDetailedMetrics: ['visitors', 'percentage'],
       defaultCsvMetrics: ['visitors']
     }),
-    detailsTitle: 'Top countries',
+    detailsTitle: 'Countries',
     detailsPath: 'countries',
     dimensionLabel: 'Country',
     alwaysOnFilters: [['is_not', 'visit:country', ['\0\0', 'ZZ']]]
@@ -384,10 +383,9 @@ export const BREAKDOWN_REPORTS: Record<
     dimensions: ['visit:region_name', 'visit:region', 'visit:country'],
     getMetrics: createGetMetricsFn({
       ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-      defaultDetailedMetrics: ['visitors', 'percentage'],
       defaultCsvMetrics: ['visitors']
     }),
-    detailsTitle: 'Top regions',
+    detailsTitle: 'Regions',
     detailsPath: 'regions',
     dimensionLabel: 'Region',
     alwaysOnFilters: [['is_not', 'visit:region', ['']]]
@@ -397,10 +395,9 @@ export const BREAKDOWN_REPORTS: Record<
     dimensions: ['visit:city_name', 'visit:city', 'visit:country'],
     getMetrics: createGetMetricsFn({
       ...COMMON_BREAKDOWN_METRICS_BY_CONTEXT,
-      defaultDetailedMetrics: ['visitors', 'percentage'],
       defaultCsvMetrics: ['visitors']
     }),
-    detailsTitle: 'Top cities',
+    detailsTitle: 'Cities',
     detailsPath: 'cities',
     dimensionLabel: 'City',
     alwaysOnFilters: [['is_not', 'visit:city', [0]]]

e2e/tests/dashboard/breakdowns.spec.ts

@@ -79,7 +79,7 @@ test('sources breakdown', async ({ page, request }) => {
     await detailsLink(report).click()
 
     await expect(
-      modal(page).getByRole('heading', { name: 'Top sources' })
+      modal(page).getByRole('heading', { name: 'Sources' })
     ).toBeVisible()
 
     await expectHeaders(modal(page), [
@@ -213,7 +213,7 @@ test('sources breakdown', async ({ page, request }) => {
     await detailsLink(report).click()
 
     await expect(
-      modal(page).getByRole('heading', { name: 'Top acquisition channels' })
+      modal(page).getByRole('heading', { name: 'Acquisition channels' })
     ).toBeVisible()
 
     await expectHeaders(modal(page), [
@@ -838,7 +838,7 @@ test('pages breakdown with a pageview goal filter applied', async ({
     await detailsLink(report).click()
 
     await expect(
-      modal(page).getByRole('heading', { name: 'Top pages' })
+      modal(page).getByRole('heading', { name: 'Conversion pages' })
     ).toBeVisible()
 
     await expectHeaders(modal(page), [
@@ -875,7 +875,7 @@ test('pages breakdown with a pageview goal filter applied', async ({
     await detailsLink(report).click()
 
     await expect(
-      modal(page).getByRole('heading', { name: 'Top pages' })
+      modal(page).getByRole('heading', { name: 'Conversion pages' })
     ).toBeVisible()
 
     await expectHeaders(modal(page), [
@@ -1101,14 +1101,19 @@ test('locations breakdown', async ({ page, request }) => {
     await detailsLink(report).click()
 
     await expect(
-      modal(page).getByRole('heading', { name: 'Top countries' })
+      modal(page).getByRole('heading', { name: 'Countries' })
     ).toBeVisible()
 
-    await expectHeaders(modal(page), ['Country', /Visitors/])
+    await expectHeaders(modal(page), [
+      'Country',
+      /Visitors/,
+      /Bounce rate/,
+      /Visit duration/
+    ])
 
     await expectRows(modal(page), [/Estonia/, /Poland/])
 
-    await expectMetricValues(modal(page), 'Estonia', ['2'])
+    await expectMetricValues(modal(page), 'Estonia', ['2', '100%', '0s'])
 
     await expect(searchInput(modal(page))).toBeVisible()
 
@@ -1151,14 +1156,19 @@ test('locations breakdown', async ({ page, request }) => {
     await detailsLink(report).click()
 
     await expect(
-      modal(page).getByRole('heading', { name: 'Top regions' })
+      modal(page).getByRole('heading', { name: 'Regions' })
     ).toBeVisible()
 
-    await expectHeaders(modal(page), ['Region', /Visitors/])
+    await expectHeaders(modal(page), [
+      'Region',
+      /Visitors/,
+      /Bounce rate/,
+      /Visit duration/
+    ])
 
     await expectRows(modal(page), [/Harjumaa/, /Mazovia/, /Tartumaa/])
 
-    await expectMetricValues(modal(page), 'Harjumaa', ['1'])
+    await expectMetricValues(modal(page), 'Harjumaa', ['1', '100%', '0s'])
 
     await expect(searchInput(modal(page))).toBeVisible()
 
@@ -1201,14 +1211,19 @@ test('locations breakdown', async ({ page, request }) => {
     await detailsLink(report).click()
 
     await expect(
-      modal(page).getByRole('heading', { name: 'Top cities' })
+      modal(page).getByRole('heading', { name: 'Cities' })
     ).toBeVisible()
 
-    await expectHeaders(modal(page), ['City', /Visitors/])
+    await expectHeaders(modal(page), [
+      'City',
+      /Visitors/,
+      /Bounce rate/,
+      /Visit duration/
+    ])
 
     await expectRows(modal(page), [/Tallinn/, /Tartu/, /Warsaw/])
 
-    await expectMetricValues(modal(page), 'Tartu', ['1'])
+    await expectMetricValues(modal(page), 'Tartu', ['1', '100%', '0s'])
 
     await expect(searchInput(modal(page))).toBeVisible()
 
@@ -1299,7 +1314,7 @@ test('locations breakdown with a revenue goal filter applied', async ({
     await detailsLink(report).click()
 
     await expect(
-      modal(page).getByRole('heading', { name: 'Top countries' })
+      modal(page).getByRole('heading', { name: 'Countries' })
     ).toBeVisible()
 
     await expectHeaders(modal(page), [
@@ -1345,7 +1360,7 @@ test('locations breakdown with a revenue goal filter applied', async ({
     await detailsLink(report).click()
 
     await expect(
-      modal(page).getByRole('heading', { name: 'Top regions' })
+      modal(page).getByRole('heading', { name: 'Regions' })
     ).toBeVisible()
 
     await expectHeaders(modal(page), [
@@ -1384,7 +1399,7 @@ test('locations breakdown with a revenue goal filter applied', async ({
     await detailsLink(report).click()
 
     await expect(
-      modal(page).getByRole('heading', { name: 'Top cities' })
+      modal(page).getByRole('heading', { name: 'Cities' })
     ).toBeVisible()
 
     await expectHeaders(modal(page), [