[Lens] Add support for icons on metric visualizations #129229
Assignees
Labels
Feature:Lens
impact:medium
Addressing this issue will have a medium level of impact on the quality/strength of our product.
Team:Visualizations
Visualization editors, elastic-charts and infrastructure
Comments
ryankeairns
added
Team:Visualizations
|
Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors) |
|
This looks like a very fun issue for the on-Week that happens next week. I'll try to POC it 😊 |
|
@mbondyra I would be forever grateful and happy to test or provide feedback :) |
|
Now that the new metric is both on elastic-charts and Lens we could give the users the ability to add icons. This is already possible in EC https://elastic.github.io/elastic-charts/?path=/story/metric-alpha--grid&globals=theme:light We can use the same UI as annotations |
stratoula
added
the
impact:medium
6 tasks
stratoula
added a commit
that referenced
this issue
Apr 4, 2023
## Summary Closes #129229 Adds support for icon on the new metric. <img width="1504" alt="image" src="https://user-images.githubusercontent.com/17003240/229443928-03913111-cdb5-405f-b0af-dee291a0a8f2.png"> Also it moves the IconSelect dropdown to the shared components (from XY) as it now reused from both visualizations. ### 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) - [ ] [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)) - [ ] 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)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the feature:
I shall describe it with a picture:
Source: https://dribbble.com/shots/17096030-MDN-Social-Media-Management
Describe a specific use case for the feature:
While this could provide dynamic visual information, I'm really just seeking capability for largely visual design purposes. In reviewing dashboard designs on the web this is an increasingly common pattern and, imo, it frankly looks nice. We have a large set of icons in EUI (Maps takes this even further with Maki and custom icons) which makes it feel fairly attainable.
A few more examples:
The text was updated successfully, but these errors were encountered: