feat(legend): add legend stats (table view)

e2e/tests/legend_stories.test.ts

@@ -334,4 +334,52 @@ test.describe('Legend stories', () => {
       },
     );
   });
+  test.describe('Legend tabular data', () => {
+    const datasetKnob = (p1: string, p2: string) => `&globals=&knob-Dataset_Legend=${p1}&knob-dataset=${p2}`;
+    const getDatasetUrl = (p1: string, p2: string, others = '') => {
+      return `http://localhost:9001/?path=/story/legend--tabular-data${datasetKnob(p1, p2)}${others}`;
+    };
+
+    const legendPositionKnob = (position: string) => `&knob-Legend position_Legend=${position}`;
+
+    const getPositionUrl = (p1: string, others = '') => {
+      return `http://localhost:9001/?path=/story/legend--tabular-data${legendPositionKnob(p1)}${others}`;
+    };
+
+    const legendValueKnob = (values: string[]) => values.map((v, i) => `&knob-Legend Value_Legend[${i}]=${v}`).join('');
+    const getlegendValueUrl = (values: string[], others = '') => {
+      return `http://localhost:9001/?path=/story/legend--tabular-data${legendValueKnob(values)}${others}`;
+    };
+
+    pwEach.test<[string, string]>([
+      ['shortCopyDataset', 'short copy'],
+      ['longCopyDataset', 'long copy'],
+      ['defaultDataset', 'default'],
+    ])(
+      ([p2]) => `should correctly display ${p2} dataset`,
+      async (page, [p1, p2]) => {
+        await common.expectChartAtUrlToMatchScreenshot(page)(getDatasetUrl(p1, p2));
+      },
+    );
+
+    pwEach.test<string>(['right', 'left', 'top', 'bottom'])(
+      (p) => `should correctly display ${p} positon`,
+      async (page, p) => {
+        await common.expectChartAtUrlToMatchScreenshot(page)(getPositionUrl(p));
+      },
+    );
+
+    pwEach.test<string[]>([
+      ['median'],
+      ['currentAndLastValue', 'median'],
+      ['median', 'max', 'min', 'average', 'firstNonNullValue'],
+
+      ['median', 'max', 'min', 'average', 'firstNonNullValue', 'stdDeviation', 'firstValue', 'currentAndLastValue'],
+    ])(
+      (p) => `should correctly display ${p} values`,
+      async (page, p) => {
+        await common.expectChartAtUrlToMatchScreenshot(page)(getlegendValueUrl(p));
+      },
+    );
+  });
 });

packages/charts/api/charts.api.md

@@ -1817,6 +1817,7 @@ export type LegendItemListener = (series: SeriesIdentifier[]) => void;
 export type LegendItemValue = {
     value: PrimitiveValue;
     label: string;
+    type: LegendValue;
 };
 
 // @public (undocumented)
