Tree Map chart support in event analytics

[pratibhapandey16]

1. Add Tree Map chart as a dropdown option. Refer dropdown element on top right corner of image.
2. On selection of it, it should render a Tree Map chart based on data selected.

This issue contains the below tasks.

• Adding Tree Map chart to the dropdown on the UI
• Cypress testing(Automation)

[mrunal-z]

Hi @mengweieric,

The basic implementation of the Treemap chart is as shown:

OpenSearch.Dashboards.-.Google.Chrome.2022-04-20.15-31-40.1.mp4

For now, we are displaying the treemap till 2 levels:

• 1 level chart - Created by default, the label field is picked from any of the y-axis fields and the value field is any numerical field. Can also be created by leaving the parent field empty in value options.

• 2 level chart - Created by adding parent field and label field in the proper hierarchy, and value field as any numerical field.

In cases where the tree map cannot be formed (if the value field is not numerical, or the label field and parent field are the same) then the 'No results found' placeholder is displayed.

Inputs needed:

• To form more nested charts, we need the option to dynamically add multiple parent fields. We will need designs for the config panel to add this feature.
• Currently, treemap chart doesn't have any icon in the Eui Icons library, so which one do we use?

Thanks,
Mrunal

[mrunal-z]

Hey @mengweieric @btzeng -
In opensearch-project/dashboards-observability#78, in the chart config table, there are no config options listed for treemap yet.
Currently, I have included the following options in the config panel:

1. Panel options- title, description
2. Value mappings - parent field, child field, value field

Can you please let me know what other options we will need to add?
Thanks!
@anirudha @abasatwar @spattnaik

[mengweieric]

Hi @mrunal-z,

Thanks for the demo, it looks good. I'll work with ux for the flow to add more fields. For treemap, please go ahead to add chart styles (this is renamed from chart option) and add specific style config options like color palate to it.

Thanks

[btzeng]

@mrunal-z Thanks for sharing the update. I will add config for treemap in opensearch-project/dashboards-observability#78

[btzeng]

@mrunal-z Treemap config updated

[mrunal-z]

Hey @mengweieric @btzeng -

As we had discussed, I have implemented the color theme using the plotly colorscale options and EuiColorPalettePicker.

Attaching an example of how the themes get applied to both normal and nested treemaps. (see next comment for video)

Currently, I have added the following palettes: Bluered, Blues, Greens, Greys, RdBu, Reds, YlGnBu, YlOrRd

We can also add -

1. An option to display the entire treemap in a single color (which user can select with a colorpicker)
2. Any of the other palette options present in plotly - Blackbody,Cividis,Earth,Electric,Hot,Jet,Picnic,Portland,Rainbow,Viridis

Let me know if this is what you were looking for, and if I should go ahead with adding the above as well.
Thanks!

[ruchika-narang]

OpenSearch.Dashboards.-.Google.Chrome.2022-05-10.19-43-27.1.mp4

[btzeng]

@ruchika-narang Good work on parent/child inputs as well as color theme selections. Thanks for sharing the video!

[btzeng]

@mrunal-z
For the color scheme, shades and themes are great to show data correlation through intensity.
For single color selection, are you thinking to provide multiple color selections?

[mrunal-z]

Hey @mengweieric , @btzeng

Here is the demo video for the implementation of tiling algorithm and single color config options -

Treemap_Config_Options.mp4

@btzeng , as we know, the same single color selected applies to both parent and child elements.
I have implemented 2 other options that we can consider instead:

1. We allow the user to select one color, which gets applied to the child elements, while a lighter shade of the color applies to the parent elements.

Treemap_Single_Color_Shaded.mp4

2. We allow the user to select colors for both parent and child fields. We can see the colorpicker for parent only after the parent field is selected. However, as per the current implementation of the config panel, we cannot detect if a parent field has been selected until we have clicked 'Preview'. If we decide to move forward with this approach, then I can look into this further and try to show the colorpicker on selection itself.

Treemap_Multiple_Color_Selection.mp4

Let me know if I should go ahead with either of these.

Thanks!
@anirudha @abasatwar @spattnaik

[btzeng]

@mrunal-z Yes, let's have both. 1. auto assign a different shade of same color to parent. 2. user assign colors to child and parent.

[mrunal-z]

Hey @btzeng @mengweieric

I have added both the options for color theme as shown in the following video:

Treemap_Multicolor.mp4

Let me know if this looks correct and if any other changes are required. Thanks!

[btzeng]

@mrunal-z I see in the dropdown there are 3 selections- default, single, multi. Is default random multi colors?

[mrunal-z]

@btzeng The default option applies the default plotly color palette, which assigns a random color to each value.