Implementation of Visualizations

[pratibhapandey16]

Implementation of Visualizations mentioned in the below issue
opensearch-project/dashboards-observability#78
Refer to the [Chart type & config] and [Design example] sections for better understanding

• Analysis
• Basic UI for styles
• UI and functionality of headers

[mengweieric]

[WIP] Config Options for all visualizations:

Panel Options

• Title
• Description

Value options

• xaxis
• yaxis
• zaxis
• label
• value

Legend

• Enabled / Disabled
• Positions
  • Bottom / right

Chart styles

• Orientation
• Type (mode)
• Width / size
• Fill opacity
• Label rotator
  • Rotate label when it’s too long and (or) overlaps with other labels or hidden by border
• Color theme
  • Filled area
  • graph

[ruchika-narang]

Hi @mengweieric @btzeng

The video shows the implementation of legend for bar graph. I have a question here, should we have some default values selected for Enabled/Disabled and position? If yes, should I make the Show legend Enabled and position set to Right?

OpenSearch.Dashboards.-.Google.Chrome.2022-05-06.18-55-13.mp4

Also wanted to know, there are other fields like Mode, Legend values included in legend in issue opensearch-project/dashboards-observability#78 . Should I include them as well here?
Thanks!
@abasatwar @spattnaik

[rinku-kumar-psl]

Hi @anirudha @mengweieric @btzeng ,

The video shows the visuals and implementation of new Data configs on the Line chart as per issue #697.
The features included are:
- Mode
- Interpolation
- Line Width
- Fill Opacity
- Point Size
- Bar Alignment(UI)
- Legend

Please have a look and provide your suggestions or let us know any changes required for this implementation till now.

Observability.-.new.configs.line.chart.mp4

@mengweieric @btzeng,
I have a few queries under the Chart style section,

1. As in this issue there are two similar UI listed

   • Fill opacity
   • Filled area
     So feature-wise what will be the difference between these two?

2. Under the Gradient Mode option, We didn't find "Scheme" mode control for Gradient on Plotly. And rest all 3 options (None, Opacity, Hue) user can control through Fill Opacity.
   So please suggest If there Gradient Mode needed?

Thanks,
Rinku Kumar

@spattnaik @abasatwar

[ruchika-narang]

Hey @btzeng @mengweieric

Following is the implementation of heatmap color theme. Let me know if any changes are required.

heatmap_color_theme.mp4

Thanks!!

[btzeng]

@ruchika-narang both spectrum and opacity look good. Thanks.

[rinku-kumar-psl]

Hi @mengweieric @btzeng ,

The video shows the visuals and implementation of new Data configs on the Bar chart as per this ticket.
The features included are:

Legend:

• Show Legend
• Position

Chart styles:

• Orientation(Vertical, Horizontal)
• Mode (Stack, Group)
• Rotate bar labels
• Group width
• Bar width
• Line Width
• Fill Opacity

Color Theme

Please have a look and provide your suggestions or let us know any changes required for this implementation till now.

Observability.-.new.configs.bar.chart.mp4

Note: As there is no Bar radius control option available on Plotly, So this feature is not included in this implementation.

Thanks,
Rinku Kumar

@anirudha @spattnaik @abasatwar

[btzeng]

@ruchika-narang @mengweieric For the color theme "spectrum", can you share where you get the these spectrum color selections on Plotly? I see there's a list of spectrum options when clicking on mode.

[ruchika-narang]

Hey @btzeng @mengweieric
We have grabbed the color palettes from this link. https://plotly.com/javascript/reference/treemap/#treemap-marker-colorscale.
Thanks!