feat(legend): expose legend extra configuration

e2e/tests/interactions.test.ts

@@ -256,7 +256,7 @@ test.describe('Interactions', () => {
       );
     });
 
-    test('show synced extra values in legend', async ({ page }) => {
+    test('show synced values in legend', async ({ page }) => {
       await common.expectChartWithMouseAtUrlToMatchScreenshot(page)(
         'http://localhost:9001/?path=/story/interactions--cursor-update-action&knob-Series type_Top Chart=line&knob-enable external tooltip_Top Chart=true&knob-Series type_Bottom Chart=line&knob-enable external tooltip_Bottom Chart=false&knob-pointer update debounce=0',
         { right: 200, top: 80 },

e2e/tests/legend_stories.test.ts

@@ -41,13 +41,13 @@ test.describe('Legend stories', () => {
 
   test('should correctly render multiline nested legend labels', async ({ page }) => {
     await common.expectChartAtUrlToMatchScreenshot(page)(
-      'http://localhost:9001/?path=/story/legend--piechart&globals=background:white;theme:light&knob-Hide color picker=true&knob-Hide color picker_Legend=true&knob-Legend position=right&knob-Legend position_Legend=right&knob-max legend label lines=0&knob-Number of series=5&knob-Popover position=leftCenter&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-legend buffer value=80&knob-legend margins=20&knob-long label text_Legend=Non do aliqua veniam dolore ipsum eu aliquip. Culpa in duis amet non velit qui non ullamco sit adipisicing. Ut sunt Lorem mollit exercitation deserunt officia sunt ipsum eu amet.&knob-multiline Legend labels=true&knob-vAlign_Legend=bottom&knob-Partition Layout=sunburst&knob-flatLegend=&knob-showLegendExtra=&knob-legendMaxDepth=2&knob-legendStrategy=key',
+      'http://localhost:9001/?path=/story/legend--piechart&globals=background:white;theme:light&knob-Hide color picker=true&knob-Hide color picker_Legend=true&knob-Legend position=right&knob-Legend position_Legend=right&knob-max legend label lines=0&knob-Number of series=5&knob-Popover position=leftCenter&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-legend buffer value=80&knob-legend margins=20&knob-long label text_Legend=Non do aliqua veniam dolore ipsum eu aliquip. Culpa in duis amet non velit qui non ullamco sit adipisicing. Ut sunt Lorem mollit exercitation deserunt officia sunt ipsum eu amet.&knob-multiline Legend labels=true&knob-vAlign_Legend=bottom&knob-Partition Layout=sunburst&knob-flatLegend=&knob-legendValue=none&knob-legendMaxDepth=2&knob-legendStrategy=key',
     );
   });
 
   test('should correctly render very long multiline legend labels', async ({ page }) => {
     await common.expectChartAtUrlToMatchScreenshot(page)(
-      'http://localhost:9001/?path=/story/legend--legend-spacing-buffer&knob-Hide color picker=true&knob-Hide color picker_Legend=true&knob-Legend position=right&knob-Legend position_Legend=right&knob-Number of series=5&knob-Partition Layout=sunburst&knob-Popover position=leftCenter&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-flatLegend=true&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-legend buffer value=80&knob-legend margins=20&knob-legendMaxDepth=3&knob-legendStrategy=key&knob-long label text_Legend=Non do aliqua veniam dolore ipsum eu aliquip. Culpa in duis amet non velit qui non ullamco sit adipisicing. Ut sunt Lorem mollit exercitation deserunt officia sunt ipsum eu amet.&knob-max legend label lines=0&knob-showLegendExtra=true&knob-use long labels=true&knob-vAlign_Legend=bottom',
+      'http://localhost:9001/?path=/story/legend--legend-spacing-buffer&knob-Hide color picker=true&knob-Hide color picker_Legend=true&knob-Legend position=right&knob-Legend position_Legend=right&knob-Number of series=5&knob-Partition Layout=sunburst&knob-Popover position=leftCenter&knob-Popover position_Legend=leftCenter&knob-Series with long name=3&knob-direction_Legend=vertical&knob-flatLegend=true&knob-floating columns_Legend=2&knob-hAlign_Legend=right&knob-legend buffer value=80&knob-legend margins=20&knob-legendMaxDepth=3&knob-legendStrategy=key&knob-long label text_Legend=Non do aliqua veniam dolore ipsum eu aliquip. Culpa in duis amet non velit qui non ullamco sit adipisicing. Ut sunt Lorem mollit exercitation deserunt officia sunt ipsum eu amet.&knob-max legend label lines=0&knob-legendValue=lastBucket&knob-use long labels=true&knob-vAlign_Legend=bottom',
     );
   });
 
@@ -184,21 +184,21 @@ test.describe('Legend stories', () => {
     });
   });
 
-  test.describe('Extra values', () => {
+  test.describe('Legend values', () => {
     pwEach.test([PartitionLayout.sunburst, PartitionLayout.treemap])(
-      (l) => `should display flat legend extra values on ${l}`,
+      (l) => `should display flat legend values on ${l}`,
       async (page, layout) => {
         await common.expectChartAtUrlToMatchScreenshot(page)(
-          `http://localhost:9001/?path=/story/legend--piechart&knob-Partition Layout=${layout}&knob-flatLegend=true&knob-showLegendExtra=true&knob-legendMaxDepth=2`,
+          `http://localhost:9001/?path=/story/legend--piechart&knob-Partition Layout=${layout}&knob-flatLegend=true&knob-legendValue=lastBucket&knob-legendMaxDepth=2`,
         );
       },
     );
 
     pwEach.test([PartitionLayout.sunburst, PartitionLayout.treemap])(
-      (l) => `should display nested legend extra values on ${l}`,
+      (l) => `should display nested legend values on ${l}`,
       async (page, layout) => {
         await common.expectChartAtUrlToMatchScreenshot(page)(
-          `http://localhost:9001/?path=/story/legend--piechart&knob-Partition Layout=${layout}&knob-flatLegend=false&knob-showLegendExtra=true&knob-legendMaxDepth=2`,
+          `http://localhost:9001/?path=/story/legend--piechart&knob-Partition Layout=${layout}&knob-flatLegend=false&knob-legendValue=lastBucket&knob-legendMaxDepth=2`,
         );
       },
     );

packages/charts/api/charts.api.md

@@ -662,7 +662,7 @@ export interface CustomLegendProps {
         label: CategoryLabel;
         seriesType?: SeriesType;
         pointStyle?: PointStyle;
-        extraValue?: PrimitiveValue;
+        value?: PrimitiveValue;
         isSeriesHidden?: boolean;
         onItemOverActon: () => void;
         onItemOutAction: () => void;
@@ -1623,6 +1623,7 @@ export interface LegendSpec {
     legendSize: number;
     legendSort?: SeriesCompareFn;
     legendStrategy?: LegendStrategy;
+    legendValue: 'none' | 'lastBucket' | 'lastInSeries' | 'avg' | 'min' | 'max' | 'sum';
     // (undocumented)
     onLegendItemClick?: LegendItemListener;
     // (undocumented)
@@ -1634,7 +1635,6 @@ export interface LegendSpec {
     // (undocumented)
     onLegendItemPlusClick?: LegendItemListener;
     showLegend: boolean;
-    showLegendExtra: boolean;
 }
 
 // @public (undocumented)
@@ -2453,7 +2453,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" | "rotation" | "ariaLabelHeadingLevel" | "ariaUseDefaultSummary" | "legendPosition" | "flatLegend" | "legendMaxDepth" | "legendSize" | "showLegend" | "showLegendExtra" | "baseTheme" | "rendering" | "animateData" | "externalPointerEvents" | "pointBuffer" | "resizeDebounce" | "pointerUpdateTrigger" | "brushAxis" | "minBrushDelta" | "allowBrushingLastHistogramBin", "ariaLabel" | "xDomain" | "ariaDescription" | "ariaDescribedBy" | "ariaLabelledBy" | "ariaTableCaption" | "theme" | "legendAction" | "legendColorPicker" | "legendStrategy" | "onLegendItemClick" | "customLegend" | "onLegendItemMinusClick" | "onLegendItemOut" | "onLegendItemOver" | "onLegendItemPlusClick" | "orderOrdinalBinsBy" | "debugState" | "onProjectionClick" | "onElementClick" | "onElementOver" | "onElementOut" | "onBrushEnd" | "onPointerUpdate" | "onRenderChange" | "onProjectionAreaChange" | "onAnnotationClick" | "pointerUpdateDebounce" | "roundHistogramBrushValues" | "noResults" | "legendSort", never>;
+export const settingsBuildProps: BuildProps<SettingsSpec, "id" | "chartType" | "specType", "debug" | "rotation" | "ariaLabelHeadingLevel" | "ariaUseDefaultSummary" | "legendPosition" | "flatLegend" | "legendMaxDepth" | "legendSize" | "showLegend" | "legendValue" | "baseTheme" | "rendering" | "animateData" | "externalPointerEvents" | "pointBuffer" | "resizeDebounce" | "pointerUpdateTrigger" | "brushAxis" | "minBrushDelta" | "allowBrushingLastHistogramBin", "ariaLabel" | "xDomain" | "ariaDescription" | "ariaDescribedBy" | "ariaLabelledBy" | "ariaTableCaption" | "theme" | "legendAction" | "legendColorPicker" | "legendStrategy" | "onLegendItemClick" | "customLegend" | "onLegendItemMinusClick" | "onLegendItemOut" | "onLegendItemOver" | "onLegendItemPlusClick" | "orderOrdinalBinsBy" | "debugState" | "onProjectionClick" | "onElementClick" | "onElementOver" | "onElementOut" | "onBrushEnd" | "onPointerUpdate" | "onRenderChange" | "onProjectionAreaChange" | "onAnnotationClick" | "pointerUpdateDebounce" | "roundHistogramBrushValues" | "noResults" | "legendSort", never>;
 
 // @public (undocumented)
 export type SettingsProps = ComponentProps<typeof Settings>;

packages/charts/src/chart_types/flame_chart/internal_chart_state.ts

@@ -9,7 +9,7 @@
 import { FlameWithTooltip } from './flame_chart';
 import { ChartType } from '..';
 import { DEFAULT_CSS_CURSOR } from '../../common/constants';
-import { LegendItemExtraValues } from '../../common/legend';
+import { LegendItemValues } from '../../common/legend';
 import { SeriesKey } from '../../common/series_id';
 import { InternalChartState } from '../../state/chart_state';
 import { InitStatus } from '../../state/selectors/get_internal_is_intialized';
@@ -28,7 +28,7 @@ export class FlameState implements InternalChartState {
   isChartEmpty = () => false;
   getLegendItemsLabels = () => [];
   getLegendItems = () => [];
-  getLegendExtraValues = () => new Map<SeriesKey, LegendItemExtraValues>();
+  getLegendValues = () => new Map<SeriesKey, LegendItemValues>();
   getPointerCursor = () => DEFAULT_CSS_CURSOR;
   getTooltipAnchor = () => ({ x: 0, y: 0, width: 0, height: 0 });
   isTooltipVisible = () => ({ visible: false, isExternal: false, displayOnly: false, isPinnable: false });

packages/charts/src/chart_types/goal_chart/state/chart_state.tsx

@@ -71,7 +71,7 @@ export class GoalState implements InternalChartState {
     return EMPTY_LEGEND_ITEM_LIST;
   }
 
-  getLegendExtraValues() {
+  getLegendValues() {
     return EMPTY_MAP;
   }
 

packages/charts/src/chart_types/heatmap/state/chart_state.tsx

@@ -78,7 +78,7 @@ export class HeatmapState implements InternalChartState {
     return getLegendItemsLabelsSelector(globalState);
   }
 
-  getLegendExtraValues() {
+  getLegendValues() {
     return EMPTY_MAP;
   }
 

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

@@ -32,6 +32,11 @@ export const computeLegendSelector = createCustomCachedSelector(
         isToggleable: true,
         path: [{ index: 0, value: label }],
         keys: [],
+        value: {
+          raw: null,
+          formatted: '',
+          legendSizingLabel: '',
+        },
       };
     });
   },

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

@@ -14,9 +14,9 @@ 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 ?? '' : ''}`,
+  (legendItems): LegendItemLabel[] =>
+    legendItems.map(({ label }) => ({
+      label: `${label}`,
       depth: 0,
     })),
 );

packages/charts/src/chart_types/metric/state/chart_state.tsx

@@ -31,7 +31,7 @@ export class MetricState implements InternalChartState {
   isChartEmpty = () => false;
   getLegendItems = () => EMPTY_LEGEND_LIST;
   getLegendItemsLabels = () => EMPTY_LEGEND_ITEM_LIST;
-  getLegendExtraValues = () => EMPTY_MAP;
+  getLegendValues = () => EMPTY_MAP;
   getPointerCursor = () => DEFAULT_CSS_CURSOR;
   isTooltipVisible = () => ({
     visible: false,