[Lens] Update @elastic/charts to 71.0.0 and use new metric chart by mariairiartef · Pull Request #229815 · elastic/kibana

mariairiartef · 2025-07-29T13:50:42Z

closes #228964

Replaces renovate bot PR #230486 for Elastic Charts v71.0.0

Summary

Upgrade Elastic Charts to version 71.0.0
Update Metric Chart toolbar with new settings:
- Primary Metric alignment
- Secondary Metric alignment
- Primary Metric position
- Title weight
Update Primary Metric sidebar settings by adding ability to apply color to value when supporting visualization is a panel
Update Secondary Metric sidebar settings by adding ability to add label (previously called prefix) before or after the Secondary Metric value
Use default Secondary Metric component from Elastic Charts so we don't rely on a custom Secondary Metric component created in Lens
Update unit and functional tests when using the new metric version

Screenshots and screen recordings

New progress bar style

Allows new primary metric position "top"*

Screen.Recording.2025-08-22.at.12.26.27.mov

*note: when the user selects primary position > top, it automatically selects title weight to normal and primary align to left. And when the user selects primary position > bottom, it automatically selects title weight to bold and primary align to right

New toolbar settings

Screen.Recording.2025-08-13.at.15.39.30.mov

Allows applying color to the Metric chart background (panel) or Primary Metric value*

Screen.Recording.2025-08-13.at.15.31.55.mov

*note: when value is selected, we use the data visualization text colors

Enables changing the label position for the Secondary Metric

Screen.Recording.2025-08-13.at.15.33.42.mov

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
Flaky Test Runner was used on any tests changed
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
Review the backport guidelines and apply applicable backport:* labels.

mariairiartef · 2025-08-13T13:57:45Z

x-pack/platform/plugins/shared/lens/public/visualizations/metric/visualization.tsx

