[Lens] [Metric] Improve "Supporting visualization" section by mariairiartef · Pull Request #243608 · elastic/kibana

mariairiartef · 2025-11-20T09:49:03Z

Summary

Closes #234901

Move Color by value and Color mapping / Color settings from "Appearance" section into "Supporting visualization" section
Rename Color by value to Color mode in Primary Metric and Secondary Metric editors
Rename Color mapping to Dynamic color mapping
Rename Color to Select color
Add static color control in "Appearance" section for non-numeric metrics since non-numeric metrics do not support the "Supporting visualization" section

Numeric metric

Screen.Recording.2025-11-24.at.12.13.03.mov

Non-numeric metric

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
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.

Release note

The color settings in the Primary Metric editor have been reorganized and renamed. For numeric metrics, the "Color by value" and "Color mapping" / "Color" settings are now located under the chart type field. The settings have been renamed as follows: "Color by value" is now "Color mode", "Color mapping" is now "Dynamic color mapping", and "Color" is now "Select color".

mariairiartef · 2025-11-24T11:04:05Z

/ci

mariairiartef · 2025-11-24T11:25:52Z

/ci

elasticmachine · 2025-11-24T11:29:04Z

Pinging @elastic/kibana-visualizations (Team:Visualizations)

elasticmachine · 2025-11-24T13:00:39Z

⏳ Build in-progress, with failures

Buildkite Build
Commit: 4230e10

Failed CI Steps

Test Failures

[job] [logs] Jest Tests #9 / dimension editor primary metric dimension static color control is visible when metric is non-numeric even if palette is set
[job] [logs] Jest Tests #9 / dimension editor primary metric dimension static color control is visible when metric is non-numeric even if palette is set
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension doesn't break when layer data is missing
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension doesn't break when layer data is missing
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label clicking on the buttons calls setState with a correct secondaryLabel
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label clicking on the buttons calls setState with a correct secondaryLabel
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label correctly renders chosen auto label
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label correctly renders chosen auto label
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label correctly renders chosen none label
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label correctly renders chosen none label
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label correctly renders custom label
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label correctly renders custom label
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label does not show the label position option if Label is None
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label does not show the label position option if Label is None
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label sets a custom label value
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label sets a custom label value
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label sets the label position to after
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label sets the label position to after
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label sets the label position to before
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension metric label sets the label position to before
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension renders when the accessor matches
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension renders when the accessor matches
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend coloring should change the color mode to dynamic
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend coloring should change the color mode to dynamic
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend coloring should change the color mode to static
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend coloring should change the color mode to static
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend coloring should correctly select the reversed Trend color palette based on configuration
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend coloring should correctly select the reversed Trend color palette based on configuration
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend coloring should disable the "Primary metric" baseline if the primary is not of number type
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend coloring should disable the "Primary metric" baseline if the primary is not of number type
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend coloring should prevent the dynamic coloring if the value type is not numeric
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend coloring should prevent the dynamic coloring if the value type is not numeric
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend coloring should show no color controls if none is selected
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend coloring should show no color controls if none is selected
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend should change the baselineValue to "primary" when changing the baseline mode from static
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend should change the baselineValue to "primary" when changing the baseline mode from static
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend should not show the baseline textbox if Primary Metric baseline is chosen
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend should not show the baseline textbox if Primary Metric baseline is chosen
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend should set a default secondary label if auto is set and Primary Metric is chosen
[job] [logs] Jest Tests #9 / dimension editor secondary metric dimension secondary trend should set a default secondary label if auto is set and Primary Metric is chosen

History

💔 Build #364229 failed 63c77ac

cc @mariairiartef

dej611

Found a regression with this PR when transitioning from a numeric dynamic colouring to a non-numeric scenario.
Before the configuration was falling back into static colouring, but with this PR the entire colour control disappears:

Tested in main the previous behaviour:

Note: this only happens when coming from a Dynamic coluring, from a Static colouring setting all is fine.

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

dej611 · 2025-11-26T11:19:22Z

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

