Kibana: Simplify presentation in "select visualization type"

[tbragin]

@cjcenizal

Per your request, coming out of this discussion (https://github.com/elastic/kibana/pull/9725#issuecomment-272034444), a couple of suggestions on how to simplify the "select visualization type" after we implement this: https://github.com/elastic/kibana/pull/9605:

• Remove descriptions for visualization types. They are very long and largely uninformative. I think most people know what a pie chart is and we don't need two sentences to explain that. On the flip side, this treatment pushes important visualization types off the screen and makes it harder for users to discover what the need.
• Rename "Metric" -> "Number" (because the word "metrics" is something we are using to indicate a specific use case... e.g. metric use case as in "Metricbeat", and might confuse some)
• Rename "Timeseries" to "Timeseries: Timelion chart" (use Timelion icon instead of the clock)
• @uboness also suggested sorting list of visualizations non-alphabetically to put the most important visualizations first, and to group time-series related items at the bottom. I'm a bit conflicted about that last one, as when the list gets longer, it's going to be harder and harder to have a sane ordering. Maybe we can arrange these in groups or areas in the future?
  
  
  
  • Line chart
  
  
  • Area chart
  
  
  • Vertical bar chart
  
  
  • Horizontal bar chart (when comes)
  
  
  • Pie chart
  
  
  • Data table
  
  
  • Number (formerly Metric)
  
  
  • Heatmap
  
  
  • Markdown widget
  
  
  • Tagcloud
  
  
  • Tilemap
  
  
  • Vectormap (when comes)
  
  
  • "Timeseries: Visual builder" (via this PR)
  
  
  • "Timeseries: Timelion chart"
  
  

[alexfrancoeur]

@tbragin Just for reference, Google Docs groups charts in these categories:

• Line
• Area
• Bar
• Pie
• Scatter
• Map
• Other

As this list grows, I think something similar will be helpful. The approach they take for descriptions is interesting as well. Rather than text, they provide a more detailed thumbnail of the chart type. This might also be worth considering.

[tbragin]

I like the thumbnail idea, though some concepts like "Timelion" may be harder to communicate with that. Perhaps those can remain icons.

[cjcenizal]

@alexfrancoeur Thanks for the research and great screenshot! On the Design team, we've talked about using these kinds of thumbnails for a "Tile view" on the listing pages, but using them in the Wizard is also a great call. That screenshot really helps solidify the concept.

[uboness]

I like the thumbnail idea, though some concepts like "Timelion" may be harder to communicate with that. Perhaps those can remain icons.

This can go under a "Timeseries" category. As for the thumbnail, we can figure it out... for example, the timelion icon can do the job (and yes... it doesn't really explains what it is and only ppl who know timelion will understand it... that said, that's exactly the case today where we say "Timeseries: Timelion Chart")

[Bargs]

Some kind of grouping is going to be a necessity in 6.0...

With xpack in master, I just counted 19 different vis types. I was overwhelmed even though I knew what I was looking for.

[alexfrancoeur]

@snide If you have some time today or tomorrow - let's discuss in a bit more detail

[snide]

Notes for me....

• Grid out the add visualization page.
• Clean up "add" button from the current vis list page.

[alexfrancoeur]

Most recent mockup from design below. There are still a few more items that need to be completed.

• [ ] Finalized icons and SVG's
• [ ] New button component with tooltip

@cjcenizal is there a PR I can link to for the new component? I know Dave added a task to the design board but wasn't sure if there was an actual PR for Kibana

[cjcenizal]

Closed by https://github.com/elastic/kibana/pull/10972/files

[cjcenizal]

We've redesigned the "Create Visualization" wizard! We've grouped the different visualization types into buckets and created unique icons for each visualization type, making it easier for you to find the type of visualization you're looking for.

[Bargs]

I really like the new design, nice work guys