Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Lens][Heatmap] Add ability to rotate X axis label #202143

Merged
merged 12 commits into from
Jan 16, 2025
Merged

[Lens][Heatmap] Add ability to rotate X axis label #202143

merged 12 commits into from
Jan 16, 2025

Conversation

mariairiartef
Copy link
Contributor

@mariairiartef mariairiartef commented Nov 28, 2024 •
edited by kibanamachine
Loading

Summary

Closes #61248

Adds the ability to rotate the X-axis labels in the heatmap chart.

Screenshot 2025-01-08 at 16 50 20

Screen recording

Screen.Recording.2025-01-08.at.16.52.05.mov

Checklist

@mariairiartef mariairiartef changed the title Add ability to rotate x axis in heatmap [Lens] [Heatmap] Add ability to rotate X axis label Nov 28, 2024
@mariairiartef mariairiartef added Feature:Lens Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Nov 28, 2024
@mariairiartef mariairiartef added Feature:Heatmap Heatmap visualization and removed Feature:Heatmap Heatmap visualization labels Jan 8, 2025
This was referenced Jan 9, 2025
Closed
Closed
@mariairiartef
Copy link
Contributor Author

🚀 Enhancement

In this PR we are adding the ability to rote X-axis labels in heatmap. We should also add this feature for the Y-axis.

We decided to add this new feature in a separate PR.

Created #206036

@mariairiartef
Copy link
Contributor Author

mariairiartef commented Jan 9, 2025 •
edited
Loading

Ideally, we should add a functional test to test this new feature. However, now is not possible to check it from the heatmap debugState as the rotation properties are not available.

We have decided to add the rotation properties in the debug state and then add the funcional test.

Created elastic/elastic-charts#2578 #206053

mbondyra
mbondyra reviewed Jan 9, 2025
View reviewed changes
Copy link
Contributor

@mbondyra mbondyra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Such a great improvement! Tested and approved!

@mariairiartef mariairiartef mentioned this pull request Jan 9, 2025
Closed
@mariairiartef mariairiartef marked this pull request as ready for review January 9, 2025 13:17
@mariairiartef mariairiartef requested a review from a team as a code owner January 9, 2025 13:17
@elasticmachine
Copy link
Contributor

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

@mariairiartef mariairiartef added release_note:skip Skip the PR/issue when compiling release notes backport:version Backport to applied version labels labels Jan 9, 2025
@nickofthyme nickofthyme changed the title [Lens] [Heatmap] Add ability to rotate X axis label [Lens][Heatmap] Add ability to rotate X axis label Jan 9, 2025
@mbondyra mbondyra added release_note:feature Makes this part of the condensed release notes and removed release_note:skip Skip the PR/issue when compiling release notes labels Jan 10, 2025
@mbondyra mbondyra requested a review from a team as a code owner January 15, 2025 14:32
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
lens 1762 1754 -8

Public APIs missing comments

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

id before after diff
expressionHeatmap 108 111 +3

Async chunks

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

id before after diff
expressionHeatmap 28.2KB 28.3KB +84.0B
lens 1.6MB 1.6MB +264.0B
total +348.0B

Page load bundle

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

id before after diff
expressionHeatmap 14.8KB 14.9KB +188.0B
Unknown metric groups

API count

id before after diff
expressionHeatmap 112 115 +3

History

cc @mbondyra @mariairiartef

gvnmagni
gvnmagni approved these changes Jan 16, 2025
View reviewed changes
Copy link

@gvnmagni gvnmagni left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and works perfectly! Could not find any issue

