From 85bfe0668d66fd24e78f2bba8be4570fa926e94c Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 24 Jan 2024 09:46:42 +0100 Subject: [PATCH] feat(legend): expose extra raw values (#2308) This commit exposes both the formatted and the raw value in when used in the custom legend. BREAKING CHANGE: The `CustomLegend.item` now exposes both the `raw` and the `formatted` version of the extra value. --- packages/charts/api/charts.api.md | 5 +++- .../layout/viewmodel/hierarchy_of_arrays.ts | 4 +-- .../xy_chart/legend/legend.test.ts | 6 +---- .../src/chart_types/xy_chart/legend/legend.ts | 26 ++++++++++++------- .../chart_types/xy_chart/tooltip/tooltip.ts | 19 +++----------- packages/charts/src/common/legend.ts | 2 +- .../charts/src/components/legend/extra.tsx | 2 +- .../src/components/legend/legend_item.tsx | 4 +-- .../charts/src/components/legend/utils.ts | 17 +++++++++--- packages/charts/src/specs/settings.tsx | 2 +- 10 files changed, 44 insertions(+), 43 deletions(-) diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md index 65f4f4e22c..da56e0d464 100644 --- a/packages/charts/api/charts.api.md +++ b/packages/charts/api/charts.api.md @@ -819,7 +819,10 @@ export interface CustomLegendProps { label: CategoryLabel; seriesType?: SeriesType; pointStyle?: PointStyle; - extraValue?: PrimitiveValue; + extraValue?: { + raw: PrimitiveValue; + formatted: string; + }; isSeriesHidden?: boolean; onItemOverActon: () => void; onItemOutAction: () => void; diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts index 779a254146..40e2fdcf08 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts @@ -117,8 +117,8 @@ export function getExtraValueMap( const [key, arrayNode] = branch; const { value, path, [CHILDREN_KEY]: children } = arrayNode; const values: LegendItemExtraValues = new Map(); - const formattedValue = valueFormatter ? valueFormatter(value) : value; - values.set(key, formattedValue); + const formattedValue = valueFormatter ? valueFormatter(value) : `${value}`; + values.set(key, { formatted: formattedValue, raw: value }); keys.set(path.map(({ index }) => index).join('__'), values); if (depth < maxDepth) getExtraValueMap(layers, valueFormatter, children, maxDepth, depth + 1, keys); } diff --git a/packages/charts/src/chart_types/xy_chart/legend/legend.test.ts b/packages/charts/src/chart_types/xy_chart/legend/legend.test.ts index 6061c1d45b..7b169e54da 100644 --- a/packages/charts/src/chart_types/xy_chart/legend/legend.test.ts +++ b/packages/charts/src/chart_types/xy_chart/legend/legend.test.ts @@ -22,11 +22,7 @@ import { computeSeriesDomainsSelector } from '../state/selectors/compute_series_ import { getSeriesName } from '../utils/series'; import { AxisSpec, BasicSeriesSpec, SeriesType } from '../utils/specs'; -const nullDisplayValue = { - raw: null, - formatted: '', - legendSizingLabel: '', -}; +const nullDisplayValue = undefined; const spec1: BasicSeriesSpec = { chartType: ChartType.XYAxis, diff --git a/packages/charts/src/chart_types/xy_chart/legend/legend.ts b/packages/charts/src/chart_types/xy_chart/legend/legend.ts index f94c39984f..fa3d6c68ec 100644 --- a/packages/charts/src/chart_types/xy_chart/legend/legend.ts +++ b/packages/charts/src/chart_types/xy_chart/legend/legend.ts @@ -135,11 +135,14 @@ export function computeLegend( isSeriesHidden, isItemHidden: hideInLegend, isToggleable: true, - defaultExtra: { - raw: itemValue, - formatted: formattedItemValue, - legendSizingLabel: formattedItemValue, - }, + defaultExtra: + itemValue !== null + ? { + raw: itemValue, + formatted: formattedItemValue, + legendSizingLabel: formattedItemValue, + } + : undefined, path: [{ index: 0, value: seriesIdentifier.key }], keys: [specId, spec.groupId, yAccessor, ...series.splitAccessors.values()], pointStyle, @@ -159,11 +162,14 @@ export function computeLegend( isSeriesHidden, isItemHidden: hideInLegend, isToggleable: true, - defaultExtra: { - raw: bandedItemValue, - formatted: bandedFormattedItemValue, - legendSizingLabel: bandedFormattedItemValue, - }, + defaultExtra: + bandedItemValue !== null + ? { + raw: bandedItemValue, + formatted: bandedFormattedItemValue, + legendSizingLabel: bandedFormattedItemValue, + } + : undefined, path: [{ index: 0, value: seriesIdentifier.key }], keys: [specId, spec.groupId, yAccessor, ...series.splitAccessors.values()], pointStyle, diff --git a/packages/charts/src/chart_types/xy_chart/tooltip/tooltip.ts b/packages/charts/src/chart_types/xy_chart/tooltip/tooltip.ts index dc5760fd70..c079823e65 100644 --- a/packages/charts/src/chart_types/xy_chart/tooltip/tooltip.ts +++ b/packages/charts/src/chart_types/xy_chart/tooltip/tooltip.ts @@ -23,26 +23,13 @@ export const Y0_ACCESSOR_POSTFIX = ' - lower'; export const Y1_ACCESSOR_POSTFIX = ' - upper'; /** @internal */ -export function getLegendItemExtraValues( - tooltipValues: TooltipValue[], - defaultValue?: string, -): Map { +export function getLegendItemExtraValues(tooltipValues: TooltipValue[]): Map { const seriesTooltipValues = new Map(); - tooltipValues.forEach(({ formattedValue, seriesIdentifier, valueAccessor }) => { - const seriesValue = defaultValue || formattedValue; + tooltipValues.forEach(({ formattedValue, value, seriesIdentifier, valueAccessor }) => { const current: LegendItemExtraValues = seriesTooltipValues.get(seriesIdentifier.key) ?? new Map(); - if (defaultValue) { - if (!current.has(BandedAccessorType.Y0)) { - current.set(BandedAccessorType.Y0, defaultValue); - } - if (!current.has(BandedAccessorType.Y1)) { - current.set(BandedAccessorType.Y1, defaultValue); - } - } - if (valueAccessor === BandedAccessorType.Y0 || valueAccessor === BandedAccessorType.Y1) { - current.set(valueAccessor, seriesValue); + current.set(valueAccessor, { formatted: formattedValue, raw: value }); } seriesTooltipValues.set(seriesIdentifier.key, current); }); diff --git a/packages/charts/src/common/legend.ts b/packages/charts/src/common/legend.ts index f67c8253f3..91308df8e8 100644 --- a/packages/charts/src/common/legend.ts +++ b/packages/charts/src/common/legend.ts @@ -43,4 +43,4 @@ export type LegendItem = { }; /** @internal */ -export type LegendItemExtraValues = Map; +export type LegendItemExtraValues = Map; diff --git a/packages/charts/src/components/legend/extra.tsx b/packages/charts/src/components/legend/extra.tsx index d24a9fc07d..cad6e492b5 100644 --- a/packages/charts/src/components/legend/extra.tsx +++ b/packages/charts/src/components/legend/extra.tsx @@ -13,7 +13,7 @@ import React from 'react'; * @param extra * @param isSeriesHidden */ -export function renderExtra(extra: string | number) { +export function renderExtra(extra: string) { return (
{extra} diff --git a/packages/charts/src/components/legend/legend_item.tsx b/packages/charts/src/components/legend/legend_item.tsx index db92a91554..99c4811596 100644 --- a/packages/charts/src/components/legend/legend_item.tsx +++ b/packages/charts/src/components/legend/legend_item.tsx @@ -190,7 +190,7 @@ export class LegendListItem extends Component 'echLegendItem--vertical': positionConfig.direction === LayoutDirection.Vertical, }); const hasColorPicker = Boolean(colorPicker); - const extra = showExtra && getExtra(extraValues, item, totalItems); + const extra = showExtra ? getExtra(extraValues, item, totalItems) : null; const style: CSSProperties = flatLegend ? {} : { @@ -225,7 +225,7 @@ export class LegendListItem extends Component onToggle={this.onLabelToggle(seriesIdentifiers)} isSeriesHidden={isSeriesHidden} /> - {extra && !isSeriesHidden && renderExtra(extra)} + {extra && !isSeriesHidden && renderExtra(extra.formatted)} {Action && (
diff --git a/packages/charts/src/components/legend/utils.ts b/packages/charts/src/components/legend/utils.ts index 2807048a06..b7575c1d98 100644 --- a/packages/charts/src/components/legend/utils.ts +++ b/packages/charts/src/components/legend/utils.ts @@ -6,18 +6,27 @@ * Side Public License, v 1. */ +import { PrimitiveValue } from '../../chart_types/partition_chart/layout/utils/group_by_rollup'; import { LegendItemExtraValues, LegendItem } from '../../common/legend'; /** @internal */ -export function getExtra(extraValues: Map, item: LegendItem, totalItems: number) { +export function getExtra( + extraValues: Map, + item: LegendItem, + totalItems: number, +): { raw: PrimitiveValue; formatted: string } | null { const { seriesIdentifiers, defaultExtra, 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 defaultExtra?.formatted ?? ''; + return defaultExtra ? { formatted: `${defaultExtra.formatted ?? ''}`, raw: defaultExtra.raw } : null; } 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); - return actionExtra ?? (extraValues.size === totalItems ? defaultExtra?.formatted : null) ?? ''; + const actionExtra = childId !== undefined ? itemExtraValues?.get(childId) : undefined; + return actionExtra + ? actionExtra + : extraValues.size === totalItems && defaultExtra + ? { formatted: `${defaultExtra.formatted ?? ''}`, raw: defaultExtra.raw } + : null; } diff --git a/packages/charts/src/specs/settings.tsx b/packages/charts/src/specs/settings.tsx index 4fe9e871fd..1c106b00fc 100644 --- a/packages/charts/src/specs/settings.tsx +++ b/packages/charts/src/specs/settings.tsx @@ -390,7 +390,7 @@ export interface CustomLegendProps { label: CategoryLabel; seriesType?: SeriesType; pointStyle?: PointStyle; - extraValue?: PrimitiveValue; + extraValue?: { raw: PrimitiveValue; formatted: string }; isSeriesHidden?: boolean; onItemOverActon: () => void; onItemOutAction: () => void;