diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/test-rect-border-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/test-rect-border-chrome-linux.png index 85088e62159..a2c353a458c 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/test-rect-border-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/bar-chart/test-rect-border-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/interactions/sunburst-slice-clicks-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/interactions/sunburst-slice-clicks-chrome-linux.png index 86ea3b0d748..3067efa13d0 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/interactions/sunburst-slice-clicks-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/interactions/sunburst-slice-clicks-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/mosaic-alpha/simple-mosaic-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/mosaic-alpha/simple-mosaic-chrome-linux.png index 4cacd3e2163..f6bcc2418fd 100644 Binary files a/e2e/screenshots/all.test.ts-snapshots/baselines/mosaic-alpha/simple-mosaic-chrome-linux.png and b/e2e/screenshots/all.test.ts-snapshots/baselines/mosaic-alpha/simple-mosaic-chrome-linux.png differ diff --git a/e2e/screenshots/all.test.ts-snapshots/baselines/test-cases/duplicate-labels-in-partition-legend-chrome-linux.png b/e2e/screenshots/all.test.ts-snapshots/baselines/test-cases/duplicate-labels-in-partition-legend-chrome-linux.png new file mode 100644 index 00000000000..66fb73970fa Binary files /dev/null and b/e2e/screenshots/all.test.ts-snapshots/baselines/test-cases/duplicate-labels-in-partition-legend-chrome-linux.png differ diff --git a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-show-tooltip-on-sunburst-chrome-linux.png b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-show-tooltip-on-sunburst-chrome-linux.png index 63265a1df7a..67cb3ae9f5f 100644 Binary files a/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-show-tooltip-on-sunburst-chrome-linux.png and b/e2e/screenshots/interactions.test.ts-snapshots/interactions/tooltips/should-show-tooltip-on-sunburst-chrome-linux.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png index 86ea3b0d748..5acb1cdb209 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mosaic-alpha-simple-mosaic-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mosaic-alpha-simple-mosaic-visually-looks-correct-1-snap.png index 4cacd3e2163..fde1ab8e8d3 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mosaic-alpha-simple-mosaic-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-mosaic-alpha-simple-mosaic-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-duplicate-labels-in-partition-legend-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-duplicate-labels-in-partition-legend-visually-looks-correct-1-snap.png new file mode 100644 index 00000000000..8480f6b3706 Binary files /dev/null and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-test-cases-duplicate-labels-in-partition-legend-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png index 63265a1df7a..bdc9db8bf48 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png differ diff --git a/packages/charts/src/chart_types/partition_chart/layout/utils/legend_labels.ts b/packages/charts/src/chart_types/partition_chart/layout/utils/legend_labels.ts index 1a4cae5c9ef..6400e1cb554 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/utils/legend_labels.ts +++ b/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((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 = new Map(), + keys: Map = new Map(), + depths: Map = 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, })); } diff --git a/packages/charts/src/chart_types/partition_chart/partition.test.tsx b/packages/charts/src/chart_types/partition_chart/partition.test.tsx index 3c7ce6b9263..472cf061671 100644 --- a/packages/charts/src/chart_types/partition_chart/partition.test.tsx +++ b/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', () => { diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_labels.test.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_labels.test.ts index c7222e9854c..b1b29b5e3f3 100644 --- a/packages/charts/src/chart_types/partition_chart/state/selectors/get_legend_items_labels.test.ts +++ b/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', diff --git a/storybook/stories/test_cases/9_duplicate_labels_in_partition_legend.story.tsx b/storybook/stories/test_cases/9_duplicate_labels_in_partition_legend.story.tsx new file mode 100644 index 00000000000..e0bb92d4fcc --- /dev/null +++ b/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 ( + + + 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', + }, + }, + ]} + /> + + ); +}; diff --git a/storybook/stories/test_cases/test_cases.stories.tsx b/storybook/stories/test_cases/test_cases.stories.tsx index 3f841650055..ded3c6aa982 100644 --- a/storybook/stories/test_cases/test_cases.stories.tsx +++ b/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';