diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-current-and-last-value-median-values-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-current-and-last-value-median-values-chrome-linux.png index fa79ee96e8..1c1b1584ef 100644 Binary files a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-current-and-last-value-median-values-chrome-linux.png and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-current-and-last-value-median-values-chrome-linux.png differ diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-difference-percent-values-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-difference-percent-values-chrome-linux.png new file mode 100644 index 0000000000..4ffe444369 Binary files /dev/null and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-difference-percent-values-chrome-linux.png differ diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-last-non-null-value-values-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-last-non-null-value-values-chrome-linux.png new file mode 100644 index 0000000000..503a166343 Binary files /dev/null and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-last-non-null-value-values-chrome-linux.png differ diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-long-copy-dataset-dataset-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-long-copy-dataset-dataset-chrome-linux.png index 6a5d78b465..5d851e176e 100644 Binary files a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-long-copy-dataset-dataset-chrome-linux.png and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-long-copy-dataset-dataset-chrome-linux.png differ diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-median-values-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-median-values-chrome-linux.png index 2bebbc05a4..05a304fa77 100644 Binary files a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-median-values-chrome-linux.png and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-median-values-chrome-linux.png differ diff --git a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-short-copy-dataset-dataset-chrome-linux.png b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-short-copy-dataset-dataset-chrome-linux.png index 698c602977..f9f0b35c09 100644 Binary files a/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-short-copy-dataset-dataset-chrome-linux.png and b/e2e/screenshots/legend_stories.test.ts-snapshots/legend-stories/legend-tabular-data/should-correctly-display-short-copy-dataset-dataset-chrome-linux.png differ diff --git a/e2e/tests/legend_stories.test.ts b/e2e/tests/legend_stories.test.ts index 610f657d33..8a30aab930 100644 --- a/e2e/tests/legend_stories.test.ts +++ b/e2e/tests/legend_stories.test.ts @@ -385,6 +385,8 @@ test.describe('Legend stories', () => { pwEach.test([ ['median'], + ['differencePercent'], + ['lastNonNullValue'], ['currentAndLastValue', 'median'], ['median', 'max', 'min', 'average', 'firstNonNullValue'], diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/get_legend_values.ts b/packages/charts/src/chart_types/xy_chart/state/utils/get_legend_values.ts index 9ebcd207f1..b5694526b6 100644 --- a/packages/charts/src/chart_types/xy_chart/state/utils/get_legend_values.ts +++ b/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 | ((tick: unknown) => string), + tickFormatter: TickFormatter | ((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. diff --git a/packages/charts/src/components/legend/utils.ts b/packages/charts/src/components/legend/utils.ts index 6944a2b16a..9a15c96291 100644 --- a/packages/charts/src/components/legend/utils.ts +++ b/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, @@ -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; } diff --git a/packages/charts/src/state/selectors/get_legend_table_size.ts b/packages/charts/src/state/selectors/get_legend_table_size.ts index dbcc552f60..80e3711114 100644 --- a/packages/charts/src/state/selectors/get_legend_table_size.ts +++ b/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), diff --git a/packages/charts/src/utils/data_samples/test_dataset.ts b/packages/charts/src/utils/data_samples/test_dataset.ts index de75d424f7..f66f1f9807 100644 --- a/packages/charts/src/utils/data_samples/test_dataset.ts +++ b/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 }, diff --git a/storybook/stories/legend/17_tabular_data.story.tsx b/storybook/stories/legend/17_tabular_data.story.tsx index fc92f99a6e..1d5b49ee0c 100644 --- a/storybook/stories/legend/17_tabular_data.story.tsx +++ b/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, }, };