search

grafana / scenes

Build Grafana dashboards directly in your Grafana app plugins.
https://grafana.com/developers/scenes
Apache License 2.0
133 stars 20 forks source link

demo: alternative time range selection on timeseries panel #744

Open darrenjaneczek opened 4 months ago

darrenjaneczek commented 4 months ago

This demo uses a custom implementation of SceneTimeRangeLike to overrides the default time range selection behavior to capture the selection, store it in a different time range, and display it on the panel as an annotation.

override-scenes-timerange-behavior-to-set-annotation-for-alt-timerange.webm

leeoniya commented 4 months ago

perhaps loosely related: https://github.com/grafana/grafana/pull/88107

considering adding onSelectRange() callback to panelContext. maybe also onClickDataPoint() callback in near future.

feels like we maybe should introduce some kind of point annotations (besides exemplars), and x+y rectangular annotations? :thinking:

darrenjaneczek commented 4 months ago

perhaps loosely related: grafana/grafana#88107

considering adding onSelectRange() callback to panelContext. maybe also onClickDataPoint() callback in near future.

feels like we maybe should introduce some kind of point annotations (besides exemplars), and x+y rectangular annotations? 🤔

Yes, quite related. This one is more tied to time range selection. The other can be two-dimensional.

If panels could all generally have alternative behaviors for range selection, I think that could simplify this greatly.

For this specific implementation, it would also be really interesting to be able to modify the range of the annotation by dragging the left or right edges. Can that be achieved simply by manipulating the panel context?

leeoniya commented 4 months ago

Can that be achieved simply by manipulating the panel context?

that would be super expensive to do on mousemove, since requires redraw. but maybe via eventBus/signals or smth. but in general allowing selections to be resized should be built into the panels. if you need to custom set it once via props/fieldConfig, then that should be fast enough, too.

cc @dprokop

leeoniya commented 1 month ago

@darrenjaneczek https://github.com/grafana/grafana/pull/88107 was merged, it uses onSelectRange and a different type of xymark annotation that doesnt have the bottom hoverable region. maybe take a look.