Enhance/#6252 - Create the "Top cities driving traffic" key metric widget tile

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

@@ -21,15 +21,97 @@
  */
 import PropTypes from 'prop-types';
 
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+import {
+	DATE_RANGE_OFFSET,
+	MODULES_ANALYTICS_4,
+} from '../../datastore/constants';
+import { ZeroDataMessage } from '../../../analytics/components/common';
+import { numFmt } from '../../../../util';
+import { MetricTileTable } from '../../../../components/KeyMetrics';
+const { useSelect, useInViewSelect } = Data;
+
 export default function TopCitiesWidget( { Widget } ) {
+	const dates = useSelect( ( select ) =>
+		select( CORE_USER ).getDateRangeDates( {
+			offsetDays: DATE_RANGE_OFFSET,
+		} )
+	);
+
+	const topcCitiesReportOptions = {
+		...dates,
+		dimensions: [ 'city' ],
+		metrics: [ { name: 'totalUsers' } ],
+		orderby: [
+			{
+				metric: {
+					metricName: 'totalUsers',
+				},
+				desc: true,
+			},
+		],
+		limit: 3,
+	};
+
+	const topCitiesReport = useInViewSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).getReport( topcCitiesReportOptions )
+	);
+
+	const loading = useInViewSelect(
+		( select ) =>
+			! select( MODULES_ANALYTICS_4 ).hasFinishedResolution(
+				'getReport',
+				[ topcCitiesReportOptions ]
+			)
+	);
+
+	const { rows = [] } = topCitiesReport || {};
+
+	const totalUsers =
+		topCitiesReport?.totals?.[ 0 ]?.metricValues?.[ 0 ]?.value;
+
+	const columns = [
+		{
+			field: 'dimensionValues',
+			Component: ( { fieldValue } ) => {
+				const [ title ] = fieldValue;
+
+				return (
+					<p className="googlesitekit-km-widget-tile__table-plain-text">
+						{ title.value }
+					</p>
+				);
+			},
+		},
+		{
+			field: 'metricValues.0.value',
+			Component: ( { fieldValue } ) => (
+				<strong>{ numFmt( fieldValue / totalUsers, '%' ) }</strong>
+			),
+		},
+	];
+
 	return (
-		<Widget>
-			<div>TODO: UI for TopCitiesWidget</div>
-		</Widget>
+		<MetricTileTable
+			Widget={ Widget }
+			title={ __( 'Top cities driving traffic', 'google-site-kit' ) }
+			loading={ loading }
+			rows={ rows }
+			columns={ columns }
+			zeroState={ ZeroDataMessage }
+		/>
 	);
 }
 
 TopCitiesWidget.propTypes = {
 	Widget: PropTypes.elementType.isRequired,
-	WidgetNull: PropTypes.elementType.isRequired,
 };

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

