Hi,
I also would like to chime in here in order to signal strong interest on this topic.
We conceived the GitHub - panodata/grafanimate: Animate timeseries data with Grafana program the other day and just recently gave it some love, aiming to make it ready with recent versions of Grafana. However, we also discovered that the venerable data-received-type events were gone with the new internal architecture based on React. We also tried to fiddle a bit with the new PanelEvents | Grafana Labs, to no avail.
In general, we are wondering if using corresponding panel events with React would now need any kind of software component to link with the Grafana SDK/Toolkit in order to be able to use corresponding symbols?
I am asking this maybe naive question because, beforehand, it was easy to inject arbitrary Javascript code (grafana-studio.js) into the window’s scope in order to get hold of the active dashboard object [1]. On this object, we were able to install the same event handlers as outlined above by @hamed, using named events identified by plain text labels.
In order to get a synchronized signal after all panels successfully received their data, we made grafana-studio.js::onDashboardRefresh capture the data-received, data-frames-received, data-error and dashboard-fetch-end events from all panels and synthesize an all-data-received event from it.
With this machinery in place, grafanimate was able to efficiently produce animations. Currently, we are working around it by having introduced a mechanism to Add parameter "--exposure-time", defaulting to 0.5 seconds · panodata/grafanimate@1f183d1 · GitHub, which the user would have to adjust appropriately. This definitively involves quite an amount of trial and error in order to get the right “exposure time” in different scenarios, as it very much depends on the number of panels and response times from the underlying databases.
As we didn’t follow the evolution of the Grafana code base into React land closely, and we might lack some essential React skills to get an idea about how to use the new PanelEvents, maybe you can share some resources where we would be able learn more about them?
Thank you already and with kind regards,
Andreas.
-
angular.element("grafana-app").injector().get("dashboardSrv").getCurrent()↩︎