fix: (Legend values) percentage formatter should be distict from tick…

… formatter (#2474)

* fix: fix % formatter for legend values and letter width to avoid unnecessary scroll

* revert bad code

* test(vrt): update screenshots [skip ci]

* remove test that is not removed

---------

Co-authored-by: elastic-datavis[bot] <98618603+elastic-datavis[bot]@users.noreply.github.com>

e2e/tests/legend_stories.test.ts

@@ -385,6 +385,8 @@ test.describe('Legend stories', () => {
 
     pwEach.test<string[]>([
       ['median'],
+      ['differencePercent'],
+      ['lastNonNullValue'],
       ['currentAndLastValue', 'median'],
       ['median', 'max', 'min', 'average', 'firstNonNullValue'],
 

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

@@ -38,18 +38,26 @@ export function getLegendValues(
   xDomain: XDomain,
   types: LegendValue[],
   valueAccessor: (d: DataSeriesDatum) => number | null,
-  formatter: TickFormatter<any> | ((tick: unknown) => string),
+  tickFormatter: TickFormatter<any> | ((tick: unknown) => string),
 ) {
   return types.map((type) => {
     const value = getLegendValue(series, xDomain, type, valueAccessor);
+    const formatter =
+      type === LegendValue.Percent || type === LegendValue.DifferencePercent ? percentFormatter : tickFormatter;
+    const label = typeof value === 'number' && isFinite(value) ? formatter(value) : '';
+
     return {
       type,
-      label: typeof value === 'number' ? formatter(value) : '',
+      label,
       value,
     };
   });
 }
 
+function percentFormatter(value: number) {
+  return `${(value * 100).toFixed(1)}%`;
+}
+
 /**
  * This method return a value 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.

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

@@ -8,6 +8,9 @@
 
 import { LegendItemExtraValues, LegendItem, LegendItemValue, LegendValue } from '../../common/legend';
 
+const findCurrentValue = (values: LegendItemValue[]) =>
+  values.find((v) => v.type === LegendValue.CurrentAndLastValue || v.type === LegendValue.Value);
+
 /** @internal */
 export function getExtra(
   extraValues: Map<string, LegendItemExtraValues>,
@@ -17,15 +20,11 @@ export function getExtra(
   const { seriesIdentifiers, values, 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 values.find((v) => v.type === LegendValue.CurrentAndLastValue || v.type === LegendValue.Value);
+    return findCurrentValue(values);
   }
   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) : undefined;
-  return actionExtra
-    ? actionExtra
-    : extraValues.size === totalItems
-      ? values.find((v) => v.type === LegendValue.CurrentAndLastValue || v.type === LegendValue.Value)
-      : undefined;
+  return actionExtra ? actionExtra : extraValues.size === totalItems ? findCurrentValue(values) : undefined;
 }

packages/charts/src/state/selectors/get_legend_table_size.ts

@@ -21,7 +21,7 @@ import { isDefined, LayoutDirection } from '../../utils/common';
 import { Dimensions } from '../../utils/dimensions';
 import { Theme } from '../../utils/themes/theme';
 
-const MONO_LETTER_WIDTH = 7.8;
+const MONO_LETTER_WIDTH = 8.5;
 const MONO_SEPARATOR_WIDTH = 4.5;
 
 const SCROLL_BAR_WIDTH = 16; // ~1em
@@ -74,7 +74,7 @@ export function getLegendTableSize(
   const { legendSize, legendValues, legendPosition, legendAction } = config;
 
   const { width: titleWidth, height } = textMeasure(config.legendTitle || '', ...headerFontArgs);
-  const valuesTitlesWidth = legendValues.map((v) => textMeasure(legendValueTitlesMap[v], ...fontArgs).width);
+  const valuesTitlesWidth = legendValues.map((v) => textMeasure(legendValueTitlesMap[v], ...headerFontArgs).width);
 
   const widestLabelWidth = items.reduce(
     (acc, { label }) => Math.max(acc, textMeasure(label, ...fontArgs).width),

packages/charts/src/utils/data_samples/test_dataset.ts

@@ -168,10 +168,10 @@ export const SHORT_NAMES_BARCHART = [
   { x: 0, g: 'b', y: 1 },
   { x: 0, g: 'c', y: 3 },
   { x: 0, g: 'd', y: 3 },
-  { x: 1, g: 'e', y: 2 },
-  { x: 1, g: 'f', y: 2 },
-  { x: 1, g: 'g', y: 2 },
-  { x: 1, g: 'h', y: 2 },
+  { x: 1, g: 'e', y: null },
+  { x: 1, g: 'f', y: null },
+  { x: 1, g: 'g', y: null },
+  { x: 1, g: 'h', y: null },
   { x: 2, g: 'i', y: 10 },
   { x: 2, g: 'j', y: 10 },
   { x: 2, g: 'k', y: 3 },

storybook/stories/legend/17_tabular_data.story.tsx

@@ -53,6 +53,7 @@ const datasets: Record<'defaultDataset' | 'shortCopyDataset' | 'longCopyDataset'
   },
   longCopyDataset: {
     ...defaultDataset,
+    stackAccessors: ['x'],
     data: TestDatasets.LONG_NAMES_BARCHART_2Y2G,
   },
 };