diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx index ed57f38ec886f..53d62aea1dd47 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx @@ -397,6 +397,61 @@ describe('MetricVisComponent', function () { expect(tileConfig.trend).toEqual(trends[DEFAULT_TRENDLINE_NAME]); expect(tileConfig.trendShape).toEqual('area'); }); + + it('should display multi-values non-numeric values formatted and without quotes', () => { + const newTable: Datatable = { + ...table, + // change the format id for the columns + columns: table.columns.map((column) => + [basePriceColumnId, minPriceColumnId].includes(column.id) + ? { + ...column, + meta: { ...column.meta, params: { id: 'text' } }, + } + : column + ), + rows: table.rows.map((row) => ({ + ...row, + [basePriceColumnId]: [String(row[basePriceColumnId]), String(100)], + [minPriceColumnId]: [String(row[minPriceColumnId]), String(10)], + })), + }; + const component = shallow(); + + const [[visConfig]] = component.find(Metric).props().data!; + + expect(visConfig!.value).toMatchInlineSnapshot( + ` + Array [ + "text-28.984375", + "text-100", + ] + ` + ); + }); + + it('should display multi-values numeric values formatted and without quotes', () => { + const newTable = { + ...table, + rows: table.rows.map((row) => ({ + ...row, + [basePriceColumnId]: [row[basePriceColumnId], 100], + [minPriceColumnId]: [row[minPriceColumnId], 10], + })), + }; + const component = shallow(); + + const [[visConfig]] = component.find(Metric).props().data!; + + expect(visConfig!.value).toMatchInlineSnapshot( + ` + Array [ + "number-28.984375", + "number-100", + ] + ` + ); + }); }); describe('metric grid', () => { diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx index fb1383ce98d48..4591f20922bb6 100644 --- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx +++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx @@ -208,15 +208,16 @@ export const MetricVis = ({ const subtitle = breakdownByColumn ? primaryMetricColumn.name : config.metric.subtitle; if (typeof value !== 'number') { - const nonNumericMetric: MetricWText = { - value: formatPrimaryMetric(value), + const nonNumericMetricBase: Omit = { title: String(title), subtitle, icon: config.metric?.icon ? getIcon(config.metric?.icon) : undefined, extra: renderSecondaryMetric(data.columns, row, config), color: config.metric.color ?? defaultColor, }; - return nonNumericMetric; + return Array.isArray(value) + ? { ...nonNumericMetricBase, value: value.map((v) => formatPrimaryMetric(v)) } + : { ...nonNumericMetricBase, value: formatPrimaryMetric(value) }; } const baseMetric: MetricWNumber = {