feat(metric): add new layout configurations #2666
Merged
Conversation
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
mariairiartef
force-pushed
the
metric-new-positions
branch
from
cc2a37b to
ffbcf1b
Compare
mariairiartef
force-pushed
the
metric-new-positions
branch
from
3798595 to
c97c469
Compare
mariairiartef
force-pushed
the
metric-new-positions
branch
from
0ce7af1 to
797dc92
Compare
mariairiartef
force-pushed
the
metric-new-positions
branch
from
dc6d8b1 to
5fcef4d
Compare
mariairiartef
force-pushed
the
metric-new-positions
branch
from
fec45a7 to
7dc5b9c
Compare
markov00
reviewed
Aug 5, 2025
packages/charts/src/chart_types/metric/renderer/dom/secondary_metric.tsx
Outdated
Show resolved
Hide resolved
delanni
pushed a commit
to delanni/kibana
that referenced
this pull request
Aug 5, 2025
…9323) Part of elastic#228964 ## Summary As part of elastic#228964, this extracts secondary metric information into a utility function. The goal is to prepare for the adoption of the new metric chart version introduced in elastic/elastic-charts#2666, so we can use the default secondary metric component with the data provided by this utility. ### Checklist - [ ] [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. --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Marco Liberati <[email protected]>
Contributor
Author
|
buildkite update screenshots |
Contributor
Author
|
buildkite update screenshots |
markov00
approved these changes
Aug 7, 2025
Contributor
Author
|
buildkite update screenshots |
mariairiartef
force-pushed
the
metric-new-positions
branch
from
3bfa392 to
fdefbd3
Compare
mariairiartef
force-pushed
the
metric-new-positions
branch
from
fdefbd3 to
bd58c93
Compare
Contributor
Author
|
buildkite update screenshots |
nickofthyme
pushed a commit
that referenced
this pull request
Aug 11, 2025
# [71.0.0](v70.1.3...v71.0.0) (2025-08-11) ### Features * **metric:** add new layout configurations ([#2666](#2666)) ([c13409a](c13409a)) ### BREAKING CHANGES * **metric:** The `valuesTextAlign` property in `MetricStyle` has been removed. Use the new `valueTextAlign` (for main value alignment) and `extraTextAlign` (for extra/secondary alignment) properties instead.
9 tasks
NicholasPeretti
pushed a commit
to NicholasPeretti/kibana
that referenced
this pull request
Aug 18, 2025
…9323) Part of elastic#228964 ## Summary As part of elastic#228964, this extracts secondary metric information into a utility function. The goal is to prepare for the adoption of the new metric chart version introduced in elastic/elastic-charts#2666, so we can use the default secondary metric component with the data provided by this utility. ### Checklist - [ ] [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. --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Marco Liberati <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 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.
Closes elastic/kibana#220618
Summary
Updates metric chart with new progress bar styling, distinct text colors for subtitle and extra elements, and configurable value (primary metric) positioning options (top/bottom). Additionally, creates a secondary metric component that can be used instead of a custom component.
Resources
BREAKING CHANGE
The
valuesTextAlignproperty inMetricStylehas been removed. Use the newvalueTextAlign(for main value alignment) andextraTextAlign(for extra/secondary alignment) properties instead.Details
theme.ts)valuesTextAlignsettingextraTextAlign,valueTextAlign,valuePosition,titleWeightsettingstextSubtitleDarkColor,textSubtitleLightColor,textExtraDarkColor,textExtraLightColor(done in
text.tsx)'bold'or'regular'Things that haven't been yet addressed
Issues
closes elastic/kibana#220618
Checklist
:xy,:partition):interactions,:axis)closes #123,fixes #123)packages/charts/src/index.tslightanddarkthemes