Use pie slice color for UserCountGraph chart line when one of the pie slices is selected

[felixarntz]

The UserCountGraph (see #2422) contextually may show data for a specific pie slice selected in the UserDimensionsPieChart (see #2425). One requirement there that was missed from the original Figma design (and, unrelated to that, also suggested by @tofumatt) is that the color of the graph line in that case should match the color of the selected pie slice.

---

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

Acceptance criteria

• When a specific pie slice in the new All Traffic widget is selected, the line graph in the same widget should have the same color as the slice.
• Only when no specific slice is selected, it should have its current blue color.
  • Note that, despite the Figma design, we should stick to using the line chart, as the chart library does not allow us to use the area chart style in the way we intend to.

Implementation Brief

• Update google chart onSelect listener in the UserDimensionsPieChart component to set the dimensionColor value along with the dimensionValue based on the selected pie slice. If a slice is unselected or the Others slice is selected reset the dimension color by passing an empty string.
• Update the handleTabUpdate callback in the DimensionTabs component to reset the dimensionColor value by assigning an empty string to it.
• Update the UserCountGraph component to select the current dimensionColor value from the forms datastore and use it as the current color for the graph or fallback to the hardcoded one if the dimensionColor is empty. (Colours are set here:

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

  Line 133 in 7ee258d

  colors: [ '#1a73e8' ],

  )

Test Coverage

• Not required.

Visual Regression Changes

• The user count graph should reflect the color of the selected pie slice in the user dimensions chart or fallback to the blue color if nothing or the Others is selected.

QA Brief

• Set up the plugin;
• Activate and connect the Analytics module;
• Go to the dashboard page and make sure that the user count graph uses the color of the selected pie slice in the user dimensions chart or the blue color when nothing or the Others is selected.

Changelog entry

• Modify new All Traffic widget so that the line chart always uses the same color indicated by the currently selected pie slice.

[tofumatt]

IB ✅

[wpdarren]

QA Update: Fail ❌

• On the Channel dimension tab, when I click the 'Other' slice the color of the graph changes correctly but the number of users doesn't update. In this case, the user total should be 1 but it's displaying the total users, 875

• On the Location dimension tab, when I click the 'Other' slice the color of the graph changes correctly but the number of users doesn't update. In this case, the user total should be 427 but it's displaying the total users, 875

[eugene-manuilov]

@wpdarren @johnPhillips if I remember correctly, the Others shouldn't be selectable and the user count graph should display the total number of users as it does when nothing is selected.

@johnPhillips could you please create a follow-up PR that reset the dimension color to an empty string when the others slice is selected? See how we do it for the dimensionValue variable.

[johnPhillips]

@eugene-manuilov @wpdarren I think I have managed to address this in #2666

[felixarntz]

@wpdarren @eugene-manuilov The Others slice shouldn't affect the graph. It should still be "normally" selectable so that it is highlighted and shows the tooltip until unselected, but it should never alter the line chart.

[wpdarren]

QA Update: Pass ✅

Verified: On the dashboard page the user count graph uses the color of the selected pie slice in the user dimensions chart or the blue color when nothing or the others is selected. Screenshots: Other screenshot - Slice color change

@felixarntz is there a reason why the 'others' slice in the chart should not be altered? From a user perspective, if I click the slice I am going to assume that the chart should be updated like the rest of the slices. Just wondering if this might create a few support tickets. I am happy to pass this based on the QAB but just wanted to understand why this decision was made.