[Design] create a pie and tree map icon chart for Lens

[AlonaNadler]

We are planning to add pie and treemap charts to Lens shortly.
This issue was the first step in working on chart icon #46287

We will need design's help in creating the new chart icons

cc: @ryankeairns @cchaos

[elasticmachine]

Pinging @elastic/kibana-design (Team:Design)

[cchaos]

Time frame is 7.7

[wylieconlon]

There are actually three chart types that we can support, if we consider sunburst and donut to be separate types:

• Sunburst- multi layer pie
• Donut
• Treemap

[AlonaNadler]

Hey any updates on that one? Who is working on that @ryankeairns ?

[cchaos]

Which charts are we actually designating in the chart switcher for 7.7?

[wylieconlon]

Sunburst- multi layer pie
Donut
Treemap

[AlonaNadler]

Donut can also be a sunburst isn't it?

I would add regular Pie, Donut and treemap where sunburst is a feature inside pie and donut

[wylieconlon]

To break it down as far as possible, these are all of the possible options for icons we could use in the chart switcher:

Single ring

• Donut (default in Kibana)
• Pie
• Treemap

Multiple ring

• Sunburst
• Multi-ring donut?
• Treemap

If you want to make it more explicit when transitioning from single-ring to multi-ring, we can do that. Otherwise, we can make it so that the "rings" option supports one or more rings.

[elizabetdev]

Hello! 👋

Here are the icons.

Preview

Icons Design

I notice all the other icons are inside a frame of 36px x 24px so I followed the rule. They also have a 22px height:

In case it's necessary, you can find the Figma project here

Download

The icons are already optimized and they can be download from the following link:
lens-icons-optimized.zip

[wylieconlon]

@miukimiu Thanks!

[cchaos]

@wylieconlon Feel free to implement the icons into your PR, or just let me know if you'd like me to tackle it.

Thanks so much @miukimiu !!!