The "Audience overview for the last x days" widget on the Analytics module page should be refactored as a new component that is registered and rendered using the Widget API.

The existing component should be untouched and only be renamed, giving it a Legacy prefix.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• A new component ModuleOverviewWidget should be added in assets/js/modules/analytics/components/module/ModuleOverviewWidget.js.
• It should be implemented as a functional, hook-based, datastore-driven widget component that renders the existing "Audience overview for the last x days" block on the Analytics module page, in a refactored way.
  • In other words, it should replicate what the legacy AnalyticsDashboardWidgetOverview and AnalyticsDashboardWidgetSiteStats components display.
  • Sub-components can be implemented as necessary. If reusable, they should go into assets/js/modules/analytics/components/common. Otherwise (if specific to just this widget), they should go into a new assets/js/modules/analytics/components/module/ModuleOverviewWidget directory; in this case, the main widget component should go into the index.js file within that directory.
• The new component should be used to register a new widget in assets/js/modules/analytics/index.js (for testing, requires to enable the widgets.moduleScreens feature flag):
  • slug: analyticsModuleOverview
  • width: WIDGET_WIDTHS.FULL
  • priority: 1
  • wrapWidget: false (since it needs to render Widget manually to add the Header prop
  • widget area: AREA_MODULE_ANALYTICS_MAIN
• AnalyticsDashboardWidgetOverview and AnalyticsDashboardWidgetSiteStats should be renamed to have a Legacy* prefix added.

Hint: For the implementation it might be useful to look at AdSenseDashboardWidgetOverview and AdSenseDashboardWidgetSiteStats which have implemented a somewhat similar functionality. These components are not widget components, but they are already using the datastore, so for that parts they can be relevant inspiration.

Implementation Brief

• Implement requirements defined in the AC

Test Coverage

• N/A

Visual Regression Changes

• N/A

QA Brief

• Set up sitekit and tester plugins on your local;
• Activate and connect the Analytics module;
• Enable the widgets.moduleScreens feature in the tester plugin settings;
• Go to the Analytics module page and make sure that you see the new Audience Overview widget above the legacy one. It should look and work the same as the legacy one.

Changelog entry

• Migrate Analytics module page overview widget to use Widget API.