Is there a way to pin a panel to a static time range? A feature similar to the relative time / time shift options in the query options that would support a panel showing a different time range - but for a variable-defined period.
We would like to have a dashboard that has a top panel pinned to a static macro time range, but then have a secondary panel beneath it display a micro time range from within the macro period.
Ideally the user would then be able to select a period on either the top, or secondary panel with the effect being to zoom in/out of the time period on the secondary panel.
Is this possible?
Right now we are relying on a clunky dynamic dashboard link to ‘Reset To Macro Timeline’ once a user has zoomed into details of the time period. This, because the top-right time filters, although very good, don’t bound one nicely to a time period under examination - if for instance your dashboard represents a healthcare appointment.
Btw, what datasource are you using? Could a WHERE clause be useful, if that’s an option? Or maybe you could hard-code your query? (I know, not a dynamic solution…)
Not implemented features like this require to get into the code and modify the built in panels or even creating new ones from those.
In your case, the zooming problem might be solved in the onPlotSelected() method in graph.ts file (grafana → public → app → plugins → panel → graph) and the secondary time range in the addTimeAxis() method in the same file.
I did try this, and you can control the data returned like this but the time period of the panel doesn’t seem to be defined by what is returned but by what the time range is set for.
This looks very interesting and I’m definitely going to play with it. What is the out-of-the-box behaviour of your custom panel when a time period is selected within it? Does your custom panel stay invariant but the window time range change? (Just wondering whether I even do need to customize further than you have already).
I added an extra option in the panel edit window called zoom. When its activated, it takes min time as the last of the selected time range, but the length of the period stays similar, so it just shifts forward starting when the selection ends. This is because my panel is for data forecasting and takes the ctrl.range.to for the min time and just adds the time I introduce by an extra option for the max time, so it only depends on the last datetime and shifts from there. When zoom is off it does nothing.
To add this you first need to go to … → graph → tab_display.html and add a new ng-form-switch changing the line checked = ... to checked = "ctrl.panel.zoom".
Next, go to … → graph → module.ts and add a zoom field in panelDefaults: any {...} with the preferred default mode (I have zoom:false,).
Then you need to disable the zoom when zoom is not activated, and that can be done in … → graph → graph.ts. Find the onPlotSelected() method there and just add these lines at the start:
if (!this.panel.zoom) {
this.plot.clearSelection();
return;
}
This checks if the zoom is not activated and just clears the selection you have done in the graph, doing nothing more, keeping the time range and the plot.
For the new time range, I added extra options in the edit windows just like that zoom one and used them in addTimeAxis() method at … → graph → graph.ts.
This is my own solution, but I think there are many others you can try if they fit better.
This is achievable with the incredibly versatile ae3e-plotly-panel yet slightly tricky Plotly panel. Through javascript it allows access to full Plotly functionality and incorporation of dashboard variables. It even allows updating dashboard variables from click events on the panel. So, in our case we have dashboard variables for fix-start, fix-end and use these to set the Plotly x-axis range disabling it from being updatable.
It looks like this. Top graph is the Plotly macro level view fixed to a wider time range than the dashboard time range. It annotates/shades the portion of the graph that corresponds to the seelcted dashboard level time range, i.e. the time that is shown in the standard graph panel beneath:
Sadly pinning the Plotly panel to a time range also disables its ability to select a time range (ideally one would have this enabled, but it would have no re-draw effect on the plotly panel) so all that can be done on the top panel is click. We are able to trap the location of this click on the plotly dashabord and reset the secondary time range to encompass a five minute period. This works well but is different to expected drag UI experience elsewhere. The bottom panel is fully responsive and any change of its time range or dashboard time range affects the shaded area in the macro view.
Note: Building a custom panel with this feature was something I investigated at @asieroyan’s suggestion, and the Grafana docs on doing this for new React-style plugins are great. However, I wanted to use the standard graph panel as my starting point and it unfortunately doesn’t yet seem to have been refactored. I hunted for a refactored graph panel and played around doing some of that refactoring a bit myself but ended up stuck. I will definitely consider building plug-ins for custom needs in future as it isn’t as great a hurdle as I had envisaged. But this Plotly plug-in looks like a Swiss army knife and is well worth getting experienced with.
