Exclude (not set) city and country from reports.

assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js

@@ -41,6 +41,7 @@ import {
 } from '../../../../components/KeyMetrics';
 import whenActive from '../../../../util/when-active';
 import ConnectGA4CTATileWidget from './ConnectGA4CTATileWidget';
+import { reportRowsWithSetValues } from '../../utils/report-rows-with-set-values';
 
 function TopCitiesWidget( { Widget } ) {
 	const dates = useSelect( ( select ) =>
@@ -61,7 +62,7 @@ function TopCitiesWidget( { Widget } ) {
 				desc: true,
 			},
 		],
-		limit: 3,
+		limit: 4,
 	};
 
 	const topCitiesReport = useInViewSelect(
@@ -85,7 +86,6 @@ function TopCitiesWidget( { Widget } ) {
 	);
 
 	const { rows = [], totals = [] } = topCitiesReport || {};
-
 	const totalUsers = totals[ 0 ]?.metricValues?.[ 0 ]?.value;
 
 	const columns = [
@@ -117,7 +117,7 @@ function TopCitiesWidget( { Widget } ) {
 			Widget={ Widget }
 			widgetSlug={ KM_ANALYTICS_TOP_CITIES }
 			loading={ loading }
-			rows={ rows }
+			rows={ reportRowsWithSetValues( rows ) }
 			columns={ columns }
 			ZeroState={ ZeroDataMessage }
 			error={ error }

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(

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(
 			<TopCitiesWidget Widget={ Widget } />,

assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js

@@ -41,6 +41,7 @@ import {
 } from '../../../../components/KeyMetrics';
 import whenActive from '../../../../util/when-active';
 import ConnectGA4CTATileWidget from './ConnectGA4CTATileWidget';
+import { reportRowsWithSetValues } from '../../utils/report-rows-with-set-values';
 
 function TopCountriesWidget( { Widget } ) {
 	const dates = useSelect( ( select ) =>
@@ -61,7 +62,7 @@ function TopCountriesWidget( { Widget } ) {
 				desc: true,
 			},
 		],
-		limit: 3,
+		limit: 4,
 	};
 
 	const topCountriesReport = useInViewSelect(
@@ -87,7 +88,6 @@ function TopCountriesWidget( { Widget } ) {
 	);
 
 	const { rows = [], totals = [] } = topCountriesReport || {};
-
 	const totalUsers = totals[ 0 ]?.metricValues?.[ 0 ]?.value;
 
 	const columns = [
@@ -119,7 +119,7 @@ function TopCountriesWidget( { Widget } ) {
 			Widget={ Widget }
 			widgetSlug={ KM_ANALYTICS_TOP_COUNTRIES }
 			loading={ loading }
-			rows={ rows }
+			rows={ reportRowsWithSetValues( rows ) }
 			columns={ columns }
 			ZeroState={ ZeroDataMessage }
 			error={ error }

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(

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(
 			<TopCountriesWidget Widget={ Widget } />,

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`] = `
                 <p
                   class="googlesitekit-km-widget-tile__table-plain-text"
                 >
-                  (not set)
+                  New York
                 </p>
               </div>
               <div
                 class="googlesitekit-table__body-item"
               >
                 <strong>
-                  466.7%
+                  433.3%
                 </strong>
               </div>
             </div>

assets/js/modules/analytics-4/utils/report-rows-with-set-values.js

@@ -0,0 +1,25 @@
+/**
+ * Utility to filter out Analytics report rows which don't have a value set.
+ *
+ * Site Kit by Google, Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function reportRowsWithSetValues( rows, maxRows = 3 ) {
+	const rowsWithSetValues = rows.filter(
+		( { dimensionValues } ) => dimensionValues[ 0 ].value !== '(not set)'
+	);
+
+	return rowsWithSetValues.slice( 0, maxRows );
+}

assets/js/modules/analytics-4/utils/report-rows-with-set-values.test.js

@@ -0,0 +1,84 @@
+/**
+ * Tests for utility to filter out Analytics report rows which don't have a value set.
+ *
+ * Site Kit by Google, Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { reportRowsWithSetValues } from './report-rows-with-set-values';
+
+describe( 'reportRowsWithSetValues', () => {
+	let mockRows;
+
+	beforeEach( () => {
+		mockRows = [
+			{ dimensionValues: [ { value: 'value1' } ] },
+			{ dimensionValues: [ { value: '(not set)' } ] },
+			{ dimensionValues: [ { value: 'value2' } ] },
+			{ dimensionValues: [ { value: 'value3' } ] },
+			{ dimensionValues: [ { value: 'value4' } ] },
+		];
+	} );
+
+	it( 'should return rows with set dimension values only', () => {
+		const result = reportRowsWithSetValues( mockRows );
+		expect( result ).toEqual( [
+			{ dimensionValues: [ { value: 'value1' } ] },
+			{ dimensionValues: [ { value: 'value2' } ] },
+			{ dimensionValues: [ { value: 'value3' } ] },
+		] );
+	} );
+
+	it( 'should limit the number of returned rows to maxRows', () => {
+		const result = reportRowsWithSetValues( mockRows, 2 );
+		expect( result ).toEqual( [
+			{ dimensionValues: [ { value: 'value1' } ] },
+			{ dimensionValues: [ { value: 'value2' } ] },
+		] );
+	} );
+
+	it( 'should handle maxRows greater than the number of filtered rows', () => {
+		const result = reportRowsWithSetValues( mockRows, 10 );
+		expect( result ).toEqual( [
+			{ dimensionValues: [ { value: 'value1' } ] },
+			{ dimensionValues: [ { value: 'value2' } ] },
+			{ dimensionValues: [ { value: 'value3' } ] },
+			{ dimensionValues: [ { value: 'value4' } ] },
+		] );
+	} );
+
+	it( 'should handle empty rows input', () => {
+		const result = reportRowsWithSetValues( [] );
+		expect( result ).toEqual( [] );
+	} );
+
+	it( 'should handle rows where all values are "(not set)"', () => {
+		const allNotSetRows = [
+			{ dimensionValues: [ { value: '(not set)' } ] },
+			{ dimensionValues: [ { value: '(not set)' } ] },
+		];
+		const result = reportRowsWithSetValues( allNotSetRows );
+		expect( result ).toEqual( [] );
+	} );
+
+	it( 'should return an empty array when maxRows is 0', () => {
+		const result = reportRowsWithSetValues( mockRows, 0 );
+		expect( result ).toEqual( [] );
+	} );
+
+	it( 'should use the default maxRows value of 3 when not specified', () => {
+		const result = reportRowsWithSetValues( mockRows );
+		expect( result ).toHaveLength( 3 );
+	} );
+} );