All Traffic pie chart tooltip is too far away to click link

[wpdarren]

Bug Description

For the new All Traffic pie chart, the tooltip is displayed slightly away from the slice. So, when you move your mouse to go over the tooltip to click on the link, it closes. In the example below the blue slice doesn't have a link but if it did I would not be able to click it. I suspect it might also depend on the screen size.

Steps to reproduce

1. Go to 'Dashboard' and scroll to the new pie chart
2. Click on a Slice and observe position of tooltips

Screenshots

---

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

Acceptance criteria

• The All Traffic widget pie chart slice tooltips should always overlap their respective pie slice so that the user can move their cursor over there without leaving the pie slice, which would have the tooltip disappear, i.e. make it unreachable.
  • This might be hard to reproduce consistently, please check in different browsers.
• The "Others" tooltip should no longer include a link. It should instead have a text (different per tab / dimension name):
  • See the full list of channels in Analytics
  • See the full list of locations in Analytics
  • See the full list of devices in Analytics

Implementation Brief

• Add the following code before the render in GoogleChartV2:

if ( dimensionValue?.length ) {
	options.tooltip.trigger = 'selection';
} else {
	options.tooltip.trigger = 'focus';
}

Test Coverage

• N/A

Visual Regression Changes

QA Brief

• Click a pie slice.
• After the slice is selected, you should be able to move the mouse outside the slice and the tooltip should stay visible. This means you can select it.
• This should work on a browser window with a viewport larger than 1400px wide.

Changelog entry

• Show All Traffic pie chart tooltips persistently when a slice is selected to allow interaction with the tooltip, which would not be possible when hovering.

[tofumatt]

This component will use the new GoogleChartV2 component, so marking it as blocked by that issue.

[tofumatt]

I a fair bit of time today going through Google Chart issues in GitHub/Google Code archives, Stack Overflow, etc.

Unfortunately this seems to be an issue with Google Charts that we can't resolve ourselves, if we want to maintain the hover/focus state only.

One thing to note is that this problem is especially bad on wider screens, because the chart is set to a width of 100%:

But even on smaller screens or with the width of the chart locked to a max of 260px, the problem persists. It's still possible to mouse over sections inside the chart and have the legend be unclickable:

---

The issue is that the tooltip: { trigger: 'focus' } setting we use hides the tooltip as soon as the user moves their mouse outside the pie slice, even if the tooltip is still underneath the mouse cursor. There's no way around this with CSS because it's a JavaScript event and doesn't seem straightforward to override. Even if we did: it'd be hacky and not future-proof.

The only way to fix this is to change the trigger to "selection" instead of focus. Then the tooltip stays for as long as the dimensionValue is selected. The trade-off is that hover states are disabled while a value is selected and the tooltip stays visible for the whole time:

But I think that's the best, most flexible solution, so it's what I've proposed in the IB.

[felixarntz]

@tofumatt Given the circumstances, I think this is a quite elegant solution - let's try that! We should ensure this doesn't modify anything about the "Others" slice though, which has logic to not really make it selectable. IB ✅

[felixarntz]

@tofumatt I'll assign to you since that probably makes most sense as you've already spent considerable time in this and the V2 component.

[wpdarren]

QA Update: Fail ❌

@tofumatt This works fine for every other slice other than those that has a link in the tooltip, i.e. others etc. Right now, you cannot click on the others slice to make it active so that tooltip remains in the chart. This is due to the issue reported here where you mentioned this is expected behaviour, but it does not resolve the issue here.

Here's a screencast

Screen.Capture.on.2021-02-25.at.22-10-41.mov

[felixarntz]

@wpdarren @tofumatt Just discussed this with Mariya, and I've added a new point to the ACs on this issue to get rid of the link in the "Others" tooltip.

We just need to exchange the link for regular text based on the ACs.

[felixarntz]

@aaemnnosttv Opened #2878 to address the above, ready for review.

[aaemnnosttv]

#2878 is merged now. Back to you @wpdarren for another pass 👍

[wpdarren]

QA Update: Fail ❌

@felixarntz @aaemnnosttv I'm afraid that this solution does not fix the problem.

On first load of the pie chart, if I hover over the others then the appropriate tooltip appears, and all is good.

But, if you select another slice first, e.g. organic search and then try and then hover over others no tooltip appears.

This is because the others slice is no longer selectable.

You can see that in action on this screencast.

Screen.Capture.on.2021-02-26.at.08-25-46.mov

[felixarntz]

@wpdarren This is expected behavior now:

• The "Others" slice should never be selectable.
• The only way to see the "Others" slice tooltip should be to hover over the slice.
• Hovering over any slice only shows the tooltip though when no other slice is currently selected, to avoid the potential of two tooltips overlapping each other. This is the situation in your screencast.

Can you confirm this is the current behavior? If so, it should be good to go.

[wpdarren]

@felixarntz this is the current behaviour, so since this is expected, I will move this on.

QA Update: Pass ✅

• After the slice is selected, you can move the mouse outside the slice and the tooltip stays visible.
• The "Others" slice is not selectable.
• The only way to see the "Others" slice tooltip is to hover over the slice.