Add Organic Sessions widget

packages/js/src/dashboard/components/info-tooltip.js

@@ -9,7 +9,7 @@ import { InformationCircleIcon } from "@heroicons/react/outline";
  * @returns {JSX.Element} The element.
  */
 export const InfoTooltip = ( { children } ) => (
-	<TooltipContainer>
+	<TooltipContainer className="yst-h-fit yst-leading-[0]">
 		<TooltipTrigger>
 			<InformationCircleIcon className="yst-w-5 yst-h-5 yst-text-slate-400" />
 		</TooltipTrigger>

packages/js/src/dashboard/components/no-data-paragraph.js

@@ -0,0 +1,11 @@
+import { __ } from "@wordpress/i18n";
+
+/**
+ * @param {string} [className="yst-mt-4"] The class name.
+ * @returns {JSX.Element} The element.
+ */
+export const NoDataParagraph = ( { className = "yst-mt-4" } ) => (
+	<p className={ className }>
+		{ __( "No data to display: Your site hasn't received any visitors yet.", "wordpress-seo" ) }
+	</p>
+);

packages/js/src/dashboard/components/trend.js

@@ -0,0 +1,35 @@
+import { ArrowNarrowUpIcon } from "@heroicons/react/outline";
+import classNames from "classnames";
+
+/**
+ * @param {number} value The value.
+ * @param {string} formattedValue The formatted value.
+ * @returns {JSX.Element} The element.
+ */
+export const Trend = ( { value, formattedValue } ) => {
+	// Don't show anything if 0 or invalid.
+	if ( ! value ) {
+		return null;
+	}
+
+	const isPositive = value >= 0;
+
+	return (
+		<div
+			className={ classNames(
+				"yst-flex yst-items-center yst-font-semibold",
+				isPositive ? "yst-text-green-600" : "yst-text-red-600"
+			) }
+		>
+			<ArrowNarrowUpIcon
+				className={ classNames(
+					"yst-w-4 yst-shrink-0",
+					// Point the arrow downwards if negative.
+					! isPositive && "yst-rotate-180"
+				) }
+			/>
+			{ isPositive && "+" }
+			{ formattedValue }
+		</div>
+	);
+};

packages/js/src/dashboard/index.js

@@ -64,6 +64,7 @@ export { Dashboard } from "./components/dashboard";
  * @property {string} installSiteKit The Site Kit installation link.
  * @property {string} activateSiteKit The Site Kit activation link.
  * @property {string} setupSiteKit The Site Kit setup link.
+ * @property {string} organicSessionsInfoLearnMore The organic sessions learn more link.
  */
 
 /**
@@ -92,7 +93,7 @@ export { Dashboard } from "./components/dashboard";
  */
 
 /**
- * @typedef {"seoScores"|"readabilityScores"|"topPages"|"siteKitSetup"|"topQueries"} WidgetType The widget type.
+ * @typedef {"seoScores"|"readabilityScores"|"topPages"|"siteKitSetup"|"topQueries"|"organicSessions"} WidgetType The widget type.
  */
 
 /**
@@ -107,6 +108,7 @@ export { Dashboard } from "./components/dashboard";
  * @property {boolean} isActive Whether Site Kit is active.
  * @property {boolean} isSetupCompleted Whether Site Kit is setup.
  * @property {boolean} isConsentGranted Whether Site Kit is connected.
+ * @property {boolean} isAnalyticsConnected Whether Google Analytics is connected.
  * @property {boolean} isFeatureEnabled Whether the feature is enabled.
  * @property {boolean} isSetupWidgetDismissed Whether the configuration is dismissed.
  */

packages/js/src/dashboard/services/data-formatter.js

@@ -29,13 +29,20 @@ const safeNumberFormat = ( data, numberFormat ) => {
  * Knows how to format data.
  */
 export class DataFormatter {
+	#locale;
 	#numberFormat = {};
 
 	/**
 	 * @param {string} [locale] The locale.
 	 */
 	constructor( { locale = "en-US" } = {} ) {
+		this.#locale = locale;
 		this.#numberFormat.nonFractional = new Intl.NumberFormat( locale, { maximumFractionDigits: 0 } );
+		this.#numberFormat.compactNonFractional = new Intl.NumberFormat( locale, {
+			maximumFractionDigits: 0,
+			notation: "compact",
+			compactDisplay: "short",
+		} );
 		this.#numberFormat.percentage = new Intl.NumberFormat( locale, { style: "percent", minimumFractionDigits: 2, maximumFractionDigits: 2 } );
 		this.#numberFormat.twoFractions = new Intl.NumberFormat( locale, { maximumFractionDigits: 2, minimumFractionDigits: 2 } );
 	}
@@ -75,11 +82,24 @@ export class DataFormatter {
 			case "impressions":
 				return safeNumberFormat( data, this.#numberFormat.nonFractional );
 			case "ctr":
+			case "difference":
 				return safeNumberFormat( data, this.#numberFormat.percentage );
 			case "position":
 				return safeNumberFormat( data, this.#numberFormat.twoFractions );
 			case "seoScore":
 				return Object.keys( SCORE_META ).includes( data ) ? data : "notAnalyzed";
+			case "date":
+				return new Date(
+					Date.UTC( data.slice( 0, 4 ), data.slice( 4, 6 ) - 1, data.slice( 6, 8 ) )
+				).toLocaleDateString(
+					this.#locale,
+					{ month: "short", day: "numeric" }
+				);
+			case "sessions":
+				if ( context.compact ) {
+					return safeNumberFormat( data || 0, this.#numberFormat.compactNonFractional );
+				}
+				return safeNumberFormat( data || 0, this.#numberFormat.nonFractional );
 			default:
 				return data;
 		}

packages/js/src/dashboard/services/data-provider.js

@@ -41,6 +41,7 @@ export class DataProvider {
 		this.#siteKitConfiguration = {
 			isFeatureEnabled: siteKitConfiguration.isFeatureEnabled,
 			isSetupWidgetDismissed: siteKitConfiguration.isSetupWidgetDismissed,
+			isAnalyticsConnected: siteKitConfiguration.isAnalyticsConnected,
 		};
 		this.#stepsStatuses = [
 			siteKitConfiguration.isInstalled,
@@ -51,18 +52,18 @@ export class DataProvider {
 	}
 
 	/**
-     * Subscribe to changes in the site kit configuration.
-     * @param {Function} callback The callback to call when the configuration changes.
-     * @returns {Function} Unsubscribe function.
-     */
+	 * Subscribe to changes in the site kit configuration.
+	 * @param {Function} callback The callback to call when the configuration changes.
+	 * @returns {Function} Unsubscribe function.
+	 */
 	subscribe( callback ) {
 		this.#subscribers.add( callback );
 		return () => this.#subscribers.delete( callback );
 	}
 
 	/**
-     * Notify all subscribers of a change in the site kit configuration.
-     */
+	 * Notify all subscribers of a change in the site kit configuration.
+	 */
 	notifySubscribers() {
 		this.#subscribers.forEach( callback => callback() );
 	}
@@ -87,6 +88,7 @@ export class DataProvider {
 	getStepsStatuses() {
 		return this.#stepsStatuses;
 	}
+
 	/**
 	 * @param {string} feature The feature to check.
 	 * @returns {boolean} Whether the feature is enabled.

packages/js/src/dashboard/services/remote-data-provider.js

@@ -17,7 +17,7 @@ export class RemoteDataProvider {
 
 	/**
 	 * @param {string|URL} endpoint The endpoint.
-	 * @param {Object<string,string>} [params] The query parameters.
+	 * @param {Object<string,string|Object<string,string>>} [params] The query parameters.
 	 * @throws {TypeError} If the URL is invalid.
 	 * @link https://developer.mozilla.org/en-US/docs/Web/API/URL
 	 * @returns {URL} The URL.
@@ -40,7 +40,7 @@ export class RemoteDataProvider {
 
 	/**
 	 * @param {string|URL} endpoint The endpoint.
-	 * @param {Object<string,string>} [params] The query parameters.
+	 * @param {Object<string,string|Object<string,string>>} [params] The query parameters.
 	 * @param {RequestInit} [options] The request options.
 	 * @returns {Promise<any|Error>} The promise of a result, or an error.
 	 */

packages/js/src/dashboard/services/widget-factory.js

@@ -1,4 +1,5 @@
 /* eslint-disable complexity */
+import { OrganicSessionsWidget } from "../widgets/organic-sessions-widget";
 import { ScoreWidget } from "../widgets/score-widget";
 import { SiteKitSetupWidget } from "../widgets/site-kit-setup-widget";
 import { TopPagesWidget } from "../widgets/top-pages-widget";
@@ -28,13 +29,14 @@ export class WidgetFactory {
 	}
 
 	/**
-	 * The widget types, also determaines the order in which they are displayed.!
+	 * The widget types, also determines the order in which they are displayed.!
 	 *
 	 * @returns {Object} The widget types.
 	 */
 	static get types() {
 		return {
 			siteKitSetup: "siteKitSetup",
+			organicSessions: "organicSessions",
 			topPages: "topPages",
 			topQueries: "topQueries",
 			seoScores: "seoScores",
@@ -47,7 +49,7 @@ export class WidgetFactory {
 	 * @returns {JSX.Element|null} The widget or null.
 	 */
 	createWidget( widget ) {
-		const { isFeatureEnabled, isSetupWidgetDismissed } = this.#dataProvider.getSiteKitConfiguration();
+		const { isFeatureEnabled, isSetupWidgetDismissed, isAnalyticsConnected } = this.#dataProvider.getSiteKitConfiguration();
 		const isSiteKitConnectionCompleted = this.#dataProvider.isSiteKitConnectionCompleted();
 		switch ( widget.type ) {
 			case WidgetFactory.types.seoScores:
@@ -99,6 +101,16 @@ export class WidgetFactory {
 					remoteDataProvider={ this.#remoteDataProvider }
 					dataFormatter={ this.#dataFormatter }
 				/>;
+			case WidgetFactory.types.organicSessions:
+				if ( ! isFeatureEnabled || ! isSiteKitConnectionCompleted || ! isAnalyticsConnected ) {
+					return null;
+				}
+				return <OrganicSessionsWidget
+					key={ widget.id }
+					dataProvider={ this.#dataProvider }
+					remoteDataProvider={ this.#remoteDataProvider }
+					dataFormatter={ this.#dataFormatter }
+				/>;
 			default:
 				return null;
 		}

packages/js/src/dashboard/transformers/difference.js

@@ -0,0 +1,30 @@
+/**
+ * @param {number} number The number to check.
+ * @returns {boolean} True if not falsy except 0.
+ */
+const isValidNumber = ( number ) => ! number && number !== 0;
+
+/**
+ * @param {number} current The current.
+ * @param {number} previous The previous.
+ * @returns {number} The difference, as percentage.
+ */
+export const getDifference = ( current, previous ) => {
+	// Invalid values (falsy except 0) => return NaN.
+	// Because there is nothing to say about the difference.
+	if ( isValidNumber( current ) || isValidNumber( previous ) ) {
+		return NaN;
+	}
+
+	// No difference, preventing the both 0 divide by 0.
+	if ( current === previous ) {
+		return 0;
+	}
+
+	// Divide by 0. Instead of Infinite, we go for "logical" 100% increase instead.
+	if ( previous === 0 ) {
+		return 1;
+	}
+
+	return ( current - previous ) / previous;
+};

packages/js/src/dashboard/widgets/organic-sessions-widget.js

@@ -0,0 +1,71 @@
+import { useCallback } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import { isEqual } from "lodash";
+import { ErrorAlert } from "../components/error-alert";
+import { NoDataParagraph } from "../components/no-data-paragraph";
+import { OrganicSessionsCompare, useOrganicSessionsCompare } from "./organic-sessions/compare";
+import { OrganicSessionsDaily, useOrganicSessionsDaily } from "./organic-sessions/daily";
+import { Widget } from "./widget";
+
+/**
+ * @type {import("../services/data-provider")} DataProvider
+ * @type {import("../services/remote-data-provider")} RemoteDataProvider
+ * @type {import("../services/data-formatter")} DataFormatter
+ */
+
+/**
+ * @param {DataProvider} dataProvider The data provider.
+ * @param {RemoteDataProvider} remoteDataProvider The remote data provider.
+ * @param {DataFormatter} dataFormatter The data formatter.
+ * @returns {JSX.Element} The element.
+ */
+export const OrganicSessionsWidget = ( { dataProvider, remoteDataProvider, dataFormatter } ) => {
+	const supportLink = dataProvider.getLink( "errorSupport" );
+	const daily = useOrganicSessionsDaily( dataProvider, remoteDataProvider, dataFormatter );
+	const compare = useOrganicSessionsCompare( dataProvider, remoteDataProvider, dataFormatter );
+	const widgetProps = {
+		className: "yst-paper__content yst-col-span-4",
+		title: __( "Organic sessions", "wordpress-seo" ),
+		tooltip: __( "The number of organic sessions on your website.", "wordpress-seo" ),
+		tooltipLearnMoreLink: dataProvider.getLink( "organicSessionsInfoLearnMore" ),
+	};
+
+	// Creating a specific wrapper instead of passing the data formatter itself.
+	const formatSessionsForChartLabel = useCallback(
+		( value ) => dataFormatter.format( value, "sessions", { compact: true } ),
+		[ dataFormatter ]
+	);
+
+	// Collapse the errors if they are the same.
+	if ( compare.error && daily.error && isEqual( compare.error, daily.error ) ) {
+		return (
+			<Widget { ...widgetProps }>
+				<ErrorAlert className="yst-mt-4" error={ compare.error } supportLink={ supportLink } />
+			</Widget>
+		);
+	}
+
+	// Don't show the comparison when there is not data.
+	if ( daily.data?.labels.length === 0 ) {
+		return (
+			<Widget { ...widgetProps }>
+				<NoDataParagraph />
+			</Widget>
+		);
+	}
+
+	return (
+		<Widget { ...widgetProps }>
+			<div className="yst-flex yst-justify-between yst-mt-4">
+				<OrganicSessionsCompare data={ compare.data } error={ compare.error } isPending={ compare.isPending } supportLink={ supportLink } />
+			</div>
+			<OrganicSessionsDaily
+				data={ daily.data }
+				error={ daily.error }
+				isPending={ daily.isPending }
+				supportLink={ supportLink }
+				formatY={ formatSessionsForChartLabel }
+			/>
+		</Widget>
+	);
+};