Add Organic Sessions widget #22073

igorschoester · 2025-02-25T16:00:21Z

Context

Implement the organic sessions widget. Which has two parts: comparison with trend and a daily chart.

Summary

This PR can be summarized in the following changelog entry:

Adds the Organic Sessions widget to the dashboard.

Relevant technical choices:

The trend has some edge cases:
- No current/previous sessions => fall back to NaN
- Formatting sessions => fall back to 0, so the current sessions number will not have an ugly NaN on screen
- For the difference/trend:
  - Any falsy (except number zero) => NaN
  - Same value => 0 (0%, but we hide this in the component)
  - Previous number zero (divide by 0 case) => 1 (100%)

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

Make sure you have an environment with site kit configured with analytics.
Make sure site kit is not connected to yoast.
Connect to site kit and check you see the organic sessions widget with data.
Check the space between the ticks and the chart match the design.
Check the font weight and sizes are matching the design.
Check the error message is not duplicated if it's the same for both change and daily data. You can do that by opening the network tab in the devtools and change connection to offline. Change the tab to Alert center and go back to the Dashboard.
Check the widget title is "Organic sessions"
Check the tooltip has the text: "The number of organic sessions that began on your website. "
Check the learn more link is "https://yoa.st/dashboard-organic-sessions-learn-more" with link params.
Check the info icon is aligned to the title.
Check the tooltip arrow is aligned to the i icon.
Check the chart has gradient color.
Mock no data by changing the respone to empty array in src/dashboard/user-interface/time-based-seo-metrics/time-based-seo-metrics-route.php, line 207:

return new WP_REST_Response(
			[],
			200
		);

Check you get only once the message "No data to display: Your site hasn't received any visitors yet."

Relevant test scenarios

Changes should be tested with the browser console open
Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
Changes should be tested on different browsers
Changes should be tested on multisite

Test instructions for QA when the code is in the RC

QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

UI changes

This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Other environments

This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

I have tested this code to the best of my abilities.
During testing, I had activated all plugins that Yoast SEO provides integrations for.
I have added unit tests to verify the code works as intended.
If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
I have written this PR in accordance with my team's definition of done.
I have checked that the base branch is correctly set.

Innovation

No innovation project is applicable for this PR.
This PR falls under an innovation project. I have attached the innovation label.
I have added my hours to the WBSO document.

Fixes https://github.com/Yoast/reserved-tasks/issues/411

coveralls · 2025-02-25T16:15:51Z

Pull Request Test Coverage Report for Build 62731220764544d87392c8a83cf17b2eb8246908

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

For more information on this, see Tracking coverage changes with pull request builds.
To avoid this issue with future PRs, see these Recommended CI Configurations.
For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

80 of 88 (90.91%) changed or added relevant lines in 12 files are covered.
No unchanged relevant lines lost coverage.
Overall first build on 411-implement-organic-sessions-graph at 42.446%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/dashboard/infrastructure/integrations/site-kit.php	0	1	0.0%
packages/js/src/dashboard/widgets/organic-sessions/daily.js	24	31	77.42%

Totals
Change from base Build e635160065c497009be3f728b1284626af5a327c:	42.4%
Covered Lines:	21046
Relevant Lines:	46555

💛 - Coveralls

github-actions · 2025-02-26T14:36:48Z

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

…c-sessions-graph

fix title fix title remove console.log

change the skeleton and chart size

In there is no daily data there wouldn't be change data.

gradient size

thijsoo

CR 🚧 some questions and feedback

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

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

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

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

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

thijsoo · 2025-02-28T11:36:54Z

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

