[Lens] "Compare to" badge for Metric chart#214811

Merged

dej611 merged 82 commits intoelastic:mainfrom

dej611:feat/metric-trend-arrow

May 7, 2025

Contributor

dej611 commented Mar 17, 2025 •

edited by kibanamachine

Loading

Summary

This PR introduces the Trend badge feature into the Secondary Metric chart type.

Here's a short list of tasks handled by this PR:

Few aspects of this feature have been discussed and deferred to a follow up issue: #217992

Checklist

Unit or functional tests were updated or added to match the most common scenarios


          ✨ Add new Trend feature to Metric chart

790208d

dej611 added Team:Visualizations Feature:Lens backport:skip release_note:feature blocked labels

dej611 and others added 22 commits

March 18, 2025 14:41


          💄 Adopt vis green

86a3e4e


          🐛 Fix css name issue

b46e050


          ✨ Make badge more accessible

a18e765


          ✅ Add tests

e7480b5


          Merge remote-tracking branch 'upstream/main' into feat/metric-trend-a…

ae343d3

…rrow


          ♻️ Align with new helper

ee0cef3


          🐛 Fallback in case of wrong state

d7b9071


          🐛 Use datasource data type isntead of active data

5b71d20


          ✅ Add tests

d91ad9a


          🌐 Fix translation ids

fff8c02


          🏷️ Fix type issue

ed9d97a


          🔇 Remove log

0ba2add


          📸 Update snapshots

9d6a27a


          Merge remote-tracking branch 'upstream/main' into feat/metric-trend-a…

646e6e9

…rrow


          ⚡ tiny perf improvement

73ea814


          ✅ Initial porting of tests to RTL

b04d414


          ✅ converting more tests to RTL

752319f


          ✅ Port more tests

f03878c


          ✅ Complete RTL porting

ff1cdca


          Merge branch 'main' into feat/metric-trend-arrow

9ac8d40


          ✅ Adopt better strategy

abb1da9


          Merge branch 'feat/metric-trend-arrow' of https://github.com/dej611/k…

a13b5ba

…ibana into feat/metric-trend-arrow

dej611 mentioned this pull request

[Chart Expressions] Migrate tests from Enzyme to RTL #216019

Open

10 tasks


          ♻️ Add test id

add06f7

kibanamachine mentioned this pull request

[GenAI Connectors] Update Default Model IDs for Bedrock and OpenAI Connectors #220146

Merged

dej611 mentioned this pull request

[Lens] Follow up issue for Metric compare to feature #217992

Closed

5 tasks

kibanamachine added the backport missing label

Contributor

kibanamachine commented May 9, 2025

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 214811 locally
cc: @dej611

6 similar comments

Contributor

kibanamachine commented May 12, 2025

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 214811 locally
cc: @dej611

Contributor

kibanamachine commented May 13, 2025

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 214811 locally
cc: @dej611

Contributor

kibanamachine commented May 14, 2025

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 214811 locally
cc: @dej611

Contributor

kibanamachine commented May 15, 2025

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 214811 locally
cc: @dej611

Contributor

kibanamachine commented May 16, 2025

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 214811 locally
cc: @dej611

Contributor

kibanamachine commented May 19, 2025

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 214811 locally
cc: @dej611

dej611 removed the v8.19.0 label

Contributor

kibanamachine commented May 21, 2025

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 214811 locally
cc: @dej611

4 similar comments

Contributor

kibanamachine commented May 22, 2025

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 214811 locally
cc: @dej611

Contributor

kibanamachine commented May 23, 2025

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 214811 locally
cc: @dej611

Contributor

kibanamachine commented May 26, 2025

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 214811 locally
cc: @dej611

Contributor

kibanamachine commented May 27, 2025

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 214811 locally
cc: @dej611

nickofthyme added the v8.19.0 label

