feat(legend): select legend statistic value

packages/charts/api/charts.api.md

@@ -858,10 +858,7 @@ export interface CustomLegendProps {
         label: CategoryLabel;
         seriesType?: SeriesType;
         pointStyle?: PointStyle;
-        extraValue?: {
-            raw: PrimitiveValue;
-            formatted: string;
-        };
+        extraValue?: LegendItemValue;
         isSeriesHidden?: boolean;
         onItemOverActon: () => void;
         onItemOutAction: () => void;
@@ -1816,6 +1813,12 @@ export interface LegendColorPickerProps {
 // @public (undocumented)
 export type LegendItemListener = (series: SeriesIdentifier[]) => void;
 
+// @public (undocumented)
+export type LegendItemValue = {
+    value: PrimitiveValue;
+    label: string;
+};
+
 // @public (undocumented)
 export interface LegendLabelOptions {
     maxLines: number;
@@ -1851,6 +1854,7 @@ export interface LegendSpec {
     legendSize: number;
     legendSort?: SeriesCompareFn;
     legendStrategy?: LegendStrategy;
+    legendValues: Array<LegendValue>;
     // (undocumented)
     onLegendItemClick?: LegendItemListener;
     // (undocumented)
@@ -1862,7 +1866,6 @@ export interface LegendSpec {
     // (undocumented)
     onLegendItemPlusClick?: LegendItemListener;
     showLegend: boolean;
-    showLegendExtra: boolean;
 }
 
 // @public (undocumented)
@@ -1887,6 +1890,33 @@ export interface LegendStyle {
     verticalWidth: number;
 }
 
+// @public (undocumented)
+export const LegendValue: Readonly<{
+    None: "none";
+    CurrentAndLastValue: "currentAndLastValue";
+    LastValue: "lastValue";
+    LastNonNullValue: "lastNonNullValue";
+    Average: "average";
+    Median: "median";
+    Max: "max";
+    Min: "min";
+    FirstValue: "firstValue";
+    FirstNonNullValue: "firstNonNullValue";
+    Total: "total";
+    Count: "count";
+    DistinctCount: "distinctCount";
+    Variance: "variance";
+    StdDeviation: "stdDeviation";
+    Range: "range";
+    Difference: "difference";
+    DifferencePercent: "differencePercent";
+    Value: "value";
+    Percent: "percent";
+}>;
+
+// @public (undocumented)
+export type LegendValue = $Values<typeof LegendValue>;
+
 // @public
 export const LIGHT_BASE_COLORS: ChartBaseColors;
 
@@ -2708,7 +2738,7 @@ export const Settings: (props: SFProps<SettingsSpec, keyof (typeof settingsBuild
 // Warning: (ae-forgotten-export) The symbol "BuildProps" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
-export const settingsBuildProps: BuildProps<SettingsSpec, "id" | "chartType" | "specType", "debug" | "locale" | "rotation" | "baseTheme" | "rendering" | "animateData" | "externalPointerEvents" | "pointBuffer" | "pointerUpdateTrigger" | "brushAxis" | "minBrushDelta" | "allowBrushingLastHistogramBin" | "ariaLabelHeadingLevel" | "ariaUseDefaultSummary" | "dow" | "showLegend" | "legendPosition" | "showLegendExtra" | "legendMaxDepth" | "legendSize" | "flatLegend", "ariaDescription" | "ariaLabel" | "xDomain" | "theme" | "debugState" | "onProjectionClick" | "onElementClick" | "onElementOver" | "onElementOut" | "onBrushEnd" | "onPointerUpdate" | "onResize" | "onRenderChange" | "onWillRender" | "onProjectionAreaChange" | "onAnnotationClick" | "resizeDebounce" | "pointerUpdateDebounce" | "roundHistogramBrushValues" | "orderOrdinalBinsBy" | "noResults" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaTableCaption" | "legendStrategy" | "onLegendItemOver" | "onLegendItemOut" | "onLegendItemClick" | "onLegendItemPlusClick" | "onLegendItemMinusClick" | "legendAction" | "legendColorPicker" | "legendSort" | "customLegend", never>;
+export const settingsBuildProps: BuildProps<SettingsSpec, "id" | "chartType" | "specType", "debug" | "locale" | "rotation" | "baseTheme" | "rendering" | "animateData" | "externalPointerEvents" | "pointBuffer" | "pointerUpdateTrigger" | "brushAxis" | "minBrushDelta" | "allowBrushingLastHistogramBin" | "ariaLabelHeadingLevel" | "ariaUseDefaultSummary" | "dow" | "showLegend" | "legendPosition" | "legendValues" | "legendMaxDepth" | "legendSize" | "flatLegend", "ariaDescription" | "ariaLabel" | "xDomain" | "theme" | "debugState" | "onProjectionClick" | "onElementClick" | "onElementOver" | "onElementOut" | "onBrushEnd" | "onPointerUpdate" | "onResize" | "onRenderChange" | "onWillRender" | "onProjectionAreaChange" | "onAnnotationClick" | "resizeDebounce" | "pointerUpdateDebounce" | "roundHistogramBrushValues" | "orderOrdinalBinsBy" | "noResults" | "ariaLabelledBy" | "ariaDescribedBy" | "ariaTableCaption" | "legendStrategy" | "onLegendItemOver" | "onLegendItemOut" | "onLegendItemClick" | "onLegendItemPlusClick" | "onLegendItemMinusClick" | "legendAction" | "legendColorPicker" | "legendSort" | "customLegend", never>;
 
 // @public (undocumented)
 export type SettingsProps = ComponentProps<typeof Settings>;

packages/charts/src/chart_types/heatmap/state/selectors/compute_legend.ts

@@ -26,12 +26,14 @@ export const computeLegendSelector = createCustomCachedSelector(
       return {
         // the band label is considered unique by construction
         seriesIdentifiers: [{ key: label, specId: label }],
+        depth: 0,
         color,
         label,
         isSeriesHidden: deselectedDataSeries.some(({ key }) => key === label),
         isToggleable: true,
         path: [{ index: 0, value: label }],
         keys: [],
+        values: [],
       };
     });
   },

packages/charts/src/chart_types/heatmap/state/selectors/get_legend_items_labels.ts

@@ -14,9 +14,11 @@ import { getSettingsSpecSelector } from '../../../../state/selectors/get_setting
 /** @internal */
 export const getLegendItemsLabelsSelector = createCustomCachedSelector(
   [computeLegendSelector, getSettingsSpecSelector],
-  (legendItems, { showLegendExtra }): LegendItemLabel[] =>
-    legendItems.map(({ label, defaultExtra }) => ({
-      label: `${label}${showLegendExtra ? defaultExtra?.formatted ?? '' : ''}`,
-      depth: 0,
-    })),
+  (legendItems, { legendValues }): LegendItemLabel[] =>
+    legendItems.map(({ label, values }) => {
+      return {
+        label: `${label}${legendValues.length > 0 ? values[0]?.label ?? '' : ''}`,
+        depth: 0,
+      };
+    }),
 );