@@ -0,0 +1,145 @@
+/**
+ * TopCitiesWidget component stories.
+ *
+ * Site Kit by Google, Copyright 2023 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.
+ */
+
+/**
+ * Internal dependencies
+ */
+import { CORE_USER } from '../../../../googlesitekit/datastore/user/constants';
+import { MODULES_ANALYTICS_4 } from '../../datastore/constants';
+import {
+	provideKeyMetrics,
+	provideModules,
+} from '../../../../../../tests/js/utils';
+import { withWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
+import { getAnalytics4MockResponse } from '../../utils/data-mock';
+import { replaceValuesInAnalytics4ReportWithZeroData } from '../../../../../../.storybook/utils/zeroReports';
+import WithRegistrySetup from '../../../../../../tests/js/WithRegistrySetup';
+import TopCitiesWidget from './TopCitiesWidget';
+
+const reportOptions = {
+	startDate: '2020-08-11',
+	endDate: '2020-09-07',
+	dimensions: [ 'city' ],
+	metrics: [ { name: 'totalUsers' } ],
+	orderby: [
+		{
+			metric: {
+				metricName: 'totalUsers',
+			},
+			desc: true,
+		},
+	],
+	limit: 3,
+};
+
+const WidgetWithComponentProps =
+	withWidgetComponentProps( 'test' )( TopCitiesWidget );
+
+const Template = ( { setupRegistry, ...args } ) => (
+	<WithRegistrySetup func={ setupRegistry }>
+		<WidgetWithComponentProps { ...args } />
+	</WithRegistrySetup>
+);
+
+export const Ready = Template.bind( {} );
+Ready.storyName = 'Ready';
+Ready.args = {
+	setupRegistry: ( registry ) => {
+		const report = getAnalytics4MockResponse( reportOptions );
+		// Calculate sum of metricValues for all rows
+		const rowsSum = report.rows.reduce( ( total, row ) => {
+			return total + Number( row.metricValues[ 0 ].value );
+		}, 0 );
+
+		// Generate totalValueForAllCities that is higher than the sum
+		const totalValueForAllCities = rowsSum * 2;
+
+		// Adjust totals field in the mock response
+		report.totals = [
+			{
+				dimensionValues: [ { value: 'RESERVED_TOTAL' } ],
+				metricValues: [ { value: totalValueForAllCities.toString() } ],
+			},
+		];
+		registry.dispatch( MODULES_ANALYTICS_4 ).receiveGetReport( report, {
+			options: reportOptions,
+		} );
+	},
+};
+Ready.scenario = {
+	label: 'KeyMetrics/TopCitiesWidget/Ready',
+	delay: 250,
+};
+
+export const Loading = Template.bind( {} );
+Loading.storyName = 'Loading';
+Loading.args = {
+	setupRegistry: ( { dispatch } ) => {
+		dispatch( MODULES_ANALYTICS_4 ).startResolution( 'getReport', [
+			reportOptions,
+		] );
+	},
+};
+
+export const ZeroData = Template.bind( {} );
+ZeroData.storyName = 'Zero Data';
+ZeroData.args = {
+	setupRegistry: ( { dispatch } ) => {
+		const report = getAnalytics4MockResponse( reportOptions );
+		const zeroReport =
+			replaceValuesInAnalytics4ReportWithZeroData( report );
+
+		dispatch( MODULES_ANALYTICS_4 ).receiveGetReport( zeroReport, {
+			options: reportOptions,
+		} );
+	},
+};
+ZeroData.scenario = {
+	label: 'KeyMetrics/TopCitiesWidget/ZeroData',
+	delay: 250,
+};
+
+export default {
+	title: 'Key Metrics/TopCitiesWidget',
+	decorators: [
+		( Story, { args } ) => {
+			const setupRegistry = ( registry ) => {
+				provideModules( registry, [
+					{
+						slug: 'analytics-4',
+						active: true,
+						connected: true,
+					},
+				] );
+
+				registry.dispatch( CORE_USER ).setReferenceDate( '2020-09-08' );
+
+				provideKeyMetrics( registry );
+
+				// Call story-specific setup.
+				args.setupRegistry( registry );
+			};
+
+			return (
+				<WithRegistrySetup func={ setupRegistry }>
+					<Story />
+				</WithRegistrySetup>
+			);
+		},
+	],
+};

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

@@ -0,0 +1,67 @@
+/**
+ * TopCitiesWidget component tests.
+ *
+ * Site Kit by Google, Copyright 2023 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.
+ */
+
+/**
+ * Internal dependencies
+ */
+import { render } from '../../../../../../tests/js/test-utils';
+import { provideKeyMetrics } from '../../../../../../tests/js/utils';
+import { provideAnalytics4MockReport } from '../../utils/data-mock';
+import { getWidgetComponentProps } from '../../../../googlesitekit/widgets/util';
+import {
+	CORE_USER,
+	KM_ANALYTICS_TOP_CITIES,
+} from '../../../../googlesitekit/datastore/user/constants';
+import TopCitiesWidget from './TopCitiesWidget';
+
+describe( 'TopCitiesWidget', () => {
+	const { Widget } = getWidgetComponentProps( KM_ANALYTICS_TOP_CITIES );
+
+	it( 'renders correctly with the expected metrics', async () => {
+		const { container, waitForRegistry } = render(
+			<TopCitiesWidget Widget={ Widget } />,
+			{
+				setupRegistry: ( registry ) => {
+					registry
+						.dispatch( CORE_USER )
+						.setReferenceDate( '2020-09-08' );
+
+					provideKeyMetrics( registry );
+					provideAnalytics4MockReport( registry, {
+						startDate: '2020-08-11',
+						endDate: '2020-09-07',
+						dimensions: [ 'city' ],
+						metrics: [ { name: 'totalUsers' } ],
+						orderby: [
+							{
+								metric: {
+									metricName: 'totalUsers',
+								},
+								desc: true,
+							},
+						],
+						limit: 3,
+					} );
+				},
+			}
+		);
+		await waitForRegistry();
+
+		expect( container ).toMatchSnapshot();
+	} );
+} );