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%