+	 */
+	const getOrganicSessionsDaily = useCallback( ( options ) => {
+		return remoteDataProvider.fetchJson(
+			dataProvider.getEndpoint( "timeBasedSeoMetrics" ),


We might want to also define all endpoints as a constant somewhere since we have quite a few random strings all over the place

I will leave this be for now. Mostly because I'm not sure where this should live (static method in data provider? constant file? 🤷 ).
The options are documented through the Endpoint type.

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

Remove internal space instead

Should show 0 without a difference if we receive invalid input Not show a difference when: * there is no actual difference * dividing by zero

github-actions · 2025-03-04T12:30:47Z

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

Add more internal documentation

…ment-organic-sessions-graph # Conflicts: # packages/js/src/dashboard/index.js # packages/js/src/dashboard/services/widget-factory.js # packages/js/src/general/initialize.js # packages/js/tests/dashboard/__mocks__/data-provider.js # packages/js/tests/dashboard/services/widget-factory.test.js

…ment-organic-sessions-graph # Conflicts: # packages/js/src/dashboard/widgets/top-queries-widget.js

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

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

vraja-pro · 2025-03-05T09:58:29Z

ACC 🚧 : 2k?

Co-authored-by: Vraja Das <[email protected]>

vraja-pro · 2025-03-05T11:44:15Z

CR & AC ✅

Add Organic Sessions widget

2d4e5da

igorschoester added the changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog label Feb 25, 2025

github-actions bot added the merge conflict label Feb 26, 2025

vraja-pro added 4 commits February 26, 2025 17:00

Merge remote-tracking branch 'origin/trunk' into 411-implement-organi…

e24b710

…c-sessions-graph

use dashboard error alert

a293a3f

fix chart height

7e2b332

fix fonts size and weight

a7c62d5

github-actions bot removed the merge conflict label Feb 26, 2025

vraja-pro added 2 commits February 26, 2025 18:33

adjust chart label styling and size

ea51682

align y ticks to the title

cb87370

vraja-pro marked this pull request as ready for review February 26, 2025 16:38

vraja-pro added 12 commits February 27, 2025 11:49

fix widget title

4cf9ecd

fix title fix title remove console.log

tests: OrganicSessionsChange

b3cd14b

add tests to daily organic sessions

43bac68

fix info tooltip location

33adf85

dd condition to organic sessions in the widget factory

50b6a4c

mock canvas for daily chart

ceae3bb

move the no data message one layer up

33a151b

change the skeleton and chart size

when pending there is no data

d2ca2ef

In there is no daily data there wouldn't be change data.

change the gradient to match the graph size

25c5492

gradient size

refactor tests

b5f564d

wip tests

3f4d58e

remove uncompleted test

fc51eab

thijsoo requested changes Feb 28, 2025

View reviewed changes

igorschoester commented Feb 28, 2025

View reviewed changes

packages/js/src/dashboard/widgets/organic-sessions/daily.js Outdated Show resolved Hide resolved

igorschoester added 3 commits March 3, 2025 14:14

Fix formula

5643a14

Abstract no data paragraph

ebe7e14

Abstract difference percentage

fcdcf4c

igorschoester added 9 commits March 4, 2025 11:47

Refactor left alignment of the chart

0bba2b6

Remove internal space instead

Internal refactor: use single Layout

c845e53

Rename: Change to Compare

301d9e9

Cleanup test warnings

7723442

Check if Analytics is connected

5f350c0

Refactor difference

f5ca986

Should show 0 without a difference if we receive invalid input Not show a difference when: * there is no actual difference * dividing by zero

Remove daily session from formatter

2eab5c8

Add data formatter test cases

7b8c4df

Fix accidental Greek letter

c7b3929

github-actions bot added the merge conflict label Mar 4, 2025

igorschoester added 3 commits March 4, 2025 14:27

Format Y-axis

0577289

Add more internal documentation

Merge branch 'trunk' of github.com:Yoast/wordpress-seo into 411-imple…

d3b6b1c

…ment-organic-sessions-graph # Conflicts: # packages/js/src/dashboard/widgets/top-queries-widget.js

github-actions bot removed the merge conflict label Mar 4, 2025

vraja-pro reviewed Mar 5, 2025

View reviewed changes

packages/js/src/dashboard/transformers/difference.js Outdated Show resolved Hide resolved

vraja-pro reviewed Mar 5, 2025

View reviewed changes

packages/js/src/dashboard/widgets/organic-sessions-widget.js Outdated Show resolved Hide resolved

igorschoester and others added 4 commits March 5, 2025 11:43

Fix name

499060c

Fix copy

f63190e

Co-authored-by: Vraja Das <[email protected]>

Remove format from Y-axis

1dd0405

fix lint

bebd593

vraja-pro added this to the 24.8 milestone Mar 5, 2025

vraja-pro merged commit 9399097 into trunk Mar 5, 2025
37 checks passed

vraja-pro deleted the 411-implement-organic-sessions-graph branch March 5, 2025 11:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Organic Sessions widget #22073

Add Organic Sessions widget #22073

igorschoester commented Feb 25, 2025 •

edited

Loading

coveralls commented Feb 25, 2025 •

edited

Loading

github-actions bot commented Feb 26, 2025

thijsoo left a comment

thijsoo Feb 28, 2025

igorschoester Mar 4, 2025 •

edited

Loading

github-actions bot commented Mar 4, 2025

vraja-pro commented Mar 5, 2025

vraja-pro commented Mar 5, 2025

Add Organic Sessions widget #22073

Add Organic Sessions widget #22073

Conversation

igorschoester commented Feb 25, 2025 • edited Loading

Context

Summary

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

Relevant test scenarios

Test instructions for QA when the code is in the RC

Impact check

UI changes

Other environments

Documentation

Quality assurance

Innovation

coveralls commented Feb 25, 2025 • edited Loading

Pull Request Test Coverage Report for Build 62731220764544d87392c8a83cf17b2eb8246908

Warning: This coverage report may be inaccurate.

Details

💛 - Coveralls

github-actions bot commented Feb 26, 2025

thijsoo left a comment

Choose a reason for hiding this comment

thijsoo Feb 28, 2025

Choose a reason for hiding this comment

igorschoester Mar 4, 2025 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Mar 4, 2025

vraja-pro commented Mar 5, 2025

vraja-pro commented Mar 5, 2025

igorschoester commented Feb 25, 2025 •

edited

Loading

coveralls commented Feb 25, 2025 •

edited

Loading

igorschoester Mar 4, 2025 •

edited

Loading