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.

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

[Lens] Supports icon in the new metric #154210

Merged
merged 6 commits into from
Apr 4, 2023

Conversation

stratoula
Copy link
Contributor

@stratoula stratoula commented Apr 3, 2023

Summary

Closes #129229

Adds support for icon on the new metric.

image

Also it moves the IconSelect dropdown to the shared components (from XY) as it now reused from both visualizations.

Checklist

@@ -15,3 +15,23 @@ export const LabelPosition = {
BOTTOM: 'bottom',
TOP: 'top',
} as const;

export const AvailableMetricIcons = {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@gvnmagni @markov00 can you help me with the icons dropdown for the metric? I added the sortUp/Down and compute as they are also on the EC documentation and some others that also exist in annotations. But I am not sure if they are all helpful for the metric. Wdyt?

Copy link

@gvnmagni gvnmagni Apr 4, 2023

Choose a reason for hiding this comment

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

I was about to ask if we could add all icons from EUI but I realized how many are them, should we make a selection? How can we define the most important ones?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes this is what we did for annotations and reference lines. We selected the icons we think are most commonly used. I dont know how we define the most important ones tbh. We can go with this set and change by user's feedback. Do you think they are important icons that are missing possibly and you can think of use cases?

Copy link

Choose a reason for hiding this comment

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

Probably better to use "pin" instead of "pinFilled" so that we are more consistent with other icons that are not filled, for the same reason I think we can avoid including "starFilled" if there are no other important reasons to have it since we already have "starEmpty"

From EUI icons, I would add:

  • "globe", to have something related to geography, I'm thinking about having Metric related to countries or similar
  • "temperature", to allow machines monitoring

From my point of view I don't see any other icons that might be important to have :)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanx Gio, done 8681956

@stratoula stratoula added release_note:enhancement Team:Visualizations Visualization editors, elastic-charts and infrastructure Feature:Lens backport:skip This commit does not require backporting v8.8.0 labels Apr 3, 2023
@stratoula stratoula marked this pull request as ready for review April 3, 2023 09:34
@stratoula stratoula requested a review from a team as a code owner April 3, 2023 09:34
@elasticmachine
Copy link
Contributor

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

Copy link
Contributor

@drewdaemon drewdaemon left a comment

Choose a reason for hiding this comment

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

Works well. Fun!

const getIcon =
(type: string) =>
({ width, height, color }: { width: number; height: number; color: string }) =>
<EuiIcon type={type} width={width} height={height} fill={color} style={{ width, height }} />;
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: this mapping isn't under test... not a big deal

@kibana-ci
Copy link
Collaborator

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
lens 891 892 +1

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
expressionMetricVis 64 67 +3

Async chunks

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

id before after diff
expressionMetricVis 71.4KB 71.6KB +231.0B
lens 1.3MB 1.3MB +2.5KB
total +2.7KB

Page load bundle

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

id before after diff
expressionMetricVis 13.9KB 14.1KB +157.0B
Unknown metric groups

API count

id before after diff
expressionMetricVis 64 67 +3

ESLint disabled line counts

id before after diff
securitySolution 432 435 +3

Total ESLint disabled count

id before after diff
securitySolution 512 515 +3

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@stratoula stratoula merged commit 3754d65 into elastic:main Apr 4, 2023
@KOTungseth KOTungseth mentioned this pull request Apr 25, 2023
19 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:skip This commit does not require backporting Feature:Lens release_note:enhancement Team:Visualizations Visualization editors, elastic-charts and infrastructure v8.8.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Lens] Add support for icons on metric visualizations
6 participants