GraphNG (Act 2)

[leeoniya]

This is a follow-up to #27848 (Act 1).

Now that we have most work items finished, let's migrate the few remaining and future (planned and possible) things to this issue. Most of the items here are specific to Time series, but I'm leaving the title as GraphNG for continuity. Feel free to change it.

Please help me migrate any remaining features to this issue and let's close the old one.

Cleanup:

• Renames rename GraphNG -> TimeChart, uPlot -> GraphNG #32846

Old features (parity):

• ms precision in tooltip when user zoomed in enough
• Stacking an inverted series (* -1 transform?) - Issues: TimeSeriesPanel: Add support for transform negative #30365 TimeSeries: Add support for negative Y and constant transform #44774
• Closest no-null datapoint focus Time series panel: Gaps are shown as empty values in the tooltip #31309, Time series: connect null value setting ignored when showing nearest point tooltip #34542
• stacking (by value, by %) GraphNG: stacking #30749
• histograms (move to its own panel)
• thresholds (y)
• regions (x) Time series panel: Add support for time regions #35486
  • Bug: Missing Time Region when first day not in graph #15010 Time regions only show if the start of the time region falls within the current time range #28017
• annotations
• shared crosshair TimeSeries panel: Add support for shared cursor #33433
• sorting legend items Time Series: Change legend order #30907
• stat panels no longer use a shared min/max for all graphs, which de-stabilizes ranges across the group. we should look into adding softMin/softMax to Stat, which was designed to stabilize graphs without giving up autoranging (Stat visualization auto min/max yaxis with multiple metrics #32765)
• Hiding series via field options: Add Hidden Series to the awesome Time series panel #33013

New features:

• focus series on legend hover (torkel request)
• series symbols - Issues: Support of additional marker types for Graphs #28528, PR: GraphNG: Custom point symbols #30192
• padding autosizing - Issues: [Time series panel] Time labels are cut #33092
• explicit padding control (for aligning multiple charts) - Issues: [Feature Request] Option to align/match Y-axis width  #4469
• grid show/hide (x, y) - Issues: [Feature request] Allow hiding grid lines #9305
• axis tick label rotation - Issues: [Feature Request] Custom Time Format and rotation on X labels in panel graphs. #3591
• axis coloring (to visually match series to their y scale) - Issues: Allow setting axis colors #29932
• bar width control, expose barMaxWidth (for timeseries pseudo-histograms) - Issues: Bars for timeseries with only one datapoint are too wide #14130, Graph: Bar placement option to have it placed before data point #18220, Related PR: GraphNG: add bar alignment option #30499, Demos: https://leeoniya.github.io/uPlot/demos/line-paths.html (see bottom 2 charts)
• x/y rectangular zoom, y-only zoom - Issues: [Feature request] Allow vertical zoom in graph panel #9457
• scale-affixed-gradients as hz or vt stroke or fill colors - Issues: Color that depending on particular threshold  #437, Demos: How to make multicolor line/area chart? leeoniya/uPlot#416, https://leeoniya.github.io/uPlot/demos/gradient-fill.html
• Axes position independent from unit config (Time series right axes placement not working #31002)
• Viz alignment regardles y-axis being shown or not: Panel alignment with/without left Y-axis #33014

Add'l cool stuff:

• axis titles (could help, now that there can be 30 y-axes :D)
• axis tick & grid density control (can get more visual scale resolution without forcing a zoom)
• y-shifted series - Demos: https://leeoniya.github.io/uPlot/demos/y-shifted-series.html
• custom fillTo level (not always 0) - Demos: Series fill below 0 leeoniya/uPlot#292
• ordinal/even scale distribution (skip periods with no data) - Demos: https://leeoniya.github.io/uPlot/demos/candlestick-ohlc.html (skips showing weekends)
• interactive legend calcs: Time Series panel: add mouse-over action for legend values #31629

Bugs / Perf:

• fix tooltip flickering/perf (Tooltip: eliminate flashing when repaint can't keep up #33609 was reverted in Prometheus: Fix exemplars hover disappearing and broken link #33866)
• GraphNG: Time series panel Tooltip is cut off at the top GraphNG: Adjust the time series Tooltip such that the top does not get cut off #31098
• avoid x axis label collisions - Issues: Time Series panel: Time labels overlap #30906
• superfluous getConfig() calls during init
• Selecting (hiding) series via legend is not working if those series has a display name change via an override Overrides: Filtering / Selecting on timeseries is not possible when an override with displayName exists #31364
• Tooltip shows wrong colors: GraphNG: Tooltip series color is wrong #32087
• Cannot read property 'stroke' of undefined Cannot read property 'stroke' of undefined - Time Series Visualization #31203
• GraphNG: Unit not displayed correctly on the Y-axis - Issues: Timeseries: Unit not displayed correctly #33895
  TODO...

Feature requests / future

• color by value, color by value mappings: Timeseries: value mapping colour gets ignored #35310

[dprokop]

thanks @leeoniya for moving the remaing issues!

[rovo89]

Regarding feature parity, there were some series overrides which helped to keep the graph simple on first sight, but have an easy way to dig deeper:

• Hidden series
• Hide in legend
• Hide in tooltip

Hidden series means that the series is available in the legend, but not selected by default. I use this to display only the two most common status types by default, but have the other status types available on "standby".

With Hide in legend, I added some series (calculated fields) which provide additional details only in the tooltip:

A Style = Hidden option would be helpful for the latter. I used Lines = false in the Graph panel and Line width = 0 / Fill opacity = 0 / Show points = never for Time series. This kind of works, but is less intuitive and still doesn't hide the points on hover.

[sakjur]

fwiw, #25580 suggests that having the "Add annotations" pop up on click doesn't make sense if annotations are disabled.

[hugohaggmark]

This might be a feature request to consider? #31853

[allomorphy]

This is a follow-up to #27848 (Act 1).

Now that we have most work items finished, let's migrate the few remaining and future (planned and possible) things to this issue. Most of the items here are specific to Time series, but I'm leaving the title as GraphNG for continuity. Feel free to change it.

Hi @leeoniya

Is there a place to track all these yummy features that you and the team are implementing?
Our special favourite right now is annotations
Thanks for the great work 🤗

[underdog]

inquiry: is there a timeline (public link/chart) for when beta3 will hit the release queue?
Thanks!!!!!
and not sure you hear it enough, or at all, but thanks for all the hard work being put into grafana!!!!!

[leeoniya]

inquiry: is there a timeline (public link/chart) for when beta3 will hit the release queue?

beta3 should be out this week. though i expect this issue to remain open until at least 8.1.

and not sure you hear it enough, or at all, but thanks for all the hard work being put into grafana!!!!!

thanks for using the betas, and keep the bug reports / feedback rolling in! the development pace is picking up rapidly and things often slip through our internal tests as we try to get all the shiny features and enhancements out asap :)

[leeoniya]

pushing this to future to keep it top of mind and as a general work list, but AFAIK none of these items are blockers for releases.

[pepjo]

I am trying the shared crosshair functionality that the release notes say is now available for the new time-series panel. However, while the old panel sharing crosshair works, it does not seem to work for the new time series. I wonder if there is a different setting that needs to be enabled. I am testing in grafana 8.0.1.

After some more testing, I realised it only works amongst the new pannel, but not across the old and new panel.

[pepjo]

It seems that the soft min and max values are not respected when all the values in the series are 0. In this case, I have a plot that rarely goes over 1 or under -1. Hence, I would like to set the soft min and max to those values to have a consistent sense of scale, but allowing bigger numbers to be shown if they appear.

The plot, however, shows the values from 100 to -100 even though the soft max and min are set to 1 and -1.

When a value is different than 0, then the soft min and soft max are respected.

[leeoniya]

@pepjo thanks for the soft limits bug report, #35596 should fix it.

[pepjo]

Thanks for such a quick fix!

[dprokop]

This one has been with us for a long time and majority of the items here are already tracked as independent issues/discussions. Closing this epic.

[gitneep]

Stacked graph rendering sorting according to legend selection is not working, can this be added/fixed?

#30907 (comment)