Update UserDimensionsPieChart to render an empty circle graphic when in "Zero Data" state

Feature Description

As mentioned in the Zero States Design Doc, the UserDimensionsPieChart should render an empty pie chart when Analytic’s hasZeroData() selector (#4673).

Populated Design

Proposed Zero State Design

It seems wasteful (and possibly buggy) to render a Google chart for this component. If straightforward, we should render a static, responsive SVG/element that mimics an empty, grey pie chart whenever Analytics is in a “Zero Data state” eg. select( MODULE_ANALYTICS ).hasZeroData() === true.

---

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

Acceptance criteria

• The changes for this issue should only happen when the zeroDataStates feature flag is enabled. #4726
• When select( MODULE_ANALYTICS ).hasZeroData() === true, assets/js/modules/analytics/components/dashboard/DashboardAllTrafficWidget/UserDimensionsPieChart.js should render an empty grey Pie Chart. See: https://www.figma.com/file/lPdnmgVoPqOEO82AMle9gH/Zero-State?node-id=435%3A2481
• It could be worth, briefly, exploring using Google Charts to render this pie chart programatically with no report data to show, but I suspect it might cause an error. Otherwise, this should be rendered using a component rendering an SVG/element (eg. a responsive representation of the empty pie chart, like in the Figma mockup).
• Other parts of this component’s redesign will be handled in another issue; this is specific to the Pie Chart rendering empty data.

Implementation Brief

• Implement the following only when the zeroDataStates feature flag is enabled.
• Export the empty chart icon from Figma and save it as assets/svg/icons/pie-chart-zero-data.svg.

Within assets/js/modules/analytics/components/dashboard/DashboardAllTrafficWidget/UserDimensionsPieChart.js:

• Import the new pie-chart-zero-data.svg icon as PieChartZeroData.
• Retrieve hasZeroData via useSelect -> select( MODULE_ANALYTICS ).hasZeroData().
• Replace the current unconditional rendering of GoogleChart with a conditional render. When hasZeroData is true, render the following, otherwise render GoogleChart as usual.

<div className="googlesitekit-widget--analyticsAllTraffic__chart-zero-data">
	<PieChartZeroData />
</div>

Within assets/sass/components/dashboard/_googlesitekit-dashboard-charts.scss:

• Add the class googlesitekit-widget--analyticsAllTraffic__chart-zero-data as follows:

.googlesitekit-widget--analyticsAllTraffic__chart-zero-data {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 368px;

	> svg {
		height: 300px;
		width: 300px;
	}
}

Test Coverage

• Add a new Zero Data (zeroDataStates enabled) variants to the All Traffic Widget stories in stories/module-analytics-components.stories.js.

QA Brief

Note: The empty chart is displayed using the colour #CCC, making use of the current palette.

• Connect Analytics using an account with zero data.
• Enable the zeroDataStates feature flag.
• Navigate to the Dashboard.
• Verify the empty chart is displayed as per the AC.
• Navigate to the Entity Dashboard.
• Verify the empty chart is displayed as per the AC.
• Verify the two new Zero Data (zeroDataStates enabled) Storybook stories display correctly:

Changelog entry

• Improve the zero state design in the All Traffic Widget.

[techanvil]

@techanvil re. the gathering data, yes, I ended up editing my comment after because I’d realised my mistake smile As for the out of scope point, sure will create a ticket for that. Thanks for looking at this!

No problem! Sorry I didn’t spot your edit, and thanks for creating the issue.

[wpdarren]

QA Update: ✅

Verified:

• For main dashboard: the empty chart is displayed as per the AC/Figma file.
• For entity dashboard: the empty chart is displayed as per the AC/Figma file.
• The two new Zero Data (zeroDataStates enabled) on Storybook display correctly.
• Checked with unifiedDashboard enabled and disabled.
• Checked on small screen sizes.

Screenshots