Bug Description

As you can see from the screencast. I select 7 days and then Organic search: the segment of the pie chart is purple. I then select 14 days. The Organic search segment is still selected, which is great but the colour has changed to Yellow. This is not a regression but I noticed it while testing 4590. It occurs in previous versions of the plugin.

Steps to reproduce

Follow the instructions above and watch screencast.

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

Acceptance Criteria

• The pie chart consistently uses the same color for the same label across all date ranges (e.g., "Direct" is always the same color).

• Changing the date range should not affect the pie chart and legend colors, which should stay consistent across any date range being selected.

Implementation Brief

Note: You can refer this POC PR for implementation: #11082

• Introduce a utility hook useLabelColorMap in assets/js/modules/analytics-4/components/dashboard/DashboardAllTrafficWidgetGA4/ for assigning consistent colors to pie chart slices based on labels.
  • Define a constant PIE_CHART_COLORS array representing the fixed color palette.
  • Use a useRef to track a mutable labelColorMap (label → color) across renders.
  • Use another useRef to track which colors are already used.
  • Implement getColorForLabel(label) to:
    • Return an existing color if the label is already mapped.
    • Otherwise, assign the next unused color from the palette.
• In assets/js/modules/analytics-4/components/dashboard/DashboardAllTrafficWidgetGA4/UserDimensionsPieChart.js
  • Use getColorForLabel to generate options.slices dynamically.
  • Iterate over the dataMap (excluding header row).
  • For each label, assign a consistent color using getColorForLabel.
  • Assign the resulting slices object to options.slices.
  • Build a labelMetaMap to represent legend metadata for each label.
    • Extract the user count value for each label from report.rows[i].metricValues[0].value.
    • Include label, color, index, and value in each entry.
    • Sort the labelMetaMap array in descending order of value.
  • Render the chart legend using the sorted labelMetaMap.
    • Use the existing Site Kit <Link> component for each legend item.
    • Apply appropriate class names to reflect active selection and “Others” handling.
    • Set the legend dot and underlay background colors using the assigned slice color.
    • Trigger onLegendClick(index) on legend item click, unless disabled.
  • Remove legacy logic and cleanup:
    • Delete any static slice color definitions from chartOptions.slices.
    • Ensure color and label matching is handled entirely within the utility hook during runtime.

Test Coverage

• Fix any failing tests and VRTs.
• Add tests for the new hook useLabelColorMap.

QA Brief

• Verify that the All Traffic widget's pie chart values retain the same colour across the chart and legend when switching date ranges.

Changelog entry

• Improve legend color consistency in the Analytics all traffic widget.