Enhance/#6214 - Create GA4 AdminBarUniqueVisitors

assets/js/components/adminbar/AdminBarUniqueVisitorsGA4.js

@@ -0,0 +1,106 @@
+/**
+ * Admin Bar Unique Visitors GA4 component.
+ *
+ * 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.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import DataBlock from '../DataBlock';
+import Data from 'googlesitekit-data';
+import PreviewBlock from '../PreviewBlock';
+import { NOTICE_STYLE } from '../GatheringDataNotice';
+import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
+import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
+import { calculateChange } from '../../util';
+import {
+	DATE_RANGE_OFFSET,
+	MODULES_ANALYTICS_4,
+} from '../../modules/analytics-4/datastore/constants';
+const { useSelect } = Data;
+
+const AdminBarUniqueVisitorsGA4 = ( { WidgetReportError } ) => {
+	const isGatheringData = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).isGatheringData()
+	);
+	const url = useSelect( ( select ) =>
+		select( CORE_SITE ).getCurrentEntityURL()
+	);
+	const dateRangeDates = useSelect( ( select ) =>
+		select( CORE_USER ).getDateRangeDates( {
+			compare: true,
+			offsetDays: DATE_RANGE_OFFSET,
+		} )
+	);
+	const reportArgs = {
+		...dateRangeDates,
+		metrics: [
+			{
+				name: 'totalUsers',
+			},
+		],
+		url,
+	};
+
+	const analyticsData = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).getReport( reportArgs )
+	);
+	const hasFinishedResolution = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).hasFinishedResolution( 'getReport', [
+			reportArgs,
+		] )
+	);
+	const error = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).getErrorForSelector( 'getReport', [
+			reportArgs,
+		] )
+	);
+
+	if ( ! hasFinishedResolution || isGatheringData === undefined ) {
+		return <PreviewBlock width="auto" height="59px" />;
+	}
+
+	if ( error ) {
+		return <WidgetReportError moduleSlug="analytics" error={ error } />;
+	}
+
+	const totalUsers = analyticsData?.totals?.[ 0 ]?.metricValues?.[ 0 ]?.value;
+	const previousTotalUsers =
+		analyticsData?.totals?.[ 1 ]?.metricValues?.[ 0 ]?.value;
+
+	const gatheringDataProps = {
+		gatheringData: isGatheringData,
+		gatheringDataNoticeStyle: NOTICE_STYLE.SMALL,
+	};
+
+	return (
+		<DataBlock
+			className="overview-total-users"
+			title={ __( 'Total Users', 'google-site-kit' ) }
+			datapoint={ totalUsers }
+			change={ calculateChange( previousTotalUsers, totalUsers ) }
+			changeDataUnit="%"
+			{ ...gatheringDataProps }
+		/>
+	);
+};
+
+export default AdminBarUniqueVisitorsGA4;

assets/js/components/adminbar/AdminBarUniqueVisitorsGA4.stories.js

@@ -0,0 +1,77 @@
+/**
+ * Admin Bar Unique Visitors GA4 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 { withWidgetComponentProps } from '../../googlesitekit/widgets/util';
+import {
+	setupAnalytics4GatheringData,
+	setupAnalytics4MockReports,
+	setupAnalytics4ZeroData,
+	setupAnalytics4Loading,
+	setupAnalytics4Error,
+	widgetDecorators,
+} from './common-GA4.stories';
+import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
+import AdminBarUniqueVisitorsGA4 from './AdminBarUniqueVisitorsGA4';
+
+const WidgetWithComponentProps = withWidgetComponentProps( 'widget-slug' )(
+	AdminBarUniqueVisitorsGA4
+);
+
+const Template = ( { setupRegistry = () => {}, ...args } ) => (
+	<WithRegistrySetup func={ setupRegistry }>
+		<WidgetWithComponentProps { ...args } />
+	</WithRegistrySetup>
+);
+
+export const Ready = Template.bind( {} );
+Ready.storyName = 'Ready';
+Ready.args = {
+	setupRegistry: setupAnalytics4MockReports,
+};
+
+export const GatheringData = Template.bind( {} );
+GatheringData.storyName = 'GatheringData';
+GatheringData.args = {
+	setupRegistry: setupAnalytics4GatheringData,
+};
+
+export const ZeroData = Template.bind( {} );
+ZeroData.storyName = 'Zero Data';
+ZeroData.args = {
+	setupRegistry: setupAnalytics4ZeroData,
+};
+
+export const Loading = Template.bind( {} );
+Loading.storyName = 'Loading';
+Loading.args = {
+	setupRegistry: setupAnalytics4Loading,
+};
+
+export const Error = Template.bind( {} );
+Error.storyName = 'Error';
+Error.args = {
+	setupRegistry: setupAnalytics4Error,
+};
+
+export default {
+	title: 'Views/AdminBarApp/AdminBarUniqueVisitorsGA4',
+	decorators: widgetDecorators,
+};