@@ -1854,6 +1855,7 @@ export interface LegendSpec {
     legendSize: number;
     legendSort?: SeriesCompareFn;
     legendStrategy?: LegendStrategy;
+    legendTitle?: string;
     legendValues: Array<LegendValue>;
     // (undocumented)
     onLegendItemClick?: LegendItemListener;
@@ -1892,7 +1894,6 @@ export interface LegendStyle {
 
 // @public (undocumented)
 export const LegendValue: Readonly<{
-    None: "none";
     CurrentAndLastValue: "currentAndLastValue";
     LastValue: "lastValue";
     LastNonNullValue: "lastNonNullValue";
@@ -2751,7 +2752,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" | "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>;
+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" | "legendTitle", never>;
 
 // @public (undocumented)
 export type SettingsProps = ComponentProps<typeof Settings>;

packages/charts/src/chart_types/partition_chart/__snapshots__/partition.test.tsx.snap

@@ -31,6 +31,7 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct
     "values": [
       {
         "label": "2",
+        "type": "value",
         "value": 2,
       },
     ],
@@ -68,6 +69,7 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct
     "values": [
       {
         "label": "1",
+        "type": "value",
         "value": 1,
       },
     ],
@@ -105,6 +107,7 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct
     "values": [
       {
         "label": "1",
+        "type": "value",
         "value": 1,
       },
     ],
@@ -138,6 +141,7 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct
     "values": [
       {
         "label": "2",
+        "type": "value",
         "value": 2,
       },
     ],
@@ -175,6 +179,7 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct
     "values": [
       {
         "label": "1",
+        "type": "value",
         "value": 1,
       },
     ],
@@ -212,6 +217,7 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct
     "values": [
       {
         "label": "1",
+        "type": "value",
         "value": 1,
       },
     ],
@@ -245,6 +251,7 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct
     "values": [
       {
         "label": "2",
+        "type": "value",
         "value": 2,
       },
     ],
@@ -282,6 +289,7 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct
     "values": [
       {
         "label": "1",
+        "type": "value",
         "value": 1,
       },
     ],
@@ -319,6 +327,7 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems all distinct
     "values": [
       {
         "label": "1",
+        "type": "value",
         "value": 1,
       },
     ],
@@ -357,6 +366,7 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems special case:
     "values": [
       {
         "label": "1",
+        "type": "value",
         "value": 1,
       },
     ],
@@ -394,6 +404,7 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems special case:
     "values": [
       {
         "label": "1",
+        "type": "value",
         "value": 1,
       },
     ],
@@ -432,6 +443,7 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems special case:
     "values": [
       {
         "label": "1",
+        "type": "value",
         "value": 1,
       },
     ],
@@ -469,6 +481,7 @@ exports[`Retain hierarchy even with arbitrary names getLegendItems special case:
     "values": [
       {
         "label": "1",
+        "type": "value",
         "value": 1,
       },
     ],

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

@@ -7,7 +7,7 @@
  */
 
 import { isMosaic, isSunburst, isTreemap, isWaffle } from './viewmodel';
-import { LegendItemExtraValues } from '../../../../common/legend';
+import { LegendItemExtraValues, LegendValue } from '../../../../common/legend';
 import { SeriesKey } from '../../../../common/series_id';
 import { Relation } from '../../../../common/text_utils';
 import { LegendPath } from '../../../../state/actions/legend';
@@ -118,7 +118,7 @@ export function getExtraValueMap(
     const { value, path, [CHILDREN_KEY]: children } = arrayNode;
     const values: LegendItemExtraValues = new Map();
     const label = valueFormatter ? valueFormatter(value) : `${value}`;
-    values.set(key, { label, value });
+    values.set(key, { label, value, type: LegendValue.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/partition_chart/state/selectors/compute_legend.ts

@@ -10,7 +10,7 @@ import { getPartitionSpecs } from './get_partition_specs';
 import { getTrees } from './tree';
 import { RGBATupleToString } from '../../../../common/color_library_wrappers';
 import { Colors } from '../../../../common/colors';
-import { LegendItem } from '../../../../common/legend';
+import { LegendItem, LegendValue } from '../../../../common/legend';
 import { SeriesIdentifier } from '../../../../common/series_id';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getLegendConfigSelector } from '../../../../state/selectors/get_legend_config_selector';
@@ -127,6 +127,7 @@ function walkTree(
             {
               value: node[AGGREGATE_KEY],
               label: valueFormatter(node[AGGREGATE_KEY]),
+              type: LegendValue.Value,
             },
           ],
         },

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

@@ -7,7 +7,7 @@
  */
 
 import { Color } from '../../../common/colors';
-import { LegendItem, LegendValue } from '../../../common/legend';
+import { LegendItem } from '../../../common/legend';
 import { SeriesKey, SeriesIdentifier } from '../../../common/series_id';
 import { SettingsSpec } from '../../../specs';
 import { isDefined, mergePartial } from '../../../utils/common';
@@ -16,7 +16,7 @@ import { getLegendCompareFn, SeriesCompareFn } from '../../../utils/series_sort'
 import { PointStyle, Theme } from '../../../utils/themes/theme';
 import { XDomain } from '../domains/types';
 import { isDatumFilled } from '../rendering/utils';
-import { getLegendValue } from '../state/utils/get_last_value';
+import { getLegendValues } from '../state/utils/get_legend_values';
 import { getAxesSpecForSpecId, getSpecsById } from '../state/utils/spec';
 import { Y0_ACCESSOR_POSTFIX, Y1_ACCESSOR_POSTFIX } from '../tooltip/tooltip';
 import { defaultTickFormatter } from '../utils/axis_utils';
@@ -109,7 +109,7 @@ export function computeLegend(
   const legendItems: LegendItem[] = [];
   const defaultColor = theme.colors.defaultVizColor;
 
-  const legendValueMode = settingsSpec.legendValues[0] ?? LegendValue.None;
+  const legendValues = settingsSpec.legendValues ?? [];
 
   dataSeries.forEach((series) => {
     const { specId, yAccessor } = series;
@@ -140,8 +140,7 @@ export function computeLegend(
 
     const pointStyle = getPointStyle(spec, theme);
 
-    const itemValue = getLegendValue(series, xDomain, legendValueMode, y1Accessor(series.stackMode));
-    const formattedItemValue = itemValue !== null ? formatter(itemValue) : '';
+    const legendValuesItems = getLegendValues(series, xDomain, legendValues, y1Accessor(series.stackMode), formatter);
 
     legendItems.push({
       depth: 0,
@@ -152,22 +151,19 @@ export function computeLegend(
       isSeriesHidden,
       isItemHidden: hideInLegend,
       isToggleable: true,
-      values:
-        itemValue !== null
-          ? [
-              {
-                value: itemValue,
-                label: formattedItemValue,
-              },
-            ]
-          : [],
+      values: legendValuesItems,
       path: [{ index: 0, value: seriesIdentifier.key }],
       keys: [specId, spec.groupId, yAccessor, ...series.splitAccessors.values()],
       pointStyle,
     });
     if (banded) {
-      const bandedItemValue = getLegendValue(series, xDomain, legendValueMode, y0Accessor(series.stackMode));
-      const bandedFormattedItemValue = bandedItemValue !== null ? formatter(bandedItemValue) : '';
+      const bandedLegendValuesItems = getLegendValues(
+        series,
+        xDomain,
+        legendValues,
+        y0Accessor(series.stackMode),
+        formatter,
+      );
 
       const labelY0 = getBandedLegendItemLabel(name, BandedAccessorType.Y0, postFixes);
       legendItems.push({
@@ -179,15 +175,7 @@ export function computeLegend(
         isSeriesHidden,
         isItemHidden: hideInLegend,
         isToggleable: true,
-        values:
-          bandedItemValue !== null
-            ? [
-                {
-                  value: bandedItemValue,
-                  label: bandedFormattedItemValue,
-                },
-              ]
-            : [],
+        values: bandedLegendValuesItems,
         path: [{ index: 0, value: seriesIdentifier.key }],
         keys: [specId, spec.groupId, yAccessor, ...series.splitAccessors.values()],
         pointStyle,
@@ -201,7 +189,6 @@ export function computeLegend(
     return defaultXYLegendSeriesSort(aDs, bDs);
   });
   const sortFn: SeriesCompareFn = settingsSpec.legendSort ?? legendSortFn;
-
   return groupBy(
     legendItems.sort((a, b) =>
       a.seriesIdentifiers[0] && b.seriesIdentifiers[0] ? sortFn(a.seriesIdentifiers[0], b.seriesIdentifiers[0]) : 0,

packages/charts/src/chart_types/xy_chart/state/utils/common.test.ts

@@ -134,7 +134,7 @@ describe('Type Checks', () => {
             specId: 'bars',
           },
         ],
-        values: [{ value: 6, label: '6.00' }],
+        values: [{ value: 6, label: '6.00', type: 'currentAndLastValue' }],
         isSeriesHidden: true,
         path: [],
         keys: [],
@@ -149,7 +149,7 @@ describe('Type Checks', () => {
             specId: 'bars',
           },
         ],
-        values: [{ value: 2, label: '2.00' }],
+        values: [{ value: 2, label: '2.00', type: 'currentAndLastValue' }],
         isSeriesHidden: true,
         path: [],
         keys: [],
@@ -169,7 +169,7 @@ describe('Type Checks', () => {
             specId: 'bars',
           },
         ],
-        values: [{ value: 6, label: '6.00' }],
+        values: [{ value: 6, label: '6.00', type: 'currentAndLastValue' }],
         isSeriesHidden: false,
         path: [],
         keys: [],
@@ -184,7 +184,7 @@ describe('Type Checks', () => {
             specId: 'bars',
           },
         ],
-        values: [{ value: 2, label: '2.00' }],
+        values: [{ value: 2, label: '2.00', type: 'currentAndLastValue' }],
         isSeriesHidden: true,
         path: [],
         keys: [],

packages/charts/src/chart_types/xy_chart/state/utils/get_last_value.ts → packages/charts/src/chart_types/xy_chart/state/utils/get_legend_values.ts

@@ -26,6 +26,29 @@ import { LegendValue } from '../../../../common/legend';
 import { ScaleType } from '../../../../scales/constants';
 import { XDomain } from '../../domains/types';
 import { DataSeries, DataSeriesDatum } from '../../utils/series';
+import { TickFormatter } from '../../utils/specs';
+
+/**
+ * This method return legend values from a DataSeries that correspond to the type of value requested.
+ * It in general compute the last, min, max, avg, sum of the value in a series.
+ * @internal
+ */
+export function getLegendValues(
+  series: DataSeries,
+  xDomain: XDomain,
+  types: LegendValue[],
+  valueAccessor: (d: DataSeriesDatum) => number | null,
+  formatter: TickFormatter<any> | ((tick: unknown) => string),
+) {
+  return types.map((type) => {
+    const value = getLegendValue(series, xDomain, type, valueAccessor);
+    return {
+      type,
+      label: typeof value === 'number' ? formatter(value) : '',
+      value,
+    };
+  });
+}
 
 /**
  * This method return a value from a DataSeries that correspond to the type of value requested.
@@ -80,7 +103,6 @@ export function getLegendValue(
     case LegendValue.DifferencePercent:
       return differencePercent(series.data, valueAccessor);
     default:
-    case LegendValue.None:
       return null;
   }
 }