feat(legend): expose extra raw values (#2308)

This commit exposes both the formatted and the raw value in when used in the custom legend. 

BREAKING CHANGE: The `CustomLegend.item` now exposes both the `raw` and the `formatted` version of the extra value.

Author: markov00

packages/charts/api/charts.api.md

@@ -819,7 +819,10 @@ export interface CustomLegendProps {
         label: CategoryLabel;
         seriesType?: SeriesType;
         pointStyle?: PointStyle;
-        extraValue?: PrimitiveValue;
+        extraValue?: {
+            raw: PrimitiveValue;
+            formatted: string;
+        };
         isSeriesHidden?: boolean;
         onItemOverActon: () => void;
         onItemOutAction: () => void;

packages/charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts

@@ -117,8 +117,8 @@ export function getExtraValueMap(
     const [key, arrayNode] = branch;
     const { value, path, [CHILDREN_KEY]: children } = arrayNode;
     const values: LegendItemExtraValues = new Map();
-    const formattedValue = valueFormatter ? valueFormatter(value) : value;
-    values.set(key, formattedValue);
+    const formattedValue = valueFormatter ? valueFormatter(value) : `${value}`;
+    values.set(key, { formatted: formattedValue, raw: value });
     keys.set(path.map(({ index }) => index).join('__'), values);
     if (depth < maxDepth) getExtraValueMap(layers, valueFormatter, children, maxDepth, depth + 1, keys);
   }

packages/charts/src/chart_types/xy_chart/legend/legend.test.ts

@@ -22,11 +22,7 @@ import { computeSeriesDomainsSelector } from '../state/selectors/compute_series_
 import { getSeriesName } from '../utils/series';
 import { AxisSpec, BasicSeriesSpec, SeriesType } from '../utils/specs';
 
-const nullDisplayValue = {
-  raw: null,
-  formatted: '',
-  legendSizingLabel: '',
-};
+const nullDisplayValue = undefined;
 
 const spec1: BasicSeriesSpec = {
   chartType: ChartType.XYAxis,

packages/charts/src/chart_types/xy_chart/legend/legend.ts

@@ -135,11 +135,14 @@ export function computeLegend(
       isSeriesHidden,
       isItemHidden: hideInLegend,
       isToggleable: true,
-      defaultExtra: {
-        raw: itemValue,
-        formatted: formattedItemValue,
-        legendSizingLabel: formattedItemValue,
-      },
+      defaultExtra:
+        itemValue !== null
+          ? {
+              raw: itemValue,
+              formatted: formattedItemValue,
+              legendSizingLabel: formattedItemValue,
+            }
+          : undefined,
       path: [{ index: 0, value: seriesIdentifier.key }],
       keys: [specId, spec.groupId, yAccessor, ...series.splitAccessors.values()],
       pointStyle,
@@ -159,11 +162,14 @@ export function computeLegend(
         isSeriesHidden,
         isItemHidden: hideInLegend,
         isToggleable: true,
-        defaultExtra: {
-          raw: bandedItemValue,
-          formatted: bandedFormattedItemValue,
-          legendSizingLabel: bandedFormattedItemValue,
-        },
+        defaultExtra:
+          bandedItemValue !== null
+            ? {
+                raw: bandedItemValue,
+                formatted: bandedFormattedItemValue,
+                legendSizingLabel: bandedFormattedItemValue,
+              }
+            : undefined,
         path: [{ index: 0, value: seriesIdentifier.key }],
         keys: [specId, spec.groupId, yAccessor, ...series.splitAccessors.values()],
         pointStyle,

packages/charts/src/chart_types/xy_chart/tooltip/tooltip.ts

@@ -23,26 +23,13 @@ export const Y0_ACCESSOR_POSTFIX = ' - lower';
 export const Y1_ACCESSOR_POSTFIX = ' - upper';
 
 /** @internal */
-export function getLegendItemExtraValues(
-  tooltipValues: TooltipValue[],
-  defaultValue?: string,
-): Map<SeriesKey, LegendItemExtraValues> {
+export function getLegendItemExtraValues(tooltipValues: TooltipValue[]): Map<SeriesKey, LegendItemExtraValues> {
   const seriesTooltipValues = new Map<SeriesKey, LegendItemExtraValues>();
 
-  tooltipValues.forEach(({ formattedValue, seriesIdentifier, valueAccessor }) => {
-    const seriesValue = defaultValue || formattedValue;
+  tooltipValues.forEach(({ formattedValue, value, seriesIdentifier, valueAccessor }) => {
     const current: LegendItemExtraValues = seriesTooltipValues.get(seriesIdentifier.key) ?? new Map();
-    if (defaultValue) {
-      if (!current.has(BandedAccessorType.Y0)) {
-        current.set(BandedAccessorType.Y0, defaultValue);
-      }
-      if (!current.has(BandedAccessorType.Y1)) {
-        current.set(BandedAccessorType.Y1, defaultValue);
-      }
-    }
-
     if (valueAccessor === BandedAccessorType.Y0 || valueAccessor === BandedAccessorType.Y1) {
-      current.set(valueAccessor, seriesValue);
+      current.set(valueAccessor, { formatted: formattedValue, raw: value });
     }
     seriesTooltipValues.set(seriesIdentifier.key, current);
   });

packages/charts/src/common/legend.ts

@@ -43,4 +43,4 @@ export type LegendItem = {
 };
 
 /** @internal */
-export type LegendItemExtraValues = Map<LegendItemChildId, PrimitiveValue>;
+export type LegendItemExtraValues = Map<LegendItemChildId, { raw: PrimitiveValue; formatted: string }>;

packages/charts/src/components/legend/extra.tsx

@@ -13,7 +13,7 @@ import React from 'react';
  * @param extra
  * @param isSeriesHidden
  */
-export function renderExtra(extra: string | number) {
+export function renderExtra(extra: string) {
   return (
     <div className="echLegendItem__extra" title={`${extra}`}>
       {extra}

packages/charts/src/components/legend/legend_item.tsx

@@ -190,7 +190,7 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
       'echLegendItem--vertical': positionConfig.direction === LayoutDirection.Vertical,
     });
     const hasColorPicker = Boolean(colorPicker);
-    const extra = showExtra && getExtra(extraValues, item, totalItems);
+    const extra = showExtra ? getExtra(extraValues, item, totalItems) : null;
     const style: CSSProperties = flatLegend
       ? {}
       : {
@@ -225,7 +225,7 @@ export class LegendListItem extends Component<LegendItemProps, LegendItemState>
             onToggle={this.onLabelToggle(seriesIdentifiers)}
             isSeriesHidden={isSeriesHidden}
           />
-          {extra && !isSeriesHidden && renderExtra(extra)}
+          {extra && !isSeriesHidden && renderExtra(extra.formatted)}
           {Action && (
             <div className="echLegendItem__action">
               <Action series={seriesIdentifiers} color={color} label={label} />

packages/charts/src/components/legend/utils.ts

@@ -6,18 +6,27 @@
  * Side Public License, v 1.
  */
 
+import { PrimitiveValue } from '../../chart_types/partition_chart/layout/utils/group_by_rollup';
 import { LegendItemExtraValues, LegendItem } from '../../common/legend';
 
 /** @internal */
-export function getExtra(extraValues: Map<string, LegendItemExtraValues>, item: LegendItem, totalItems: number) {
+export function getExtra(
+  extraValues: Map<string, LegendItemExtraValues>,
+  item: LegendItem,
+  totalItems: number,
+): { raw: PrimitiveValue; formatted: string } | null {
   const { seriesIdentifiers, defaultExtra, childId, path } = item;
   // don't show extra if the legend item is associated with multiple series
   if (extraValues.size === 0 || seriesIdentifiers.length > 1 || !seriesIdentifiers[0]) {
-    return defaultExtra?.formatted ?? '';
+    return defaultExtra ? { formatted: `${defaultExtra.formatted ?? ''}`, raw: defaultExtra.raw } : null;
   }
   const [{ key }] = seriesIdentifiers;
   const extraValueKey = path.map(({ index }) => index).join('__');
   const itemExtraValues = extraValues.has(extraValueKey) ? extraValues.get(extraValueKey) : extraValues.get(key);
-  const actionExtra = childId !== undefined && itemExtraValues?.get(childId);
-  return actionExtra ?? (extraValues.size === totalItems ? defaultExtra?.formatted : null) ?? '';
+  const actionExtra = childId !== undefined ? itemExtraValues?.get(childId) : undefined;
+  return actionExtra
+    ? actionExtra
+    : extraValues.size === totalItems && defaultExtra
+      ? { formatted: `${defaultExtra.formatted ?? ''}`, raw: defaultExtra.raw }
+      : null;
 }

packages/charts/src/specs/settings.tsx

@@ -390,7 +390,7 @@ export interface CustomLegendProps {
     label: CategoryLabel;
     seriesType?: SeriesType;
     pointStyle?: PointStyle;
-    extraValue?: PrimitiveValue;
+    extraValue?: { raw: PrimitiveValue; formatted: string };
     isSeriesHidden?: boolean;
     onItemOverActon: () => void;
     onItemOutAction: () => void;