Update Grafana panel plugin on data received using React&TypeScript

[simonbeltram]

Hi
I’m trying to make a custom panel plugin for Grafana 7.5.2 using TypeScript and React .

At the moment I’m traying to understand the mechanics of updating the front-end (React) when new data is available (in 7.5. data is stored in a DataFrames and series).

By exploring the Grafana source I came across the eventBus, busEvent constructs and publish/subscribe concepts but I have a hard time understanding how to use all this.
Sadly the majority of examples online are not relevant in 7.5.

Can someone share a snippet/example on how to implement updating a panel when new data is available?
As a source I will be using ElasticSearch.

I’m writing a Panel plugin like:

    interface Props extends PanelProps { ... }
    interface State { ... }
    export class CustomPanel React.PureComponent<Props, State>{ 
    ...  
    render(){
       return ( ... )
      }
    }

[marcusolsson]

With the new React platform, instead of having to subscribe to the data, it’s passed as an input to your component as part of the props. You can find the data under this.props.data.series. In fact, for the most part you shouldn’t need to worry about events at all.

[simonbeltram]

Marcus, thanks for the quick response.
I tried it and It works.