nickofthyme pushed a commit to nickofthyme/kibana that referenced this pull request


          [Lens] "Compare to" badge for Metric chart (elastic#214811)

2cfd725

## Summary

Fixes elastic#184907

This PR introduces the Trend badge feature into the Secondary Metric
chart type.
<img width="1318" alt="Screenshot 2025-04-30 at 13 04 36"
src="https://github.com/user-attachments/assets/6b3c599e-304f-4bc0-8ff2-094ed54ea248"
/>
<img width="1503" alt="Screenshot 2025-04-30 at 13 04 03"
src="https://github.com/user-attachments/assets/cb203156-a7a8-4f61-bf30-57f7d1484fed"
/>
<img width="1339" alt="Screenshot 2025-04-30 at 13 03 21"
src="https://github.com/user-attachments/assets/8896af7f-9193-41b5-a4b5-970907b084c5"
/>
<img width="1319" alt="Screenshot 2025-04-30 at 13 05 34"
src="https://github.com/user-attachments/assets/12aa556e-8743-4167-9902-14fa9ef2e85d"
/>

Here's a short list of tasks handled by this PR:

* [x] New Color by value option: `None` | `Static` | `Dynamic`
  * Default `None` option is the default (legacy preserved)
  * [x] `Static` option enables the badge with the picked color
* [x] this is also enforced when the Primary metric is not number based
(or when primary transition from number to text)
  * [x] `Dynamic` option enables both the badge coloring and the icon
* [x] When disabled a tooltip with the explanation of the issue appears
    * [x] Trend palette is enabled by default on enable
* [x] Added other 3 extra palettes (`Reversed`, `Temperature`,
`Complementary`)
* [x] Each palette has been implemented using both EUI tokens AND Vis
tokens
          * [x] Revisited this decision ♻️
        * [x] Remove redundant palettes
          * ~~keep only Vis palettes & hardcode `green` value for now.~~
* ~~Once EUI exposes the green token integrate in a follow up.~~
* Use the `@kbn/palettes` service with the new `compare_to` palette with
hardcoded values
      * [x] Exposes display options: `Icon` | `Value` | `Both`
        * [x] `Both` is the default
* [x] `Icon` or `Both` will show up 3 possible icon options: arrow up,
arrow down and equal sign from unicode
          * [x]  Make sure both text and icon respect breakpoint sizes
* [x] Remove hack for breakpoints ( Lens Embeddable + Secondary metric)
once new Charts upgrade is merged:
elastic/elastic-charts#2627
* [x] Remove `theme` and contrast color computation once the Elastic
Charts PR above is merged
          * [x] Make sure badge is always accessible
        * [x] Exposes Trend options: `Static value` | `Primary metric`
* [x] `Static value` will show up a new `Baseline` control (debounced)
* [x] `Primary metric` is enabled only for numeric primary values
            * [x]  When disabled a tooltip shows up explaining the issue
* [x] Added description text to explain difference with the other
compare mode
            * [x] Show only delta value when in Primary
 * [x] Migrated existing `metric_vis` tests from Enzyme to RTL
 * [x] New tests for the new Secondary metric component in RTL
* [x] Added new smoketest + panel mode caching testing for the metric
feature in FTR

Few aspects of this feature have been discussed and deferred to a follow
up issue: elastic#217992

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

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Nick Partridge <nick.ryan.partridge@gmail.com>
(cherry picked from commit 78e7435)

# Conflicts:
#	src/platform/plugins/shared/chart_expressions/expression_metric/public/components/metric_vis.test.tsx
#	x-pack/platform/plugins/shared/lens/public/visualizations/metric/dimension_editor.test.tsx
#	x-pack/platform/plugins/shared/lens/public/visualizations/metric/visualization.tsx

nickofthyme mentioned this pull request

[8.19] [Lens] "Compare to" badge for Metric chart (#214811) #221709

Merged

Contributor

nickofthyme commented May 27, 2025

💚 All backports created successfully

Status	Branch	Result
✅	8.19

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

Contributor

kibanamachine commented May 28, 2025

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.
cc: @dej611

akowalska622 pushed a commit to akowalska622/kibana that referenced this pull request


          [Lens] "Compare to" badge for Metric chart (elastic#214811)

faf181c

## Summary

Fixes elastic#184907

This PR introduces the Trend badge feature into the Secondary Metric
chart type.
<img width="1318" alt="Screenshot 2025-04-30 at 13 04 36"
src="https://github.com/user-attachments/assets/6b3c599e-304f-4bc0-8ff2-094ed54ea248"
/>
<img width="1503" alt="Screenshot 2025-04-30 at 13 04 03"
src="https://github.com/user-attachments/assets/cb203156-a7a8-4f61-bf30-57f7d1484fed"
/>
<img width="1339" alt="Screenshot 2025-04-30 at 13 03 21"
src="https://github.com/user-attachments/assets/8896af7f-9193-41b5-a4b5-970907b084c5"
/>
<img width="1319" alt="Screenshot 2025-04-30 at 13 05 34"
src="https://github.com/user-attachments/assets/12aa556e-8743-4167-9902-14fa9ef2e85d"
/>


Here's a short list of tasks handled by this PR:

* [x] New Color by value option: `None` | `Static` | `Dynamic`
  * Default `None` option is the default (legacy preserved)
  * [x] `Static` option enables the badge with the picked color
* [x] this is also enforced when the Primary metric is not number based
(or when primary transition from number to text)
  * [x] `Dynamic` option enables both the badge coloring and the icon
* [x] When disabled a tooltip with the explanation of the issue appears
    * [x] Trend palette is enabled by default on enable
* [x] Added other 3 extra palettes (`Reversed`, `Temperature`,
`Complementary`)
* [x] Each palette has been implemented using both EUI tokens AND Vis
tokens
          * [x] Revisited this decision ♻️ 
        * [x] Remove redundant palettes
          * ~~keep only Vis palettes & hardcode `green` value for now.~~
* ~~Once EUI exposes the green token integrate in a follow up.~~
* Use the `@kbn/palettes` service with the new `compare_to` palette with
hardcoded values
      * [x] Exposes display options: `Icon` | `Value` | `Both`
        * [x] `Both` is the default
* [x] `Icon` or `Both` will show up 3 possible icon options: arrow up,
arrow down and equal sign from unicode
          * [x]  Make sure both text and icon respect breakpoint sizes
* [x] Remove hack for breakpoints ( Lens Embeddable + Secondary metric)
once new Charts upgrade is merged:
elastic/elastic-charts#2627
* [x] Remove `theme` and contrast color computation once the Elastic
Charts PR above is merged
          * [x] Make sure badge is always accessible
        * [x] Exposes Trend options: `Static value` | `Primary metric` 
* [x] `Static value` will show up a new `Baseline` control (debounced)
* [x] `Primary metric` is enabled only for numeric primary values
            * [x]  When disabled a tooltip shows up explaining the issue
* [x] Added description text to explain difference with the other
compare mode
            * [x] Show only delta value when in Primary 
 * [x] Migrated existing `metric_vis` tests from Enzyme to RTL
 * [x] New tests for the new Secondary metric component in RTL
* [x] Added new smoketest + panel mode caching testing for the metric
feature in FTR


Few aspects of this feature have been discussed and deferred to a follow
up issue: elastic#217992

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

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Nick Partridge <nick.ryan.partridge@gmail.com>

Contributor

kibanamachine commented May 29, 2025

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.
cc: @dej611

1 similar comment

Contributor

kibanamachine commented May 30, 2025

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.
cc: @dej611

nickofthyme added a commit to nickofthyme/kibana that referenced this pull request


          [Lens] "Compare to" badge for Metric chart (elastic#214811)

94af340

Fixes elastic#184907

This PR introduces the Trend badge feature into the Secondary Metric
chart type.
<img width="1318" alt="Screenshot 2025-04-30 at 13 04 36"
src="https://github.com/user-attachments/assets/6b3c599e-304f-4bc0-8ff2-094ed54ea248"
/>
<img width="1503" alt="Screenshot 2025-04-30 at 13 04 03"
src="https://github.com/user-attachments/assets/cb203156-a7a8-4f61-bf30-57f7d1484fed"
/>
<img width="1339" alt="Screenshot 2025-04-30 at 13 03 21"
src="https://github.com/user-attachments/assets/8896af7f-9193-41b5-a4b5-970907b084c5"
/>
<img width="1319" alt="Screenshot 2025-04-30 at 13 05 34"
src="https://github.com/user-attachments/assets/12aa556e-8743-4167-9902-14fa9ef2e85d"
/>

Here's a short list of tasks handled by this PR:

* [x] New Color by value option: `None` | `Static` | `Dynamic`
  * Default `None` option is the default (legacy preserved)
  * [x] `Static` option enables the badge with the picked color
* [x] this is also enforced when the Primary metric is not number based
(or when primary transition from number to text)
  * [x] `Dynamic` option enables both the badge coloring and the icon
* [x] When disabled a tooltip with the explanation of the issue appears
    * [x] Trend palette is enabled by default on enable
* [x] Added other 3 extra palettes (`Reversed`, `Temperature`,
`Complementary`)
* [x] Each palette has been implemented using both EUI tokens AND Vis
tokens
          * [x] Revisited this decision ♻️
        * [x] Remove redundant palettes
          * ~~keep only Vis palettes & hardcode `green` value for now.~~
* ~~Once EUI exposes the green token integrate in a follow up.~~
* Use the `@kbn/palettes` service with the new `compare_to` palette with
hardcoded values
      * [x] Exposes display options: `Icon` | `Value` | `Both`
        * [x] `Both` is the default
* [x] `Icon` or `Both` will show up 3 possible icon options: arrow up,
arrow down and equal sign from unicode
          * [x]  Make sure both text and icon respect breakpoint sizes
* [x] Remove hack for breakpoints ( Lens Embeddable + Secondary metric)
once new Charts upgrade is merged:
elastic/elastic-charts#2627
* [x] Remove `theme` and contrast color computation once the Elastic
Charts PR above is merged
          * [x] Make sure badge is always accessible
        * [x] Exposes Trend options: `Static value` | `Primary metric`
* [x] `Static value` will show up a new `Baseline` control (debounced)
* [x] `Primary metric` is enabled only for numeric primary values
            * [x]  When disabled a tooltip shows up explaining the issue
* [x] Added description text to explain difference with the other
compare mode
            * [x] Show only delta value when in Primary
 * [x] Migrated existing `metric_vis` tests from Enzyme to RTL
 * [x] New tests for the new Secondary metric component in RTL
* [x] Added new smoketest + panel mode caching testing for the metric
feature in FTR

Few aspects of this feature have been discussed and deferred to a follow
up issue: elastic#217992

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

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Nick Partridge <nick.ryan.partridge@gmail.com>

Contributor

kibanamachine commented Jun 2, 2025

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.
cc: @dej611

qn895 pushed a commit to qn895/kibana that referenced this pull request


          [Lens] "Compare to" badge for Metric chart (elastic#214811)

6cc51bf

## Summary

Fixes elastic#184907

This PR introduces the Trend badge feature into the Secondary Metric
chart type.
<img width="1318" alt="Screenshot 2025-04-30 at 13 04 36"
src="https://github.com/user-attachments/assets/6b3c599e-304f-4bc0-8ff2-094ed54ea248"
/>
<img width="1503" alt="Screenshot 2025-04-30 at 13 04 03"
src="https://github.com/user-attachments/assets/cb203156-a7a8-4f61-bf30-57f7d1484fed"
/>
<img width="1339" alt="Screenshot 2025-04-30 at 13 03 21"
src="https://github.com/user-attachments/assets/8896af7f-9193-41b5-a4b5-970907b084c5"
/>
<img width="1319" alt="Screenshot 2025-04-30 at 13 05 34"
src="https://github.com/user-attachments/assets/12aa556e-8743-4167-9902-14fa9ef2e85d"
/>


Here's a short list of tasks handled by this PR:

* [x] New Color by value option: `None` | `Static` | `Dynamic`
  * Default `None` option is the default (legacy preserved)
  * [x] `Static` option enables the badge with the picked color
* [x] this is also enforced when the Primary metric is not number based
(or when primary transition from number to text)
  * [x] `Dynamic` option enables both the badge coloring and the icon
* [x] When disabled a tooltip with the explanation of the issue appears
    * [x] Trend palette is enabled by default on enable
* [x] Added other 3 extra palettes (`Reversed`, `Temperature`,
`Complementary`)
* [x] Each palette has been implemented using both EUI tokens AND Vis
tokens
          * [x] Revisited this decision ♻️ 
        * [x] Remove redundant palettes
          * ~~keep only Vis palettes & hardcode `green` value for now.~~
* ~~Once EUI exposes the green token integrate in a follow up.~~
* Use the `@kbn/palettes` service with the new `compare_to` palette with
hardcoded values
      * [x] Exposes display options: `Icon` | `Value` | `Both`
        * [x] `Both` is the default
* [x] `Icon` or `Both` will show up 3 possible icon options: arrow up,
arrow down and equal sign from unicode
          * [x]  Make sure both text and icon respect breakpoint sizes
* [x] Remove hack for breakpoints ( Lens Embeddable + Secondary metric)
once new Charts upgrade is merged:
elastic/elastic-charts#2627
* [x] Remove `theme` and contrast color computation once the Elastic
Charts PR above is merged
          * [x] Make sure badge is always accessible
        * [x] Exposes Trend options: `Static value` | `Primary metric` 
* [x] `Static value` will show up a new `Baseline` control (debounced)
* [x] `Primary metric` is enabled only for numeric primary values
            * [x]  When disabled a tooltip shows up explaining the issue
* [x] Added description text to explain difference with the other
compare mode
            * [x] Show only delta value when in Primary 
 * [x] Migrated existing `metric_vis` tests from Enzyme to RTL
 * [x] New tests for the new Secondary metric component in RTL
* [x] Added new smoketest + panel mode caching testing for the metric
feature in FTR


Few aspects of this feature have been discussed and deferred to a follow
up issue: elastic#217992

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

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Nick Partridge <nick.ryan.partridge@gmail.com>

nickofthyme added a commit that referenced this pull request


          [8.19] [Lens] "Compare to" badge for Metric chart (#214811) (#221709)

fdf3a43

# Backport

This will backport the following commits from `main` to `8.19`:
- [[Lens] "Compare to" badge for Metric chart
(#214811)](#214811)

<!--- Backport version: 9.6.6 -->

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

<!--BACKPORT [{"author":{"name":"Marco
Liberati","email":"dej611@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-05-07T12:44:27Z","message":"[Lens]
\"Compare to\" badge for Metric chart (#214811)\n\n## Summary\n\nFixes
#184907\n\nThis PR introduces the Trend badge feature into the Secondary
Metric\nchart type.\n<img width=\"1318\" alt=\"Screenshot 2025-04-30 at
13 04
36\"\nsrc=\"https://github.com/user-attachments/assets/6b3c599e-304f-4bc0-8ff2-094ed54ea248\"\n/>\n<img
width=\"1503\" alt=\"Screenshot 2025-04-30 at 13 04
03\"\nsrc=\"https://github.com/user-attachments/assets/cb203156-a7a8-4f61-bf30-57f7d1484fed\"\n/>\n<img
width=\"1339\" alt=\"Screenshot 2025-04-30 at 13 03
21\"\nsrc=\"https://github.com/user-attachments/assets/8896af7f-9193-41b5-a4b5-970907b084c5\"\n/>\n<img
width=\"1319\" alt=\"Screenshot 2025-04-30 at 13 05
34\"\nsrc=\"https://github.com/user-attachments/assets/12aa556e-8743-4167-9902-14fa9ef2e85d\"\n/>\n\n\nHere's
a short list of tasks handled by this PR:\n\n* [x] New Color by value
option: `None` | `Static` | `Dynamic`\n * Default `None` option is the
default (legacy preserved)\n * [x] `Static` option enables the badge
with the picked color\n* [x] this is also enforced when the Primary
metric is not number based\n(or when primary transition from number to
text)\n * [x] `Dynamic` option enables both the badge coloring and the
icon\n* [x] When disabled a tooltip with the explanation of the issue
appears\n * [x] Trend palette is enabled by default on enable\n* [x]
Added other 3 extra palettes (`Reversed`,
`Temperature`,\n`Complementary`)\n* [x] Each palette has been
implemented using both EUI tokens AND Vis\ntokens\n * [x] Revisited this
decision ♻️ \n * [x] Remove redundant palettes\n * ~~keep only Vis
palettes & hardcode `green` value for now.~~\n* ~~Once EUI exposes the
green token integrate in a follow up.~~\n* Use the `@kbn/palettes`
service with the new `compare_to` palette with\nhardcoded values\n * [x]
Exposes display options: `Icon` | `Value` | `Both`\n * [x] `Both` is the
default\n* [x] `Icon` or `Both` will show up 3 possible icon options:
arrow up,\narrow down and equal sign from unicode\n * [x] Make sure both
text and icon respect breakpoint sizes\n* [x] Remove hack for
breakpoints ( Lens Embeddable + Secondary metric)\nonce new Charts
upgrade is
merged:\nhttps://github.com/elastic/elastic-charts/pull/2627\n* [x]
Remove `theme` and contrast color computation once the Elastic\nCharts
PR above is merged\n * [x] Make sure badge is always accessible\n * [x]
Exposes Trend options: `Static value` | `Primary metric` \n* [x] `Static
value` will show up a new `Baseline` control (debounced)\n* [x] `Primary
metric` is enabled only for numeric primary values\n * [x] When disabled
a tooltip shows up explaining the issue\n* [x] Added description text to
explain difference with the other\ncompare mode\n * [x] Show only delta
value when in Primary \n * [x] Migrated existing `metric_vis` tests from
Enzyme to RTL\n * [x] New tests for the new Secondary metric component
in RTL\n* [x] Added new smoketest + panel mode caching testing for the
metric\nfeature in FTR\n\n\nFew aspects of this feature have been
discussed and deferred to a follow\nup issue:
https://github.com/elastic/kibana/issues/217992\n\n### Checklist\n\n-
[x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios\n\n---------\n\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Nick
Partridge
<nick.ryan.partridge@gmail.com>","sha":"78e74353aafdb5a0397ac4df4dbea5ba8e385e1d","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Visualizations","Feature:Lens","backport
missing","release_note:feature","ci:build-webpack-bundle-analyzer","backport:version","v9.1.0","v8.19.0"],"title":"[Lens]
\"Compare to\" badge for Metric
chart","number":214811,"url":"https://github.com/elastic/kibana/pull/214811","mergeCommit":{"message":"[Lens]
\"Compare to\" badge for Metric chart (#214811)\n\n## Summary\n\nFixes
#184907\n\nThis PR introduces the Trend badge feature into the Secondary
Metric\nchart type.\n<img width=\"1318\" alt=\"Screenshot 2025-04-30 at
13 04
36\"\nsrc=\"https://github.com/user-attachments/assets/6b3c599e-304f-4bc0-8ff2-094ed54ea248\"\n/>\n<img
width=\"1503\" alt=\"Screenshot 2025-04-30 at 13 04
03\"\nsrc=\"https://github.com/user-attachments/assets/cb203156-a7a8-4f61-bf30-57f7d1484fed\"\n/>\n<img
width=\"1339\" alt=\"Screenshot 2025-04-30 at 13 03
21\"\nsrc=\"https://github.com/user-attachments/assets/8896af7f-9193-41b5-a4b5-970907b084c5\"\n/>\n<img
width=\"1319\" alt=\"Screenshot 2025-04-30 at 13 05
34\"\nsrc=\"https://github.com/user-attachments/assets/12aa556e-8743-4167-9902-14fa9ef2e85d\"\n/>\n\n\nHere's
a short list of tasks handled by this PR:\n\n* [x] New Color by value
option: `None` | `Static` | `Dynamic`\n * Default `None` option is the
default (legacy preserved)\n * [x] `Static` option enables the badge
with the picked color\n* [x] this is also enforced when the Primary
metric is not number based\n(or when primary transition from number to
text)\n * [x] `Dynamic` option enables both the badge coloring and the
icon\n* [x] When disabled a tooltip with the explanation of the issue
appears\n * [x] Trend palette is enabled by default on enable\n* [x]
Added other 3 extra palettes (`Reversed`,
`Temperature`,\n`Complementary`)\n* [x] Each palette has been
implemented using both EUI tokens AND Vis\ntokens\n * [x] Revisited this
decision ♻️ \n * [x] Remove redundant palettes\n * ~~keep only Vis
palettes & hardcode `green` value for now.~~\n* ~~Once EUI exposes the
green token integrate in a follow up.~~\n* Use the `@kbn/palettes`
service with the new `compare_to` palette with\nhardcoded values\n * [x]
Exposes display options: `Icon` | `Value` | `Both`\n * [x] `Both` is the
default\n* [x] `Icon` or `Both` will show up 3 possible icon options:
arrow up,\narrow down and equal sign from unicode\n * [x] Make sure both
text and icon respect breakpoint sizes\n* [x] Remove hack for
breakpoints ( Lens Embeddable + Secondary metric)\nonce new Charts
upgrade is
merged:\nhttps://github.com/elastic/elastic-charts/pull/2627\n* [x]
Remove `theme` and contrast color computation once the Elastic\nCharts
PR above is merged\n * [x] Make sure badge is always accessible\n * [x]
Exposes Trend options: `Static value` | `Primary metric` \n* [x] `Static
value` will show up a new `Baseline` control (debounced)\n* [x] `Primary
metric` is enabled only for numeric primary values\n * [x] When disabled
a tooltip shows up explaining the issue\n* [x] Added description text to
explain difference with the other\ncompare mode\n * [x] Show only delta
value when in Primary \n * [x] Migrated existing `metric_vis` tests from
Enzyme to RTL\n * [x] New tests for the new Secondary metric component
in RTL\n* [x] Added new smoketest + panel mode caching testing for the
metric\nfeature in FTR\n\n\nFew aspects of this feature have been
discussed and deferred to a follow\nup issue:
https://github.com/elastic/kibana/issues/217992\n\n### Checklist\n\n-
[x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios\n\n---------\n\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Nick
Partridge
<nick.ryan.partridge@gmail.com>","sha":"78e74353aafdb5a0397ac4df4dbea5ba8e385e1d"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/214811","number":214811,"mergeCommit":{"message":"[Lens]
\"Compare to\" badge for Metric chart (#214811)\n\n## Summary\n\nFixes
#184907\n\nThis PR introduces the Trend badge feature into the Secondary
Metric\nchart type.\n<img width=\"1318\" alt=\"Screenshot 2025-04-30 at
13 04
36\"\nsrc=\"https://github.com/user-attachments/assets/6b3c599e-304f-4bc0-8ff2-094ed54ea248\"\n/>\n<img
width=\"1503\" alt=\"Screenshot 2025-04-30 at 13 04
03\"\nsrc=\"https://github.com/user-attachments/assets/cb203156-a7a8-4f61-bf30-57f7d1484fed\"\n/>\n<img
width=\"1339\" alt=\"Screenshot 2025-04-30 at 13 03
21\"\nsrc=\"https://github.com/user-attachments/assets/8896af7f-9193-41b5-a4b5-970907b084c5\"\n/>\n<img
width=\"1319\" alt=\"Screenshot 2025-04-30 at 13 05
34\"\nsrc=\"https://github.com/user-attachments/assets/12aa556e-8743-4167-9902-14fa9ef2e85d\"\n/>\n\n\nHere's
a short list of tasks handled by this PR:\n\n* [x] New Color by value
option: `None` | `Static` | `Dynamic`\n * Default `None` option is the
default (legacy preserved)\n * [x] `Static` option enables the badge
with the picked color\n* [x] this is also enforced when the Primary
metric is not number based\n(or when primary transition from number to
text)\n * [x] `Dynamic` option enables both the badge coloring and the
icon\n* [x] When disabled a tooltip with the explanation of the issue
appears\n * [x] Trend palette is enabled by default on enable\n* [x]
Added other 3 extra palettes (`Reversed`,
`Temperature`,\n`Complementary`)\n* [x] Each palette has been
implemented using both EUI tokens AND Vis\ntokens\n * [x] Revisited this
decision ♻️ \n * [x] Remove redundant palettes\n * ~~keep only Vis
palettes & hardcode `green` value for now.~~\n* ~~Once EUI exposes the
green token integrate in a follow up.~~\n* Use the `@kbn/palettes`
service with the new `compare_to` palette with\nhardcoded values\n * [x]
Exposes display options: `Icon` | `Value` | `Both`\n * [x] `Both` is the
default\n* [x] `Icon` or `Both` will show up 3 possible icon options:
arrow up,\narrow down and equal sign from unicode\n * [x] Make sure both
text and icon respect breakpoint sizes\n* [x] Remove hack for
breakpoints ( Lens Embeddable + Secondary metric)\nonce new Charts
upgrade is
merged:\nhttps://github.com/elastic/elastic-charts/pull/2627\n* [x]
Remove `theme` and contrast color computation once the Elastic\nCharts
PR above is merged\n * [x] Make sure badge is always accessible\n * [x]
Exposes Trend options: `Static value` | `Primary metric` \n* [x] `Static
value` will show up a new `Baseline` control (debounced)\n* [x] `Primary
metric` is enabled only for numeric primary values\n * [x] When disabled
a tooltip shows up explaining the issue\n* [x] Added description text to
explain difference with the other\ncompare mode\n * [x] Show only delta
value when in Primary \n * [x] Migrated existing `metric_vis` tests from
Enzyme to RTL\n * [x] New tests for the new Secondary metric component
in RTL\n* [x] Added new smoketest + panel mode caching testing for the
metric\nfeature in FTR\n\n\nFew aspects of this feature have been
discussed and deferred to a follow\nup issue:
https://github.com/elastic/kibana/issues/217992\n\n### Checklist\n\n-
[x] [Unit or
functional\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\nwere
updated or added to match the most common
scenarios\n\n---------\n\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Nick
Partridge
<nick.ryan.partridge@gmail.com>","sha":"78e74353aafdb5a0397ac4df4dbea5ba8e385e1d"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: Marco Liberati <dej611@users.noreply.github.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

kibanamachine removed the backport missing label

florent-leborgne mentioned this pull request

[Lens] Document "trend" feature for metrics elastic/docs-content#1664

Closed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:version ci:build-webpack-bundle-analyzer Feature:Lens release_note:feature Team:Visualizations v8.19.0 v9.1.0