Observability - visualization (advanced feature WIP)

[btzeng]

[UX Design] Observability visualization (advanced features WIP)

Anatomy- OpenSearch viz vs other charting engines

1. Config panel
2. Visualization workspace

Chart types and feature to include:

1. Config panel: see table below
2. Visualization suggestion: include recommended chart types for selected data, and show preview (smart suggestions)
3. Chart type search

---

Prioritized charts (definition and use case)

*see below table for more chart types and configurations

Line

A line graph utilizes points and lines to represent change over time. It is a chart that shows a line joining several points or a line that shows the relation between the points. The graph represents quantitative data between two changing variables with a line or curve that joins a series of successive data points.

Bar

Bar chart uses bars to show comparisons between categories of data. The bars can be displayed vertically or horizontally depending on the use case. A bar chart always has 2 axis- one usually has numerical values, and the other one is usually used for types of categories being compared. Horizontal bar: x axis = category. Vertical bar: y axis = category.

Pie

Pie chart divides the circular statistical graphic into sectors or sections to illustrate the numerical problems. Each sector denotes a proportionate part of the whole. To find out the composition of something, pie chart works the best at that time. In some cases, pie charts can replace other graphs like the bar graph, line plots, histograms, etc.

Heat map

A heat map shows magnitude of a phenomenon as color in two dimensions. The color representation used in a heat map are hue or intensity. There are two types of heat maps- spacial and cluster. A spacial heat map is often layered on top of a physical map.

Tree map

Displays hierarchical data as a set of nested rectangles (tree structured). With the color correlation, users can see a pattern in a selected dataset.

Gauge

Displays a single data value with a quantitative context. With a shape that resembles a speedometer, gauge chart aims to track the progress of a KPI in comparison to a set target or to other time periods. It uses various colors to divide a scale into segments that represent different values of the same metric, usually min, med, max range. The needle/indicator to point at a certain value over the pivot point.

Log view

Displays log lines from data sources that support logs. Quick view from event analytics logs. Typically you would use this panel next to a graph panel to display the log output of a related process.

Table

Displays a quick view from notebooks SQL / PPL table.

Dashboard list

A dashboard list contains one or multiple links of destinations. Destinations can be another dashboard, URL, etc.
Same widget on the Event analytics home page that can be pre-filtered with type and search.

Stat

Shows the value and/or spark line.

Histogram

Displays numeric data in ranges, where each bar represents how frequently numbers fall into a particular range.
The Y-axis represents the count of values that fall into each bracket. The X-axis represents the value range.

---

Config Panel

Structure

1. Panel options- title, description
2. Tooltip- show, hide, position
3. Legend- show, hide, position
4. Graph styles- line/bar/point, width, opacity, gradient, connect null value
5. Axis- position, label, width, min/max, grid
6. Standard options- unit, value min/max, decimals, etc.
7. Data links-
8. Value mappings
9. Thresholds- color, thickness, opacity
10. Override

Other

1. Table view toggle (persistent in toolbar)
2. Time display per panel

---

Example 1 - Time Series

1. Line syle
   1. Thickness
   2. Color
   3. Fill opacity
2. Edit series color directly in the legend
3. Line interpolation
   1. Linear
   2. Smooth
   3. Step before
   4. Step after
4. Axis min & max
   1. Auto
   2. Hard
   3. Soft
5. Multiple Y axis
   1. Add additional Y axis
6. Dash and dot line style settings
   1. Adjust dash/dot space
7. Value mapping?
8. Show data points on line
   1. Turn off line, display points only
9. Stacked line chart
10. Mixed style
    1. line/bar/point
11. Connect null values?
12. Threshold
    1. Multiple thresholds
    2. Absolute, percentage

Example 2 - Bar

1. Bar color style
   1. Transparent gradient
   2. Hue gradient
2. Bar/line/point interchangeable in graph style
3. Histogram?

Nice to have (other):

1. Collapse all sections in config panel.
2. Should we include overrides in the dedicated sections?
3. Drilldown- dashboard level and visualization panel level
4. Dashboard layout- viz panel snaps when repositioning
5. Hide override. Not just delete.
6. Undo/Redo visualization config

---

[Chart type & config]

	1. LINE	2. BAR	3. PIE	4. GAUGE	5. DATA TABLE	6. STAT	7. HISTOGRAM	8. DASHBOARD LIST	9. GEOMAP	10. HEATMAP	11. NODE GRAPH	12. TREEMAP	13. LOGS	14. ALERT LIST	15. TABLE
