feat(legend): display pie chart legend extra

src/chart_types/partition_chart/state/chart_state.tsx

@@ -29,6 +29,7 @@ import { Partition } from '../renderer/canvas/partition';
 import { HighlighterFromHover } from '../renderer/dom/highlighter_hover';
 import { HighlighterFromLegend } from '../renderer/dom/highlighter_legend';
 import { computeLegendSelector } from './selectors/compute_legend';
+import { getLegendItemsExtra } from './selectors/get_legend_items_extra';
 import { getLegendItemsLabels } from './selectors/get_legend_items_labels';
 import { isTooltipVisibleSelector } from './selectors/is_tooltip_visible';
 import { createOnElementClickCaller } from './selectors/on_element_click_caller';
@@ -37,8 +38,6 @@ import { createOnElementOverCaller } from './selectors/on_element_over_caller';
 import { getPieSpec } from './selectors/pie_spec';
 import { getTooltipInfoSelector } from './selectors/tooltip';
 
-const EMPTY_MAP = new Map();
-
 /** @internal */
 export class PartitionState implements InternalChartState {
   chartType = ChartTypes.Partition;
@@ -80,8 +79,8 @@ export class PartitionState implements InternalChartState {
     return computeLegendSelector(globalState);
   }
 
-  getLegendExtraValues() {
-    return EMPTY_MAP;
+  getLegendExtraValues(globalState: GlobalChartState) {
+    return getLegendItemsExtra(globalState);
   }
 
   chartRenderer(containerRef: BackwardRef, forwardStageRef: RefObject<HTMLCanvasElement>) {

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

@@ -57,13 +57,14 @@ export const computeLegendSelector = createCachedSelector(
 
     items.sort(compareTreePaths);
 
-    return items.map<LegendItem>(({ dataName, fillColor, depth }) => {
+    return items.map<LegendItem>(({ dataName, fillColor, depth, path }) => {
       const formatter = pieSpec.layers[depth - 1]?.nodeLabel ?? identity;
       return {
         color: fillColor,
         label: formatter(dataName),
         dataName,
         childId: dataName,
+        path,
         depth: forceFlatLegend ? 0 : depth - 1,
         seriesIdentifier: { key: dataName, specId: pieSpec.id },
       };

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

@@ -0,0 +1,86 @@
+/*
+ * 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 createCachedSelector from 're-reselect';
+
+import { LegendItemExtraValues } from '../../../../commons/legend';
+import { SeriesKey } from '../../../../commons/series_id';
+import { SettingsSpec } from '../../../../specs';
+import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
+import { HierarchyOfArrays, CHILDREN_KEY } from '../../layout/utils/group_by_rollup';
+import { PartitionSpec } from '../../specs';
+import { getPieSpec } from './pie_spec';
+import { getTree } from './tree';
+
+/** @internal */
+export const getLegendItemsExtra = createCachedSelector(
+  [getPieSpec, getSettingsSpecSelector, getTree],
+  (pieSpec, { legendMaxDepth }, tree): Map<SeriesKey, LegendItemExtraValues> => {
+    const legendExtraValues = new Map<SeriesKey, LegendItemExtraValues>();
+
+    if (!pieSpec) {
+      return legendExtraValues;
+    }
+    if (isInvalidLegendMaxDepth(legendMaxDepth)) {
+      return legendExtraValues;
+    }
+
+    return getExtraValueMap(pieSpec, tree);
+  },
+)(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);
+}
+
+/**
+ * Creates flat extra value map from nested key path
+ */
+function getExtraValueMap(
+  { layers, valueFormatter }: Pick<PartitionSpec, 'layers' | 'valueFormatter'>,
+  tree: HierarchyOfArrays,
+  keys: Map<SeriesKey, LegendItemExtraValues> = new Map(),
+): Map<SeriesKey, LegendItemExtraValues> {
+  if (tree.length === 0) {
+    return keys;
+  }
+
+  for (let i = 0; i < tree.length; i++) {
+    const branch = tree[i];
+    const [key, arrayNode] = branch;
+    const { value, path, [CHILDREN_KEY]: children } = arrayNode;
+
+    if (key != null) {
+      const values: LegendItemExtraValues = new Map();
+      const formattedValue = valueFormatter ? valueFormatter(value) : value;
+
+      values.set(key, formattedValue);
+      keys.set(path.join('__'), values);
+    }
+
+    getExtraValueMap({ layers, valueFormatter }, children, keys);
+  }
+  return keys;
+}

src/commons/legend.ts

@@ -20,14 +20,19 @@
 import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup';
 import { Color } from '../utils/commons';
 import { SeriesIdentifier } from './series_id';
+
 /** @internal */
-export type LegendItemChildId = string;
+export type LegendItemChildId = string | number;
 
 /** @internal */
 export type LegendItem = {
   seriesIdentifier: SeriesIdentifier;
   childId?: LegendItemChildId;
   depth?: number;
+  /**
+   * Path to iterm in hierarchical legend
+   */
+  path?: number[];
   color: Color;
   label: string;
   isSeriesHidden?: boolean;

src/components/legend/legend_item.tsx

@@ -215,7 +215,7 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
       'echLegendItem__extra--hidden': isItemHidden,
     });
     const hasColorPicker = Boolean(colorPicker);
-    const extra = getExtra(extraValues, item, totalItems);
+    const extra = showExtra && getExtra(extraValues, item, totalItems);
     const style = item.depth
       ? {
           marginLeft: LEGEND_HIERARCHY_MARGIN * (item.depth ?? 0),
@@ -244,7 +244,7 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
             onClick={this.handleLabelClick(seriesIdentifier)}
             isSeriesHidden={isSeriesHidden}
           />
-          {showExtra && extra && renderExtra(extra, isSeriesHidden)}
+          {extra && renderExtra(extra, isSeriesHidden)}
           {Action && (
             <div className="echLegendItem__action">
               <Action series={seriesIdentifier} color={color} label={label} />

src/components/legend/utils.ts

@@ -24,11 +24,13 @@ export function getExtra(extraValues: Map<string, LegendItemExtraValues>, item:
     seriesIdentifier: { key },
     defaultExtra,
     childId,
+    path,
   } = item;
   if (extraValues.size === 0) {
     return defaultExtra?.formatted ?? '';
   }
-  const itemExtraValues = extraValues.get(key);
+  const extraValueKey = path ? path.join('__') : key;
+  const itemExtraValues = extraValues.get(extraValueKey);
   const actionExtra = (childId && itemExtraValues?.get(childId)) ?? null;
   if (extraValues.size !== totalItems) {
     if (actionExtra != null) {

stories/legend/10_sunburst.tsx

@@ -35,6 +35,7 @@ import {
 
 export const Example = () => {
   const flatLegend = boolean('flatLegend', true);
+  const showLegendExtra = boolean('showLegendExtra', false);
   const legendMaxDepth = number('legendMaxDepth', 2, {
     min: 0,
     max: 3,
@@ -43,7 +44,13 @@ export const Example = () => {
 
   return (
     <Chart className="story-chart">
-      <Settings showLegend flatLegend={flatLegend} legendMaxDepth={legendMaxDepth} theme={STORYBOOK_LIGHT_THEME} />
+      <Settings
+        showLegend
+        showLegendExtra={showLegendExtra}
+        flatLegend={flatLegend}
+        legendMaxDepth={legendMaxDepth}
+        theme={STORYBOOK_LIGHT_THEME}
+      />
       <Partition
         id="spec_1"
         data={mocks.miniSunburst}