Skip to content

Commit

Permalink
[8.15] [Lens] Fix multi-value formatting for metric (#187982) (#188056)
Browse files Browse the repository at this point in the history
# Backport

This will backport the following commits from `main` to `8.15`:
- [[Lens] Fix multi-value formatting for metric
(#187982)](#187982)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Marco
Liberati","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-07-11T08:20:17Z","message":"[Lens]
Fix multi-value formatting for metric (#187982)\n\n##
Summary\r\n\r\nFixes #187968\r\n\r\nIt avoids the default JSON stringify
behaviour around formatted values\r\nin multi-values scenarios for the
new Metric chart type\r\n\r\n\r\n<img width=\"1504\" alt=\"Screenshot
2024-07-10 at 15 28
23\"\r\nsrc=\"https://github.com/elastic/kibana/assets/924948/c52c5c5c-3004-4a3f-bdbf-612fdedd853a\">\r\n\r\nAdded
also a couple of unit tests to spot regressions in the area.\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"61de0b022b4a9a515c9b1da8940130a9243aaa4b","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Visualizations","release_note:skip","Feature:Lens","backport:prev-minor","v8.15.0","v8.16.0"],"title":"[Lens]
Fix multi-value formatting for
metric","number":187982,"url":"https://github.com/elastic/kibana/pull/187982","mergeCommit":{"message":"[Lens]
Fix multi-value formatting for metric (#187982)\n\n##
Summary\r\n\r\nFixes #187968\r\n\r\nIt avoids the default JSON stringify
behaviour around formatted values\r\nin multi-values scenarios for the
new Metric chart type\r\n\r\n\r\n<img width=\"1504\" alt=\"Screenshot
2024-07-10 at 15 28
23\"\r\nsrc=\"https://github.com/elastic/kibana/assets/924948/c52c5c5c-3004-4a3f-bdbf-612fdedd853a\">\r\n\r\nAdded
also a couple of unit tests to spot regressions in the area.\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"61de0b022b4a9a515c9b1da8940130a9243aaa4b"}},"sourceBranch":"main","suggestedTargetBranches":["8.15"],"targetPullRequestStates":[{"branch":"8.15","label":"v8.15.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/187982","number":187982,"mergeCommit":{"message":"[Lens]
Fix multi-value formatting for metric (#187982)\n\n##
Summary\r\n\r\nFixes #187968\r\n\r\nIt avoids the default JSON stringify
behaviour around formatted values\r\nin multi-values scenarios for the
new Metric chart type\r\n\r\n\r\n<img width=\"1504\" alt=\"Screenshot
2024-07-10 at 15 28
23\"\r\nsrc=\"https://github.com/elastic/kibana/assets/924948/c52c5c5c-3004-4a3f-bdbf-612fdedd853a\">\r\n\r\nAdded
also a couple of unit tests to spot regressions in the area.\r\n\r\n###
Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"61de0b022b4a9a515c9b1da8940130a9243aaa4b"}}]}]
BACKPORT-->

Co-authored-by: Marco Liberati <[email protected]>
  • Loading branch information
kibanamachine and dej611 authored Jul 11, 2024
1 parent 85e3486 commit 8bba594
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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(<MetricVis config={config} data={newTable} {...defaultProps} />);

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(<MetricVis config={config} data={newTable} {...defaultProps} />);

const [[visConfig]] = component.find(Metric).props().data!;

expect(visConfig!.value).toMatchInlineSnapshot(
`
Array [
"number-28.984375",
"number-100",
]
`
);
});
});

describe('metric grid', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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<MetricWText, 'value'> = {
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 = {
Expand Down

0 comments on commit 8bba594

Please sign in to comment.