Epic: [Deprecation] Graph old -> Time series / histogram / bar chart panel features parity and improvements

[dprokop]

Ref #49031

This issue summarizes features that were available in old Graph panel and are missing in the Time series panel. It should bring more clarity on when and if we as Grafana are going to implement those for the new panel.

Migration work:

• [Legacy Graph Panel] Auto migrate to Timeseries #63732
• Timeseries: Time regions migration #66997
• Graph -> Timeseries migration: Override value for stacking doesn't migrate properly #67284
• TimeSeries: Migrate hide allNulls or allZeros settings from Graph (old) to TimeSeries #64642
• Graph panel: Right y axis does not migrate to time series panel #47991

Missing features:

• Time regions support Time series panel: Add support for time regions #35486
• Null represented as 0 Null as zero for new timeseries panel #43093
• Symmetric y axes & align/centered 0 https://community.grafana.com/t/symmetrical-y-axis/10562 (TimeSeries: Add option for symmetrical y axes (align 0) #52555)
• Possibility to toggle legend visibility from panel menu TimeSeries: allow toggling of Legends like w/ Graph (old) #49005
• TimeSeries: Add an option to set legend width #49126
• https://github.com/grafana/support-escalations/issues/5480
• Series plotted with Right-Y axis should have their legend-entries right-aligned: TimeSeries panel with 2 y-axes: Can't tell which y-axis I should read from #66704
• TimeSeries: Data links are not shown in context menu when you click inside bar  #42398?
• Log scale different bases support (currently Time series panel supports log2 and log10 only)
• Add Tooltip to Histogram Panels #79375
• Histogram: stacked mode #38047

Features that need improvements:

• TimeSeries: Hide null & and hide zero series #38299
• Legend & tooltip sorting/filtering:
  • Time Series: Legend and Tooltip #41104
  • Time Series Graph: Hover Tooltip Sort Order #38861
  • Missing ordering of tooltip values in Time series visualization #38305
• Y-axis
  • Improve auto-decimals, to prevent looking like they repeat when exceeding 3 decimals. somewhat intertwined with Epic: better number formatting strategy #35838
  • Improve y-axis auto-scaling to select top and bottom ticks better so they're always at the graph edges. Time series: number of y-axis ticks on small panels #39359
  • When using decimal 0 and unit time seconds with metric data in seconds with decimals the Y axis loses granularity. #57337
• Series hidden from viz still displays its axis when Scale is Linear #46290 (Fix: Time series panel: Hide axis when series is hidden from the visualization #51432)
• [Timeseries] Overlapping series do not have their their z-index calculated correctly #47064
• Series with percentunit somehow makes y axis to multiply by 100 #46271
• Missing ordering of tooltip values in Time series visualization #38305
• TimeSeries: Improved constantY rendering parity with Graph (old) #51401
• Various Panels: Add ability to toggle legend with keyboard shortcut #52241
• Think about this / how to address (stacking is complex / dont want to break current default behavior) Time series: Stacked Null Values do not appear as connected, even if option is chosen #39740

Things to double check

• Time series: stacking bug #34912 (see what old graph did in this case)

[samjewell]

Hi team
I think there's an additional item for the Missing Features list:

The old Graph panel allowed for the result of an instant query to be transformed with the series-override Transform: constant

A place where we still use this is on the Billing/Usage dashboard, for the blue dashed line:

When I migrate this panel to the new TimeSeries panel type I can see that the configuration for that series (the override with the transform) has been migrated, but it doesn't render correctly (actually the blue line doesn't render at all):

This is blocking us from upgrading to the Time-series panel right now.

[leeoniya]

better rendering parity for constantY: #51401

[codeincarnate]

One thing coming up for Time Series is ordering of rendering in chart vs legend/tooltip. Issue for that is at #36882

[Jafner]

People following this issue on the forums: Y-axis zero align are being pointed here, but I don't see an issue in this epic for aligning the zeroes on Time Series panels with two or more Y-axes.

In my use case here:

The bits per second and packets per second axes are slightly misaligned.

[leeoniya]

i'm struggling to reproduce this function in the old panel to see how it worked before, but i think the easiest way to get align-0 working is to introduce an option for forcing axes/scales to be symmetric (there have been requests for this feature as well [1]), effectively making 0 always centered vertically on any axis where it is enabled.

for example if raw data range is this:

fieldA min/max (left y axis): 3,9
fieldB min/max (right y axis): -17,113

setting both fields to have symmetric y axes (vertically-centered 0) would result in ranges of e.g.:

left axis: -10,10
right axis: -115,115

so in this case you would lose some visual resolution in the negative part of fieldB, with 85% of the displayed negative range being empty space, but this will have to be the trade-off.

[1] https://community.grafana.com/t/symmetrical-y-axis/10562

[samjewell]

Hey team
Just spotted another feature gap between the old Graph panel and the new Time Series panel.

The old Graph panel has a "Right Y" axis configurable. See screenshot:

We use this in the Billing/Usage dashboard on Grafana cloud, and while it is missing we can't do a straightforward migration to the new TimeSeries panel. We'd have to redesign the dashboard to move all these "Right Y" queries out from this panel to a new panel, which itself would make the data harder to read in some cases. The Right Y is useful as it allows users to see how costs correlate with usage.

