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] Add support for icons on metric visualizations #129229

Closed
Tracked by #57707
ryankeairns opened this issue Apr 1, 2022 · 4 comments · Fixed by #154210
Closed
Tracked by #57707

[Lens] Add support for icons on metric visualizations #129229

ryankeairns opened this issue Apr 1, 2022 · 4 comments · Fixed by #154210
Assignees
@stratoula
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
Copy link
Contributor

ryankeairns commented Apr 1, 2022 •
edited
Loading

Describe the feature:
I shall describe it with a picture:

Screen Shot 2022-04-01 at 11 50 23 AM

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:

Screen Shot 2022-04-01 at 11 45 07 AM

Screen Shot 2022-04-01 at 11 56 01 AM

Screen Shot 2022-04-01 at 11 56 39 AM

Screen Shot 2022-04-01 at 11 57 23 AM
@ryankeairns ryankeairns added Team:Visualizations Visualization editors, elastic-charts and infrastructure Feature:Lens labels Apr 1, 2022
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-vis-editors @elastic/kibana-vis-editors-external (Team:VisEditors)

@ryankeairns ryankeairns mentioned this issue Apr 1, 2022
Closed
@mbondyra
Copy link
Contributor

This looks like a very fun issue for the on-Week that happens next week. I'll try to POC it 😊

@mbondyra mbondyra self-assigned this Apr 19, 2022
@ryankeairns
Copy link
Contributor Author

@mbondyra I would be forever grateful and happy to test or provide feedback :)

@mbondyra mbondyra mentioned this issue Apr 26, 2022
Closed
@mbondyra mbondyra removed their assignment May 2, 2022
@stratoula
Copy link
Contributor

stratoula commented Jan 11, 2023 •
edited
Loading

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
image

@stratoula stratoula added the impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. label Jan 16, 2023
@stratoula stratoula self-assigned this Apr 3, 2023
@stratoula stratoula mentioned this issue Apr 3, 2023
Merged
6 tasks
stratoula added a commit that referenced this issue Apr 4, 2023
@stratoula
[Lens] Supports icon in the new metric (#154210)
3754d65 
## 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
Assignees

@stratoula stratoula

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
Projects
None yet
Milestone
No milestone
4 participants
@ryankeairns @mbondyra @elasticmachine @stratoula