Histogram chart support in event analytics

[pratibhapandey16]

1. Add Histogram chart as a dropdown option. Refer dropdown element on top right corner of image.
2. On selection of it, it should render a Histogram chart based on data selected.
3. If data does not have timestamp information , show no record found message.

This issue contains the below tasks.

• Adding Histogram chart to the dropdown on the UI.
• Cypress Testing(Automation)

[ruchika-narang]

Hi @mengweieric ,

The video depicts the basic implementation of the Histogram. The files were already present for histogram but required a few changes to show the data correctly.

Histogram_recording.mp4

Currently in the implementation, I have not included Y-axis in the value options, as Histogram is used to display the frequency distribution and it only requires one axis so I have kept x-axis. Can you please suggest if this is the right way to proceed?

Have a few questions related to this graph implementation:

1. We will need an icon for histogram to be displayed in the dropdown.
2. Do we need the Value options of x-axis and y-axis both or just either of them? As what I observed in the code written already in the file and on plotly, the histogram tends to take data of only one axis.

Thanks,
Ruchika

[pratibhapandey16]

Added Cypress automated test cases for rendering the Histogram chart and saving the visualization.

dashboards-observability.2022-04-20.19-46-23.mp4

[ruchika-narang]

Hi @mengweieric , @btzeng

The video depicts the progress of Histogram with config options present in opensearch-project/dashboards-observability#78 and #697 .

OpenSearch.Dashboards.-.Google.Chrome.2022-05-12.19-47-02.mp4

I have a few questions related to it:

1. Gradient mode is not supported in Plotly for Histogram but we have that in chart styles of ticket Observability - visualization (advanced feature WIP) dashboards-observability#78 . I am still looking for a workaround for this. Please let me know if you have any suggestions for implementing it.

2. I was working on color theme today and found out that the colorscale doesn't apply to Histogram as it works for Treemap.
   I am thinking that we should allow user to explicitly assign color to each value that is represented on the graph with color picker. Attached is the screenshot for same. Do you suggest to go ahead with this?

Thanks!
@anirudha @abasatwar @spattnaik

[ruchika-narang]

Hi @mengweieric @btzeng

I have raised a WIP PR #743 for the implementation of color theme for each category.
Following is the video of the implementation of color theme and other config panels.

OpenSearch.Dashboards.-.Google.Chrome.2022-05-18.19-25-49.mp4

Please can you have a look and let me know if I should proceed with this implementation for color theme.

Thanks!

[ruchika-narang]

Hey @mengweieric @btzeng @anirudha

As we discussed about colorscale prop not working in histogram instead color works for every bar. Here is the issue link of plotly that says color works for Histogram. plotly/plotly.js#1984
I tried using colorscale as implemented for treemap but it doesn't work.
Let me know if I need to continue with the current implementation of color theme or you have a better idea to implement colorscale as for treemap.

Thanks!!
@abasatwar @spattnaik

[ruchika-narang]

Hey @mengweieric @btzeng @anirudha

As we discussed about colorscale prop not working in histogram instead color works for every bar. Here is the issue link of plotly that says color works for Histogram. plotly/plotly.js#1984 I tried using colorscale as implemented for treemap but it doesn't work. Let me know if I need to continue with the current implementation of color theme or you have a better idea to implement colorscale as for treemap.

Thanks!! @abasatwar @spattnaik

Please let me know the update regarding this. Should I proceed with the current implementation?

Thanks!