fix(partition): consider legendMaxDepth on legend size (#654)

The legend size in partition charts take in consideration the `legendMaxDepth` value if present.

fix #639

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

@@ -0,0 +1,197 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+import { MockStore } from '../../../../mocks/store';
+import { MockSeriesSpec, MockGlobalSpec } from '../../../../mocks/specs';
+import { getLegendItemsLabels } from './get_legend_items_labels';
+import { PrimitiveValue } from '../../layout/utils/group_by_rollup';
+import { Store } from 'redux';
+import { GlobalChartState } from '../../../../state/chart_state';
+
+describe('Partition - Legend items labels', () => {
+  type TestDatum = [string, string, string, number];
+  const spec = MockSeriesSpec.sunburst({
+    data: [
+      ['aaa', 'aa', '1', 1],
+      ['aaa', 'aa', '1', 2], // this should be filtered out
+      ['aaa', 'aa', '3', 1],
+      ['aaa', 'bb', '4', 1],
+      ['aaa', 'bb', '5', 1],
+      ['aaa', 'bb', '6', 1],
+      ['bbb', 'aa', '7', 1],
+      ['bbb', 'aa', '8', 1],
+      ['bbb', 'bb', '9', 1],
+      ['bbb', 'bb', '10', 1],
+      ['bbb', 'cc', '11', 1],
+      ['bbb', 'cc', '12', 1],
+    ],
+    valueAccessor: (d: TestDatum) => d[3],
+    layers: [
+      {
+        groupByRollup: (datum: TestDatum) => datum[0],
+        nodeLabel: (d: PrimitiveValue) => String(d),
+      },
+      {
+        groupByRollup: (datum: TestDatum) => datum[1],
+        nodeLabel: (d: PrimitiveValue) => String(d),
+      },
+      {
+        groupByRollup: (datum: TestDatum) => datum[2],
+        nodeLabel: (d: PrimitiveValue) => String(d),
+      },
+    ],
+  });
+  let store: Store<GlobalChartState>;
+
+  beforeEach(() => {
+    store = MockStore.default();
+  });
+
+  it('no filter for no legendMaxDepth + filter duplicates', () => {
+    MockStore.addSpecs([spec], store);
+
+    const labels = getLegendItemsLabels(store.getState());
+    expect(labels).toEqual([
+      {
+        depth: 1,
+        label: 'aaa',
+      },
+      {
+        depth: 2,
+        label: 'aa',
+      },
+      {
+        depth: 3,
+        label: '1',
+      },
+      {
+        depth: 3,
+        label: '3',
+      },
+      {
+        depth: 2,
+        label: 'bb',
+      },
+      {
+        depth: 3,
+        label: '4',
+      },
+      {
+        depth: 3,
+        label: '5',
+      },
+      {
+        depth: 3,
+        label: '6',
+      },
+      {
+        depth: 1,
+        label: 'bbb',
+      },
+      {
+        depth: 3,
+        label: '7',
+      },
+      {
+        depth: 3,
+        label: '8',
+      },
+      {
+        depth: 3,
+        label: '9',
+      },
+      {
+        depth: 3,
+        label: '10',
+      },
+      {
+        depth: 2,
+        label: 'cc',
+      },
+      {
+        depth: 3,
+        label: '11',
+      },
+      {
+        depth: 3,
+        label: '12',
+      },
+    ]);
+  });
+
+  it('filters labels at the first layer', () => {
+    const settings = MockGlobalSpec.settings({ legendMaxDepth: 1 });
+    MockStore.addSpecs([settings, spec], store);
+
+    const labels = getLegendItemsLabels(store.getState());
+    expect(labels).toEqual([
+      {
+        depth: 1,
+        label: 'aaa',
+      },
+      {
+        depth: 1,
+        label: 'bbb',
+      },
+    ]);
+  });
+
+  it('filters labels at the second layer', () => {
+    const settings = MockGlobalSpec.settings({ legendMaxDepth: 2 });
+    MockStore.addSpecs([settings, spec], store);
+
+    const labels = getLegendItemsLabels(store.getState());
+    expect(labels).toEqual([
+      {
+        depth: 1,
+        label: 'aaa',
+      },
+      {
+        depth: 2,
+        label: 'aa',
+      },
+      {
+        depth: 2,
+        label: 'bb',
+      },
+      {
+        depth: 1,
+        label: 'bbb',
+      },
+      {
+        depth: 2,
+        label: 'cc',
+      },
+    ]);
+  });
+
+  it('filters all labels is depth is 0', () => {
+    const settings = MockGlobalSpec.settings({ legendMaxDepth: 0 });
+    MockStore.addSpecs([settings, spec], store);
+
+    const labels = getLegendItemsLabels(store.getState());
+    expect(labels).toEqual([]);
+  });
+  it('filters all labels is depth is NaN', () => {
+    const settings = MockGlobalSpec.settings({ legendMaxDepth: NaN });
+    MockStore.addSpecs([settings, spec], store);
+
+    const labels = getLegendItemsLabels(store.getState());
+    expect(labels).toEqual([]);
+  });
+});

src/chart_types/partition_chart/state/selectors/get_legend_items_labels.ts

@@ -24,18 +24,37 @@ import { HierarchyOfArrays, CHILDREN_KEY } from '../../layout/utils/group_by_rol
 import { Layer } from '../../specs';
 import { LegendItemLabel } from '../../../../state/selectors/get_legend_items_labels';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
+import { SettingsSpec } from '../../../../specs';
 
 /** @internal */
 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 (isInvalidLegendMaxDepth(legendMaxDepth)) {
+      return [];
+    }
+    const labels = flatSlicesNames(pieSpec.layers, 0, tree).filter(({ depth }) => {
+      if (typeof legendMaxDepth !== 'number') {
+        return true;
+      }
+      return depth <= legendMaxDepth;
+    });
+
+    return labels;
   },
 )(getChartIdSelector);
 
+/**
+ * Check if the legendMaxDepth from settings is not a valid number (NaN or <=0)
+ * @param legendMaxDepth - SettingsSpec['legendMaxDepth']
+ */
+function isInvalidLegendMaxDepth(legendMaxDepth: SettingsSpec['legendMaxDepth']): boolean {
+  return typeof legendMaxDepth === 'number' && (Number.isNaN(legendMaxDepth) || legendMaxDepth <= 0);
+}
+
 function flatSlicesNames(
   layers: Layer[],
   depth: number,
@@ -45,6 +64,7 @@ function flatSlicesNames(
   if (tree.length === 0) {
     return [];
   }
+
   for (let i = 0; i < tree.length; i++) {
     const branch = tree[i];
     const arrayNode = branch[1];
@@ -57,9 +77,11 @@ function flatSlicesNames(
     if (key != null) {
       formattedValue = formatter ? formatter(key) : `${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));
+    // preventing errors from external formatters
+    if (formattedValue != null && formattedValue !== '') {
+      // 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));
+    }
 
     const children = arrayNode[CHILDREN_KEY];
     flatSlicesNames(layers, depth + 1, children, keys);

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}