+  const showStaticColorControl = !isMetricNumeric && !state.palette;

  return (
    <div className="lnsIndexPatternDimensionEditor--padded">


Not strictly related to this PR, but while in the area, can we solve the controls padding issue here?

yes, I think this issue was introduced by the tabs PR. Let's fix it in another PR

mariairiartef · 2025-11-28T07:45:07Z

Found a regression with this PR when transitioning from a numeric dynamic colouring to a non-numeric scenario. Before the configuration was falling back into static colouring, but with this PR the entire colour control disappears:
Tested in `main` the previous behaviour: Note: this only happens when coming from a `Dynamic coluring`, from a `Static colouring` setting all is fine.

Thanks! I fixed it here. I think we can rely only in the isMetricNumeric to show/hide that field

…43608) ## Summary Closes elastic#234901 - Move `Color by value` and `Color mapping` / `Color` settings from "Appearance" section into "Supporting visualization" section - Rename `Color by value` to `Color mode` in Primary Metric and Secondary Metric editors - Rename `Color mapping` to `Dynamic color mapping` - Rename `Color` to `Select color` - Add static color control in "Appearance" section for non-numeric metrics since non-numeric metrics do not support the "Supporting visualization" section #### Numeric metric https://github.com/user-attachments/assets/6ebd8b46-8293-4940-b604-806c3bfb3dde #### Non-numeric metric <img width="1920" height="935" alt="Screenshot 2025-11-24 at 12 01 43" src="https://github.com/user-attachments/assets/ecc3a56d-e2f8-4d0e-bb82-56058f37d061" /> ### 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 - [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 - [ ] [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.

… visualization" title (#245979) ## Summary Follow up to #243608 - Removes supporting visualization section title - Renames "Type" field to "Background chart" and the "Panel" option to "None" **Note** Internally, we don't remove the "Supporting visualization" section, that is the `DimensionEditorAdditionalSection`. We remove the "Supporting visualization" title and the line separator so it looks like it is only one section now. ### After #### Background chart "None" <img width="1404" height="1295" alt="Screenshot 2025-12-11 at 13 08 01" src="https://github.com/user-attachments/assets/b45b6756-1d42-4fcd-8258-4a88dd2937e7" /> #### Background chart "Line" <img width="1402" height="1294" alt="Screenshot 2025-12-11 at 13 09 49" src="https://github.com/user-attachments/assets/2854e33f-cbbf-4261-b4e0-82d6fda73c7e" /> #### Background chart "Line" and dynamic coloring <img width="1402" height="1294" alt="Screenshot 2025-12-11 at 13 08 35" src="https://github.com/user-attachments/assets/094759fc-56c7-47a1-ac00-f027906c6d12" /> #### Not numeric <img width="1403" height="1294" alt="Screenshot 2025-12-11 at 13 08 52" src="https://github.com/user-attachments/assets/1fb87b45-b3e2-490b-b7a8-0f969ac72fcc" /> ## Checklist - [x] 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 - [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. ## Release note Removed the "Supporting visualization" section heading from the Primary Metric editor. All configuration options remain fully accessible in the same location under "Appearance". The "Type" field has been renamed to "Background chart" and the "Panel" option has been renamed to "None". --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

… visualization" title (elastic#245979) ## Summary Follow up to elastic#243608 - Removes supporting visualization section title - Renames "Type" field to "Background chart" and the "Panel" option to "None" **Note** Internally, we don't remove the "Supporting visualization" section, that is the `DimensionEditorAdditionalSection`. We remove the "Supporting visualization" title and the line separator so it looks like it is only one section now. ### After #### Background chart "None" <img width="1404" height="1295" alt="Screenshot 2025-12-11 at 13 08 01" src="https://github.com/user-attachments/assets/b45b6756-1d42-4fcd-8258-4a88dd2937e7" /> #### Background chart "Line" <img width="1402" height="1294" alt="Screenshot 2025-12-11 at 13 09 49" src="https://github.com/user-attachments/assets/2854e33f-cbbf-4261-b4e0-82d6fda73c7e" /> #### Background chart "Line" and dynamic coloring <img width="1402" height="1294" alt="Screenshot 2025-12-11 at 13 08 35" src="https://github.com/user-attachments/assets/094759fc-56c7-47a1-ac00-f027906c6d12" /> #### Not numeric <img width="1403" height="1294" alt="Screenshot 2025-12-11 at 13 08 52" src="https://github.com/user-attachments/assets/1fb87b45-b3e2-490b-b7a8-0f969ac72fcc" /> ## Checklist - [x] 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 - [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. ## Release note Removed the "Supporting visualization" section heading from the Primary Metric editor. All configuration options remain fully accessible in the same location under "Appearance". The "Type" field has been renamed to "Background chart" and the "Panel" option has been renamed to "None". --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

