UX/UI Improvement for Pie Chart Feature on the New All Traffic Module

[wpdarren]

Bug Description

This is a UI improvement suggestion. For the New All Traffic module on Site Kit Dashboard. On the pie chart, select a slice, and then change the date selection to another period, i.e. 90 days. The module reloads and the correct number of users is displayed for that slice, but it is no longer selected. It would be good to see the slice continued to be highlighted so the user knows the user stats are related to that slice on first look.

Steps to reproduce

1. Go to The New Analytics module on the Site Kit Dashboard
2. Click on a slice within the pie chart for any dimension.
3. The number of users changes.
4. Change the date selection to 90 days
5. The page reloads with the new stats for Users but slice is not selected.

Screenshots

---

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

Acceptance criteria

• When changing the date range for the current page (e.g. on the Site Kit dashboard), if a specific pie slice in the All Traffic widget is currently selected, the visual cue for the slice being selected (i.e. the thin border around that slice) should still be visible.
  • Currently, while the graph displayed for the pie slice remains the same as expected, the slice itself is no longer visually selected. That's what needs to be fixed here.

Implementation Brief

• When a section of the pie chart is selected (

  site-kit-wp/assets/js/modules/analytics/components/dashboard/DashboardAllTrafficWidgetV2/UserDimensionsPieChart.js

  Line 80 in 562423f

  chartData.onSelect = global.google.visualization.events.addListener( chart, 'select', () => {

  ), store the selected value in the FORM_ALL_TRAFFIC_WIDGET as a value (eg. selectedRow or something similar). Equally when the selection is cleared, set the selectedRow to undefined)
• Select that value from the data store at the top of UserDimensionsPieChart using const selectedRow = useSelect( ( select ) => select( CORE_FORMS ).getValue( FORM_ALL_TRAFFIC_WIDGET, 'selectedRow' ) );
• If selectedRow is not undefined in the chart's onReady callback (

  site-kit-wp/assets/js/modules/analytics/components/dashboard/DashboardAllTrafficWidgetV2/UserDimensionsPieChart.js

  Lines 74 to 79 in 6e2aa51

  	setChartLoaded( true );
  	const chartData = GoogleChart.charts.get( 'user-dimensions-pie-chart' );
  	const { chart, onSelect } = chartData || {};
  	const { slices } = UserDimensionsPieChart.chartOptions;

  ), set the selected row, eg:

if ( selectedRow !== undefined ) {
	chart.setSelection( [ { row: selectedRow } ] );
}

Ensure that you check for undefined, not just truthiness, as the selected row index could be 0.

Test Coverage

• This could be a good candidate for an E2E test with related component interacting, but it'd likely be a lot of effort and worth a follow-up issue.

Visual Regression Changes

• There should not be any VRT changes.

QA Brief

• When selecting a section of the pie chart, then changing the date range, the pie chart should stay selected, eg:

Changelog entry

• Fix bug with All Traffic widget where selected pie slice would no longer remain selected when changing the current date range.

[aaemnnosttv]

IB ✅

[ivankruchkoff]

The fix for this may also address and close out #2660

[cole10up]

QA ❌

This passed using Chrome but Failed using Safari

Steps:

1. Using a fresh Safari browser session with my personal site
2. Reset, deactivated and deleted the prior version installed
3. Installed, activated and setup the latest release candidate zip
4. Setup the Analytics module and navigated to the dashboard

Notice the following:

Sending back to CR to adjust for Safari @tofumatt

[eugene-manuilov]

Hm... i can't reproduce it on my end. @tofumatt do you have Safari? I am on Ubuntu and don't have it. Could you please try it on your end?

[tofumatt]

@cole10up Can you go to the same site and click in the exact order as you did in the GIF with Chrome? I couldn't reproduce that issue in Safari, but from how it's coded and the data I'm seeing in your GIF that shouldn't be a browser-specific issue unless the order of the chart data isn't consistent.

Can you check to see if that exact approach happens in Chrome too? The chart selection is pretty spotty in general and something we need to fix (see #2714), so I'm wondering if that's what's happening here…

[felixarntz]

@cole10up @tofumatt I think overall this UX improvement is not super critical for the functionality of the widget, and we already have #2714 in place to fix these inconsistent failures. Unless there is a broader issue where e.g. we'd select the wrong slice or display incorrect data, I think we can wave this through for the release. We should be strict when testing #2714 - the only reason we're not doing that one now is that it will involve a lot more time to explore than we have right now.

[tofumatt]

So, after testing this out locally with the data set provided by @cole10up, turns out this isn't actually a bug with the implementation of this feature, but of how the colours are displayed/chosen by the charts library/component. It caused us to think the selection was being changed in different date ranges because the colour changed. But take a look at the value selected in this GIF:

The value stays the same and the selection is correct, but the colour-changing makes for a very confusing UX. We should maybe make the values consistent between selections, but that's outside the scope of this issue. So I think the QA here is actually good 😆

[tofumatt]

(@cole10up confirmed QA was otherwise good, so we're set! 👍🏻 )