fix(partition): consider legendMaxDepth on legend size

On partition chart we should compute the legend size only for the elements actually rendered, so everything below the legendMaxDepth if used fix elastic#639
markov00 · Apr 28, 2020 · 500c5a3 · 500c5a3
1 parent f411771
commit 500c5a3
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/...all-stories-sunburst-sunburst-with-two-layers-visually-looks-correct-1-snap.png b/...all-stories-sunburst-sunburst-with-two-layers-visually-looks-correct-1-snap.png
diff --git a/integration/tests/all.test.ts b/integration/tests/all.test.ts
@@ -24,7 +24,7 @@ jest.mock('../../.storybook/theme_service.ts', () => ({
   switchTheme: () => undefined,
 }));
 
-const storyGroups = getStorybookInfo();
+const storyGroups = getStorybookInfo().filter(({ group }) => group === 'Sunburst');
 
 describe('Baseline Visual tests for all stories', () => {
   storyGroups.forEach(({ group, encodedGroup, stories }) => {

diff --git a/src/chart_types/partition_chart/state/selectors/get_legend_items_labels.ts b/src/chart_types/partition_chart/state/selectors/get_legend_items_labels.ts
@@ -29,10 +29,20 @@ import { getSettingsSpecSelector } from '../../../../state/selectors/get_setting
 export const getLegendItemsLabels = createCachedSelector(
   [getPieSpecOrNull, getSettingsSpecSelector, getTree],
   (pieSpec, { legendMaxDepth }, tree): LegendItemLabel[] => {
-    if (!pieSpec || (typeof legendMaxDepth === 'number' && legendMaxDepth <= 0)) {
+    if (!pieSpec) {
       return [];
     }
-    return flatSlicesNames(pieSpec.layers, 0, tree);
+    if (typeof legendMaxDepth === 'number' && (Number.isNaN(legendMaxDepth) || legendMaxDepth <= 0)) {
+      return [];
+    }
+    const labels = flatSlicesNames(pieSpec.layers, 0, tree).filter(({ depth }) => {
+      if (typeof legendMaxDepth !== 'number') {
+        return true;
+      }
+      return depth <= legendMaxDepth;
+    });
+
+    return labels;
   },
 )(getChartIdSelector);
 
@@ -45,6 +55,7 @@ function flatSlicesNames(
   if (tree.length === 0) {
     return [];
   }
+
   for (let i = 0; i < tree.length; i++) {
     const branch = tree[i];
     const arrayNode = branch[1];

diff --git a/stories/sunburst/8_sunburst_two_layers.tsx b/stories/sunburst/8_sunburst_two_layers.tsx
@@ -16,14 +16,15 @@
  * specific language governing permissions and limitations
  * under the License. */
 
-import { Chart, Datum, Partition, PartitionLayout } from '../../src';
+import { Chart, Datum, Partition, PartitionLayout, Settings } from '../../src';
 import { mocks } from '../../src/mocks/hierarchical/index';
 import { config } from '../../src/chart_types/partition_chart/layout/config/config';
 import React from 'react';
 import { countryLookup, indexInterpolatedFillColor, interpolatorCET2s, regionLookup } from '../utils/utils';
 
 export const example = () => (
   <Chart className="story-chart">
+    <Settings showLegend legendMaxDepth={1} />
     <Partition
       id="spec_1"
       data={mocks.sunburst}