feat(metric): Expose both font size and color stylings on the extra prop#2627
Merged
dej611 merged 4 commits intoelastic:mainfrom Mar 24, 2025
Merged
feat(metric): Expose both font size and color stylings on the extra prop#2627dej611 merged 4 commits intoelastic:mainfrom
dej611 merged 4 commits intoelastic:mainfrom
Conversation
dej611
changed the title
27 tasks
Contributor
Author
|
buildkite test this |
markov00
approved these changes
Mar 21, 2025
nickofthyme
pushed a commit
that referenced
this pull request
Mar 26, 2025
# [69.2.0](v69.1.1...v69.2.0) (2025-03-26) ### Features * **metric:** Expose both font size and color stylings on the extra prop ([#2627](#2627)) ([2d21118](2d21118))
markov00
pushed a commit
to markov00/elastic-charts
that referenced
this pull request
Mar 28, 2025
…rop (elastic#2627) * ✨ Add new render props for the extra prop * ✏️ Add storybook story * ✏️ Update api doc * ✅ Add tests
dej611
added a commit
to elastic/kibana
that referenced
this pull request
May 7, 2025
## Summary Fixes #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: #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
pushed a commit
to nickofthyme/kibana
that referenced
this pull request
May 27, 2025
## 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
akowalska622
pushed a commit
to akowalska622/kibana
that referenced
this pull request
May 29, 2025
## 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
to nickofthyme/kibana
that referenced
this pull request
Jun 2, 2025
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>
qn895
pushed a commit
to qn895/kibana
that referenced
this pull request
Jun 3, 2025
## 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
to elastic/kibana
that referenced
this pull request
Jun 3, 2025
# 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>
3 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The
extraprop on the Metric chart now exposes few styling properties to enable chart consumers to size properly inner components accordingly with the rest of the extra content.Details
The features in this PR would help to "harmonize" the extra content when EUI components with inner stylings are adopted.
In particular the
extraprop is subject to size breakpoints and this feature would help with that.Issues
This would help deliver the feature in elastic/kibana#184907
Checklist
:xy,:partition):interactions,:axis)closes #123,fixes #123)