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

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

@@ -8,18 +8,34 @@
 
 import { LegendItemLabel } from '../../../../state/selectors/get_legend_items_labels';
 import { Layer } from '../../specs';
-import { CHILDREN_KEY, HIERARCHY_ROOT_KEY, HierarchyOfArrays } from './group_by_rollup';
+import {
+  CHILDREN_KEY,
+  HIERARCHY_ROOT_KEY,
+  HierarchyOfArrays,
+  PATH_KEY,
+  ArrayNode,
+  NULL_SMALL_MULTIPLES_KEY,
+} from './group_by_rollup';
 
 /** @internal */
 export function getLegendLabels(layers: Layer[], tree: HierarchyOfArrays, legendMaxDepth: number) {
   return flatSlicesNames(layers, 0, tree).filter(({ depth }) => depth <= legendMaxDepth);
 }
 
+/** @internal */
+export function getArrayNodeKey(arrayNode: ArrayNode): string {
+  return arrayNode[PATH_KEY].reduce<string>((acc, { value, index }) => {
+    if (value === HIERARCHY_ROOT_KEY || value === NULL_SMALL_MULTIPLES_KEY) return acc;
+    return `${acc}(${index}):${value}__`;
+  }, '__');
+}
+
 function flatSlicesNames(
   layers: Layer[],
   depth: number,
   tree: HierarchyOfArrays,
-  keys: Map<string, number> = new Map(),
+  keys: Map<string, string> = new Map(),
+  depths: Map<string, number> = new Map(),
 ): LegendItemLabel[] {
   if (tree.length === 0) {
     return [];
@@ -32,15 +48,19 @@ function flatSlicesNames(
     const formattedValue = formatter ? formatter(key) : `${key}`;
     // preventing errors from external formatters
     if (formattedValue && formattedValue !== HIERARCHY_ROOT_KEY) {
+      // Node key must be unique for each node in the tree
+      const nodeKey = getArrayNodeKey(arrayNode);
       // 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));
+      depths.set(nodeKey, depth);
+      keys.set(nodeKey, formattedValue);
     }
 
     const children = arrayNode[CHILDREN_KEY];
-    flatSlicesNames(layers, depth + 1, children, keys);
+    flatSlicesNames(layers, depth + 1, children, keys, depths);
   }
-  return [...keys.keys()].map((k) => ({
-    label: k,
-    depth: keys.get(k) ?? 0,
+
+  return [...depths.keys()].map((key) => ({
+    label: keys.get(key) ?? '',
+    depth: depths.get(key) ?? 0,
   }));
 }

packages/charts/src/chart_types/partition_chart/partition.test.tsx

@@ -52,7 +52,13 @@ describe('Retain hierarchy even with arbitrary names', () => {
     it('all distinct labels are present', () => {
       MockStore.addSpecs([MockGlobalSpec.settings({ showLegend: true }), MockSeriesSpec.sunburst(specJSON)], store);
       expect(getLegendItemsLabels(store.getState()).sort(ascByLabel)).toEqual([
+        { depth: 1, label: 'A' },
         { depth: 2, label: 'A' },
+        { depth: 2, label: 'A' },
+        { depth: 2, label: 'A' },
+        { depth: 2, label: 'B' },
+        { depth: 1, label: 'B' },
+        { depth: 2, label: 'B' },
         { depth: 2, label: 'B' },
         { depth: 1, label: 'C' },
       ]);
@@ -79,7 +85,10 @@ describe('Retain hierarchy even with arbitrary names', () => {
         ],
         store,
       );
-      expect(getLegendItemsLabels(store.getState())).toEqual([{ depth: 2, label: 'A' }]);
+      expect(getLegendItemsLabels(store.getState())).toEqual([
+        { depth: 1, label: 'A' },
+        { depth: 2, label: 'A' },
+      ]);
     });
 
     it('special case: one input, two labels', () => {

packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_labels.test.ts

@@ -95,6 +95,10 @@ describe('Partition - Legend items labels', () => {
         depth: 1,
         label: 'bbb',
       },
+      {
+        depth: 2,
+        label: 'aa',
+      },
       {
         depth: 3,
         label: '7',
@@ -103,6 +107,10 @@ describe('Partition - Legend items labels', () => {
         depth: 3,
         label: '8',
       },
+      {
+        depth: 2,
+        label: 'bb',
+      },
       {
         depth: 3,
         label: '9',
@@ -165,6 +173,14 @@ describe('Partition - Legend items labels', () => {
         depth: 1,
         label: 'bbb',
       },
+      {
+        depth: 2,
+        label: 'aa',
+      },
+      {
+        depth: 2,
+        label: 'bb',
+      },
       {
         depth: 2,
         label: 'cc',

storybook/stories/test_cases/9_duplicate_labels_in_partition_legend.story.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+import { Chart, Partition, PartitionLayout, Settings } from '@elastic/charts';
+
+import { useBaseTheme } from '../../use_base_theme';
+
+export const Example = () => {
+  return (
+    <Chart>
+      <Settings
+        showLegend
+        baseTheme={useBaseTheme()}
+        legendStrategy="nodeWithDescendants"
+        legendMaxDepth={1} // testing this option
+      />
+      <Partition
+        id="spec_1"
+        data={[{ g1: 1, g2: 'a', v: 2 }]}
+        layout={PartitionLayout.sunburst}
+        valueAccessor={(d) => d.v}
+        layers={[
+          {
+            groupByRollup: (d: any) => d.g1,
+            nodeLabel: () => 'Testing a super duper really long legend',
+            shape: {
+              fillColor: () => '#90E0EF',
+            },
+          },
+          {
+            groupByRollup: (d: any) => d.g2,
+            nodeLabel: () => 'Testing a super duper really long legend',
+            shape: {
+              fillColor: () => '#00B4D8',
+            },
+          },
+        ]}
+      />
+    </Chart>
+  );
+};

storybook/stories/test_cases/test_cases.stories.tsx

@@ -18,3 +18,4 @@ export { Example as legendScrollBarSizing } from './5_legend_scroll_bar_sizing.s
 export { Example as accessibilityCustomizations } from './6_a11y_custom_description.story';
 export { Example as rtlText } from './7_rtl_text.story';
 export { Example as testPointsOutsideOfDomain } from './8_test_points_outside_of_domain.story';
+export { Example as duplicateLabelsInPartitionLegend } from './9_duplicate_labels_in_partition_legend.story';