Gauge chart support in event analytics.

[pratibhapandey16]

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

This issue includes the below tasks.

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

[amrutaBasatwar]

Hi ,
Here, we have observed that code for guage chart is already there.
But it is not shown in dropdown. guage is present in VIS_TYPES but not in ENABLED_VIS_TYPES.
So shall we add in ENABLED_VIS_TYPES to show guage chart on UI?
We tried adding it but struggling on getting sample data which is required for guage chart.

Thanks,
Amruta

[anirudha]

@mengweieric , we disabled it ; as it needed to be perfected before a release

[nidhisinghai]

Adding a Video For Cypress Testing for 'Gauge Chart Render'

Gauge.Chart.Render.mp4

[abasatwar]

hi @mengweieric ,
Added video of gauge chart. Working on showing no result found component until user selects series and value option.

OpenSearch.Dashboards.-.Google.Chrome.2022-04-20.19-40-08.mp4

Thanks,
Amruta

[anirudha]

thanks @amrutaBasatwar , this looks great

[abasatwar]

PR is raised for this ticket - #689

[abasatwar]

gauge_use_case_doc.docx
Hi @mengweieric ,
Please find attached document explaining about use case of gauge chart.
It would be great if you can provide your inputs on this.

cc: @anirudha @spattnaik

Thanks,
Amruta

[ramneet-persistent]

Hi @mengweieric @anirudha
below points are considered as per discussion

• adding dimensions and apply aggregate
• only 10 timestamp needs to be considered if no field selected in aggregate
• remove values option from UI

Thanks

[ramneet-persistent]

Hi @mengweieric @anirudha

as per issue opensearch-project/dashboards-observability#125 ,

• Legend placement: I haven't found anything in official documentation for legend placement w.r.t gauge chart.

• Multiple thresholds: on gauge chart, only one threshold can be displayed. I have tried steps key in gauge object to display two values on chart. and customized range for width (might not visible is some cases as it depends upon gauge value). Kindly refer attached screen shots for single threshold and multiple thresholds.

Please confirm if we can continue for single threshold in case of gauge chart also we would like to know your inputs on legend

[anirudha]

p1 single threshold.
p2 , nice to have 2-3 thresholds. but i think 3 is enough for usability

[ramneet-persistent]

Hi @mengweieric @anirudha
please refer attached screenshots.

1. Single threshold: displayed using threshold object in gauge object

2. Multiple thresholds: this is work around to display multiple markers on gauge. Please confirm if we need to continue with same. Also Do we need to add some limit on data panel to add max three thresholds. say disable "Add threshold" button after 3 limits are added in case of gauge chart
   .

Please share your inputs

Thanks

[ramneet-persistent]

Hi @mengweieric @anirudha
Below are few queries we have for gauge chart:

1. Legend placement: unable to find reference for legends in documentation
2. Display gauge chart on initial load
3. Do we need to hide/disable "add threshold" button in case of multiple thresholds reached to max limit i.e. 3.
4. Multiple thresholds: we used a workaround to display multiple thresholds. which may not be visible in some cases( depends on gauge value). Please refer comments above and share your inputs
5. as per mentioned in [WIP] Data Configurations of Observability Visualizations dashboards-observability#125. chart with multiple dimensions and multiple metrics is done but its not readable. Kindly us know we need to add UI to limit no. of gauges displayed. Refer attached ss

above screen shot is of output of PPL query with 3 dimensions and 2 metrics. query results in arrays from which 10 is sliced. As 2 metrics were in query, 20 gauges displayed
Please share your inputs

Thanks