[Lens] Support icicle chart

[flash1293]

elastic-charts supports icicle charts: https://elastic.github.io/elastic-charts/?path=/story/flame-alpha--icicle-chart

We should support this chart type as an alternative to other partition charts (pie/donut/tree map). Be aware to not confuse this feature with flame charts using a time-based x axis (something we can't easily support today)

[elasticmachine]

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

[wylieconlon]

There are some rendering caveats that I think we need to be aware of when testing this:

1. The size of the top level rectangles is based on the size of the lower level rectangles, it's not provided in a separate way. So the gaps shown in the example are explicitly added.
2. Sort order matters
3. The way the color palette is used here is different from the way color palettes are currently used in Lens. It's colored by depth, but the series name is ignored.

[flash1293]

Yeah, the screenshot is a little misleading. The way I had expected it to work in case of Lens (as another partition chart type):

• Color is applied in the same way as pie/donut/treemap based on the top layer
• No gaps are visible, it's shown as a rectangle
• It's basically a donut chart which is cut open at one point and bent straight
• The advantage is that we can allow more layers than in a donut/tree map

[wylieconlon]

@flash1293 great, I think we have the same expectations. So even though it's usually called an "icicle chart" I think we are agreeing that we won't see the "spike" effect that is shown in the original screenshot. Instead, we are expecting the chart to look like a rectangle.

[flash1293]

We should propably not call it icicle chart in the UI because it will be really low on icicles

[wylieconlon]

So for reference, I think our charts will look a lot more like this public example by Adam McCann:

The important parts to identify about how this looks:

• No gaps
• Coloring is based on the name of the top level
• Looks like a custom sort order

However we would not be able to support the Axis labeling like that example shows.

cc @markov00 @monfera

[monfera]

@wylieconlon we've been working on separating the axis and making it its own thing. That, plus its reuse should make it possible to add a temporal or quantitative axis to monotonic (mostly linear / continuous) projections eg. icicle/flame.

Charts that have two such projections, at the present time mosaic/marimekko, could gain up to two optional axes.

Custom sort orders are already in for pie/sunburst, and icicle/flame have just always followed the order the data is specified in, because that was deemed the common use case at the time. For variety's sake, there's yet another sorting non-uniformity: treemaps can't be meaningfully sorted, as the layout algo determines the placement (I'm sure there's some special case for treemaps when sorting would be meaningful.

Regarding color, currently it's up to Lens to provide the colors. I don't necessarily think that the same exact strategy must be used for icicle/flame as for sunburst; it varies by partitionType eg. treemap is again a different thing. The two common coloring strategies of icicle/flame:

• color gradients, eg. a discretized viridis palette (or something else that's perceptually uniform, even for dichromatic and monochromatic vision), shown in our storybook
• categorical color, eg. each name corresponds to something

Still, a sunburst-type coloring probably works too as an initial option, after all it's yet another type of categorical coloring.

One thing to consider with icicle/flame is the currently click activated in-chart drilldown, which also needs { drilldown: true, fillLabel: { clipText: true } } - it's best to use it if/when a "Reset" hotspot on the top right of the chart is eventually added. Pls. let us know if that need is on the radar.

[timductive]

Closing this issue until we have customer's requesting this chart type given the other partition charts already supported in Lens.