Listing the utility function in separate file.

google · Jan 3, 2025 · 4e851a3 · 4e851a3
1 parent 3f0cd12
commit 4e851a3
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 26 deletions.
diff --git a/assets/js/modules/analytics-4/components/widgets/TopCitiesWidget.js b/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 ) =>
@@ -85,18 +86,6 @@ function TopCitiesWidget( { Widget } ) {
 	);
 
 	const { rows = [], totals = [] } = topCitiesReport || {};
-
-	const filteredCities = ( cityRows ) =>
-		cityRows.some(
-			( { dimensionValues } ) =>
-				dimensionValues[ 0 ].value === '(not set)'
-		)
-			? cityRows.filter(
-					( { dimensionValues } ) =>
-						dimensionValues[ 0 ].value !== '(not set)'
-			  )
-			: cityRows.slice( 0, 3 );
-
 	const totalUsers = totals[ 0 ]?.metricValues?.[ 0 ]?.value;
 
 	const columns = [
@@ -128,7 +117,7 @@ function TopCitiesWidget( { Widget } ) {
 			Widget={ Widget }
 			widgetSlug={ KM_ANALYTICS_TOP_CITIES }
 			loading={ loading }
-			rows={ filteredCities( rows ) }
+			rows={ reportRowsWithSetValues( rows ) }
 			columns={ columns }
 			ZeroState={ ZeroDataMessage }
 			error={ error }

diff --git a/assets/js/modules/analytics-4/components/widgets/TopCountriesWidget.js b/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 ) =>
@@ -87,18 +88,6 @@ function TopCountriesWidget( { Widget } ) {
 	);
 
 	const { rows = [], totals = [] } = topCountriesReport || {};
-
-	const filteredCountries = ( countryRows ) =>
-		countryRows.some(
-			( { dimensionValues } ) =>
-				dimensionValues[ 0 ].value === '(not set)'
-		)
-			? countryRows.filter(
-					( { dimensionValues } ) =>
-						dimensionValues[ 0 ].value !== '(not set)'
-			  )
-			: countryRows.slice( 0, 3 );
-
 	const totalUsers = totals[ 0 ]?.metricValues?.[ 0 ]?.value;
 
 	const columns = [
@@ -130,7 +119,7 @@ function TopCountriesWidget( { Widget } ) {
 			Widget={ Widget }
 			widgetSlug={ KM_ANALYTICS_TOP_COUNTRIES }
 			loading={ loading }
-			rows={ filteredCountries( rows ) }
+			rows={ reportRowsWithSetValues( rows ) }
 			columns={ columns }
 			ZeroState={ ZeroDataMessage }
 			error={ error }

diff --git a/assets/js/modules/analytics-4/utils/report-rows-with-set-values.js b/assets/js/modules/analytics-4/utils/report-rows-with-set-values.js
@@ -0,0 +1,25 @@
+/**
+ * Analytics 4 filter rows having (not set) values.
+ *
+ * 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 );
+}
diff --git a/assets/js/modules/analytics-4/utils/report-rows-with-set-values.test.js b/assets/js/modules/analytics-4/utils/report-rows-with-set-values.test.js
@@ -0,0 +1,80 @@
+/**
+ * Analytics-4 filter rows having (not set) values tests.
+ *
+ * Site Kit by Google, Copyright 2022 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', () => {
+	const 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 );
+	} );
+} );