-    ? euiLightVars.euiColorPrimary
-    : euiThemeVars.euiColorEmptyShade;
+  if (showingBar(state) && isMetricNumeric) {
+    return euiLightVars.euiColorPrimary;


I'm not sure why we default to color.primary from brand colors if in the palette selection we don't show this color as we show the data visualization colors.

In agreement with giovanni we can use the VisColor 2, but is not need to do it in this PR

issue created: #233834

kibanamachine · 2025-08-13T14:24:06Z

Flaky Test Runner Stats

🎉 All tests passed! - kibana-flaky-test-suite-runner#9131

[✅] x-pack/platform/test/functional/apps/lens/group6/config.ts: 25/25 tests passed.

see run history

mariairiartef · 2025-08-13T14:28:09Z

...orm/plugins/shared/chart_expressions/expression_metric/public/components/metric_vis.test.tsx

      async ({ id, pattern, finalPattern }) => {
        await getFormattedMetrics(394.2393, 983123.984, { id, params: { pattern } });
-        expect(mockDeserialize).toHaveBeenCalledTimes(2);
+        expect(mockDeserialize).toHaveBeenCalledTimes(4);


Using the default secondary metric component and calling the getSecondaryMetricInfo method from metric_vis, it gets called 3 times. Should we optimize this?

not in this PR, please open an issue for that

issue created: #233835

mariairiartef · 2025-08-13T14:30:07Z

...lugins/shared/chart_expressions/expression_metric/public/components/secondary_metric_info.ts


+import { DimensionsVisParam, MetricVisParam } from '../../common';
 import { FormatOverrides } from './helpers';
+import { getMetricFormatter } from './helpers';


Note: import the formatter directly from the file instead of passing it as parameter from metric_vis

markov00 · 2025-09-02T09:58:24Z

@gvnmagni @mariairiartef I've created a follow up issue with Giovanni's comments #233702

markov00

Changes looks good to me, tested locally also with preexisting metrics.
No major differences and new logic works fine

x-pack/platform/test/functional/apps/lens/group6/metric.ts

...lugins/shared/chart_expressions/expression_metric/public/components/secondary_metric_info.ts

...platform/plugins/shared/chart_expressions/expression_metric/public/components/metric_vis.tsx

markov00 · 2025-09-02T13:16:01Z

...orm/plugins/shared/chart_expressions/expression_metric/public/components/metric_vis.test.tsx

      async ({ id, pattern, finalPattern }) => {
        await getFormattedMetrics(394.2393, 983123.984, { id, params: { pattern } });
-        expect(mockDeserialize).toHaveBeenCalledTimes(2);
+        expect(mockDeserialize).toHaveBeenCalledTimes(4);


not in this PR, please open an issue for that

markov00 · 2025-09-02T14:56:10Z

x-pack/platform/plugins/shared/lens/public/visualizations/metric/visualization.tsx

-    ? euiLightVars.euiColorPrimary
-    : euiThemeVars.euiColorEmptyShade;
+  if (showingBar(state) && isMetricNumeric) {
+    return euiLightVars.euiColorPrimary;


In agreement with giovanni we can use the VisColor 2, but is not need to do it in this PR

nickofthyme

This looks great! I tested locally with a few old Metrics and everything works smoothly.

I reviewed most files and left only minor comments. I have about 10 more files to review that are the larger code diffs, but I ran out of time tonight. I'll pick back up reviewing in the morning.

...uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap

x-pack/platform/plugins/shared/lens/public/visualizations/metric/runtime_state/index.ts

nickofthyme

Ok, I went through the rest of the code changes and everything look great.

elasticmachine · 2025-09-04T09:27:13Z

💚 Build Succeeded

Buildkite Build
Commit: 4a9b157

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`expressionMetricVis`	145	144	-1
`lens`	1407	1411	+4
total			+3

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`expressionMetricVis`	81	90	+9
`lens`	563	570	+7
total			+16

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`expressionMetricVis`	9.1KB	7.8KB	-1.2KB
`lens`	1.5MB	1.5MB	+6.4KB
`synthetics`	1.0MB	1.0MB	+19.0B
total			+5.1KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`expressionMetricVis`	15.5KB	16.5KB	+1.0KB
`kbnUiSharedDeps-npmDll`	6.5MB	6.5MB	+8.6KB
total			+9.6KB

Unknown metric groups

API count

id	before	after	diff
`expressionMetricVis`	81	91	+10
`lens`	662	669	+7
total			+17

History

💚 Build #335354 succeeded 2961111
💚 Build #335236 succeeded 49ba97b
💚 Build #334941 succeeded 5985ac5
💔 Build #334839 failed e8f9d72
💔 Build #334621 failed 289612c
💚 Build #334186 succeeded f5b40fc

cc @mariairiartef

…stic#229815) closes elastic#228964 Replaces renovate bot PR elastic#230486 for Elastic Charts v71.0.0 ## Summary - Upgrade Elastic Charts to version 71.0.0 - Update Metric Chart toolbar with new settings: - Primary Metric alignment - Secondary Metric alignment - Primary Metric position - Title weight - Update Primary Metric sidebar settings by adding ability to apply color to value when supporting visualization is a panel - Update Secondary Metric sidebar settings by adding ability to add label (previously called prefix) before or after the Secondary Metric value - Use default Secondary Metric component from Elastic Charts so we don't rely on a custom Secondary Metric component created in Lens - Update unit and functional tests when using the new metric version ## Screenshots and screen recordings ### New progress bar style <img width="327" height="328" alt="Screenshot 2025-08-22 at 11 22 50" src="https://github.com/user-attachments/assets/e800cda4-ad94-48f1-9af6-bfe0b58f0034" /> ### Allows new primary metric position "top"* https://github.com/user-attachments/assets/9158cf22-2988-489f-81a9-71810d6ac550 *note: when the user selects primary position > top, it automatically selects title weight to normal and primary align to left. And when the user selects primary position > bottom, it automatically selects title weight to bold and primary align to right ### New toolbar settings https://github.com/user-attachments/assets/068d5877-c3ba-4191-bd78-b5b68eab4d99 ### Allows applying color to the Metric chart background (panel) or Primary Metric value* https://github.com/user-attachments/assets/42700919-b358-4227-b05b-ea89ad450ea1 *note: when value is selected, we use the [data visualization text colors](https://eui.elastic.co/docs/getting-started/theming/tokens/colors/#dataVisText) ### Enables changing the label position for the Secondary Metric https://github.com/user-attachments/assets/3f070821-d2b9-4236-943a-a0d651ea32ec ## Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

## Summary Moves several Lens state runtime migrations to CM migrations before `v1` is established. - Add ColorMapping fix for looping mode #231165 - Add Changes to metric config from #229815 - Cleanup Lens SO attributes - The `description` and `visualizationType` properties can be more strict and less redundant for saving the SO. ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. --------- Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co> Co-authored-by: Marco Vettorello <vettorello.marco@gmail.com>

This PR adds the new appearance settings for the metric chart. Closes #3088 Relates to elastic/kibana#229815 and elastic/kibana#233992

## Summary Moves several Lens state runtime migrations to CM migrations before `v1` is established. - Add ColorMapping fix for looping mode elastic#231165 - Add Changes to metric config from elastic#229815 - Cleanup Lens SO attributes - The `description` and `visualizationType` properties can be more strict and less redundant for saving the SO. ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. --------- Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co> Co-authored-by: Marco Vettorello <vettorello.marco@gmail.com>

mariairiartef self-assigned this Jul 29, 2025

mariairiartef added the Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// label Aug 1, 2025

mariairiartef changed the title ~~[Lens] Update metric styles~~ Aug 1, 2025

mariairiartef added Feature:Lens v9.2.0 backport:version Backport to applied version labels labels Aug 5, 2025

mariairiartef force-pushed the lens/228964/new-metric branch 8 times, most recently from 96a35bc to 60f3c3d Compare August 8, 2025 11:23

mariairiartef added backport:skip This PR does not require backporting and removed backport:version Backport to applied version labels v9.2.0 labels Aug 8, 2025

mariairiartef force-pushed the lens/228964/new-metric branch 2 times, most recently from c9ff587 to 9c625fd Compare August 11, 2025 12:59

mariairiartef changed the title ~~[Lens] Update @elastic/charts and use new metric chart~~ Aug 12, 2025

mariairiartef added the release_note:enhancement label Aug 12, 2025

markov00 mentioned this pull request Aug 12, 2025

Update dependency @elastic/charts to v71 (main) #230486

Closed

1 task

mariairiartef force-pushed the lens/228964/new-metric branch from e5cf06a to d4fe004 Compare August 13, 2025 13:22

mariairiartef commented Aug 13, 2025

View reviewed changes

elastic deleted a comment from kibanamachine Aug 13, 2025

mariairiartef commented Aug 13, 2025

View reviewed changes

mariairiartef marked this pull request as ready for review August 13, 2025 14:49

mariairiartef requested a review from a team as a code owner August 13, 2025 14:49

mariairiartef and others added 2 commits September 2, 2025 10:58

Fix test

f1bba84

Merge branch 'main' into lens/228964/new-metric

e8f9d72

mariairiartef mentioned this pull request Sep 2, 2025

[Lens] [Metric chart] Update popover #233702

Closed

Merge branch 'main' into lens/228964/new-metric

5985ac5

markov00 approved these changes Sep 2, 2025

View reviewed changes

nickofthyme reviewed Sep 3, 2025

View reviewed changes

Remove secondaryMetricFormatter check

49ba97b

This was referenced Sep 3, 2025

[Lens] Use colors.vis.euiColorVis2 as default color for metric chart bar #233834

Closed

[Lens] Optimize getSecondaryMetricInfo method call #233835

Open

mariairiartef and others added 2 commits September 3, 2025 14:39

Add test for icon select in dimension editor

bbfbcfc

Merge branch 'main' into lens/228964/new-metric

2961111

nickofthyme approved these changes Sep 4, 2025

View reviewed changes

Merge branch 'main' into lens/228964/new-metric

4a9b157

mariairiartef enabled auto-merge (squash) September 4, 2025 07:03

shahzad31 approved these changes Sep 4, 2025

View reviewed changes

mariairiartef merged commit 44185df into elastic:main Sep 4, 2025
13 checks passed

kibanamachine added the v9.2.0 label Sep 4, 2025

mariairiartef mentioned this pull request Sep 4, 2025

[Lens] Metric chart does not save icon align when an icon is added #233602

Closed

nickofthyme mentioned this pull request Sep 8, 2025

Failing test: Jest Tests.x-pack/platform/plugins/shared/lens/public/visualizations/metric - dimension editor primary metric dimension icon select clears icon and iconAlign when none is selected #234063

Closed

nickofthyme mentioned this pull request Sep 16, 2025

[Lens] Move runtime other migration to CM transforms #235286

Merged

4 tasks

florent-leborgne added the needs_docs label Sep 22, 2025

florent-leborgne mentioned this pull request Sep 22, 2025

[Metrics charts] UI changes for Metrics charts elastic/docs-content#3088

Closed

alaudazzi mentioned this pull request Oct 1, 2025

Add appearance settings for metric chart elastic/docs-content#3246

Merged

alaudazzi added a commit to elastic/docs-content that referenced this pull request Oct 3, 2025

Add appearance settings for metric chart (#3246)

7ec393f

This PR adds the new appearance settings for the metric chart. Closes #3088 Relates to elastic/kibana#229815 and elastic/kibana#233992

mariairiartef mentioned this pull request Oct 20, 2025

[Docs] Kibana release notes for 9.2.0 #238843

Merged

16 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens] Update @elastic/charts to 71.0.0 and use new metric chart#229815

[Lens] Update @elastic/charts to 71.0.0 and use new metric chart#229815
mariairiartef merged 183 commits intoelastic:mainfrom
mariairiartef:lens/228964/new-metric

mariairiartef commented Jul 29, 2025 •

edited

Loading

mariairiartef Aug 13, 2025 •

edited

Loading

markov00 Sep 2, 2025

mariairiartef Sep 3, 2025

kibanamachine commented Aug 13, 2025

mariairiartef Aug 13, 2025 •

edited

Loading

markov00 Sep 2, 2025

mariairiartef Sep 3, 2025

mariairiartef Aug 13, 2025

markov00 commented Sep 2, 2025

markov00 left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

markov00 Sep 2, 2025

markov00 Sep 2, 2025

nickofthyme left a comment

Uh oh!

Uh oh!

Uh oh!

nickofthyme left a comment

elasticmachine commented Sep 4, 2025

API count

Uh oh!

Labels

8 participants

Conversation

mariairiartef commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots and screen recordings

New progress bar style

Allows new primary metric position "top"*

New toolbar settings

Allows applying color to the Metric chart background (panel) or Primary Metric value*

Enables changing the label position for the Secondary Metric

Checklist

mariairiartef Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

markov00 Sep 2, 2025

Choose a reason for hiding this comment

mariairiartef Sep 3, 2025

Choose a reason for hiding this comment

kibanamachine commented Aug 13, 2025

Flaky Test Runner Stats

🎉 All tests passed! - kibana-flaky-test-suite-runner#9131

mariairiartef Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

markov00 Sep 2, 2025

Choose a reason for hiding this comment

mariairiartef Sep 3, 2025

Choose a reason for hiding this comment

mariairiartef Aug 13, 2025

Choose a reason for hiding this comment

markov00 commented Sep 2, 2025

markov00 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

markov00 Sep 2, 2025

Choose a reason for hiding this comment

markov00 Sep 2, 2025

Choose a reason for hiding this comment

nickofthyme left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

nickofthyme left a comment

Choose a reason for hiding this comment

elasticmachine commented Sep 4, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

History

Uh oh!

Labels

8 participants

mariairiartef commented Jul 29, 2025 •

edited

Loading

mariairiartef Aug 13, 2025 •

edited

Loading

mariairiartef Aug 13, 2025 •

edited

Loading