@mariairiartef mariairiartef merged commit 2f6b9f6 into elastic:main Jan 16, 2025
8 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/12811155302

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jan 16, 2025
@mariairiartef
[Lens][Heatmap] Add ability to rotate X axis label (elastic#202143)
f623bbc 
## Summary

Closes elastic#61248

Adds the ability to rotate the X-axis labels in the heatmap chart.

<img width="2560" alt="Screenshot 2025-01-08 at 16 50 20"
src="https://github.com/user-attachments/assets/0847dd6d-747d-4a4d-bc7e-4da6c903d394"
/>

#### Screen recording

https://github.com/user-attachments/assets/f4834722-b296-4239-a9d4-25c5fd8c738b

### 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/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] 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)

---------

Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
(cherry picked from commit 2f6b9f6)
@kibanamachine kibanamachine mentioned this pull request Jan 16, 2025
Merged
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
✅ 8.x

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

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Jan 16, 2025
@kibanamachine @mariairiartef
[8.x] [Lens][Heatmap] Add ability to rotate X axis label (#202143) (#…
9988dc0 
…206957)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Lens][Heatmap] Add ability to rotate X axis label
(#202143)](#202143)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Maria
Iriarte","email":"106958839+mariairiartef@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-01-16T14:36:37Z","message":"[Lens][Heatmap]
Add ability to rotate X axis label (#202143)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/61248\r\n\r\nAdds the ability
to rotate the X-axis labels in the heatmap chart.\r\n\r\n<img
width=\"2560\" alt=\"Screenshot 2025-01-08 at 16 50
20\"\r\nsrc=\"https://github.com/user-attachments/assets/0847dd6d-747d-4a4d-bc7e-4da6c903d394\"\r\n/>\r\n\r\n####
Screen
recording\r\n\r\n\r\nhttps://github.com/user-attachments/assets/f4834722-b296-4239-a9d4-25c5fd8c738b\r\n\r\n###
Checklist\r\n\r\n- [x] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] The PR
description includes the appropriate Release Notes section,\r\nand the
correct `release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>","sha":"2f6b9f67d8351a5688e9c3753a4a7234e466dc6a","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Visualizations","Feature:Lens","v9.0.0","release_note:feature","backport:version","v8.18.0"],"title":"[Lens][Heatmap]
Add ability to rotate X axis
label","number":202143,"url":"https://github.com/elastic/kibana/pull/202143","mergeCommit":{"message":"[Lens][Heatmap]
Add ability to rotate X axis label (#202143)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/61248\r\n\r\nAdds the ability
to rotate the X-axis labels in the heatmap chart.\r\n\r\n<img
width=\"2560\" alt=\"Screenshot 2025-01-08 at 16 50
20\"\r\nsrc=\"https://github.com/user-attachments/assets/0847dd6d-747d-4a4d-bc7e-4da6c903d394\"\r\n/>\r\n\r\n####
Screen
recording\r\n\r\n\r\nhttps://github.com/user-attachments/assets/f4834722-b296-4239-a9d4-25c5fd8c738b\r\n\r\n###
Checklist\r\n\r\n- [x] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] The PR
description includes the appropriate Release Notes section,\r\nand the
correct `release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>","sha":"2f6b9f67d8351a5688e9c3753a4a7234e466dc6a"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/202143","number":202143,"mergeCommit":{"message":"[Lens][Heatmap]
Add ability to rotate X axis label (#202143)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/61248\r\n\r\nAdds the ability
to rotate the X-axis labels in the heatmap chart.\r\n\r\n<img
width=\"2560\" alt=\"Screenshot 2025-01-08 at 16 50
20\"\r\nsrc=\"https://github.com/user-attachments/assets/0847dd6d-747d-4a4d-bc7e-4da6c903d394\"\r\n/>\r\n\r\n####
Screen
recording\r\n\r\n\r\nhttps://github.com/user-attachments/assets/f4834722-b296-4239-a9d4-25c5fd8c738b\r\n\r\n###
Checklist\r\n\r\n- [x] Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n-
[x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] The PR
description includes the appropriate Release Notes section,\r\nand the
correct `release_note:*` label is applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>","sha":"2f6b9f67d8351a5688e9c3753a4a7234e466dc6a"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Maria Iriarte <106958839+mariairiartef@users.noreply.github.com>
@mariairiartef mariairiartef mentioned this pull request Jan 23, 2025
Merged
2 tasks
viduni94 pushed a commit to viduni94/kibana that referenced this pull request Jan 23, 2025
@mariairiartef @mbondyra @viduni94
[Lens][Heatmap] Add ability to rotate X axis label (elastic#202143)
3483880 
## Summary

Closes elastic#61248

Adds the ability to rotate the X-axis labels in the heatmap chart.

<img width="2560" alt="Screenshot 2025-01-08 at 16 50 20"
src="https://github.com/user-attachments/assets/0847dd6d-747d-4a4d-bc7e-4da6c903d394"
/>

#### Screen recording


https://github.com/user-attachments/assets/f4834722-b296-4239-a9d4-25c5fd8c738b

### 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/packages/kbn-i18n/README.md)
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] 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)

---------

Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
mariairiartef added a commit that referenced this pull request Feb 7, 2025
@mariairiartef @mbondyra
[Lens] Use AxisLabelOrientationSelector in xy axis settings (#208002)
2657b86 
## Summary

Closes #206040

- Uses the `AxisLabelOrientationSelector` component, which was
introduced in [202143](#202143),
in the XY chart axis settings.
- Adds `AxesSettingsConfig` and `AxesSettingsConfigKeys` declarations in
`x-pack/platform/plugins/shared/lens/public/shared_components/axis/types.ts`
file

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] 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)

---------

Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Feb 7, 2025
@mariairiartef
[Lens] Use AxisLabelOrientationSelector in xy axis settings (elastic#…
9c0c07e 
…208002)

## Summary

Closes elastic#206040

- Uses the `AxisLabelOrientationSelector` component, which was
introduced in [202143](elastic#202143),
in the XY chart axis settings.
- Adds `AxesSettingsConfig` and `AxesSettingsConfigKeys` declarations in
`x-pack/platform/plugins/shared/lens/public/shared_components/axis/types.ts`
file

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] 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)

---------

Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
(cherry picked from commit 2657b86)
mariairiartef added a commit to mariairiartef/kibana that referenced this pull request Feb 7, 2025
@mariairiartef @mbondyra
[Lens] Use AxisLabelOrientationSelector in xy axis settings (elastic#…
f48d1b2 
…208002)

## Summary

Closes elastic#206040

- Uses the `AxisLabelOrientationSelector` component, which was
introduced in [202143](elastic#202143),
in the XY chart axis settings.
- Adds `AxesSettingsConfig` and `AxesSettingsConfigKeys` declarations in
`x-pack/platform/plugins/shared/lens/public/shared_components/axis/types.ts`
file

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] 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)

---------

Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
This was referenced Feb 20, 2025
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@markov00 markov00 markov00 left review comments

@mbondyra mbondyra mbondyra approved these changes

@gvnmagni gvnmagni gvnmagni approved these changes

@nickofthyme nickofthyme nickofthyme approved these changes

Assignees

@mbondyra mbondyra

@mariairiartef mariairiartef

Labels
backport:version Backport to applied version labels Feature:Lens release_note:feature Makes this part of the condensed release notes Team:Visualizations Visualization editors, elastic-charts and infrastructure v8.18.0 v9.0.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Lens] Ability to rotate axis tick labels in heatmap
7 participants
@mariairiartef @elasticmachine @kibanamachine @markov00 @mbondyra @gvnmagni @nickofthyme