fix(legend): width with duplicate nested pie slice labels

[nickofthyme]

Summary

fixes a bug returning a zero-width legend for identical legend labels using legendMaxDepth option.

Before

After

Details

The legend label logic in partition charts was understandably simplified to assume the formatted labels across all depths are unique. However, this simplification runs into issues whenever two or more labels across any layer or any depth are identical.

elastic-charts/packages/charts/src/chart_types/partition_chart/layout/utils/legend_labels.ts

Lines 34 to 37 in 185ab47

	if (formattedValue && formattedValue !== HIERARCHY_ROOT_KEY) {
	// save only the max depth, so we can compute the the max extension of the legend
	keys.set(formattedValue, Math.max(depth, keys.get(formattedValue) ?? 0));
	}

The logic above creates a keys Map to track the depths across layers and nodes using the formatted label as the key. So in the case where the label is the same for two separate layers (as pictured above), the depth count is incorrectly combined to 2.

// current
const legenLabels: LegendItemLabel[] = [
  {
    'label': 'Testing a super duper really long legend',
    'depth': 2
  }
]

For the current case, this becomes a problem when limiting the depth using legendMaxDepth in which the depth count is now incorrectly 2 and thus returns [] causing the legend width to be 0.

elastic-charts/packages/charts/src/chart_types/partition_chart/layout/utils/legend_labels.ts

Lines 14 to 16 in 185ab47

	export function getLegendLabels(layers: Layer[], tree: HierarchyOfArrays, legendMaxDepth: number) {
	return flatSlicesNames(layers, 0, tree).filter(({ depth }) => depth <= legendMaxDepth);
	}

The solution -- prevent label collisions using a key derived from the arrayNode.path returning all legend labels as a unique value in the labels array. So the example able would be separated into two where the first is at a depth of 1 and the second is at a depth of 2

// expected
const legenLabels: LegendItemLabel[] = [
  {
    'label': 'Testing a super duper really long legend',
    'depth': 1
  },
  {
    'label': 'Testing a super duper really long legend',
    'depth': 2
  }
]

I confirmed the functionality of the legend highlight strategy is working as expected with this unique label change.

Issues

fix #1584

Checklist

• The proper chart type label has been added (e.g. :xy, :partition)
• The proper feature labels have been added (e.g. :interactions, :axis)
• All related issues have been linked (i.e. closes #123, fixes #123)
• Unit tests have been added or updated to match the most common scenarios
• The proper documentation and/or storybook story has been added or updated
• The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)

[nickofthyme]

@markov00 can you review and approve this?

[markov00]

LGTM

[nickofthyme]

2 Playwright tests are failing only in the CI. Merging for now and will troubleshoot in a separate PR.