mariairiartef and others added 2 commits November 20, 2025 10:48

poc: move color selection under supporting visualization

0821062

Merge branch 'main' into lens/234901

7093ccc

mariairiartef self-assigned this Nov 24, 2025

mariairiartef added Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// release_note:skip Skip the PR/issue when compiling release notes Feature:Lens backport:skip This PR does not require backporting labels Nov 24, 2025

mariairiartef added 4 commits November 24, 2025 11:03

Remove unused code

3b217e2

Add static color selector when metric is not numeric

0ee58a1

Fix test for metric dimension editor

210f986

Fix static control issue when metric is numeric

63c77ac

update labels

4230e10

mariairiartef marked this pull request as ready for review November 24, 2025 11:29

mariairiartef requested a review from a team as a code owner November 24, 2025 11:29

dej611 reviewed Nov 26, 2025

View reviewed changes

x-pack/platform/plugins/shared/lens/public/visualizations/metric/dimension_editor.tsx Outdated Show resolved Hide resolved

dej611 reviewed Nov 26, 2025

View reviewed changes

mariairiartef and others added 4 commits November 27, 2025 17:06

Merge branch 'main' into lens/234901

214fe2d

Fix regression

401be8b

Fix test

28832bb

Merge branch 'main' into lens/234901

bbe2100

mariairiartef requested a review from dej611 November 28, 2025 07:43

dej611 approved these changes Nov 28, 2025

View reviewed changes

mariairiartef merged commit 8bab7e1 into elastic:main Nov 28, 2025
12 checks passed

kibanamachine added the v9.3.0 label Nov 28, 2025

florent-leborgne mentioned this pull request Dec 10, 2025

[Lens] Metrics: Changes to "supporting visualization" settings elastic/docs-content#4272

Closed

florent-leborgne added the needs_docs label Dec 10, 2025

mariairiartef mentioned this pull request Dec 11, 2025

[Lens] [Metric] Improve Primary Metric editor by removing "Supporting visualization" title #245979

Merged

5 tasks

mariairiartef added release_note:enhancement and removed release_note:skip Skip the PR/issue when compiling release notes labels Dec 11, 2025

mariairiartef mentioned this pull request Jan 12, 2026

Change "Select color" option label back to just "Color" #248681

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Lens] [Metric] Improve "Supporting visualization" section#243608

[Lens] [Metric] Improve "Supporting visualization" section#243608
mariairiartef merged 11 commits intoelastic:mainfrom
mariairiartef:lens/234901

mariairiartef commented Nov 20, 2025 •

edited

Loading

mariairiartef commented Nov 24, 2025

mariairiartef commented Nov 24, 2025

elasticmachine commented Nov 24, 2025

elasticmachine commented Nov 24, 2025

dej611 left a comment

Uh oh!

dej611 Nov 26, 2025

mariairiartef Nov 27, 2025 •

edited

Loading

mariairiartef commented Nov 28, 2025 •

edited

Loading

Uh oh!

Labels

5 participants

Conversation

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

Uh oh!

Summary

Numeric metric

Non-numeric metric

Checklist

Release note

mariairiartef commented Nov 24, 2025

mariairiartef commented Nov 24, 2025

elasticmachine commented Nov 24, 2025

elasticmachine commented Nov 24, 2025

⏳ Build in-progress, with failures

Failed CI Steps

Test Failures

History

dej611 left a comment

Choose a reason for hiding this comment

Uh oh!

dej611 Nov 26, 2025

Choose a reason for hiding this comment

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

Uh oh!

Choose a reason for hiding this comment

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

Uh oh!

Uh oh!

Labels

5 participants

mariairiartef commented Nov 20, 2025 •

edited

Loading

mariairiartef Nov 27, 2025 •

edited

Loading

mariairiartef commented Nov 28, 2025 •

edited

Loading