And we'd love to migrate to the new panel, partly because this issue is stopping users from being able to use the following workflow:

• Create a library panel from a panel on the Billing/Usage dashboard
• Add that library panel to a new dashboard of their own construction, where they do their own custom costs/usage analysis and alerting etc.

Can you let me know if you think this feature gap is likely to be closed, or is considered out-of-scope for the new TimeSeries panel? Thanks!

[CoreMoni]

Hello,
I'd like to mention another missing feature: The sort order of stacked lines does not reflect the sort order of the legend.

See also: https://community.grafana.com/t/sorting-of-stacked-series-in-time-series-panel/69577
Apparently it was working in 8.3.0, but not in 8.5.9, and now, in 9.3.6, it's still not working.

[leeoniya]

The old Graph panel has a "Right Y" axis configurable. See screenshot:

@samjewell the TimeSeries panel supports unlimited y axes. you just have to use a field override to set Axis placement where needed.

The sort order of stacked lines does not reflect the sort order of the legend.

this was removed deliberately because it had many problems. see #54142.

[samjewell]

@samjewell the TimeSeries panel supports unlimited y axes. you just have to use a field override to set Axis placement where needed.

Ah nice, thanks @leeoniya, that's great to know. I think the automatic migration tool just discards the second Y-Axis when it migrates. Could it be extended to preserve this maybe, do you think?

[CoreMoni]

this was removed deliberately because it had many problems. see #54142.

Darn... I have several panels showing usage/utilization data, and the stacks should be sorted from biggest consumer to smallest instead of alphabetically. We achieved this via sorting by avg in the legend. Is there any way to influence the stacking order in the Time series panel at all?

[leeoniya]

Could it be extended to preserve this maybe, do you think?

if i recall correctly, we already automatically create additional right Y axes for fields that have a different unit (try it out with a fresh panel and two different-unit fields), so i'm not sure there is anything that needs to be migrated. maybe open a new issue with more specific details about the types of old configs that arent working as you expect?

[leeoniya]

Is there any way to influence the stacking order in the Time series panel at all?

not dynamically based on the data. you can use an Organize fields transform to put them into a predefined order, or modify your sql select query to do the same.

[CoreMoni]

or modify your sql select query to do the same

My datasource is prometheus, and PromQL has SORT() and SORT_DESC(), but neither function seems to have any effect on the stacking order

[leeoniya]

hmm, it looks like you're right, i think those functions only work for instant queries and not range queries. https://stackoverflow.com/questions/64395442/how-can-i-sort-the-legend-by-series-name-in-prometheus-grafana/65353296

grafana/packages/grafana-ui/src/components/uPlot/PlotLegend.tsx

Lines 60 to 116 in 6c990b4

	getDisplayValues: () => {
	if (!calcs?.length) {
	return [];
	}
	const fmt = field.display ?? defaultFormatter;
	let countFormatter: DisplayProcessor | null = null;
	const fieldCalcs = reduceField({
	field,
	reducers: calcs,
	});
	return calcs.map<DisplayValue>((reducerId) => {
	const fieldReducer = fieldReducers.get(reducerId);
	let formatter = fmt;
	if (fieldReducer.id === ReducerID.diffperc) {
	formatter = getDisplayProcessor({
	field: {
	...field,
	config: {
	...field.config,
	unit: 'percentunit',
	},
	},
	theme,
	});
	}
	if (
	fieldReducer.id === ReducerID.count ||
	fieldReducer.id === ReducerID.changeCount ||
	fieldReducer.id === ReducerID.distinctCount
	) {
	if (!countFormatter) {
	countFormatter = getDisplayProcessor({
	field: {
	...field,
	config: {
	...field.config,
	unit: 'none',
	},
	},
	theme,
	});
	}
	formatter = countFormatter;
	}
	return {
	...formatter(fieldCalcs[reducerId]),
	title: fieldReducer.name,
	description: fieldReducer.description,
	};
	});
	},

if we were to bring back reordering fields by "legend" calculations in the viz, we would need to pull these calcs above the vis+legend components, so that the viz can be reconfigured from them; you can't wag a dog by its tail, so they say.

[dprokop]

if we were to bring back reordering fields by "legend" calculations in the viz, we would need to pull these calcs above the vis+legend components, so that the viz can be reconfigured from them; you can't wag a dog by its tail, so they say.

@leeoniya you are right about this. In some circumstances (when no min/max std options are provided) the calcs will be present in the field's state prior visualization - because auto min/max triggers stats calculation:

https://github.com/grafana/grafana/blob/main/packages/grafana-data/src/field/fieldOverrides.ts#L173-L175

But we cannot assume calcs are there when the stacking is processed, hence we would have to calculate those when the panel is prepared (maybe in prepareGraphableFields, or maybe better internally to uPlot wrapper- prepState in GraphNG.tsx that creates the aligned frame?). Then the calcs will be in place for stacking to use it and sort the groups correctly I think.

[samjewell]

Could it be extended to preserve this maybe, do you think?

if i recall correctly, we already automatically create additional right Y axes for fields that have a different unit (try it out with a fresh panel and two different-unit fields), so i'm not sure there is anything that needs to be migrated. maybe open a new issue with more specific details about the types of old configs that arent working as you expect?

Thanks for this @leeoniya - I've opened this issue: #66704