Panel options	Title, Description, Transparent background, Panel links, Repeat options	Title, Description, Transparent background, Panel links, Repeat options	Title, Description, Transparent background, Panel links, Repeat options	Title, Description, Transparent background, Panel links, Repeat options	Title, Description, Transparent background, Panel links, Repeat options	Title, Description, Transparent background, Panel links, Repeat options	Title, Description, Transparent background, Panel links, Repeat options	Title, Description, Transparent background, Panel links, Repeat options		Title, Description, Transparent background, Panel links, Repeat options	Title, Description, Transparent background, Panel links, Repeat options	Title, Description, Transparent background, Panel links, Repeat options	Title, Description, Transparent background, Panel links, Repeat options		Title, Description, Transparent background, Panel links, Repeat options
Graph styles	Style (lines, bars, points)Line interpolation (linear, smooth, step before, step after)Line widthFill opacityGradient mode (none, opacity, hue, scheme)Line style (solid, dash, dots)Connect null values (never, always, threshold)Show points (auto, always, never)Point sizeStack series (off, normal, 100%)	Orientation, Rotate bar labels, Label max length, Show values, Stacking (auto, normal, 100%), Group width, Bar width, Bar radius, Line width, Fill opacity, Gradient mode (none, opacity, hue, scheme)	Chart type (pie, donut)Labels (percent, name, value)*Donut - band thickness (Plotly)*Multiple donut (Plotly)?	Orientation (auto, horizontal, vertical)Show threshold labelsShow threshold markers*Gauge style(s)?	N/A	OrientationText modeColor mode (none, value, background)Graph mode (none, area)Text alighment (auto, center)	Bucket sizeBucket offsetCombine series (on/off)Line widthFill opacityGradient mode (none, opacity, hue, scheme)	N/A		Color modeColor schemeColor scale: min/maxBucket:Hide zeroSpaceRound		N/A	Logs:1. Unique label2. Time3. Common label4. Prettify JSON5. Wrap lines6. Enable log details7. Deduplication (None, exact, numbers, signature)8. Order (newest first, oldest first)		Show headerShow footerEnable paginationCol widthMin col widthAlignment (auto, left, center, right)Cell display mode*Cell value inspect (on/off)Col filter (on/off)
Axis	Display nameValue format Series colorPositionShow/hide line, labelWidthSoft minSoft maxShow grid lines (auto, on, off)Scale (linear, logarithmic)	Display nameValue format Series colorPositionShow/hide line, labelWidthSoft minSoft maxShow grid lines (auto, on, off)Scale (linear, logarithmic)	N/A	N/A	N/A	N/A	N/A	N/A		Y Axis:1. Unit2. Scale3. Min/Max4. Width5. DecimalsBucketsY Axis buckets, SizeX Axis buckets, SizeData format		N/A	N/A		N/A
Tooltip	PositionTooltip mode (single, all, hidden)	PositionTooltip mode (single, all, hidden)	PositionTooltip mode (single, all, hidden)	N/A	N/A	N/A	?	N/A		PositionTooltip mode (single, all, hidden)		N/A	N/A		N/A
Legend	Legend mode (list, table, hidden)Legend placement (bottom, right)	Legend mode (list, table, hidden)Legend placement (bottom, right)	Legend mode (list, table, hidden)Legend placement (bottom, right)Legend value (percent, value)	N/A	N/A	N/A	Legend mode (list, table, hidden)Legend placement (bottom, right)Legend value (percent, value)	N/A		N/A		N/A	N/A		N/A
Standard options	UnitMinMaxDecimalsDisplay nameColor schemeNo value	UnitMinMaxDecimalsDisplay nameColor schemeNo value	UnitMinMaxDecimalsDisplay nameColor schemeNo value	UnitMinMaxDecimalsDisplay nameColor schemeNo value	UnitMinMaxDecimalsDisplay nameColor schemeNo value	UnitMinMaxDecimalsDisplay nameColor schemeNo value	UnitMinMaxDecimalsDisplay nameColor schemeNo value	N/A		N/A		UnitMinMaxDecimalsDisplay nameColor schemeNo value	N/A		UnitMinMaxDecimalsDisplay nameColor schemeNo value
Data links	Add links	Add links	Add links	Add links	Add links	Add links	Add links	N/A		N/A		Add links	N/A		Add links
Value mappings	Add value mapping	Add value mapping	Add value mapping	Add value mapping	Add value mapping	Add value mapping	Add value mapping	N/A		N/A		Add value mapping	N/A		Add value mapping
Threshold	Add thresholdColorThreshold mode (absolute, percentage)Show thresholds (lines, filled, both, none)	Add thresholdColorThreshold mode (absolute, percentage)Show thresholds (lines, filled, both, none)	N/A	Add thresholdColorThreshold mode (absolute, percentage)Show thresholds (lines, filled, both, none)	Add thresholdColorThreshold mode (absolute, percentage)Show thresholds (lines, filled, both, none)	Add thresholdColorThreshold mode (absolute, percentage)Show thresholds (lines, filled, both, none)	Add thresholdColorThreshold mode (absolute, percentage)Show thresholds (lines, filled, both, none)	N/A		N/A		Add thresholdColorThreshold mode (absolute, percentage)Show thresholds (lines, filled, both, none)	N/A		Add thresholdColorThreshold mode (absolute, percentage)Show thresholds (lines, filled, both, none)
Value options	N/A	N/A	Show (calculate, all values)Calculation (choose a function...)Fields (Numeric, ...)	Show (calculate, all values)Calculation (choose a function...)Fields (Numeric, ...)	N/A	Show (calculate, all values)Calculation (choose a function...)Fields (Numeric, ...)	N/A	N/A		N/A		N/A	N/A		N/A
Text size	N/A	N/A	N/A	TitleValue	N/A	TitleValue	N/A	N/A		N/A		N/A	N/A		N/A
Table style	N/A	N/A	N/A	N/A	Show headerShow footerMin col widthCol widthCol alignment (auto, left, center, right)Cell displayCol filter	N/A	N/A	N/A		N/A		N/A	N/A		N/A
Dashboard list	N/A	N/A	N/A	N/A	N/A	N/A	N/A	Starred (on/off)Recently viewed (on/off)Search (on/off)Show headings (on/off)Max items (xx)QueryTags		N/A		N/A	N/A		N/A
Treemap	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	Tiling algorithmSeparator	N/A	N/A	N/A
Dimension	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	N/A	Label bySize byColor byGroup by	N/A	N/A	N/A

---

Design example (Observability)

Design example (config panel section interaction)

Design example (config section features)

---

Related issues:
opensearch-project/observability#664
#123
opensearch-project/observability#697
opensearch-project/observability#643
#125

[btzeng]

@mengweieric for dashboard list, do we have saved dashboards to link to?