diff --git a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js
index a639e43475a..6ea251aaf59 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js
@@ -61,7 +61,7 @@ function TopCitiesWidget( { Widget } ) {
desc: true,
},
],
- limit: 3,
+ limit: 4,
};
const topCitiesReport = useInViewSelect(
@@ -86,6 +86,21 @@ function TopCitiesWidget( { Widget } ) {
const { rows = [], totals = [] } = topCitiesReport || {};
+ const filteredCities = ( cityRows ) => {
+ const notSetRow = cityRows.find(
+ ( { dimensionValues } ) =>
+ dimensionValues[ 0 ].value === '(not set)'
+ );
+ if ( notSetRow ) {
+ return cityRows.filter(
+ ( { dimensionValues } ) =>
+ dimensionValues[ 0 ].value !== '(not set)'
+ );
+ }
+
+ return cityRows.slice( 0, 3 );
+ };
+
const totalUsers = totals[ 0 ]?.metricValues?.[ 0 ]?.value;
const columns = [
@@ -117,7 +132,7 @@ function TopCitiesWidget( { Widget } ) {
Widget={ Widget }
widgetSlug={ KM_ANALYTICS_TOP_CITIES }
loading={ loading }
- rows={ rows }
+ rows={ filteredCities( rows ) }
columns={ columns }
ZeroState={ ZeroDataMessage }
error={ error }
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.stories.js b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.stories.js
index 0986b9d7729..4c5cb066233 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.stories.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.stories.js
@@ -46,7 +46,7 @@ const reportOptions = {
desc: true,
},
],
- limit: 3,
+ limit: 4,
};
const WidgetWithComponentProps = withWidgetComponentProps(
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
index 130a90a45d3..84248c47644 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.test.js
@@ -57,7 +57,7 @@ describe( 'TopCitiesWidget', () => {
desc: true,
},
],
- limit: 3,
+ limit: 4,
} );
const { container, waitForRegistry } = render(
,
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js
index c56f8504b59..2e78b0f39b3 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js
@@ -61,7 +61,7 @@ function TopCountriesWidget( { Widget } ) {
desc: true,
},
],
- limit: 3,
+ limit: 4,
};
const topCountriesReport = useInViewSelect(
@@ -88,6 +88,21 @@ function TopCountriesWidget( { Widget } ) {
const { rows = [], totals = [] } = topCountriesReport || {};
+ const filteredCountries = ( countryRows ) => {
+ const notSetRow = countryRows.find(
+ ( { dimensionValues } ) =>
+ dimensionValues[ 0 ].value === '(not set)'
+ );
+ if ( notSetRow ) {
+ return countryRows.filter(
+ ( { dimensionValues } ) =>
+ dimensionValues[ 0 ].value !== '(not set)'
+ );
+ }
+
+ return countryRows.slice( 0, 3 );
+ };
+
const totalUsers = totals[ 0 ]?.metricValues?.[ 0 ]?.value;
const columns = [
@@ -119,7 +134,7 @@ function TopCountriesWidget( { Widget } ) {
Widget={ Widget }
widgetSlug={ KM_ANALYTICS_TOP_COUNTRIES }
loading={ loading }
- rows={ rows }
+ rows={ filteredCountries( rows ) }
columns={ columns }
ZeroState={ ZeroDataMessage }
error={ error }
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.stories.js b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.stories.js
index 21c9961c473..9a3102ddf61 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.stories.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.stories.js
@@ -46,7 +46,7 @@ const reportOptions = {
desc: true,
},
],
- limit: 3,
+ limit: 4,
};
const WidgetWithComponentProps = withWidgetComponentProps(
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
index 505a3c4f447..802bb6040f4 100644
--- a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
+++ b/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.test.js
@@ -57,7 +57,7 @@ describe( 'TopCountriesWidget', () => {
desc: true,
},
],
- limit: 3,
+ limit: 4,
} );
const { container, waitForRegistry } = render(
,
diff --git a/assets/js/modules/analytics-4/components/widgets/__snapshots__/TopCitiesWidget.test.js.snap b/assets/js/modules/analytics-4/components/widgets/__snapshots__/TopCitiesWidget.test.js.snap
index dbfffde6ded..c5b81e189eb 100644
--- a/assets/js/modules/analytics-4/components/widgets/__snapshots__/TopCitiesWidget.test.js.snap
+++ b/assets/js/modules/analytics-4/components/widgets/__snapshots__/TopCitiesWidget.test.js.snap
@@ -61,14 +61,14 @@ exports[`TopCitiesWidget renders correctly with the expected metrics 1`] = `
- (not set)
+ New York
- 466.7%
+ 433.3%