Increase Legend width for Data Histogram #162932
Assignees
Labels
bug
Fixes for quality problems that affect the customer experience
Feature:Discover
Discover Application
Feature:UnifiedHistogram
Issues related to the Unified Histogram plugin
impact:low
Addressing this issue will have a low level of impact on the quality/strength of our product.
loe:small
Small Level of Effort
Team:DataDiscovery
Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL.
usability
Comments
timductive
added
bug
|
Pinging @elastic/kibana-data-discovery (Team:DataDiscovery) |
9 tasks
davismcphee
added
loe:small
davismcphee
added a commit
that referenced
this issue
Aug 3, 2023
…rapping in legend labels (#163009) ## Summary This PR sets the Unified Histogram chart's legend width to extra large and enables text wrapping in legend labels. Note that this means the legend will always use the extra large size (230px) even if the screen size is small or the labels do not fill the available legend space. With long labels: <img width="1369" alt="long" src="https://github.com/elastic/kibana/assets/25592674/1f6f0d80-d924-48a4-b758-4cf72b99fc57"> With short labels: <img width="1369" alt="short" src="https://github.com/elastic/kibana/assets/25592674/704f2b75-a565-44a0-be1a-e27bdca00a8e"> Resolves #162932. ### 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/packages/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 - [ ] ~Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/))~ - [ ] ~Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))~ - [ ] ~If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~ - [ ] ~This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))~ - [ ] ~This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)~ ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <[email protected]>
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Aug 3, 2023
…rapping in legend labels (elastic#163009) ## Summary This PR sets the Unified Histogram chart's legend width to extra large and enables text wrapping in legend labels. Note that this means the legend will always use the extra large size (230px) even if the screen size is small or the labels do not fill the available legend space. With long labels: <img width="1369" alt="long" src="https://github.com/elastic/kibana/assets/25592674/1f6f0d80-d924-48a4-b758-4cf72b99fc57"> With short labels: <img width="1369" alt="short" src="https://github.com/elastic/kibana/assets/25592674/704f2b75-a565-44a0-be1a-e27bdca00a8e"> Resolves elastic#162932. ### 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/packages/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 - [ ] ~Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/))~ - [ ] ~Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))~ - [ ] ~If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~ - [ ] ~This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))~ - [ ] ~This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)~ ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit 79303c2)
kibanamachine
added a commit
that referenced
this issue
Aug 3, 2023
…text wrapping in legend labels (#163009) (#163060) # Backport This will backport the following commits from `main` to `8.9`: - [[Unified Histogram] Set legend width to extra large and enable text wrapping in legend labels (#163009)](#163009) <!--- Backport version: 8.9.7 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Davis McPhee","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-08-03T13:00:14Z","message":"[Unified Histogram] Set legend width to extra large and enable text wrapping in legend labels (#163009)\n\n## Summary\r\n\r\nThis PR sets the Unified Histogram chart's legend width to extra large\r\nand enables text wrapping in legend labels.\r\n\r\nNote that this means the legend will always use the extra large size\r\n(230px) even if the screen size is small or the labels do not fill the\r\navailable legend space.\r\n\r\nWith long labels:\r\n<img width=\"1369\" alt=\"long\"\r\nsrc=\"https://github.com/elastic/kibana/assets/25592674/1f6f0d80-d924-48a4-b758-4cf72b99fc57\">\r\n\r\nWith short labels:\r\n<img width=\"1369\" alt=\"short\"\r\nsrc=\"https://github.com/elastic/kibana/assets/25592674/704f2b75-a565-44a0-be1a-e27bdca00a8e\">\r\n\r\nResolves #162932.\r\n\r\n### Checklist\r\n\r\n- [ ] ~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- [ ]\r\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas added for features that require explanation or tutorials~\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- [ ] ~Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard\r\naccessibility](https://webaim.org/techniques/keyboard/))~\r\n- [ ] ~Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))~\r\n- [ ] ~If a plugin configuration key changed, check if it needs to be\r\nallowlisted in the cloud and added to the [docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~\r\n- [ ] ~This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))~\r\n- [ ] ~This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)~\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"79303c24f6ee395a3860947a691ff8da1df7c4d6","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement","Feature:Discover","Team:DataDiscovery","backport:prev-minor","Feature:UnifiedHistogram","v8.10.0"],"number":163009,"url":"https://github.com/elastic/kibana/pull/163009","mergeCommit":{"message":"[Unified Histogram] Set legend width to extra large and enable text wrapping in legend labels (#163009)\n\n## Summary\r\n\r\nThis PR sets the Unified Histogram chart's legend width to extra large\r\nand enables text wrapping in legend labels.\r\n\r\nNote that this means the legend will always use the extra large size\r\n(230px) even if the screen size is small or the labels do not fill the\r\navailable legend space.\r\n\r\nWith long labels:\r\n<img width=\"1369\" alt=\"long\"\r\nsrc=\"https://github.com/elastic/kibana/assets/25592674/1f6f0d80-d924-48a4-b758-4cf72b99fc57\">\r\n\r\nWith short labels:\r\n<img width=\"1369\" alt=\"short\"\r\nsrc=\"https://github.com/elastic/kibana/assets/25592674/704f2b75-a565-44a0-be1a-e27bdca00a8e\">\r\n\r\nResolves #162932.\r\n\r\n### Checklist\r\n\r\n- [ ] ~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- [ ]\r\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas added for features that require explanation or tutorials~\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- [ ] ~Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard\r\naccessibility](https://webaim.org/techniques/keyboard/))~\r\n- [ ] ~Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))~\r\n- [ ] ~If a plugin configuration key changed, check if it needs to be\r\nallowlisted in the cloud and added to the [docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~\r\n- [ ] ~This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))~\r\n- [ ] ~This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)~\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"79303c24f6ee395a3860947a691ff8da1df7c4d6"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.10.0","labelRegex":"^v8.10.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/163009","number":163009,"mergeCommit":{"message":"[Unified Histogram] Set legend width to extra large and enable text wrapping in legend labels (#163009)\n\n## Summary\r\n\r\nThis PR sets the Unified Histogram chart's legend width to extra large\r\nand enables text wrapping in legend labels.\r\n\r\nNote that this means the legend will always use the extra large size\r\n(230px) even if the screen size is small or the labels do not fill the\r\navailable legend space.\r\n\r\nWith long labels:\r\n<img width=\"1369\" alt=\"long\"\r\nsrc=\"https://github.com/elastic/kibana/assets/25592674/1f6f0d80-d924-48a4-b758-4cf72b99fc57\">\r\n\r\nWith short labels:\r\n<img width=\"1369\" alt=\"short\"\r\nsrc=\"https://github.com/elastic/kibana/assets/25592674/704f2b75-a565-44a0-be1a-e27bdca00a8e\">\r\n\r\nResolves #162932.\r\n\r\n### Checklist\r\n\r\n- [ ] ~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- [ ]\r\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas added for features that require explanation or tutorials~\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- [ ] ~Any UI touched in this PR is usable by keyboard only (learn more\r\nabout [keyboard\r\naccessibility](https://webaim.org/techniques/keyboard/))~\r\n- [ ] ~Any UI touched in this PR does not create any new axe failures\r\n(run axe in browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))~\r\n- [ ] ~If a plugin configuration key changed, check if it needs to be\r\nallowlisted in the cloud and added to the [docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~\r\n- [ ] ~This renders correctly on smaller devices using a responsive\r\nlayout. (You can test this [in your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))~\r\n- [ ] ~This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)~\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"79303c24f6ee395a3860947a691ff8da1df7c4d6"}}]}] BACKPORT--> Co-authored-by: Davis McPhee <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Increase the legend width in the Discover Data Histogram for readability.
The text was updated successfully, but these errors were encountered: