[Lens] Clean up and restyle chart switcher

[flash1293]

With #70703 , the chart switcher houses a lot of different chart types.

To make it easier for the user to pick the right one, it should be restyled (introducing sections, adding a search, ...).

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[cchaos]

Here's the mock and the prototype

Simply needs to add headers to sections of keypad menus and a search input in the popover title for filtering.

[flash1293]

Thanks @cchaos , I think that's a nice presentation. We should decide on the sections we want to introduce. I would like to avoid single-chart sections, this is my proposal:

• Bar
  • Vertical
  • Stacked
  • Percentage
  • Horizontal
  • Horizontal stacked
  • Horizontal percentage
• Area
  • Vertical
  • Stacked
  • Percentage
• Line
  • Vertical
• Text
  • Table
  • Metric
• Partition
  • Pie
  • Donut
  • Tree map

The addition to whats visible in the prototype are the "Text" and "Partition" sections. What do you think?

[cchaos]

Do we know any other chart types for the near-ish future that we will be adding? That will help inform the proper sections that will scale better.

[flash1293]

Near term we don’t plan anything else. Long term I can think of heat map and gauge/goal, but it’s not very clear at the moment .

[cchaos]

At some point I'd hope we can get to something more similar to a catalogue that categorizes them even better like by function. But for now, I think what you have works. I'd like to continue to think on the "Text" label, but the groupings work. I'd consider gauge/goal to go under that same "Text" grouping as well, so we can think how that might affect the label name.

[AlonaNadler]

How can we have a chart selection that you don't need to scroll and see all available charts ?

[cchaos]

I'm not sure there's going to be any way around needing to scroll. We want to display not just the group heading and name of the chart but also a graphic (iconic) representation. This all takes spaces. We could possibly optimize this list for the charts we currently have but that just won't scale as we add more and more. Unless you want the chart selection to cover up most of the application UI, there will always be a need to scroll.

My mock, which is just that, may not be fully representative of the actual spacing so we may get some more condensed spacing in implementation.

---

I'd also like to discuss the naming. At the very least, the display name we use in the toolbar button itself. Now that we are using the rest of that space to add buttons to adjust the display of the chart, we quickly run into situations where those buttons start wrapping to new lines because the chart select button gets so wide because the chart name is so long.

For instance, maybe we could shorten the above name to Stacked H. Bar. Basically removing the static word "chart" everywhere and using H. for Horizontal.